<template>
    <div>
        <div class="home-container bgwhite layout-pd mb10">
            <div class="mb10">
                <div class="rowrav"><el-button size="default" type="primary" @click="goBack">返回</el-button></div>
                <div class="demons">
                    <div class="dmonitem">
                        <div class="itemtext">企业名称：</div>
                        <span>{{ state.uitem.corpName }}</span>
                    </div>
                    <div class="dmonitem">
                        <div class="itemtext">项目名称：</div>
                        <span>{{ state.uitem.projectName }}</span>
                    </div>
                    <div class="dmonitem">
                        <div class="itemtext">所属区县：</div>
                        <span>{{ state.uitem.areaName }}</span>
                    </div>
                </div>
                <div class="demons">
                    <div class="dmonitem">
                        <div class="itemtext">总建筑面积：</div>
                        <span> {{ proxy?.$method.numFormat(state.uitem.constructArea) }} ㎡</span>
                    </div>
                    <div class="dmonitem">
                        <div class="itemtext">总楼幢：</div>
                        <span> {{ state.uitem.buildTotal }}栋</span>
                    </div>
                    <div class="dmonitem">
                        <div class="itemtext">总套数：</div>
                        <span>{{ proxy?.$method.numFormat(state.uitem.houseTotal) }}套</span>
                    </div>
                </div>
                <div class="demons">

                    <div class="dmonitem">
                        <div class="itemtext">占地面积：</div>
                        <span> {{ proxy?.$method.numFormat(state.uitem.coverArea) }} ㎡</span>
                    </div>
                    <div class="dmonitem">
                        <div class="itemtext">住宅面积：</div>
                        <span> {{ proxy?.$method.numFormat(state.uitem.houseArea) }} ㎡</span>
                    </div>
                    <div class="dmonitem">
                        <div class="itemtext">非住宅面积：</div>
                        <span> {{ proxy?.$method.numFormat(state.uitem.notHouseArea) }} ㎡</span>
                    </div>
                </div>
                <!-- <div class="dmonitem">
                        <div class="itemtext">配套公建面积：</div>
                        <span> {{ proxy?.$method.numFormat(state.uitem.publicArea) }} ㎡</span>
                    </div> -->
                <div class="demons">
                    <div class="dmonitem">
                        <div class="itemtext">销售状态：</div>
                        <span v-if="state.uitem.projectSaleState == 0">未售</span>
                        <span v-if="state.uitem.projectSaleState == 1">在售</span>
                        <span v-if="state.uitem.projectSaleState == 2">售罄</span>
                    </div>
                </div>
                <div class="demons">
                    <div class="dmonitem">
                        <div class="itemtext">建设进度：</div>
                        <span style="color: #f20000;" v-if="state.uitem.projectConstructState == 0">未开工</span>
                        <span style="color: #409eff;" v-if="state.uitem.projectConstructState == 1">在建</span>
                        <span style="color: #5FB878;" v-if="state.uitem.projectConstructState == 2">竣工</span>
                    </div>
                </div>
<!--                <div class="demons">
                    <div class="dmonitem">
                        <div class="itemtext">计划总投资：</div>
                        <span>{{ proxy?.$method.numFormat(state.uitem.planTotalAmount) }}万元</span>
                    </div>
                    <div class="dmonitem">
                        <div class="itemtext">监管总收入：</div>
                        <span>{{ proxy?.$method.numFormat(state.uitem.totalInAmount) }}元</span>
                    </div>
                    <div class="dmonitem">
                        <div class="itemtext">监管总支出：</div>
                        <span>{{ proxy?.$method.numFormat(state.uitem.totalOutAmount) }}元</span>
                    </div>
                </div>-->
                <div class="demons">
                    <div class="dmonitem">
                        <div class="itemtext">项目地址：</div>
                        <span>{{ state.uitem.address }}</span>
                    </div>
                </div>

                <div class="ctitle" style="height: 30px;">
                </div>
                <div class="overfoll">
                    <div class="uitems" v-for="(item, idx) in state.list">
                        <div class="uitemscons">{{ item.buildingName }}</div>
                        <el-steps :active="item.progressNode - 1" style="padding: 10px;flex: 1;" simple>
                            <el-step>
                                <template #icon></template>
                                <template #title>
                                    <div class="mtitle">建成层数达到地上层数一半</div>
                                </template>
                            </el-step>
                            <el-step>
                                <template #icon></template>
                                <template #title>
                                    <div class="mtitle">建成层数达到地上层数三分之二 </div>
                                </template>
                            </el-step>
                            <el-step>
                                <template #icon></template>
                                <template #title>
                                    <div class="mtitle">主体结构完工</div>
                                </template>
                            </el-step>
                            <el-step>
                                <template #icon></template>
                                <template #title>
                                    <div class="mtitle">单体竣工验收合格</div>
                                </template>
                            </el-step>
                            <el-step>
                                <template #icon></template>
                                <template #title>
                                    <div class="mtitle">具备交付使用条件</div>
                                </template>
                            </el-step>
                        </el-steps>
                    </div>
                </div>
            </div>
            <!-- <el-card shadow="hover" class="mb10">
                <div class="ctitle">
                    <div class="titles">筛选楼幢</div>
                </div>
                <el-radio-group v-model="radio">
                    <el-radio label="">全部</el-radio>
                    <el-radio :label="idx" v-for="(item, idx) in 8">{{ idx + 1 }}号楼</el-radio>
                </el-radio-group>
            </el-card> -->
            <!-- </el-card> -->
        </div>
    </div>
</template>

<script setup lang="ts" name="manageDic">
import { defineAsyncComponent, reactive, onMounted, ref } from 'vue';

import { projectQueryApi } from "/@/api/projectQuery/index";
import { useRouter } from "vue-router";
import { useRoute } from "vue-router";
import { useCurrentInstance } from "/@/method/get";
import mittBus from "/@/utils/mitt";
const { proxy } = useCurrentInstance();
const router = useRouter();
const route = useRoute()
const active = ref(3)
const dialogVisible = ref(false)
const testlist: any = [4, 3, 3, 1, 2, 2, 2, 1, 0, null, null]
const radio = ref('')
const goBack = () => {
    router.go(-1);
    mittBus.emit(
        "onCurrentContextmenuClick",
        Object.assign({}, { contextMenuClickId: 1, ...route })
    );
};
import { entApi } from "/@/api/ent/index";

const state = reactive({
    uitem: {} as any,
    list: [] as any
})

function getars(item: any, list: any) {
    state.uitem = item;
    state.list = list;
    ApiCity(item.areaCode)
}

const ApiCity = async (e: number) => {
    let itemQx = await entApi().typeApi(); //区县数据
    let sor = ''
    itemQx.data.forEach((res: any) => {
        if (e == res.value) sor = res.label;
    })
    state.uitem.areaName = sor;
}
// 暴露变量
defineExpose({
    getars
});


</script>

<style scoped lang="scss">
::v-deep .is-finish {
    color: rgb(0, 176, 0);
}

::v-deep .is-process {
    color: #1687f8;
    font-weight: normal;
}

::v-deep.el-steps--simple {
    background-color: #fff !important;
}

.overfoll {
    height: 47vh;
    overflow-y: auto;
}

.mtitle {
    font-size: 13px;
}

.rowrav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.demons {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    .dmonitem {
        flex: 1;
        display: flex;
        align-items: center;
        font-size: 14px;
        margin-bottom: 20px;

        .itemtext {
            font-size: 14px;
            width: 120px;
            color: #666;
        }

    }
}


.uitems {
    margin-bottom: 20px;
    border: 1px solid #eee;
    display: flex;
    align-items: center;
    width: 100%;
    padding-right: 20px;

    .uitemscons {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 15px;
        background-color: #f4f4f4;
        height: 60px;
        width: 90px;
        font-weight: bold;
    }
}


.fundstop {
    display: flex;
    align-items: center;
    border: 1px solid #eee;
    margin: 10px 0 20px 0;
    padding: 10px 0;

    .fundstopitem {
        flex: 1;
        height: 80px;
        display: flex;
        flex-direction: column-reverse;
        align-items: center;
        justify-content: center;
        position: relative;

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

        &:last-child {
            p {
                // &::after {
                //     font-size: 14px;
                //     font-weight: normal;
                //     margin-left: 2px;
                //     content: "%";
                // }
            }
        }

        p {
            font-size: 28px;
            font-weight: bold;
            margin-bottom: 6px;

            &::after {
                font-size: 14px;
                font-weight: normal;
                margin-left: 2px;
                content: "万元";
            }
        }

        span {
            font-size: 14px;
            color: #666;
        }

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

.ctitle {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

$color: #457ae3;

.titles {
    font-size: 16px;
    font-weight: bold;
    position: relative;
    margin-bottom: 20px;
    cursor: pointer;
    user-select: none;

    &::before {
        content: "";
        width: 40px;
        height: 4px;
        border-radius: 10px;
        background-color: $color;
        position: absolute;
        bottom: -10px;
        left: 0;
    }
}
</style>