<!--
 * @Description:
 * @Autor: renchao
 * @LastEditTime: 2023-07-19 09:50:51
-->
<template>
  <div class="edit">
    <el-tabs type="card" v-model="activeName">
      <el-tab-pane label="楼盘页面" name="first"></el-tab-pane>
      <el-tab-pane label="单元列表页面" name="second"></el-tab-pane>
    </el-tabs>
    <div
      class="tab-content"
      v-if="activeName == 'first'"
      ref="tabContent"
      :style="{ height: lpbContentHight + 'px' }"
      v-show="bjztFlag">
      <!-- 楼盘表主体 -->
      <div class="lp-overview" :style="{ width: lpbContentwidth + 'px' }">
        <lpbContent
          ref="lpbContent"
          :zrzbsm="formData.bsm"
          :key="time"></lpbContent>
      </div>
      <!-- 右侧图例 -->
      <div class="lp-legend">
        <div class="handleCol">
          <div class="btn" @click="legendToggle">
            <i v-show="!legendToggleFlag" class="el-icon-d-arrow-left"></i>
            <i v-show="legendToggleFlag" class="el-icon-d-arrow-right"></i>
          </div>
          <div
            :class="selectedZt == 'dyzt' ? 'dyzt selectedZt' : 'dyzt'"
            @click="selectedZt = 'dyzt'">
            <span>单元状态</span>
          </div>
          <div
            :class="selectedZt == 'fwxz' ? 'fwxz selectedZt' : 'fwxz'"
            @click="selectedZt = 'fwxz'">
            <span>房屋性质</span>
          </div>
          <div
            :class="selectedZt == 'fwyt' ? 'fwyt selectedZt' : 'fwyt'"
            @click="selectedZt = 'fwyt'">
            <span>房屋用途</span>
          </div>
          <div
            :class="selectedZt == 'qsx' ? 'qsx selectedZt' : 'qsx'"
            @click="selectedZt = 'qsx'">
            <span>缺失项</span>
          </div>
        </div>
        <div
          class="legendTable-wrap"
          :style="{ width: legendToggleFlag ? '200px' : '0' }">
          <table
            class="legendTable"
            v-show="selectedZt == 'dyzt'"
            cellspacing="1"
            cellpadding="1"
            border="1">
            <tr>
              <th>状态</th>
              <th>套数</th>
              <th>面积</th>
            </tr>
            <tr
              v-for="(item, index) in dyztList"
              :key="index"
              class="cp"
              @click="handleChoosedH(item.bsms, item.color)">
              <td>
                <i
                  class="fa fa-circle"
                  :style="{ backgroundColor: item.color }"></i>{{ item.name }}
              </td>
              <td>{{ item.ts }}</td>
              <td>{{ item.mj }}</td>
            </tr>
          </table>

          <table
            class="legendTable"
            v-show="selectedZt == 'fwxz'"
            cellspacing="1"
            cellpadding="1"
            border="1">
            <tr>
              <th>性质</th>
              <th>套数</th>
              <th>面积</th>
            </tr>
            <tr
              v-for="(item, index) in fwxzList"
              :key="index"
              class="cp"
              @click="handleChoosedH(item.bsms, item.color)">
              <td>
                <i
                  class="fa fa-circle"
                  :style="{ backgroundColor: item.color }"></i>{{ item.name }}
              </td>
              <td>{{ item.ts }}</td>
              <td>{{ item.mj }}</td>
            </tr>
            <tr v-show="fwxzList.length < 1">
              <td colspan="3" class="tac">暂无数据</td>
            </tr>
          </table>

          <table
            class="legendTable"
            v-show="selectedZt == 'fwyt'"
            cellspacing="1"
            cellpadding="1"
            border="1">
            <tr>
              <th>用途</th>
              <th>套数</th>
              <th>面积</th>
            </tr>
            <tr
              v-for="(item, index) in fwytList"
              :key="index"
              class="cp"
              @click="handleChoosedH(item.bsms, item.color)">
              <td>
                <i
                  class="fa fa-circle"
                  :style="{ backgroundColor: item.color }"></i>{{ item.name }}
              </td>
              <td>{{ item.ts }}</td>
              <td>{{ item.mj }}</td>
            </tr>
            <tr v-show="fwytList.length < 1">
              <td colspan="3" class="tac">暂无数据</td>
            </tr>
          </table>

          <table
            class="legendTable"
            v-show="selectedZt == 'qsx'"
            cellspacing="1"
            cellpadding="1"
            border="1">
            <tr>
              <th>数据缺失项</th>
              <th>套数</th>
              <th>面积</th>
            </tr>
            <tr
              v-for="(item, index) in qsxList"
              :key="index"
              class="cp"
              @click="handleChoosedH(item.bsms, item.color)">
              <td>
                <i
                  class="fa fa-circle"
                  :style="{ backgroundColor: item.color }"></i>{{ item.name }}
              </td>
              <td>{{ item.ts }}</td>
              <td>0</td>
            </tr>
            <tr v-show="qsxList.length < 1">
              <td colspan="3" class="tac">暂无数据</td>
            </tr>
          </table>
        </div>
      </div>
    </div>
    <!--    单元列表页面-->
    <selectZrzH v-else :sqywInfo="formData" />
  </div>
</template>

<script>
  import lpbContent from "./lpbContent/index";
  import selectZrzH from "../ywbl/ywsq/components/selectZrzH";
  import { getLpbFwytAndQlxz, getLpbQsxtj, getLpbTj } from "@/api/lpcx.js";
  export default {
    name: "lpb",
    props: {
      formData: {
        type: Object,
        default: {},
      },
    },
    components: {
      lpbContent,
      selectZrzH,
    },
    data () {
      return {
        activeName: "first",
        bsms: [],
        dialogVisible: false,
        scyclx: "0", //1是实测  0是预测
        menuType: "",
        selectedZt: "dyzt", //图例选中项，默认选中单元状态
        dyztList: [
          {
            name: "未确权",
            color: "#83AAFE",
            ts: "12",
            mj: "1633",
          },
          {
            name: "已确权",
            color: "#6EDEE1",
            ts: "22",
            mj: "3109",
          },
          {
            name: "已备案",
            color: "#8ADC88",
            ts: "3",
            mj: "409",
          },
          {
            name: "预抵押",
            color: "#F2AD67",
            ts: "11",
            mj: "1466",
          },
          {
            name: "在建抵押",
            color: "#F191C8",
            ts: "13",
            mj: "1792",
          },
          {
            name: "抵押",
            color: "#FF8282",
            ts: "14",
            mj: "13",
          },
          {
            name: "查封",
            color: "#D7CECF",
            ts: "9",
            mj: "1436",
          },
          {
            name: "异议",
            color: "#D4A3EB",
            ts: "34",
            mj: "4342",
          },
          {
            name: "限制",
            color: "#A5A3FB",
            ts: "2",
            mj: "285",
          },
        ],
        fwxzList: [],
        fwytList: [],
        qsxList: [],
        legendToggleFlag: false,
        lpbContentHight: "",
        lpbContentwidth: "",
        time: "",
        dyztBsmList: {}, //单元状态bsmList
        bjztFlag: true,
        qsztList: [],
      };
    },
    created () {
      window.addEventListener("resize", this.getHeight);
      console.log(this.formData);
      this.getHeight();
    },
    mounted () {
      //获取各项单元状态的户bsm
      this.getDyztBsmList();
      //获取房屋用途统计数据
      this.getLpbFwytAndQlxz();
      // 楼盘表绘制区域宽度计算：楼盘表区域宽度-图例宽度34-滚动条宽度6
      setTimeout(() => {
        this.lpbContentwidth =
          (document.documentElement.clientWidth || document.body.clientWidth) -
          340 -
          34 -
          6;
      }, 100);
    },
    methods: {
      /* handleTabClick(event){
        if(event.name=="first"){
          this.$router.push({
            path:"/lpb/index",
          })
        }else if(event.name=="second"){
          this.$router.push({
          path:"/ywbl/ywsq/components/selectAllHInfo",
          })
        }
        },*/
      //获取高度计算lpb内容区高度
      /**
       * @description: 获取高度计算lpb内容区高度
       * @author: renchao
       */
      getHeight () {
        this.lpbContentHight = window.innerHeight - 190;
      },
      //图例的展开收起
      /**
       * @description: 图例的展开收起
       * @author: renchao
       */
      legendToggle () {
        this.legendToggleFlag = !this.legendToggleFlag;
      },
      //切换房屋状态
      /**
       * @description: 切换房屋状态
       * @param {*} bsms
       * @param {*} color
       * @author: renchao
       */
      handleChoosedH (bsms, color) {
        this.$refs.lpbContent.changeChoosed(bsms, color);
      },
      //获取各项单元状态统计数据
      /**
       * @description: 获取各项单元状态统计数据
       * @author: renchao
       */
      getDyztBsmList () {
        getLpbTj(this.formData.bsm).then((res) => {
          if (res.code === 200) {
            this.dyztList = res.result;
            this.dyztList.splice(1, 0, this.dyztList[8]);
            this.dyztList.pop();
            this.dyztList.forEach((item) => {
              item.ts = item.bsms.length;
              switch (item.name) {
                case "Qqzt":
                  item.color = "#6EDEE1";
                  item.name = "已确权";
                  break;
                case "Wqqzt":
                  item.color = "#83AAFE";
                  item.name = "未确权";
                  break;
                case "Bazt":
                  item.color = "#8ADC88";
                  item.name = "已备案";
                  break;
                case "Ydyzt":
                  item.color = "#F2AD67";
                  item.name = "预抵押";
                  break;
                case "Zjgcdyzt":
                  item.color = "#F191C8";
                  item.name = "在建抵押";
                  break;
                case "Dyzt":
                  item.color = "#FF8282";
                  item.name = "抵押";
                  break;
                case "Cfzt":
                  item.color = "#D7CECF";
                  item.name = "查封";
                  break;
                case "Yyzt":
                  item.color = "#D4A3EB";
                  item.name = "异议";
                  break;
                case "Xzzt":
                  item.color = "#A5A3FB";
                  item.name = "限制";
                  break;
                default:
                  break;
              }
            });
          }
        });
      },
      // 获取房屋用途和房屋性质及缺失项统计数据
      /**
       * @description: 获取房屋用途和房屋性质及缺失项统计数据
       * @author: renchao
       */
      getLpbFwytAndQlxz () {
        getLpbFwytAndQlxz(this.formData.bsm).then((res) => {
          if (res.code === 200) {
            // this.fwytList = res.result
            this.fwytList = res.result.fwyt;
            this.fwxzList = res.result.qlxz;
            if (this.fwytList.length > 0) {
              this.fwytList.forEach((item) => {
                item.color = "#2591FD";
                item.ts = item.bsms.length;
              });
            }
            if (this.fwxzList.length > 0) {
              this.fwxzList.forEach((item) => {
                item.color = "#2591FD";
                item.ts = item.bsms.length;
              });
            }
          }
        });
        getLpbQsxtj(this.formData.bsm).then((res) => {
          if (res.code === 200) {
            this.qsxList = [
              {
                name: "坐落",
                bsms: res.result.zl.bsms,
                color: "#2591FD",
                ts: res.result.zl.bsms.length,
              },
              {
                name: "分层分户图",
                bsms: res.result.fcfht.bsms,
                color: "#2591FD",
                ts: res.result.fcfht.bsms.length,
              },
              {
                name: "室号",
                bsms: res.result.shbw.bsms,
                color: "#2591FD",
                ts: res.result.shbw.bsms.length,
              },
            ];
          }
        });
      },
    },
    computed: {},
    destroyed () {
      window.removeEventListener("resize", this.getHeight);
    },
    watch: {
      //树结构和图例伸缩时修改楼盘表主要内容区宽度
      legendToggleFlag (n) {
        if (n) {
          this.lpbContentwidth -= 204;
        } else {
          this.lpbContentwidth += 204;
        }
      },
      selectedZt (n) {
        this.legendToggleFlag = true;
      },
    },
  };
</script>
<style scoped lang="scss">
  table {
    border-width: 0;
    border-collapse: collapse;
    border-spacing: 0;
  }
  .edit {
    height: 100%;
    background-color: #f4f9ff;
    .tab-content {
      border: 1px solid #dedede;
      border-left: 0;
      background-color: #ffffff;
      display: flex;
      &::-webkit-scrollbar {
        width: 1px;
      }
      .lp-tree {
        height: 100%;
        overflow: hidden;
        transition: 0.5s;
        .treeData {
          margin-top: 20px;
          margin-left: 26px;
          float: left;
        }
      }
      .w0 {
        width: 0;
      }
      .w260 {
        width: 260px;
      }
      .lp-overview {
        transition: 0.5s;
        flex: 1;
        border: 1px solid rgb(236, 236, 236);
        border-top: 0;
        border-bottom: 0;
        margin-right: 10px;
        box-sizing: border-box;
      }

      .lp-legend {
        transition: 0.5s;
        height: 100%;
        font-size: 14px;
        .handleCol {
          width: 34px;
          float: right;
          height: 100%;
          .btn {
            cursor: pointer;
            height: 40px;
            line-height: 40px;
            text-align: center;
            background-color: #5a78de;
            color: #fff;
            border-bottom: 1px solid #e6e6e6;
          }
          .dyzt,
          .fwxz,
          .fwyt,
          .qsx {
            height: 122px;
          }
          .dyzt,
          .fwxz,
          .fwyt,
          .qsx {
            cursor: pointer;
            border-bottom: 1px solid #e6e6e6;
            border-left: 1px solid #e6e6e6;
            span {
              text-align: center;
              height: 100%;
              -webkit-writing-mode: vertical-rl;
              writing-mode: vertical-rl;
              line-height: 34px;
              letter-spacing: 2px;
            }
          }
          .selectedZt {
            // background-color: #5A78DE;
            color: #3d59c4;
          }
        }
        .legendTable-wrap {
          transition: 0.5s;
          float: right;
          overflow: hidden;
          .legendTable {
            margin-top: -1px;
            .fa-circle {
              display: inline-block;
              width: 12px;
              height: 12px;
              border-radius: 50%;
              vertical-align: middle;
              margin-right: 4px;
            }
            tr {
              height: 40px;
              line-height: 40px;
              border-color: #d8e0ea !important;
              th:first-child {
                width: 80px;
              }
              th {
                width: 60px;
                height: 40px;
                white-space: nowrap;
                background-color: #eceef2;
              }
              td {
                height: 40px;
                text-align: center;
                white-space: nowrap;
              }
              td:first-child {
                text-align: left;
                text-indent: 2px;
              }
            }
          }
        }
      }
    }
  }
</style>