<!--
 * @Author: dawdler
 * @Date: 2020-12-26 11:52:05
 * @Description: demo
 * @LastModifiedBy: dawdler
-->
<template>
  <div>
    <p>基于<a href="https://www.npmjs.com/package/el-tree-select"
         target="_blank">https://www.npmjs.com/package/el-tree-select</a> 修改</p>
    <p>使用暂时参考上面网站，组件名称由el-tree-select 改成 ht-tree-select</p>

    <ShowCode :title="$t('demo.tree.text_7')"
              :formatCode="signalCode"
              :subTitle="$t('demo.tree.text_7')">
      <ht-treeselect v-model="org"
                     :isSingle="true"
                     :treeParams="treeParams2"
                     ref="treeSelect2" />
    </ShowCode>
    <ShowCode :title="$t('demo.tree.text_8')"
              :formatCode="mutileCode"
              :subTitle="$t('demo.tree.text_8')">
      <ht-tree-select popoverClass="test-class-wrap"
                      v-model="values"
                      :styles="styles"
                      :selectParams="selectParams"
                      :treeParams="treeParams"
                      :filterNodeMethod="_filterFun"
                      ref="treeSelect"
                      :treeRenderFun="_renderFun"
                      @searchFun="_searchFun" />
    </ShowCode>

  </div>
</template>
<script>
import HtTreeSelect from '@/components/HtTreeselect.vue'
import htUtils from '@/utils'
import { mutileCode, signalCode } from '@/demo/html/tree-select-demo/code'
import ShowCode from '@/components/common/show-code'
import utils from '../util/utils'
export default {
  name: 'treeSelect',
  components: {
    HtTreeSelect,
    ShowCode,
  },
  data() {
    return {
      org: null,
      signalCode,
      mutileCode,
      treeParams2: {
        data: [],
        props: {
          children: 'children',
          label: 'name',
          rootId: '0',
          disabled: 'disabled',
          parentId: 'parentId',
          value: 'id',
        },
      },
      params: null,
      isSingle: true,
      styles: {
        width: '300px',
      },
      // 单选value为字符串，多选为数组
      values: this.isSingle ? '' : [],
      selectParams: {
        clearable: true,
        placeholder: '请选择',
      },
      treeParams: {
        clickParent: true,
        filterable: true,
        // 只想要子节点，不需要父节点
        leafOnly: true,
        includeHalfChecked: false,
        'check-strictly': false,
        'default-expand-all': true,
        'expand-on-click-node': false,
        'render-content': this._renderFun,
        data: [],
        props: {
          children: 'children',
          label: 'name',
          rootId: '0',
          disabled: 'disabled',
          parentId: 'parentId',
          value: 'id',
        },
        ...this.params,
      },
    }
  },
  watch: {},
  created() {},
  mounted() {
    // 手动更新树数据
    let data = []
    const { label, children, parentId, value, rootId } = this.treeParams.props
    for (let i = 0; i < 5; i++) {
      let rootNode = {
        [label]: `节点：${i}`,
        [parentId]: rootId,
        [value]: i,
        [children]: [],
      }
      for (let a = 0; a < 5; a++) {
        let subId = `${rootNode[value]}_${a}`
        let subNode = {
          [label]: `子节点：${subId}`,
          [parentId]: rootNode[value],
          [value]: subId,
          [children]: [],
        }
        for (let b = 0; b < 5; b++) {
          let endId = `${subId}_${b}`
          let endNode = {
            [label]: `末级节点：${endId}`,
            [parentId]: subNode[value],
            [value]: endId,
            [children]: [],
          }
          subNode[children].push(endNode)
        }
        rootNode[children].push(subNode)
      }
      data.push(rootNode)
    }
    this.$nextTick(() => {
      this.$refs.treeSelect.treeDataUpdateFun(data)
    })

    let testData = [
      {
        createTime: '2021-03-19 15:09:16',
        isDelete: '0',
        id: '1',
        name: '物业公司',
        parentId: '0',
        code: 'wygs',
        grade: 'organization_type_company',
        demId: '1258608622670319616',
        orderNo: 1,
        isMaster: 0,
        path: '1258608622670319616.1.',
        pathName: '/物业公司',
        isIsParent: 0,
        isParent: false,
        limitNum: 0,
        exceedLimitNum: 0,
        lvl: 1,
        groupId: '1',
        leaf: true,
        groupType: 'org',
        groupCode: 'wygs',
        identityType: 'group',
        parent: false,
        pkVal: '1',
      },
      {
        createTime: '2021-07-12 04:50:50',
        isDelete: '0',
        id: '119539086707916808',
        name: '区域1',
        parentId: '1',
        code: 'qy1',
        grade: 'organization_type_area',
        demId: '1258608622670319616',
        orderNo: 337,
        isMaster: 0,
        path: '1258608622670319616.1.119539086707916808.',
        pathName: '/物业公司/区域1',
        isIsParent: 0,
        isParent: false,
        limitNum: 0,
        exceedLimitNum: 0,
        lvl: 1,
        groupId: '119539086707916808',
        leaf: true,
        groupType: 'org',
        groupCode: 'qy1',
        identityType: 'group',
        parent: false,
        pkVal: '119539086707916808',
      },
      {
        createTime: '2021-07-12 04:51:15',
        isDelete: '0',
        id: '119539112477720584',
        name: '项目1',
        parentId: '119539086707916808',
        code: 'xm1',
        grade: 'organization_type_project',
        demId: '1258608622670319616',
        orderNo: 689,
        isMaster: 0,
        path: '1258608622670319616.1.119539086707916808.119539112477720584.',
        pathName: '/物业公司/区域1/项目1',
        isIsParent: 0,
        isParent: false,
        limitNum: 0,
        exceedLimitNum: 0,
        lvl: 1,
        groupId: '119539112477720584',
        leaf: true,
        groupType: 'org',
        groupCode: 'xm1',
        identityType: 'group',
        parent: false,
        pkVal: '119539112477720584',
      },
      {
        createTime: '2021-07-12 04:51:29',
        isDelete: '0',
        id: '119539127510106120',
        name: '分期1',
        parentId: '119539112477720584',
        code: 'fq1',
        grade: 'organization_type_divide',
        demId: '1258608622670319616',
        orderNo: 391,
        isMaster: 0,
        path: '1258608622670319616.1.119539086707916808.119539112477720584.119539127510106120.',
        pathName: '/物业公司/区域1/项目1/分期1',
        isIsParent: 0,
        isParent: false,
        limitNum: 0,
        exceedLimitNum: 0,
        lvl: 1,
        groupId: '119539127510106120',
        leaf: true,
        groupType: 'org',
        groupCode: 'fq1',
        identityType: 'group',
        parent: false,
        pkVal: '119539127510106120',
      },
      {
        createTime: '2021-07-19 09:00:39',
        isDelete: '0',
        id: '120204580079271944',
        name: '分期2',
        parentId: '119539112477720584',
        code: 'csfq',
        grade: 'organization_type_divide',
        demId: '1258608622670319616',
        orderNo: 885,
        isMaster: 0,
        path: '1258608622670319616.1.119539086707916808.119539112477720584.120204580079271944.',
        pathName: '/物业公司/区域1/项目1/测试分期(勿选)',
        isIsParent: 0,
        isParent: false,
        limitNum: 0,
        exceedLimitNum: 0,
        lvl: 1,
        groupId: '120204580079271944',
        leaf: true,
        groupType: 'org',
        groupCode: 'csfq',
        identityType: 'group',
        parent: false,
        pkVal: '120204580079271944',
      },
    ]
    testData = htUtils.tile2nest(testData)
    this.$nextTick(() => {
      this.$refs.treeSelect2.treeDataUpdateFun(testData)
    })
  },
  methods: {
    _filterFun(value, data, node) {
      if (!value) return true
      return data.id.indexOf(value) !== -1
    },
    // 树点击
    _nodeClickFun(data, node, vm) {
      console.log('this _nodeClickFun', this.values, data, node)
    },
    // 树过滤
    _searchFun(value) {
      console.log(value, '<--_searchFun')
      // 自行判断 是走后台查询，还是前端过滤
      this.$refs.treeSelect.filterFun(value)
      // 后台查询
      // this.$refs.treeSelect.treeDataUpdateFun(treeData);
    },
    // 自定义render
    _renderFun(h, { node, data, store }) {
      const { props, clickParent } = this.treeParams
      return (
        <span
          class={[
            'custom-tree-node',
            !clickParent && data[props.children] && data[props.children].length
              ? 'disabled'
              : null,
          ]}
        >
          <span>{node.label}</span>
        </span>
      )
    },
  },
}
</script>
<style>
.disabled {
  cursor: no-drop;
}
.custom-tree-node {
  width: calc(100% - 40px);
}
</style>
