<template>
  <dialogBox
    title="登记簿信息"
    width="1200px"
    @closeDialog="closeDialog"
    v-model="value"
    :isReset="false"
    :isSave="false"
  >
    <div class="content">
      <div class="left">
        <el-tree
          ref="tree"
          :data="treedata"
          :props="defaultProps"
          @node-click="handleNodeClick"
          :default-expand-all="true"
          :expand-on-click-node="false"
          node-key="id"
          :default-checked-keys="[showTab]"
        ></el-tree>
      </div>
      <div class="right">
        <components :is="showTab" :showType="showType"></components>
      </div>
    </div>
  </dialogBox>
</template>
<script>
import { mapGetters } from "vuex";
import djbfm from "./djbfm.vue";
import zdxx from "./zdxx.vue";
import bdcqldjml from "./bdcqldjml.vue";
import bdcqljqtsx from "./bdcqljqtsx.vue";
import djxxTable from "./djxxTable.vue";

export default {
  name: "djbxxDialog",
  components: {
    djbfm,
    zdxx,
    bdcqldjml,
    bdcqljqtsx,
    djxxTable,
  },
  props: {
    value: { type: Boolean, default: false },
  },
  data() {
    return {
      treedata: [
        {
          id: "djbfm",
          tabs: "djbfm",
          label: "登记簿封面",
          children: [
            {
              id: "zdxx",
              tabs: "zdxx",
              label: "宗地信息",
            },
            {
              id: "bdcqldjml",
              tabs: "bdcqldjml",
              label: "不动产权利登记目录",
              children: [
                {
                  id: "bdcqljqtsx",
                  tabs: "bdcqljqtsx",
                  label: "不动产权利及其他事项",
                  children: [
                    {
                      id: "gyjsydsyq",
                      tabs: "djxxTable",
                      label: "国有建设用地使用权(临:0，现:0，历:0)",
                      type: "JSYDSYQ",
                    },
                    {
                      id: "dyaq",
                      tabs: "djxxTable",
                      label: "抵押权(临:0，现:0，历:0)",
                      type: "DYAQ",
                    },
                    {
                      id: "dyiq",
                      tabs: "djxxTable",
                      label: "地役权(临:0，现:0，历:0)",
                      type: "DYIQ",
                    },
                    {
                      id: "ygdj",
                      tabs: "djxxTable",
                      label: "预告登记(临:0，现:0，历:0)",
                      type: "YGDJ",
                    },
                    {
                      id: "yydj",
                      tabs: "djxxTable",
                      label: "异议登记(临:0，现:0，历:0)",
                      type: "YYDJ",
                    },
                    {
                      id: "cfdj",
                      tabs: "djxxTable",
                      label: "查封登记(临:0，现:0，历:0)",
                      type: "CFDJ",
                    },
                  ],
                },
              ],
            },
          ],
        },
      ],
      defaultProps: {
        children: "children",
        label: "label",
      },
      showTab: "djxxTable", // 选中状态,根据表格中权利类型判断
      showType: "JSYDSYQ",
    };
  },
  computed: {
    ...mapGetters(["djbxx"]),
  },
  watch: {
    djbxx: {
      handler(newVlue) {
        if (newVlue) {
          var qszts = newVlue.detail.qszts;
          let isZd = newVlue.djbfm.zd;
          let arr = [
            "QSZT_JSYDSYQ",
            "QSZT_DYAQ",
            "QSZT_DYIQ",
            "QSZT_YGDJ",
            "QSZT_YYDJ",
            "QSZT_CFDJ",
          ];
          if (!isZd) {
            // 判断是否是宗地
            arr[0] = "QSZT_FDCQ2";
            this.treedata[0].children[1].children[0].children[0].type = FDCQ2;
          }
          arr.forEach((item, index) => {
            let label =
              this.treedata[0].children[1].children[0].children[
                index
              ].label.split(":")[0];
            this.treedata[0].children[1].children[0].children[index].label =
              label + ":" +
              (qszts[item][0] || 0) +
              "，现:" +
              (qszts[item][1] || 0) +
              "，历:" +
              (qszts[item][2] || 0) +
              ")";
          });
        }
      },
      immediate: true,
    },
  },
  methods: {
    closeDialog() {
      this.$emit("input", false);
      // 关闭时清空值
      this.$store.dispatch("djbxx/setDjbxx", null);
    },
    handleNodeClick(data, node, elem) {
      this.showTab = data.tabs;
      this.showType = data.type ? data.type : "";
    },
  },
};
</script>
<style scoped lang="scss">
.content {
  width: 100%;
  height: 100%;
  display: flex;
  .left {
    width: 256px;
    height: 704px;
    background-color: #f5f5f5;
    color: #333;
    border: 1px solid rgb(228, 228, 228);
  }
  .right {
    width: calc(100% - 256px);
    height: 704px;
    // overflow-y: scroll;
    overflow: auto;
    background-color: #f5f5f5;
  }
}

/deep/ .expanded.el-tree-node__expand-icon,
/deep/ .el-tree-node__expand-icon {
  visibility: hidden;
}
/deep/ .el-tree-node__content {
  border: 1px solid rgb(228, 228, 228);
  height: 45px;
}
/deep/ .el-tree-node:focus > .el-tree-node__content {
  background-color: #f5f5f5;
  color: #0079fe;
  border-right: 4px solid #0079fe;
}
/deep/.el-tree-node {
  white-space: pre-wrap;
}
/deep/ .is-current > .el-tree-node__content {
  background-color: #f5f5f5;
  color: #0079fe;
  border-right: 4px solid #0079fe;
}
</style>