<template>
  <el-dialog class="create-dialog-inner" width="840px" title="所属类别" :visible.sync="innerVisible" append-to-body :close-on-click-modal="false"
    custom-class="graphTypeDialog">
    <div class="dialog-bodys">
      <div class="left content">
        <p>拓扑图所属类别</p>
        <div class="treeContainer">
          <el-tree :data="treeData" :props="defaultProps" accordion @current-change="changeNode" node-key="name"></el-tree>
        </div>
      </div>
      <div class="splitLine"></div>
      <div class="right content">
        <p>设备分类参考</p>
        <div class="treeContainer">
          <el-tree :data="treeData" :props="defaultProps" accordion></el-tree>
        </div>
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="innerVisible=false">取消</el-button>
      <el-button type="primary" :disabled="disabled" @click="confirm">确定</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      innerVisible: false,
      treeData: [],
      disabled: true,
      defaultProps: {
        children: 'categoryList',
        label: 'name'
      },
      selectNode: {}
    }
  },
  computed: {
    ...mapState(["categoryGraph"]),
  },
  mounted() {
    this.init()
  },
  watch: {
    categoryGraph: {
      handler: function(v) {
        this.treeData = v;
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    init() {
      // queryCategoryGraph({ switch: true }).then(res => {
      //   this.treeData = this.categoryGraph;
      // })
    },
    showDialog() {
      this.innerVisible = true
    },
    changeNode(data, node) {
      if (node.isLeaf) {
        this.selectNode = node;
        this.disabled = false;
      }
    },
    // 确认
    confirm() {
      this.innerVisible = false;
      this.$emit('selectNode', this.selectNode)
    }
  }
}
</script>
<style lang="less" scoped>
/deep/ .graphTypeDialog {
  /deep/ .el-dialog__header {
    border-bottom: 1px solid #f0f1f2ff;
  }
  /deep/ .el-dialog__body {
    padding: 16px 32px;
  }
  .el-dialog__footer {
    padding: 0 20px 20px;
    .el-button {
      padding: 0;
      width: 80px;
      height: 32px;
      text-align: center;
      line-height: 1;
    }
  }
  .dialog-bodys {
    display: flex;
    overflow: hidden;
    height: 380px;
    .splitLine {
      width: 1px;
      background-color: #e4e5e7ff;
      margin: 0 30px;
    }
    .content {
      width: 356px;
      padding: 16px 0 16px 16px;
      box-sizing: border-box;
      .el-tree {
        /deep/ .el-tree-node {
          &.is-current {
            & > .el-tree-node__content {
              background: #e1f2ffff;
              color: #0091ffff;
              &:hover{
                background: #e1f2ffff;
                color: #0091ffff;
              }
            }
          }
          .el-tree-node__content {
            height: 38px;
            line-height: 38px;
            &:hover {
              background: #F5F6F7;
              color: #1F2429;
            }
          }
        }
      }
      &.right {
        background: #f7f8f9;
        .el-tree {
          background: #f7f8f9;
        }
      }
      .treeContainer {
        height: 305px;
        overflow: auto;
      }
      & > p {
        border-left: 4px solid #0091ffff;
        margin-bottom: 20px;
        padding-left: 8px;
        color: #1f2429;
        line-height: 19px;
      }
    }
  }
}
</style>