<template>
  <div>
    <cms-form-select-tree
      v-model="formModel.parentName"
      @click="_nodeClickFun"
      ref="treeSelect"
      :form-model="formModel"
      :filterable="false"
      :select-params="selectParams"
      :tree-params="treeParams"
      :tree-render-fun="_renderFun"
      :request-call="selectData"
      :match-key="{
        parentId: 'id'
      }"
      :default-props="{
        value: 'id', // ID字段名
        label: 'menuName', // 显示名称
        children: 'children' // 子级字段名
      }"
    />
  </div>
</template>

<script>
import menu from '../table/menu.json'

export default {
  name: "form-tree-demo",
  data() {
    return {
      formModel: {
        parentId: undefined,
        parentName: undefined
      },
      selectData: menu.data,
      values: undefined,
      selectParams: {
        multiple: false,
        clearable: true,
        placeholder: '请输入内容'
      },
      treeParams: {
        // 开启虚拟滚动
        height: 300,
        clickParent: true,
        filterable: true,
        'check-strictly': true,
        'default-expand-all': false,
        'expand-on-click-node': false,
      }
    }
  },
  methods: {
    // 下拉框修改
    _selectChange(val) {
      console.log(val, '<-select change');
    },
    // 树点击
    _nodeClickFun(data, node, vm) {
      console.log('this _nodeClickFun', this.values, data, node);
    },
    // 自定义render
    _renderFun(h, { node, data, store }) {
      return (
        <span class='custom-tree-node'>
          <span style="padding-left: 6px">{ node.label }</span>
        </span>
      );
    },


    // 是否为空
    isEmpty(val) {
      for (let key in val) {
        return false
      }
      return true
    },
    handleNodeClick(data) {
      let label = this.props.label || 'name'
      this.$emit('input', data[this.nodeKey])
      this.optionData.id = data[this.nodeKey]
      this.optionData.name = data[label]
      this.$refs.select.visible = false
    },
    init(val) {
      if (val) {
        this.$nextTick(() => {
          let label = this.props.label || 'name'
          this.$refs.tree.setCurrentKey(val)
          let node = this.$refs.tree.getNode(val)
          this.optionData.id = val
          this.optionData.name = node.label
        })
      } else {
        this.$refs.tree.setCurrentKey(null)
      }
    },
    visibleChange(e) {
      if (e) {
        let selectDom = document.querySelector('.is-current')
        setTimeout(() => {
          this.$refs.select.scrollToOption({ $el: selectDom })
        }, 0)
      }
    },
    clear() {
      this.$emit('input', '')
    }
  },
  props: {
    // v-model绑定
    value: {
      type: [ String, Number ],
      default: ''
    },
    // 树形的数据
    data: {
      type: Array,
      default: function () {
        return []
      }
    },
    // 每个树节点用来作为唯一标识的属性
    nodeKey: {
      type: [ String, Number ],
      default: 'id'
    },
    // tree的props配置
    props: {
      type: Object,
      default: function () {
        return {
          label: 'menuName',
          children: 'children'
        }
      }
    }
  },
}
</script>

<style lang="scss" scoped>
.option {
  height: auto;
  padding: 0;
  background-color: #fff;
}

.tree {
  padding: 4px 20px;
  font-weight: 400;
}
</style>