<template>
    <div class="homeWrap">

        <div class="top-nav-list" v-if="$route.query.typeB == 'building'">
            <div v-for="item in buildingList" :key="item.id" :class="[item.ifActive ? 'top-nav-itemAC' : 'top-nav-item']"
                @click="chooseNav(item)">
                {{ item.buildingName }}{{ item.unitName }}
            </div>
        </div>
        <el-row :gutter="48" style="background-color: #fff;height: calc(100vh - 129px);">
            <el-col :span="8">
                <!-- <div class="mount">
            <people-mount />
          </div> -->
                <div class="apartment">
                    <div class="apar_comtent" v-if="houseMountArr.length > 0">
                        <div class="apar_top">
                            <img src="@/assets/images/home/homeTop.png" alt="/" />
                        </div>
                        <div style="min-width: 284px; max-width: 488px; padding: 0 20px">
                            <div class="apar_center">
                                <div class="apar_center_flex" :style="{ width: flexWidth + 'px' }">
                                    <div v-for="(item, index) in houseMountArr" :key="index" class="floor">
                                        <div v-for="itm in item" :key="itm.id" :class="[
                                            itm.riskyNum === 0 && itm.importanceNum === 0
                                                ? 'households'
                                                : '',
                                            itm.riskyNum > 0 ? 'dangerHome' : '',
                                            itm.importanceNum > 0 ? 'dangerPeople' : '',
                                            itm.rentFlag === '2' ? 'freeHome' : '',
                                        ]">
                                            <div v-if="itm.riskyNum === 0 &&
                                                itm.importanceNum === 0 &&
                                                itm.rentFlag != '2'
                                                ">
                                                {{ itm.doorName }}
                                            </div>
                                            <div v-if="itm.riskyNum > 0" class="dangerClass">
                                                <div>{{ itm.doorName }}</div>
                                                <img :src="require('@/assets/images/home/dangerHomeS.png')" alt=""
                                                    width="16px" />
                                            </div>
                                            <div v-if="itm.importanceNum > 0" class="dangerClass">
                                                <div>{{ itm.doorName }}</div>
                                                <img :src="require('@/assets/images/home/dangerPeopleS.png')
                                                    " alt="" width="16px" />
                                            </div>
                                            <div v-if="itm.rentFlag === '2'" class="dangerClass">
                                                <div>闲置</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="apar_bottom">
                            <img src="@/assets/images/home/homeBottomS.png" alt="/" />
                        </div>
                    </div>
                    <div v-else class="apar_comtent">
                        <div class="apar_top">
                            <img src="@/assets/images/home/homeTop.png" alt="/" />
                        </div>
                        <div style="min-width: 284px; max-width: 488px; padding: 0 20px">
                            <div class="apar_center">
                                <div class="apar_center_flex" style="width: 50px">
                                    <div v-for="(item, index) in freeHomeArr" :key="index" class="floor">
                                        <div v-for="(itm, i) in item" :key="i" class="freeHome"></div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="apar_bottom">
                            <img src="@/assets/images/home/homeBottom.png" alt="/" />
                        </div>
                    </div>
                    <!-- <div class="apar_right">
              <img src="@/assets/images/home/homeRight.png" alt="" />
            </div> -->
                </div>
            </el-col>
            <el-col :span="16">
                <div class="table">
                    <el-table :data="list" :height="tableHeight" v-loading="loading">
                        <el-table-column label="序号" type="index" width="60" />
                        <el-table-column prop="doorName" width="100" label="门牌号" />
                        <el-table-column prop="quartersName" show-overflow-tooltip label="所属小区">
                            <template slot-scope="scope">
                                <div>
                                    <el-tooltip class="item" effect="dark" :content="scope.row.quartersName"
                                        placement="top-start">
                                        <span>{{ scope.row.quartersName }}</span>
                                    </el-tooltip>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="buildingName" width="100" show-overflow-tooltip label="所属楼栋" />
                        <el-table-column prop="buildingUnitName" width="100" show-overflow-tooltip label="所属单元" />
                        <el-table-column prop="houseCode" width="100" label="房屋编码">
                            <template slot-scope="scope">
                                <div>
                                    <el-tooltip class="item" effect="dark" :content="scope.row.houseCode" placement="top">
                                        <div class="suolue">{{ scope.row.houseCode }}</div>
                                    </el-tooltip>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="rentFlag" width="90" label="房屋状态">
                            <template slot-scope="scope">
                                <!-- 1：出租 0：自住 2：闲置 3：未售出 -->
                                <span>{{ getRentFlag(scope.row.rentFlag) }}</span>
                            </template>
                        </el-table-column>
                        <!-- <el-table-column prop="houseType" width="120" label="房屋类型">
              <template slot-scope="scope"> -->
                        <!-- 1楼房，2平房，3别墅 -->
                        <!-- <span>{{ getHouseType(scope.row.houseType) }}</span>
              </template>
            </el-table-column> -->
                        <el-table-column prop="ownerName" width="100" label="房主姓名" />
                        <el-table-column prop="ownerPhone" width="110" show-overflow-tooltip label="房主电话">
                            <template slot-scope="scope">
                                {{ $sensitive(scope.row.ownerPhone, 3, 7) }}
                            </template>
                        </el-table-column>
                        <el-table-column prop="riskyNum" width="150" label="满意度风险家庭">
                            <template slot="header">
                                满意度风险家庭
                            </template>
                            <template slot-scope="scope">
                                <span v-if="+scope.row.riskyNum > 0">是</span>
                                <span v-else>否</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="categorys" width="120" label="重点人员">
                            <template slot="header">
                                重点人员
                            </template>
                            <template slot-scope="scope">
                                <div v-if="scope.row.categorys && scope.row.categorys.length > 0"
                                    style="display: flex; align-items: center; margin-bottom: 5px">
                                    <div v-for="item in scope.row.categorys.slice(0, 5)" :key="item">
                                        <img :src="require(`@/assets/images/home/${getHomeTypesMap(
                                            item
                                        )}.png`)
                                            " alt="" style="width: 20px; height: 20px; margin-right: 5px" />
                                    </div>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" width="80" align="center">
                            <template slot-scope="{ row }">
                                <el-button type="text" @click="
                                    $router.push(
                                        `/dataBoard/overview/familyPortrait/?name=${row.doorName}&houseId=${row.id}&id=${row.buildingId}&buId=${row.buildingUnitId}&type=${$route.query.typeB}&name2=${row.houseName}`
                                    )
                                    ">查看</el-button>
                            </template>
                        </el-table-column>
                    </el-table>

                </div>
                <div class="pagination">
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                        :current-page.sync="queryParams.pageNo" :page-size="queryParams.pageSize" layout="total,->,prev, pager, next, jumper"
                        :total="total">
                    </el-pagination>
                </div>
            </el-col>
        </el-row>
    </div>
</template>
  
<script>
import { mapGetters } from "vuex";
export default {
    name: "homeDetails",
    components: {
    },
    data() {
        return {
            total: 0,
            queryParams: {
                pageNo: 1,
                pageSize: 20,
                unitId: "",
                ownerName: "",
                ownerPhone: "",
                ownerIdCard: "",
                riskyFlag: "",
                residentTag: "",
            },
            orgOptions: [],
            peopleTypeList: [],
            riskHomeList: [
                {
                    label: "风险",
                    value: "1",
                },
                {
                    label: "无风险",
                    value: "0",
                },
            ],
            flexWidth: 0,
            loading: false,
            homeMsg: {},
            list: [],
            homeText: "",
            buildingList: [],
            houseMountArr: [
                [
                    // { doorName: 101, riskyNum: 0, importanceNum: 0, rentFlag: "0" },
                    // { doorName: 102, riskyNum: 1, importanceNum: 0, rentFlag: "0" },
                    // { doorName: 103, riskyNum: 0, importanceNum: 1, rentFlag: "0" },
                    // { doorName: 104, riskyNum: 0, importanceNum: 0, rentFlag: "0" },
                    // { doorName: 105, riskyNum: 0, importanceNum: 0, rentFlag: "0" },
                    // { doorName: 205, riskyNum: 0, importanceNum: 0, rentFlag: "0" },
                ],
            ],
            freeHomeArr: [],
            buildingId: "",
            level: ''
        };
    },
    watch: {},
    created() {
        this.buildingId = this.$store.state.huaXiang.buildingInfo.buildingId || null;
        this.queryParams.unitId = this.$store.state.huaXiang.buildingInfo.buildingUnitId || null;
        this.level = this.$store.state.huaXiang.buildingInfo.level || null;
    },
    mounted() {

        this.getList(this.buildingId);
        this.getPeopleTypeList();
    },
    methods: {
        handleSizeChange(val) {
            this.queryParams.pageSize = val;
            window.localStorage.setItem("pageSize", val);
            this.getTableData();
        },
        handleCurrentChange(val) {
            this.queryParams.pageNo = val;
            this.getTableData();
        },
        getDoorNameList(list) {
            const doorNameList = [];
            const doorNameArr = [];
            list.forEach((item) => {
                const doorName = item.doorName;
                if (doorName.length === 4) {
                    doorNameArr.push(doorName.slice(0, 2));
                } else if (doorName.length === 3) {
                    doorNameArr.push(doorName.slice(0, 1));
                }
            });
            const doorNameSet = new Set(doorNameArr);
            doorNameSet.forEach((item) => {
                const arr = [];
                list.forEach((item2) => {
                    const doorName = item2.doorName;
                    if (doorName.length === 4) {
                        if (doorName.slice(0, 2) === item) {
                            arr.push(item2);
                        }
                    } else if (doorName.length === 3) {
                        if (doorName.slice(0, 1) === item) {
                            arr.push(item2);
                        }
                    }
                });
                doorNameList.push(arr);
            });
            return doorNameList;
        },

        getPeopleTypeList() {
            this.$http
                .post("sys/dict/data/dictlist", {
                    dictType: "resident_category",
                })
                .then((res) => {
                    const { code, data } = res.data;
                    if (code === 0) {
                        this.peopleTypeList = data;
                    }
                });
        },

        getUnitList(id) {
            this.$http
                .get(`/actual/base/streetOverview/getUnitHouseList?unitId=` + id)
                .then((res) => {
                    const {
                        code,
                        data: { houseList, unitInfo },
                    } = res.data;
                    if (code === 0) {
                        let unitInfos = unitInfo || {};
                        const freeHomeArr = new Array(unitInfos.totalFloorNum).fill([
                            {},
                            {},
                            {},
                        ]);
                        this.freeHomeArr = freeHomeArr;
                        this.homeMsg = unitInfos;
                        this.homeText =
                            (unitInfos.quartersName ? unitInfos.quartersName : "") +
                            (unitInfos.buildingName ? unitInfos.buildingName : "") +
                            (unitInfos.unitNum ? unitInfos.unitNum + "单元" : "");
                        this.houseMountArr = this.getDoorNameList(houseList);
                        console.log(this.houseMountArr);
                        if (this.houseMountArr.length > 0) {
                            this.flexWidth = this.houseMountArr[0].length * 58;
                        }
                    }
                });
        },

        getTableData(id) {
            // const idx = "812295ba44c594fc85a808f67b7a8aa4";
            this.loading = true;
            this.$http
                .get(
                    "/actual/base/streetOverview/getUnitHouseOverviewList?" +
                    this.$paramsFormat(this.queryParams)
                )
                .then((res) => {
                    const {
                        code,
                        data: { list, total },
                    } = res.data;
                    if (code === 0) {
                        this.list = list;
                        this.total = total;
                        this.loading = false;
                    } else {
                        this.loading = false;
                    }
                });
        },



        getList(buid) {
            // const homeType = this.$route.query.typeB;
            console.log(this.level);
            if (this.level == "building") {
                // 1514914015259979777
                this.$http
                    .get(
                        `/actual/base/streetOverview/getUnitListByBuilding?buildingId=` +
                        this.buildingId
                    )
                    .then((res) => {
                        const { code, data } = res.data;
                        if (code === 0) {
                            this.buildingList = data;
                            this.homeText =
                                this.buildingList[0].buildingName +
                                this.buildingList[0].unitName;
                            if (this.buildingList && this.buildingList.length > 0) {
                                if (buid) {
                                    this.buildingList.forEach((item, i) => {
                                        if (item.id === buid) {
                                            item.ifActive = true;
                                            this.getUnitList(item.id);
                                            this.getTableData(item.id);
                                        } else {
                                            item.ifActive = false;
                                        }
                                    });
                                } else {
                                    this.buildingList.forEach((item, i) => {
                                        if (i === 0) {
                                            item.ifActive = true;
                                            this.getUnitList(item.id);
                                            this.getTableData(item.id);
                                        } else {
                                            item.ifActive = false;
                                        }
                                    });
                                }
                            }
                            this.loading = false;
                        } else {
                            this.loading = false;
                        }
                    });
            } else {
                this.getUnitList(this.queryParams.unitId);
                this.getTableData(this.queryParams.unitId);
            }
        },

        getRentFlag(type) {
            const rentFlag = new Map([
                ["0", "出租"],
                ["1", "自住"],
                ["2", "闲置"],
                ["3", "未售出"],
            ]);
            return rentFlag.get(type);
        },

        getHouseType(type) {
            const houseTypeMap = new Map([
                ["1", "楼房"],
                ["2", "平房"],
                ["3", "别墅"],
            ]);
            return houseTypeMap.get(type);
        },

        getHomeTypesMap(item) {
            const homeTypeMap = new Map([
                ["PARTY_FLAG", "dy"],
                ["SUBSISTENCE_ALLOWANCE_FLAG", "dbry"],
                ["ENSURE_HOUSE_FLAG", "bzfry"],
                ["UNEMPLOYED_FLAG", "syry"],
                ["FERTILE_WOMAN_FLAG", "ylfn"],
                ["VETERAN_FLAG", "tyjr"],
                ["UNITED_FRONT_FLAG", "tzry"],
                ["PETITION_OFFICER_FLAG", "xfry"],
                ["VOLUNTEER_FLAG", "zyz"],
                ["oldPeopleFlag", "lnr"],
                ["EMPTY_NESTER_FLAG", "kclr"],
                ["SPECIAL_SUPPORT_FLAG", "tfry"],
                ["DISABLED_FLAG", "snry"],
                ["DEMENTED_FLAG", "szry"],
                ["DISABILITY_FLAG", "cjr"],
                ["SERIOUS_ILLNESS_FLAG", "dbry"],
                ["CHRONIC_DISEASE_FLAG", "mxbry"],
                ["SPECIAL_CROWD_FLAG", "tsry"],
                ["TENANT_FLAG", "zh"],
                ["FLOATING_FLAG", "ldry"],
                ["LIVE_ALONE_FLAG", "kclr"],
                ["PUBLIC_WELFARE_FLAG", "gyg"],
            ]);
            console.log(item);
            console.log(homeTypeMap.get(item));
            return homeTypeMap.get(item);
        },

        chooseNav(item) {
            let buildList = [...this.buildingList];
            this.homeText = item.buildingName + item.unitName;
            buildList.forEach((d) => {
                if (item.id === d.id) {
                    d.ifActive = true;
                    this.getUnitList(item.id);
                    this.getTableData(item.id);
                } else {
                    d.ifActive = false;
                }
            });
            this.buildingList = buildList;
        },
    },
    computed: {
        tableHeight() {
            return this.clientHeight - 60 - 80 - 80 ;
        },
        ...mapGetters(["clientHeight", "env"]),
    },

};
</script>
  
<style scoped lang="scss">
.table{
    margin-top: 16px;
}
@mixin radio {
    display: inline-block;
    width: 90px;
    height: 24px;
    opacity: 0.8;
    border-radius: 11px;
    text-align: center;
    line-height: 22px;
    margin-left: 15px;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 500;
}

@mixin navListCommon {
    min-width: 120px;
    height: 36px;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 500;
    margin-right: 4px;
    text-align: center;
    line-height: 36px;
    cursor: pointer;
}

@mixin homeCommon {
    height: 58px;
    background-size: 100% 100%;
    display: flex;
    flex: 0 0 48px;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #fff;

    &:not(:last-child) {
        margin-right: 20px;
    }
}

.suolue {
    width: 80px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
::v-deep .pagination{
    width: 100%;
    .el-pagination{
        display: flex;
        width: 100%;
        position: relative;
        .el-pagination__rightwrapper{
            position: absolute;
            right: 20px; 
        }
    }
}
.top-nav-list {
    display: flex;
    margin-bottom: 16px;

    .top-nav-item {
        @include navListCommon;
        background-image: url("~@/assets/images/home/noChooseMain.png");
        color: #96b1ce;
    }

    .top-nav-itemAC {
        @include navListCommon;
        background-image: url("~@/assets/images/home/chooseMain.png");
        color: #fff;
    }
}

.homeWrap {
    .bread {
        margin-bottom: 16px;
    }

    .apar_top {
        width: 100%;

        img {
            width: 100%;
        }
    }

    .apartment {
        display: flex;
        align-items: flex-end;
        justify-content: center;
        margin-top: 60px;

        .apar_comtent {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;

            .apar_center {
                min-width: 288px;
                max-width: 500px;
                overflow: auto;
                background: #f3f5fb;
                padding: 30px 30px 10px 30px;
                display: flex;
                // align-items: flex-end;
                flex-direction: column-reverse;
                height: calc(100vh - 376px);
                .apar_center_flex {
                    // width: 100%;
                    display: flex;
                    flex-wrap: wrap-reverse;
                    justify-content: center;
                }

                .floor {
                    width: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    margin-bottom: 20px;

                    .households {
                        @include homeCommon;
                        background: url("@/assets/images/home/hasPeopleS.png") no-repeat;
                    }

                    .dangerHome,
                    .dangerPeople {
                        @include homeCommon;
                        background: url("@/assets/images/home/dangerHomeBgS.png") no-repeat;
                    }

                    .freeHome {
                        @include homeCommon;
                        background: url("@/assets/images/home/freeHomeS.png") no-repeat;
                    }
                }
            }

            .dangerClass {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;

                div:first-child {
                    margin-bottom: 5px;
                    font-weight: bold;
                }
            }

            .apar_bottom {
                width: 100%;
                margin-top: -1px;

                img {
                    width: 100%;
                }
            }
        }

        // .apar_right {
        //   margin-left: -3px;
        // }
    }

    .more {
        font-size: 14px;
        font-weight: 400;
        color: #a0cdff;
        cursor: pointer;
    }

    .bg {
        margin-bottom: 0px;
        background: linear-gradient(144deg,
                rgba(46, 164, 255, 0.1) 0%,
                rgba(13, 143, 243, 0) 100%);

        .miniGrid_red {
            @include radio;
            background: rgba(249, 86, 25, 0.2);
            border: 1px solid #f95619;
            color: #f95619;
        }

        .miniGrid_green {
            @include radio;
            background: rgba(249, 86, 25, 0.2);
            border: 1px solid green;
            color: green;
        }

        .miniGrid_yellow {
            @include radio;
            background: rgba(249, 86, 25, 0.2);
            border: 1px solid yellow;
            color: yellow;
        }
    }

    .mount {
        margin-top: 25px;
    }

    .screen {
        margin: 5px 0 40px;

        .el-select,
        .el-input {
            width: 150px;
            margin-right: 4px;
            border: 1px solid #126ac5;
            border-radius: 2px;

            /deep/ .el-input__inner {
                background: none;
                border: none;
                color: #fff;
            }
        }


        .btn {
            margin-left: 46px;
            height: 32px;
        }
    }
}
</style>
  