<template>
  <div class="homeWrap">
    <div class="bread">
      <bread-crumb :list="list" />
    </div>
    <el-row :gutter="48">
      <el-col :span="8">
        <div class="bg">
          <Title :text="homeText">
            <span :class="[homeMsg.type === 'red' ? 'miniGrid_red' : homeMsg.type === 'yellow' ? 'miniGrid_yellow' : 'miniGrid_green']">红色微网格</span>
          </Title>
        </div>
        <div class="apartment">
          <div class="apar_comtent">
            <div class="apar_top">
              <img src="@/assets/images/home/homeTop.png" alt="/" />
            </div>
            <div class="apar_center">
              <div class="apar_center_flex">
                <div v-for="(item, index) in houseMountArr" :key="index" class="floor">
                  <div class="households" v-for="itm in item" :key="itm.id">{{ itm.doorName }}</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" 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" label="门牌号" />
            <el-table-column prop="fullName" label="所属小区" />
            <el-table-column prop="buildingId" label="所属楼栋" />
            <el-table-column prop="houseName" label="所属单元" />
            <el-table-column prop="houseCode" label="房屋编码" />
            <el-table-column prop="rentFlag" label="房屋状态">
              <template slot-scope="scope">
                <!-- 1：出租 0：自住 2：闲置 3：未售出 -->
                <span>{{ getRentFlag(scope.row.rentFlag) }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="houseType" label="房屋类型">
              <template slot-scope="scope">
                <!-- 1楼房，2平房，3别墅 -->
                <span>{{ getHouseType(scope.row.houseType) }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="ownerName" label="房主姓名" />
            <el-table-column prop="ownerPhone" label="房主电话" />
            <el-table-column label="操作" width="90" align="center">
              <template slot-scope="scope">
                <el-button type="text">查看</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!-- <div>
          <Pagination v-show="total > 0" :total="total" :page.sync="pageNum" :limit.sync="pageSize" @pagination="getList" />
        </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";
export default {
  name: "homeDetails",
  components: {
    Pagination,
    Title,
    BreadCrumb,
  },
  data() {
    return {
      //   total: 0,
      //   pageNum: 1,
      //   pageSize: 10,
      loading: false,
      homeMsg: {},
      list: [],
      homeText: "",
      houseMountArr: [
        // [
        //   { doorName: "101", id: 1 },
        //   { doorName: "102", id: 1 },
        //   { doorName: "103", id: 1 },
        //   { doorName: "104", id: 1 },
        //   { doorName: "105", id: 1 },
        // ],
        // [
        //   { doorName: "201", id: 1 },
        //   { doorName: "202", id: 1 },
        //   { doorName: "203", id: 1 },
        //   { doorName: "204", id: 1 },
        //   { doorName: "205", id: 1 },
        // ],
        // [
        //   { doorName: "301", id: 1 },
        //   { doorName: "302", id: 1 },
        //   { doorName: "303", id: 1 },
        //   { doorName: "304", id: 1 },
        //   { doorName: "305", id: 1 },
        // ],
        // [
        //   { doorName: "401", id: 1 },
        //   { doorName: "402", id: 1 },
        //   { doorName: "403", id: 1 },
        //   { doorName: "404", id: 1 },
        //   { doorName: "405", id: 1 },
        // ],
        // [
        //   { doorName: "501", id: 1 },
        //   { doorName: "502", id: 1 },
        //   { doorName: "503", id: 1 },
        //   { doorName: "504", id: 1 },
        //   { doorName: "505", id: 1 },
        // ],
        // [
        //   { doorName: "601", id: 1 },
        //   { doorName: "602", id: 1 },
        //   { doorName: "603", id: 1 },
        //   { doorName: "604", id: 1 },
        //   { doorName: "605", id: 1 },
        // ],
        // [
        //   { doorName: "701", id: 1 },
        //   { doorName: "702", id: 1 },
        //   { doorName: "703", id: 1 },
        //   { doorName: "704", id: 1 },
        //   { doorName: "705", id: 1 },
        // ],
        // [
        //   { doorName: "801", id: 1 },
        //   { doorName: "802", id: 1 },
        //   { doorName: "803", id: 1 },
        //   { doorName: "804", id: 1 },
        //   { doorName: "805", id: 1 },
        // ],
        // [
        //   { doorName: "901", id: 1 },
        //   { doorName: "902", id: 1 },
        //   { doorName: "903", id: 1 },
        //   { doorName: "904", id: 1 },
        //   { doorName: "905", id: 1 },
        // ],
        // [
        //   { doorName: "1001", id: 1 },
        //   { doorName: "1002", id: 1 },
        //   { doorName: "1003", id: 1 },
        //   { doorName: "1004", id: 1 },
        //   { doorName: "1005", id: 1 },
        // ],
        // [
        //   { doorName: "1101", id: 1 },
        //   { doorName: "1102", id: 1 },
        //   { doorName: "1103", id: 1 },
        //   { doorName: "1104", id: 1 },
        //   { doorName: "1105", id: 1 },
        // ],
        // [
        //   { doorName: "1201", id: 1 },
        //   { doorName: "1202", id: 1 },
        //   { doorName: "1203", id: 1 },
        //   { doorName: "1204", id: 1 },
        //   { doorName: "1205", id: 1 },
        // ],
        // [
        //   { doorName: "1301", id: 1 },
        //   { doorName: "1302", id: 1 },
        //   { doorName: "1303", id: 1 },
        //   { doorName: "1304", id: 1 },
        //   { doorName: "1305", id: 1 },
        // ],
        // [
        //   { doorName: "1401", id: 1 },
        //   { doorName: "1402", id: 1 },
        //   { doorName: "1403", id: 1 },
        //   { doorName: "1404", id: 1 },
        //   { doorName: "1405", id: 1 },
        // ],
        // [
        //   { doorName: "1501", id: 1 },
        //   { doorName: "1502", id: 1 },
        //   { doorName: "1503", id: 1 },
        //   { doorName: "1504", id: 1 },
        //   { doorName: "1505", id: 1 },
        // ],
      ],
    };
  },
  mounted() {
    this.getList();
  },
  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;
    },

    getList() {
      this.loading = true;
      this.$http.get(`/actual/base/streetOverview/getUnitHouseList?unitId=1689829742860771329`).then((res) => {
        const {
          code,
          data: { houseList, unitInfo },
        } = res.data;
        if (code === 0) {
          this.list = houseList;
          this.homeMsg = unitInfo;
          this.homeText = unitInfo.quartersName + unitInfo.buildingName + unitInfo.unitNum + "单元";
          this.houseMountArr = this.getDoorNameList(this.list);
          this.loading = false;
        } else {
          this.loading = false;
        }
      });
    },

    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);
    },
  },
};
</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;
}
.homeWrap {
  .bread {
    margin-bottom: 25px;
  }
  .apar_top {
    width: 100%;
    img {
      width: 100%;
    }
  }
  .apartment {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    .apar_comtent {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      .apar_center {
        min-width: 244px;
        max-width: 488px;
        height: 584px;
        overflow: auto;
        background: url("@/assets/images/home/homeCenter.png") no-repeat;
        background-size: 100% 100%;
        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 {
            height: 58px;
            background: url("@/assets/images/home/hasPeople.png") no-repeat;
            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: #7fceff;
            margin-right: 10px;
          }
        }
      }
      .apar_bottom {
        width: 244px;
        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: 50px;
    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 #f95619;
      color: #f95619;
    }
    .miniGrid_yellow {
      @include radio;
      background: rgba(249, 86, 25, 0.2);
      border: 1px solid #f95619;
      color: #f95619;
    }
  }
}
</style>
