<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内容区高度
    getHeight() {
      this.lpbContentHight = window.innerHeight - 190;
    },
    //图例的展开收起
    legendToggle() {
      this.legendToggleFlag = !this.legendToggleFlag;
    },
    //切换房屋状态
    handleChoosedH(bsms, color) {
      this.$refs.lpbContent.changeChoosed(bsms, color);
    },
    //获取各项单元状态统计数据
    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;
            }
          });
        }
      });
    },
    // 获取房屋用途和房屋性质及缺失项统计数据
    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>