<template>
    <div class="home-container layout-pd">
        <el-row :gutter="12">
            <el-col :span="24">
                <el-card shadow="">
                    <div class="dis">
                        <div class="big-title">{{state.infoitem.projectName}}</div>
                        <!--<el-tag class="ml-2" type="success">在售</el-tag>-->
                    </div>
                </el-card>
            </el-col>
            <el-col :span="24">
                <div class="title">基本信息</div>
                <el-card shadow="hover">
                    <div class="dis-warp">
                        <div class="block">
                            <div class="top">项目名称</div>
                            <div class="button">{{state.infoitem.projectName}}</div>
                        </div>
                        <div class="block">
                            <div class="top">项目地址</div>
                            <div class="button">{{state.infoitem.address}}</div>
                        </div>
                        <div class="block">
                            <div class="top">户数（总套数）</div>
                            <div class="button">{{state.infoitem.houseTotal}}</div>
                        </div>
                        <div class="block">
                            <div class="top">楼幢数</div>
                            <div class="button">{{state.infoitem.buildTotal}}</div>
                        </div>
                        <div class="block">
                            <div class="top">四至范围</div>
                            <div class="button">{{state.infoitem.boundaries}}</div>
                        </div>
                        <div class="block">
                            <div class="top">占地面积（平方米）</div>
                            <div class="button">{{state.infoitem.coverArea}}</div>
                        </div>
                        <div class="block">
                            <div class="top">建筑面积（平方米）</div>
                            <div class="button">{{state.infoitem.constructArea}}</div>
                        </div>
                        <div class="block">
                            <div class="top">住宅面积（平方米）</div>
                            <div class="button">{{state.infoitem.houseArea}}</div>
                        </div>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="24">
                <div class="title">项目信息</div>
                <el-card shadow="hover">
                    <div class="dis-warp">
                        <div class="block">
                            <div class="top">绿化率</div>
                            <div class="button">{{state.infoitem.greeningRate}}</div>
                        </div>
                        <div class="block">
                            <div class="top">容积率</div>
                            <div class="button">{{state.infoitem.plotRatio}}</div>
                        </div>

                        <div class="block">
                            <div class="top">项目简介</div>
                            <div class="button">{{state.infoitem.detail}}</div>
                        </div>
                        <div class="block">
                            <div class="top">计划总投资</div>
                            <div class="button">{{state.infoitem.planTotalAmount}}</div>
                        </div>
                        <div class="block">
                            <div class="top">计划开工日期</div>
                            <div class="button">{{proxy?.$method.formatDate(state.infoitem.planStartDate)}}</div>
                        </div>
                        <div class="block">
                            <div class="top">计划竣工日期</div>
                            <div class="button">{{proxy?.$method.formatDate(state.infoitem.planEndDate)}}</div>
                        </div>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="24">
                <div class="title">人员信息</div>
                <el-card shadow="hover">
                    <div class="dis-warp">
                        <div class="block">
                            <div class="top">项目负责人</div>
                            <div class="button">{{state.infoitem.chargePerson}}</div>
                        </div>
                        <div class="block">
                            <div class="top">项目负责人电话</div>
                            <div class="button">{{state.infoitem.chargePhone}}</div>
                        </div>

                        <div class="block">
                            <div class="top">项目用途</div>
                            <div class="button">
                                <span v-if="state.infoitem.projectUse == 0">其他</span>
                                <span v-if="state.infoitem.projectUse == 1">住宅</span>
                                <span v-if="state.infoitem.projectUse == 2">商业</span>
                                <span v-if="state.infoitem.projectUse == 3">商住</span>
                                <span v-if="state.infoitem.projectUse == 4">商业、办公</span>
                            </div>
                        </div>
                        <div class="block">
                            <div class="top">项目状态</div>
                            <div class="button">
                                <span v-if="state.infoitem.projectState == 0">未开工</span>
                                <span v-if="state.infoitem.projectState == 1">建设中</span>
                                <span v-if="state.infoitem.projectState == 2">已完工</span>
                                <span v-if="state.infoitem.projectState == 3">已交付</span>
                            </div>
                        </div>
                        <div class="block">
                            <div class="top">销售状态</div>
                            <div class="button">
                                <span v-if="state.infoitem.projectState == 1">未预售</span>
                                <span v-if="state.infoitem.projectState == 2">预售</span>
                                <span v-if="state.infoitem.projectState == 3">售罄</span>
                            </div>
                        </div>
                        <div class="block">
                            <div class="top">是否停工停建</div>
                            <div class="button">{{state.infoitem.isBranch == 1? '是' : '否'}}</div>
                        </div>
                    </div>
                </el-card>
            </el-col>
            <!--<el-col :span="24">
                <div class="title">基本信息</div>
                <el-card shadow="hover">
                    <el-table :data="tableData" stripe style="width: 100%">
                        <el-table-column prop="date" label="Date" />
                        <el-table-column prop="name" label="Name" />
                        <el-table-column prop="address" label="Address" />
                    </el-table>
                </el-card>
            </el-col>-->
        </el-row>
    </div>
</template>

<script setup lang="ts" name="manageDic">
    import { defineAsyncComponent, reactive, onMounted, ref } from 'vue';
    import {ElMessageBox, ElMessage, ElNotification} from 'element-plus';
    import { useRoute } from "vue-router";
    import { proIndexApi } from "/@/api/pro/index";
    import { useCurrentInstance } from '/@/method/get'
    const { proxy } = useCurrentInstance()
    const route = useRoute()
    // 引入组件
    // 定义变量内容
    const state = reactive<any>({
        search:"",
        pageType:"",//id
        infoitem:'',
    });
    const tableData = [

    ]
    const Apicounty = async () =>{
        let item = await proIndexApi().projectApi(state.pageType)
        state.infoitem = item.data
    }
    // 页面加载时
    onMounted(() => {
        state.pageType = route.query.type;
        Apicounty()
    });
</script>

<style scoped lang="scss">
    .dis-warp{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        .block{
            margin: 10px 10px 20px 10px;
            width: 22%;
            .top{
                color: #666;
            }
            .button{
                margin-top: 10px;
                color: #000;
            }
        }
    }
    .dis{
        display: flex;
        flex-direction: row;
        align-items: center;
    }
    .big-title{
        display: flex;
        flex-direction: row;
        align-items: center;
        font-size: 16px;
        padding-right: 10px;
    }
    .title{
        font-size: 16px;
        padding: 20px;
        font-weight: bold;
    }
    .home-container {
        overflow: hidden;
        .home-card-one{
            .home-card-item {
                width: 100%;
                height: 130px;
                border-radius: 4px;
                transition: all ease 0.3s;
                padding: 20px;
                overflow: hidden;
                background: var(--el-color-white);
                color: var(--el-text-color-primary);
                border: 1px solid var(--next-border-color-light);
                &:hover {
                    box-shadow: 0 2px 12px var(--next-color-dark-hover);
                    transition: all ease 0.3s;
                }
                &-icon {
                    width: 70px;
                    height: 70px;
                    border-radius: 100%;
                    flex-shrink: 1;
                    i {
                        color: var(--el-text-color-placeholder);
                    }
                }
                &-title {
                    font-size: 15px;
                    font-weight: bold;
                    height: 30px;
                }
            }
        }
        .home-card-one {
            @for $i from 0 through 3 {
                .home-one-animation#{$i} {
                    opacity: 0;
                    animation-name: error-num;
                    animation-duration: 0.5s;
                    animation-fill-mode: forwards;
                    animation-delay: calc($i/4) + s;
                }
            }
        }
    }
</style>
