<template>
  <div class="homeWrap">
    <div class="bread">
      <bread-crumb
        :list="[
          {
            path: '/dataBoard/overview/index',
            name: '概览',
          },
          {
            name: homeText ? homeText : '',
          },
        ]" />
    </div>
    <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">
      <el-col :span="8">
        <div class="bg">
          <Title :text="homeText ? homeText : ''">
            <span v-if="homeMsg && homeMsg.type" :class="[homeMsg.type === 'red' ? 'miniGrid_red' : homeMsg.type === 'yellow' ? 'miniGrid_yellow' : 'miniGrid_green']">{{ homeMsg.type === "red" ? "红" : homeMsg.type === "yellow" ? "黄" : "绿" }}色微网格</span>
          </Title>
        </div>
        <!-- <div class="mount">
          <people-mount />
        </div> -->
        <div class="apartment">
          <div 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: 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/dangerHome.png')" alt="" />
                      </div>
                      <div v-if="itm.importanceNum > 0" class="dangerClass">
                        <div>{{ itm.doorName }}</div>
                        <img :src="require('@/assets/images/home/dangerPeople.png')" alt="" />
                      </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/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="screen">
          <el-form :model="queryParams" inline>
            <el-input v-model.trim="queryParams.ownerName" size="small" placeholder="按房主姓名"></el-input>
            <el-input v-model.trim="queryParams.ownerPhone" size="small" placeholder="按房主电话"></el-input>
            <el-input v-model.trim="queryParams.ownerIdCard" size="small" placeholder="按房主身份证号"></el-input>
            <el-select popper-class="selectPopClass" clearable v-model="queryParams.residentTag" size="small" placeholder="居民类型">
              <el-option v-for="item in peopleTypeList" :key="item.value" :label="item.label" :value="item.value"> </el-option>
            </el-select>
            <el-select popper-class="selectPopClass" clearable v-model="queryParams.riskyFlag" size="small" placeholder="满意度风险家庭">
              <el-option v-for="item in riskHomeList" :key="item.value" :label="item.label" :value="item.value"> </el-option>
            </el-select>

            <el-button size="small" class="btn" type="primary" @click="search">查询</el-button>
          </el-form>
        </div>
        <div class="table">
          <el-table :data="list" v-loading="loading" height="500" element-loading-text="加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 21, 64, 0.3)">
            <el-table-column label="序号" type="index" width="80" />
            <el-table-column prop="doorName" width="100" label="门牌号" />
            <el-table-column prop="quartersName" width="120" show-overflow-tooltip label="所属小区" />
            <el-table-column prop="buildingName" width="120" show-overflow-tooltip label="所属楼栋" />
            <el-table-column prop="buildingUnitName" width="120" show-overflow-tooltip label="所属单元" />
            <el-table-column prop="houseCode" width="120" label="房屋编码" />
            <el-table-column prop="rentFlag" width="120" 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="120" label="房主姓名" />
            <el-table-column prop="ownerPhone" width="120" show-overflow-tooltip label="房主电话">
              <template slot-scope="scope">
                {{ $sensitive(scope.row.ownerPhone, 3, 7) }}
              </template>
            </el-table-column>
            <el-table-column prop="riskyNum" width="170" label="满意度风险家庭">
              <template slot="header"> <img :src="require('@/assets/images/home/dangerHome.png')" alt="" /> 满意度风险家庭 </template>
              <template slot-scope="scope">
                <span style="color: #f95619" v-if="+scope.row.riskyNum > 0">是</span>
                <span style="color: #3cf5ff" v-else>否</span>
              </template>
            </el-table-column>
            <el-table-column prop="importanceNum" width="140" label="重点人员">
              <template slot="header"> <img :src="require('@/assets/images/home/dangerPeople.png')" alt="" /> 重点人员 </template>
              <template slot-scope="scope">
                <span style="color: #f95619" v-if="+scope.row.importanceNum > 0">是</span>
                <span style="color: #3cf5ff" v-else>否</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="90" 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>
          <Pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize" @pagination="getTableData" />
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Pagination from "@/views/dataBoard/satisfactionEval/components/Pagination";
import Title from "./Title/index.vue";
import BreadCrumb from "@/views/dataBoard/cpts/personnel/components/Breadcrumb/index.vue";
import PeopleMount from "./PeopleMount/index.vue";

export default {
  name: "homeDetails",
  components: {
    Pagination,
    Title,
    BreadCrumb,
    PeopleMount,
  },
  data() {
    return {
      total: 0,
      queryParams: {
        pageNo: 1,
        pageSize: 10,
        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: "2" },
        // ],
      ],
    };
  },
  watch: {},
  mounted() {
    const buId = this.$route.query.buId || null;
    this.getList(buId);
    // this.getTableData(this.$route.query.id);
    this.getPeopleTypeList();
  },
  methods: {
    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 || {};
          this.homeMsg = unitInfos;
          this.homeText = (unitInfos.quartersName ? unitInfos.quartersName : "") + (unitInfos.buildingName ? unitInfos.buildingName : "") + (unitInfos.unitNum ? unitInfos.unitNum + "单元" : "");
          this.houseMountArr = this.getDoorNameList(houseList);
          if (this.houseMountArr.length > 0) {
            this.flexWidth = this.houseMountArr[0].length * 58;
          }
        }
      });
    },

    getTableData(id) {
      this.queryParams.unitId = id;
      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;
        }
      });
    },

    search() {
      this.queryParams.pageNo = 1;
      this.getTableData();
    },

    getList(buid) {
      const homeType = this.$route.query.typeB;
      if (homeType === "building") {
        // 1514914015259979777
        this.$http.get(`/actual/base/streetOverview/getUnitListByBuilding?buildingId=` + this.$route.query.id).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.$route.query.id);
        this.getTableData(this.$route.query.id);
      }
    },

    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);
    },

    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;
    },
  },
};
</script>

<style scoped lang="scss">
@import "@/assets/scss/dataBoard/table.scss";

@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: 10px;
  }
}

.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: 244px;
        max-width: 488px;
        height: 578px;
        overflow: auto;
        background: #caab93;
        padding: 30px 30px 10px 30px;
        display: flex;
        // align-items: flex-end;
        flex-direction: column-reverse;

        .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/hasPeople.png") no-repeat;
          }
          .dangerHome,
          .dangerPeople {
            @include homeCommon;
            background: url("@/assets/images/home/dangerHomeBg.png") no-repeat;
          }
          .freeHome {
            @include homeCommon;
            background: url("@/assets/images/home/freeHome.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;
      }
    }

    .searchSelect {
      width: 200px;
      /deep/ .el-select__tags {
        width: 200px !important;
        max-width: 200px !important;
      }
    }

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