<template>
  <div>
    <el-dialog title="选择分类" :visible.sync="isShow" width="30%" :before-close="handleClose">
      <el-tree :data="data" show-checkbox node-key="ID" :load="loadNode" lazy :check-strictly="checkStrictly" @check-change="onCheckChange" :props="defaultProps" ref="dimTree">
      </el-tree>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isShow=false">取 消</el-button>
        <el-button type="primary" @click="onOk">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      checkStrictly: true,
      defaultProps: {
        children: 'children',
        label: 'name',
        key: 'ID'
      }
    }
  },
  props: {
    data: {
      type: Array,
      default: function() {
        return []
      }
    },
    dimensionId: {
      type: Number,
      default: 0
    },
    checked: {
      type: Array,
      default: function() {
        return []
      }
    },
    show: {
      type: Boolean
    },
    checkedName: {
      type: String
    }
  },
  computed: {
    checkedData: {
      get() {
        return this.checked
      },
      set(val) {
        this.$emit('update:checked', val)
        return val
      }
    },
    isShow: {
      get() {
        return this.show
      },
      set(val) {
        this.$emit('update:show', val)
      }
    }

  },
  methods: {
    handleClose() {
      this.isShow = false
      return this.isShow
    },
    onOk() {
      let arr = []
      let selected = this.$refs.dimTree.getCheckedNodes()
      selected.forEach(node => { if (node.ID !== 0) { arr.push(node.name) } })
      console.info(arr.join())
      this.$emit('update:checkedName', arr.join())
      this.isShow = false
    },
    onCheckChange() {
      this.checkedData = this.$refs.dimTree.getCheckedKeys().filter(val => val !== 0)
    },
    async loadNode(node, resolve) {
      if (node.id === 0) {
        resolve(node.data)
      } else if (node.data.children && node.data.children.length > 0) {
        resolve(node.data.children)
      } else {
        let subCatalogData = await this.getNodeData(node.data.ID)
        resolve(subCatalogData)
      }
    },
    async getNodeData(nodeID) {
      const res = await axios.get(`/ui/dimensions/${this.dimensionId}/catalogstree`, {
        params: {
          parentID: nodeID
        }
      })
      return res.data.data
    }
  }
}
</script>
