<template>
    <div class="system-user-container layout-padding" v-loading="state.loading">
        <el-card shadow="hover" class="layout-padding-auto">
            <el-row :gutter="12">
                <el-col :span="2">
                    <div class="left-block">
                        <!--<el-tree :data="state.infolist" icon="" :props="defaultProps" @node-click="handleNodeClick" />-->
                        <div style="font-weight: bold;cursor: pointer;user-select: none" v-if="state.infolist.length!= 0" @click="hodel">{{ state.infolist[0].projectName }}</div>
                        <div v-for="(item, index) in state.infolist" :key="index">
                            <div class="left-title cursor-pointer" @click="handleNodeClick(item)">{{item.buildingName}}
                            </div>
                        </div>
                    </div>
                </el-col>
                <el-col :span="22">
                    <monst ref="monstref" v-if="!state.infoitem"></monst>
                    <div class="gundong" v-if="state.infoitem">
                        <div class="dis-warp" style="justify-content: space-between;align-items: center">
                            <div class="block">
                                <div class="big-title">{{ state.infoitem.projectName }} / {{ state.handleNode }}</div>
                            </div>
                            <el-button size="default" type="primary" @click="goBack">返回</el-button>
                        </div>
                        <div class="dis-warp">
                            <div class="block">
                                <div class="top">预售证号</div>
                                <!-- {{ state.infoitem.saleNo }} -->
                                <div class="button">{{ state.infoitem.saleNo }}</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">{{ proxy?.$method.numFormat(state.infoitem.calculateArea) || 0 }} ㎡
                                </div>
                            </div>
                            <!-- <div class="block">
                                <div class="top">建设进度</div>
                                <div class="button">
                                    <span v-if="state.infoitem.progressNode == 1">建成层数达到地上层数一半</span>
                                    <span v-if="state.infoitem.progressNode == 2">建成层数达到地上层数三分之二</span>
                                    <span v-if="state.infoitem.progressNode == 3">主体结构完工</span>
                                    <span v-if="state.infoitem.progressNode == 4">单体竣工验收合格</span>
                                    <span v-if="state.infoitem.progressNode == 5">具备交付使用条件</span>
                                </div>
                            </div> -->
                            <div class="block">
                                <div class="top">总套数</div>
                                <div class="button">{{ state.infoitem.totalHouseNum }}</div>
                            </div>
                            <div class="block">
                                <div class="top">销售套数</div>
                                <div class="button">{{ state.infoitem.sellHouseNum }}</div>
                            </div>
                            <div class="block">
                                <div class="top">监管额度</div>
                                <div class="button">{{ proxy?.$method.numFormat(state.infoitem.superviseAmount) || 0 }}元
                                </div>
                            </div>
                            <div class="block">
                                <div class="top">账户余额</div>
                                <div class="button">{{ proxy?.$method.numFormat(state.infoitem.balance) || 0 }}元</div>
                            </div>
                            <div class="block">
                                <div class="top">总收入</div>
                                <div class="button">{{ proxy?.$method.numFormat(state.infoitem.totalInAmount) || 0 }}元
                                </div>
                            </div>
                            <div class="block">
                                <div class="top">总支出</div>
                                <div class="button">{{ proxy?.$method.numFormat(state.infoitem.totalOutAmount) || 0 }}元
                                </div>
                            </div>
                            <!-- <div class="block" @click="gomap">
                                <div class="top cursor-pointer" style="color: #409eff">地图查看</div>
                                <div class="button"></div>
                            </div> -->
                        </div>
                        <div class="hidden">
                            <div style="margin: 30px 30px;">
                                <div class="flex-items" style="margin-top: 10px">
                                    <div class="zaishou" style="width: 10px;height: 10px;"></div>
                                    <div style="margin-left: 10px">在售</div>
                                    <div class="xiaoshou" style="width: 10px;height: 10px;margin-left: 20px"></div>
                                    <div style="margin-left: 10px">签订</div>
                                    <div class="beian" style="width: 10px;height: 10px;margin-left: 20px"></div>
                                    <div style="margin-left: 10px">已售</div>
                                    <div class="chexiao" style="width: 10px;height: 10px;margin-left: 20px"></div>
                                    <div style="margin-left: 10px">撤销</div>
                                </div>
                                <br>


                                <table class="table">
                                  <tr>
                                    <td v-for="a in state.infotable"  v-show="a.name != '无'"
                                        :style="a.typeName == '单元' ? '' : 'display:none'" valign="bottom">
                                        <div v-for="b in a.floorList" style="display: flex;flex-direction: row;" >
                                          <div class="louceng">{{ b.floorNum + '层' }}</div>
                                          <div v-for="c in b.houseList">
                                            <div class="fangwu cursor-pointer" @click="houseXin(c)">
                                              <div v-if="c.sellState == 0" class="zaishou">{{ c.showName }}</div>
                                              <div v-if="c.sellState == 1" class="xiaoshou">{{ c.showName }}</div>
                                              <div v-if="c.sellState == 2" class="beian">{{ c.showName }}</div>
                                              <div v-if="c.sellState == 3" class="chexiao">{{ c.showName }}</div>
                                            </div>
                                          </div>
                                        </div>
                                    </td>
                                  </tr>
                                  <tr>
                                    <td v-for="a in state.infotable"  v-show="a.name != '无'"
                                        :style="a.typeName == '单元' ? '' : 'display:none'">
                                      <div class="danyuan" >
                                        {{ a.name || ''}}
                                      </div>
                                    </td>
                                  </tr>
                                </table>
                                <!--判断单元是不是无 如果是无的话 是商铺 -->
                                <table class="table">
                                  <tr>
                                    <td v-for="a in state.infotable" v-show="a.name == '无'"  valign="bottom"
                                        :style="a.typeName == '单元' ? '' : 'display:none'">
                                      <div v-for="b in a.floorList" style="display: flex;flex-direction: row;" >
                                        <div class="louceng">{{ b.floorNum + '层' }}</div>
                                        <div v-for="c in b.houseList">
                                          <div class="fangwu cursor-pointer" @click="houseXin(c)">
                                            <div v-if="c.sellState == 0" class="zaishou">{{ c.showName }}</div>
                                            <div v-if="c.sellState == 1" class="xiaoshou">{{ c.showName }}</div>
                                            <div v-if="c.sellState == 2" class="beian">{{ c.showName }}</div>
                                            <div v-if="c.sellState == 3" class="chexiao">{{ c.showName }}</div>
                                          </div>
                                        </div>
                                      </div>
                                    </td>
                                  </tr>
                                  <tr>
                                    <td v-for="a in state.infotable" v-show="a.name == '无'"
                                        :style="a.typeName == '单元' ? '' : 'display:none'">
                                      <div class="danyuan" >
                                        {{ a.name || ''}}
                                      </div>
                                    </td>
                                  </tr>
                                </table>

                                <table class="table">
                                    <tr>
                                        <td v-for="a in state.infotable" valign="bottom"
                                            :style="a.typeName == '商铺' ? '' : 'display:none'">
                                            <div v-for="b in a.floorList" class="dis">
                                                <div class="louceng">{{ b.floorNum + '层' }}</div>
                                                <div v-for="c in b.houseList">
                                                  <div class="fangwu cursor-pointer" @click="houseXin(c)">
                                                    <div v-if="c.sellState == 0" class="zaishou">{{ c.showName }}</div>
                                                    <div v-if="c.sellState == 1" class="xiaoshou">{{ c.showName }}</div>
                                                    <div v-if="c.sellState == 2" class="beian">{{ c.showName }}</div>
                                                    <div v-if="c.sellState == 3" class="chexiao">{{ c.showName }}</div>
                                                  </div>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td v-for="a in state.infotable"
                                            :style="a.typeName == '商铺' ? '' : 'display:none'">
                                            <div class="danyuan" style="text-align: left;padding-left: 20px">
                                                {{ a.name }}
                                            </div>
                                        </td>
                                    </tr>
                                </table>
                                <table class="table">
                                    <tr>
                                        <td v-for="a in state.infotable" valign="bottom"
                                            :style="a.typeName == '车库' ? '' : 'display:none'">
                                            <div v-for="b in a.floorList" class="dis">
                                                <div class="louceng">{{ b.floorNum + '层' }}</div>
                                                <div v-for="c in b.houseList">
                                                    <div class="fangwu cursor-pointer" @click="houseXin(c)">
                                                        <div v-if="c.sellState == 0" class="zaishou">{{ c.showName }}</div>
                                                        <div v-if="c.sellState == 1" class="xiaoshou">{{ c.showName }}</div>
                                                        <div v-if="c.sellState == 2" class="beian">{{ c.showName }}</div>
                                                        <div v-if="c.sellState == 3" class="chexiao">{{ c.showName }}</div>
                                                    </div>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td v-for="a in state.infotable"
                                            :style="a.typeName == '车库' ? '' : 'display:none'">
                                            <div class="danyuan" style="text-align: left;padding-left: 20px">
                                                {{ a.name }}
                                            </div>
                                        </td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </el-card>
        <el-dialog v-model="dialogVisible" :modal="true" :title="state.dialogTable.projectName"
            :close-on-click-modal="false" width="40%">
            <div>
                <table class="tables" v-loading="state.loadingDialog">
                    <tr>
                        <td style="width: 100px">单价：</td>
                        <td style="width: 150px">{{ proxy?.$method.numFormat(state.dialogInfo.unitPrice) || 0 }} 元/㎡
                        </td>
                        <td style="width: 100px">总价：</td>
                        <td style="width: 150px">{{ proxy?.$method.numFormat(state.dialogInfo.totalPrice) || 0 }} 元</td>
                        <td style="width: 100px">用途：</td>
                        <td style="width: 150px">
                            {{ state.dialogTable.houseUseName }}
                        </td>
                    </tr>
                    <tr>
                        <td>建设面积：</td>
                        <td>{{ (state.dialogTable.cashBuildArea || 0) + '㎡' }}</td>
                        <td>套内面积：</td>
                        <td>{{ (state.dialogTable.cashOwnArea || 0) + '㎡' }}</td>
                        <td>分摊面积：</td>
                        <td>{{ (state.dialogTable.cashShareArea || 0) + '㎡' }}</td>
                    </tr>
                </table>
            </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button type="primary" @click="dialogVisible = false">关闭</el-button>
                </span>
            </template>
        </el-dialog>
    </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 monst = defineAsyncComponent(
    () => import("/@/views/query/projectQuery/detailmoney.vue")
);

const { proxy } = useCurrentInstance();
const router = useRouter();
const route = useRoute()
const dialogVisible = ref(false)
// 引入组件
// 定义变量内容
interface Tree {
    label: string
    children?: Tree[]
}
const state = reactive<any>({
    loading: false,//遮罩
    loadingDialog: false,
    projectId: "",//id
    infoitem: '',
    infolist: "",//楼幢
    buildingId: "",//id
    houseLength: 0,
    infotable: [] as any, //楼盘表
    handleNode: "",//获取点击楼幢id
    dialogTable: "",//弹窗
    dialogInfo: "",
    ditem: {},
    id: ''

});
const monstref = ref();
const hodel = () => {
    state.infoitem = ''
    Apicounty()
}

const gomap = async () => {
    let lat = state.infoitem.latitude
    let lon = state.infoitem.longitude
    router.push({
        path: '/map',
        query: {
            lat: lat,
            lon: lon,
        }
    });
}
//房屋点击
const houseXin = async (data: any) => {
    state.loadingDialog = true
    state.dialogTable = ''
    state.dialogInfo = ''
    dialogVisible.value = true
    let itemdialog: any = await projectQueryApi().HouseApi({
        houseNumber: data.houseNumber
    })
    state.dialogTable = itemdialog.data.houseInfo
    if (itemdialog.data.contractInfo) {
        state.dialogInfo = itemdialog.data.contractInfo
    }
    state.loadingDialog = false
}
//树点击事件
const handleNodeClick = (data: any) => {
    state.handleNode = data.buildingName
    state.buildingId = data.originalBuildingId
    state.projectId = state.projectId
    state.infotable = '' //清空楼盘表
    state.buildingNumber = data.buildingOriginalId
    Apicountylist()
}
const Apicountylist = async () => {
    state.loading = true
    let itemtable = await projectQueryApi().tableApi({
        buildingOriginalId: state.buildingNumber,
    })

    state.infotable = itemtable.data.units //楼盘表
    state.infoitem = itemtable.data.extend
    state.loading = false
}
const Apicounty = async () => {
    state.loading = true
    let item = await projectQueryApi().tablelistApi({
        projectNumber: state.projectId
    })

    state.infolist = item.data
    state.loading = false
    // Corapi(item)
    urapi(item)
}
const urapi = async (item: any) => {
    let items = await projectQueryApi().detailApi({
        projectId: state.id
    })
    monstref.value.getars(items.data, item.data)
}

const Corapi = async (item: any) => {
    state.buildingId = item.data[0].originalBuildingId
    state.buildingNumber = item.data[0].buildingNumber
    state.handleNode = item.data[0].buildingName
    let itemtable = await projectQueryApi().tableApi({
        buildingNumber: state.buildingNumber,
    })
    state.infotable = itemtable.data.building
    state.infoitem = itemtable.data.extend

    state.loading = false
}
const goBack = () => {
    router.go(-1);
    mittBus.emit(
        "onCurrentContextmenuClick",
        Object.assign({}, { contextMenuClickId: 1, ...route })
    );
}
const defaultProps = {
    children: 'children',
    label: 'buildingName',
}
// 页面加载时
onMounted(() => {
    state.id = route.query.id;
    state.projectId = route.query.type;
    Apicounty()
});
</script>

<style scoped lang="scss">
.louceng {
    width: 80px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    margin: 1px;
    background-color: #dedede;
    color: #000;
}

.fangwu {
    width: 80px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    margin: 1px;
    color: #000;
}

.zaishou {
    background-color: #9EEA6A;
}

.xiaoshou {
    background-color: #4dabf7;
}

.beian {
    background-color: #ff6b6b;
}

.chexiao {
    background-color: #343434;
}

.danyuan {
    height: 40px;
    line-height: 40px;
    margin: 1px;
    text-align: center;
    background-color: #ffb500;
}

.hidden {
    overflow-y: auto;
    height: 53vh
}

.cursor-pointer {
    /* &:hover{
            color: #409eff;
        }*/
}

.tables {
    border-collapse: collapse;

    tr {
        td {
            padding: 14px 7px;
            width: 100px;
        }
    }
}

.table {
    border-collapse: collapse;
    border: none;
    margin-bottom: 10px;
    tr{

    td{

    }
  }

}

.gundong {
    box-sizing: border-box;
    overflow: auto;
}

.left-block {
    height: 85vh;
    overflow-y: auto;
    border-right: 1px solid #e3e3e3;

    .left-title {
        margin-top: 20px;
    }
}

.dis-warp {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin: 0px 20px;

    .block {
        padding: 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;
    font-weight: bold;
    color: #000;
}

.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>
