<template>
    <div class="system-dept-dialog-container">
        <el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog" width="950">
            <el-descriptions title="" :column="3" size="default" border>
                <el-descriptions-item label="项目名称">{{ state.uitem.projectName }}</el-descriptions-item>
                <el-descriptions-item label="项目地址">{{ state.uitem.address }}</el-descriptions-item>
                <el-descriptions-item label="丘号">{{ state.uitem.projectNo }}</el-descriptions-item>
                <el-descriptions-item label="户数（总套数）">{{ state.uitem.houseTotal }}</el-descriptions-item>
                <el-descriptions-item label="楼幢数">{{ state.uitem.buildTotal }}</el-descriptions-item>
                <el-descriptions-item label="占地面积">{{ state.uitem.coverArea }}m²</el-descriptions-item>
                <el-descriptions-item label="建筑面积">{{ state.uitem.constructArea }}m²</el-descriptions-item>
                <el-descriptions-item label="住宅面积">{{ state.uitem.houseArea }}m²</el-descriptions-item>
                <el-descriptions-item label="非住宅面积">{{ state.uitem.notHouseArea }}m²</el-descriptions-item>
                <el-descriptions-item label="配套公建面积">{{ state.uitem.publicArea }}m²</el-descriptions-item>
                <el-descriptions-item label="地上建筑面积">{{ state.uitem.overgroundConstructArea }}m²</el-descriptions-item>
                <el-descriptions-item label="地下建筑面积">{{ state.uitem.undergroundConstructArea }}m²</el-descriptions-item>
                <el-descriptions-item label="绿化率">{{ state.uitem.greeningRate }}%</el-descriptions-item>
                <el-descriptions-item label="容积率">{{ state.uitem.plotRatio }}</el-descriptions-item>
                <el-descriptions-item label="计划总投资">{{ state.uitem.planTotalAmount }}</el-descriptions-item>
                <el-descriptions-item label="开工日期">{{ proxy?.$method.formatDate(state.uitem.actualStartDate, true)
                    }}</el-descriptions-item>
                <el-descriptions-item label="竣工日期">{{ proxy?.$method.formatDate(state.uitem.actualEndDate, true)
                    }}</el-descriptions-item>
                <el-descriptions-item label="交付日期">{{ proxy?.$method.formatDate(state.uitem.deliveryDate, true)
                    }}</el-descriptions-item>
                <el-descriptions-item label="项目负责人">{{ state.uitem.chargePerson }}</el-descriptions-item>
                <el-descriptions-item label="项目负责人电话">{{ state.uitem.chargePhone }}</el-descriptions-item>
                <el-descriptions-item label="项目用途">
                    <span v-if="state.uitem.projectUse == 0">其他</span>
                    <span v-if="state.uitem.projectUse == 1">住宅</span>
                    <span v-if="state.uitem.projectUse == 2">商业</span>
                    <span v-if="state.uitem.projectUse == 3">商住</span>
                    <span v-if="state.uitem.projectUse == 4">商业、办公</span>
                </el-descriptions-item>
                <el-descriptions-item label="销售状态">
                    <span v-if="state.uitem.projectSaleState == 0">未售</span>
                    <span v-if="state.uitem.projectSaleState == 1">在售</span>
                    <span v-if="state.uitem.projectSaleState == 2">售罄</span>
                </el-descriptions-item>
                <el-descriptions-item label="项目性质">{{ state.uitem.projectProperty }}</el-descriptions-item>
                <el-descriptions-item label="项目建设状态">
                    <span v-if="state.uitem.projectConstructState == 0">未开工</span>
                    <span v-if="state.uitem.projectConstructState == 1">建设中</span>
                    <span v-if="state.uitem.projectConstructState == 2">已完工</span>
                </el-descriptions-item>
                <el-descriptions-item label="是否停工停建">
                    <span v-if="state.uitem.isShutOwn == 0">否</span>
                    <span v-if="state.uitem.isShutOwn == 1">是</span>
                </el-descriptions-item>
                <el-descriptions-item label="区域代码">{{ state.uitem.areaCode }}</el-descriptions-item>
                <el-descriptions-item label="项目简介">{{ state.uitem.detail }}</el-descriptions-item>
            </el-descriptions>

            <div style="height: 20px;"></div>
            <el-descriptions title="资金情况" v-if="state.uitem.projectDetail" direction="vertical" :column="4"
                size="default" border>
                <el-descriptions-item label="监管额度">{{
            state.uitem.projectDetail.superviseAmount == null ? 0 : state.uitem.projectDetail.superviseAmount
        }}</el-descriptions-item>
                <el-descriptions-item label="留存额度">{{ state.uitem.projectDetail.keepAmount == null ? 0 :
            state.uitem.projectDetail.keepAmount }}</el-descriptions-item>
                <el-descriptions-item label="账户余额">{{ state.uitem.projectDetail.balance == null ? 0 :
            state.uitem.projectDetail.balance }}</el-descriptions-item>
                <el-descriptions-item label="总入账金额">{{ state.uitem.projectDetail.totalInAmount == null ? 0 :
            state.uitem.projectDetail.totalInAmount }}</el-descriptions-item>
                <el-descriptions-item label="总出账金额">{{ state.uitem.projectDetail.totalOutAmount == null ? 0 :
            state.uitem.projectDetail.totalOutAmount }}</el-descriptions-item>
                <el-descriptions-item label="批售总套数">{{ state.uitem.projectDetail.approveTotalNum == null ? 0 :
            state.uitem.projectDetail.approveTotalNum }}套</el-descriptions-item>
                <el-descriptions-item label="批售总面积">{{ state.uitem.projectDetail.approveTotalArea == null ? 0 :
            state.uitem.projectDetail.approveTotalArea }}m²</el-descriptions-item>
                <el-descriptions-item label="监管比例">{{ state.uitem.projectDetail.supervisePercentage == null ? 0 :
            state.uitem.projectDetail.supervisePercentage
                    }}%</el-descriptions-item>
                <el-descriptions-item label="销售总套数">{{ state.uitem.projectDetail.saleTotalNum == null ? 0 :
            state.uitem.projectDetail.saleTotalNum }}套</el-descriptions-item>
                <el-descriptions-item label="销售总面积">{{ state.uitem.projectDetail.saleTotalArea == null ? 0 :
                    state.uitem.projectDetail.saleTotalArea }}m²</el-descriptions-item>
            </el-descriptions>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="onCancel" size="default">关 闭</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
import { entApi } from "/@/api/ent";
import { useCurrentInstance } from "/@/method/get";
const { proxy } = useCurrentInstance();

// 定义子组件向父组件传值/事件
const emit = defineEmits(['refresh']);

// 定义变量内容
const state = reactive({
    uitem: {} as any,
    dialog: {
        isShowDialog: false,
        type: '',
        title: '',
        uid: '',
    },
});

// 打开弹窗
const openDialog = (row: any) => {
    state.dialog.uid = row.id
    state.dialog.title = row.projectName + '详情'
    state.dialog.isShowDialog = true;
    loadData();
};
async function loadData() {
    let item = await entApi().deltaentdetail(state.dialog.uid);
    state.uitem = item.data;
}

// 关闭弹窗
const closeDialog = () => {
    state.dialog.isShowDialog = false;
};
// 取消
const onCancel = () => {
    closeDialog();
};
// 暴露变量
defineExpose({
    openDialog
});
</script>
<style>
.dialog-footer {
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>
