<template>
    <div>
        <div class="home-container bgwhite layout-pd mb10">
            <el-descriptions class="margin-top" :column="4" size="default" border>
                <template #title>
                    <div class="ctitle">
                        <div class="title">基本信息</div>
                    </div>
                </template>
                <template #extra>
                    <el-button type="primary" @click="goBack" size="default">返回</el-button>
                </template>
                <el-descriptions-item width="220">
                    <template #label>
                        <div class="itemtext">企业名称</div>
                    </template>
                    {{ state.infoitem.name }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="itemtext">企业类型</div>
                    </template>
                    <span v-if="state.infoitem.corpType == 1">房地产开发企业</span>
                    <span v-if="state.infoitem.corpType == 2">房地产经纪机构心</span>
                    <span v-if="state.infoitem.corpType == 3">房地产评估机构</span>
                    <span v-if="state.infoitem.corpType == 4">物业服务企业</span>
                    <span v-if="state.infoitem.corpType == 5">房屋测绘机构</span>
                    <span v-if="state.infoitem.corpType == null">其他企业</span>
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="itemtext">企业性质</div>
                    </template>
                    <span v-if="state.infoitem.corpProperty == 1">内资企业</span>
                    <span v-if="state.infoitem.corpProperty == 2">国有企业</span>
                    <span v-if="state.infoitem.corpProperty == 3">集体企业</span>
                    <span v-if="state.infoitem.corpProperty == 4">股份合作企业</span>
                    <span v-if="state.infoitem.corpProperty == 5">联营企业</span>
                    <span v-if="state.infoitem.corpProperty == 6">有限责任公司</span>
                    <span v-if="state.infoitem.corpProperty == 7">股份有限企业</span>
                    <span v-if="state.infoitem.corpProperty == 8">私营企业</span>
                    <span v-if="state.infoitem.corpProperty == 9">外资企业</span>
                    <span v-if="state.infoitem.corpProperty == 10">外商投资企业</span>
                    <span v-if="state.infoitem.corpProperty == 11">港、澳、台商投资企业</span>
                    <span v-if="state.infoitem.corpProperty == 12">合资经营企业(港或澳、台资)</span>
                    <span v-if="state.infoitem.corpProperty == 13">合作经营企业(港或澳、台资)</span>
                    <span v-if="state.infoitem.corpProperty == 14">中外合资经营企业</span>
                    <span v-if="state.infoitem.corpProperty == 15">中外合作经营企业</span>
                    <span v-if="state.infoitem.corpProperty == 16">外商投资股份有限公司</span>
                    <span v-if="state.infoitem.corpProperty == 17">港、澳、台商独资经营企业</span>
                    <span v-if="state.infoitem.corpProperty == 18">港、澳、台商投资股份有限公司</span>
                    <span v-if="state.infoitem.corpProperty == 0">其他企业</span>
                </el-descriptions-item>
                <el-descriptions-item width="170">
                    <template #label>
                        <div class="itemtext">统一社会信用代码</div>
                    </template>
                    {{ state.infoitem.idCard == null ? '暂无' : state.infoitem.idCard }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="itemtext">所在市行政区划</div>
                    </template>
                    {{ state.infoitem.registerCity == null ? '暂无' : state.infoitem.registerCity }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="itemtext">所在区行政区划</div>
                    </template>
                    {{ state.infoitem.registerDistrict == null ? '暂无' : state.infoitem.registerDistrict }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="itemtext">法定代表人</div>
                    </template>
                    {{ state.infoitem.legalName == null ? '暂无' : state.infoitem.legalName }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="itemtext">法人电话</div>
                    </template>
                    {{ state.infoitem.legalPhone == null ? '暂无' : state.infoitem.legalPhone }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="itemtext">联系人姓名</div>
                    </template>
                    {{ state.infoitem.linkName == null ? '暂无' : state.infoitem.linkName }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="itemtext">联系人电话</div>
                    </template>
                    {{ state.infoitem.linkPhone == null ? '暂无' : state.infoitem.linkPhone }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="itemtext">注册地址</div>
                    </template>
                    {{ state.infoitem.registerAddress == null ? '暂无' : state.infoitem.registerAddress }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="itemtext">注册资本(万元)</div>
                    </template>
                    {{ state.infoitem.registerAsset == null ? '暂无' : state.infoitem.registerAsset }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="itemtext">资质等级</div>
                    </template>
                    {{ state.infoitem.creditRating }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="itemtext">成立日期</div>
                    </template>
                    {{ state.infoitem.establishDate == null ? '暂无' : state.infoitem.establishDate }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="itemtext">是否外来机构</div>
                    </template>
                    {{ state.infoitem.isForeign == 1 ? '是' : '否' }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="itemtext">是否分支机构</div>
                    </template>
                    {{ state.infoitem.isBranch == 1 ? '是' : '否' }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="itemtext">经营范围</div>
                    </template>
                    {{ state.infoitem.businessScope == null ? '暂无' : state.infoitem.businessScope }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="itemtext">是否外来机构</div>
                    </template>
                    {{ state.infoitem.isForeign == 1 ? '是' : '否' }}
                </el-descriptions-item>
            </el-descriptions>
        </div>
        <el-card shadow="hover" class="mb10">
            <div class="ctitle">
                <div class="title">监管信息</div>
            </div>
            <div class="desil">
                <div class="block">
                    <div class="top">监管额度</div>
                    <div class="button">{{ state.corpDetail.superviseAmount == null || state.corpDetail.superviseAmount
                == 0 ?
                '0.00' :
                proxy?.$method.numFormat(state.corpDetail.superviseAmount)
                        }}元
                    </div>
                </div>
                <div class="block">
                    <div class="top">留存额度</div>
                    <div class="button">{{ state.corpDetail.keepAmount == null || state.corpDetail.keepAmount == 0 ?
                '0.00' :
                proxy?.$method.numFormat(state.corpDetail.keepAmount) }}元
                    </div>
                </div>
                <div class="block">
                    <div class="top">账户余额</div>
                    <div class="button">{{ state.corpDetail.balance == null || state.corpDetail.balance == 0 ? '0.00' :
                proxy?.$method.numFormat(state.corpDetail.balance) }}元</div>
                </div>
                <div class="block">
                    <div class="top">总入账金额</div>
                    <div class="button">{{ state.corpDetail.totalInAmount == null || state.corpDetail.totalInAmount == 0
                ?
                '0.00' :
                proxy?.$method.numFormat(state.corpDetail.totalInAmount)
                        }}元
                    </div>
                </div>
                <div class="block">
                    <div class="top">总出账金额</div>
                    <div class="button">{{ state.corpDetail.totalOutAmount == null || state.corpDetail.totalOutAmount ==
                0 ? '0.00'
                :
                proxy?.$method.numFormat(state.corpDetail.totalOutAmount)
                        }}元</div>
                </div>
                <div class="block">
                    <div class="top">监管比例</div>
                    <div class="button bas">{{ state.corpDetail.supervisePercentage == null ? '0' :
                state.corpDetail.supervisePercentage }}</div>
                </div>
                <div class="block">
                    <div class="top">批售总套数</div>
                    <div class="button t">{{ state.corpDetail.approveTotalNum == null ? '0' :
                proxy?.$method.numFormat(state.corpDetail.approveTotalNum)
                        }}</div>
                </div>
                <div class="block">
                    <div class="top">批售总面积</div>
                    <div class="button areas">{{ state.corpDetail.approveTotalArea == null ? '0' :
                proxy?.$method.numFormat(state.corpDetail.approveTotalArea)
                        }}</div>
                </div>
                <div class="block">
                    <div class="top">销售总套数</div>
                    <div class="button t">{{ state.corpDetail.saleTotalNum == null ? '0' :
                proxy?.$method.numFormat(state.corpDetail.saleTotalNum)
                        }}
                    </div>
                </div>
                <div class="block">
                    <div class="top">销售总面积</div>
                    <div class="button areas">{{ state.corpDetail.saleTotalArea == null ? '0' :
                proxy?.$method.numFormat(state.corpDetail.saleTotalArea) }}
                    </div>
                </div>
                <div class="block">
                    <div class="top">在售项目数</div>
                    <div class="button">{{ state.corpDetail.buildProjectTotal == null ? '0' :
                state.corpDetail.buildProjectTotal }}</div>
                </div>
                <div class="block">
                    <div class="top">在售项目面积</div>
                    <div class="button areas">{{ state.corpDetail.buildAreaTotal == null ? '0' :
                proxy?.$method.numFormat(state.corpDetail.buildAreaTotal)
                        }}</div>
                </div>
                <div class="block">
                    <div class="top">烂尾楼</div>
                    <div class="button">{{ state.corpDetail.shutdownProjectTotal == null ? '0' :
                state.corpDetail.shutdownProjectTotal }}</div>
                </div>
                <div class="block">
                    <div class="top">售罄</div>
                    <div class="button">{{ state.corpDetail.sellOutProjectTotal == null ? '0' :
                state.corpDetail.sellOutProjectTotal }}</div>
                </div>
            </div>
        </el-card>
        <el-card shadow="hover" class="mb10">
            <el-table :data="state.tableData.data" v-loading="state.tableData.loading" style="width: 100%">
                <el-table-column prop="projectName" label="项目名称" width="220" />
                <el-table-column prop="address" label="项目地址" show-overflow-tooltip width="240" />
                <el-table-column prop="projectUse" label="项目用途">
                    <template #default="scope">
                        <span v-if="scope.row.projectUse == 0">其他</span>
                        <span v-if="scope.row.projectUse == 1">住宅</span>
                        <span v-if="scope.row.projectUse == 2">商业</span>
                        <span v-if="scope.row.projectUse == 3">商住</span>
                        <span v-if="scope.row.projectUse == 4">商业、办公</span>
                    </template>
                </el-table-column>
                <el-table-column prop="houseTotal" label="总套数（m²）" />
                <el-table-column prop="constructArea" label="建筑面积（m²）" />
                <el-table-column prop="projectConstructState" label="项目状态">
                    <template #default="scope">
                        <span v-if="scope.row.projectConstructState == 0">未开工</span>
                        <span v-if="scope.row.projectConstructState == 1">建设中</span>
                        <span v-if="scope.row.projectConstructState == 2">已完工</span>
                    </template>
                </el-table-column>
                <el-table-column prop="projectSaleState" label="销售状态">
                    <template #default="scope">
                        <span v-if="scope.row.projectSaleState == 1">未售</span>
                        <span v-if="scope.row.projectSaleState == 2">在售</span>
                        <span v-if="scope.row.projectSaleState == 3">售罄</span>
                    </template>
                </el-table-column>
                <el-table-column prop="isShutOwn" label="停工状态">
                    <template #default="scope">
                        <span v-if="scope.row.isShutOwn == 0">否</span>
                        <span v-if="scope.row.isShutOwn == 1">是</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="100">
                    <template #default="scope">
                        <el-button size="small" text type="primary" @click="onOpenEditDic(scope.row)">查看</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination @size-change="onHandleSizeChange" @current-change="onHandleCurrentChange" class="mt15"
                v-model:current-page="state.tableData.param.pageNum" background
                v-model:page-size="state.tableData.param.pageSize" layout="total, prev,sizes, pager, next, jumper"
                :total="state.tableData.total">
            </el-pagination>
        </el-card>
        <Dialog ref="dialogRef"></Dialog>
    </div>
</template>

<script setup lang="ts" name="manageDic">
import { defineAsyncComponent, reactive, onMounted, ref } from 'vue';
import { ElMessageBox, ElMessage, ElNotification } from 'element-plus';
import { entApi } from "/@/api/ent";
import { useRoute, useRouter } from "vue-router";
const route = useRoute();
const router = useRouter();
import mittBus from "/@/utils/mitt";
const Dialog = defineAsyncComponent(() => import('/@/views/statistics/enterprise/details/showdoing.vue'));
import { useCurrentInstance } from "/@/method/get";
const { proxy } = useCurrentInstance();

const goBack = () => {
    router.go(-1);
    mittBus.emit(
        "onCurrentContextmenuClick",
        Object.assign({}, { contextMenuClickId: 1, ...route })
    );
};

const dialogRef = ref();

// 定义变量内容
const state = reactive<any>({
    search: "",
    pageType: "",//id
    infoitem: {} as any,
    corpDetail: {} as any,
    originalId: '',
    tableData: {
        data: [],
        total: 1,
        loading: false,
        param: {
            pageNum: 1,
            pageSize: 10,
        },
    } as any,
});
const Apicounty = async () => {
    let item = await entApi().detailsApi(state.pageType)
    state.infoitem = item.data.corp
    state.corpDetail = item.data.corpDetail
    state.originalId = item.data.corp.originalId
    gettable()
}

function onOpenEditDic(e: any) {
    dialogRef.value.openDialog(e);
}

const gettable = async () => {
    state.tableData.loading = true;
    let items = await entApi().detailsListApi({
        page: state.tableData.param.pageNum,
        limit: state.tableData.param.pageSize,
        originalId: state.originalId
    })
    state.tableData.data = items.data;
    state.tableData.total = items.count
    state.tableData.loading = false;
}
// 分页改变
const onHandleCurrentChange = (val: number) => {
    state.tableData.param.pageNum = val;
    gettable();
};
const onHandleSizeChange = (val: number) => {
    state.tableData.param.pageSize = val;
    gettable();
};

// 页面加载时
onMounted(() => {
    state.pageType = route.query.type;
    Apicounty()
});
</script>

<style scoped lang="scss">
.title {
    font-weight: bold;
    font-size: 14px;
    padding-left: 10px;
    border-left: 3px solid #409efe;
}

.itemtext {
    font-size: 13px;
}

.areas {
    &::after {
        font-size: 14px;
        font-weight: normal;
        margin-left: 2px;
        content: "m²";
    }
}

.bas {
    &::after {
        font-size: 14px;
        font-weight: normal;
        margin-left: 2px;
        content: "%";
    }
}

.t {
    &::after {
        font-size: 14px;
        font-weight: normal;
        margin-left: 2px;
        content: "套";
    }
}

.bgwhite {
    background-color: #fff;
    padding: 20px !important;
    transition: .3s;

    &:hover {
        box-shadow: 0 0 18px #ccc;
    }
}

.desil {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;

    .block {
        display: flex;
        width: 14.2%;
        flex-direction: column-reverse;
        align-items: center;
        padding: 20px 0;
        position: relative;

        &:last-child {
            &::before {
                width: 0;
            }
        }

        &::before {
            content: "";
            width: 2px;
            height: 10px;
            background-color: #eee;
            position: absolute;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
        }

        .button {
            font-size: 18px;
        }

        .top {
            margin-top: 10px;
            font-size: 14px;
            color: #666;
        }
    }
}
</style>
