<template>
  <dialogBox
    title="登记簿信息"
    width="1200px"
    @closeDialog="closeDialog"
    v-model="value"
    :isReset="false"
    :isSave="false"
  >
    <div class="content">
      <div class="left">
        <el-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"></components>
      </div>
    </div>
  </dialogBox>
</template>
<script>
import djbfm from "./djbfm.vue";
import zdxx from "./zdxx.vue";
import bdcqldjml from "./bdcqldjml.vue";
import bdcqljqtsx from "./bdcqljqtsx.vue";
import gyjsydsyq from "./gyjsydsyq.vue";
import dyaq from "./dyaq.vue";
import dyiq from "./dyiq.vue";
import ygdj from "./ygdj.vue";
import yydj from "./yydj.vue";
import cfdj from "./cfdj.vue";

export default {
  name: "djbxxDialog",
  components: {
    djbfm,
    zdxx,
    bdcqldjml,
    bdcqljqtsx,
    gyjsydsyq,
    dyaq,
    dyiq,
    ygdj,
    yydj,
    cfdj,
  },
  props: {
    value: { type: Boolean, default: false },
  },
  data() {
    return {
      treedata: [
        {
          id: "djbfm",
          label: "登记簿封面",
          children: [
            {
              id: "zdxx",
              label: "宗地信息",
            },
            {
              id: "bdcqldjml",
              label: "不动产权利登记目录",
              children: [
                {
                  id: "bdcqljqtsx",
                  label: "不动产权利及其他事项",
                  children: [
                    {
                      id: "gyjsydsyq",
                      label: "国有建设用地使用权(临:0，现:0，历:0)",
                    },
                    {
                      id: "dyaq",
                      label: "抵押权(临:0，现:0，历:0)",
                    },
                    {
                      id: "dyiq",
                      label: "地役权(临:0，现:0，历:0)",
                    },
                    {
                      id: "ygdj",
                      label: "预告登记(临:0，现:0，历:0)",
                    },
                    {
                      id: "yydj",
                      label: "异议登记(临:0，现:0，历:0)",
                    },
                    {
                      id: "cfdj",
                      label: "查封登记(临:0，现:0，历:0)",
                    },
                  ],
                },
              ],
            },
          ],
        },
      ],
      defaultProps: {
        children: "children",
        label: "label",
      },
      showTab: "gyjsydsyq", // 选中状态,根据表格中权利类型判断
    };
  },
  methods: {
    closeDialog() {
      this.$emit("input", false);
      // 关闭时清空值
      this.$store.dispatch("djbxx/setDjbxx", null);
    },
    handleNodeClick(data) {
      this.showTab = data.id;
    },
  },
};
</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;
}
</style>