<template>
  <div>
    <tree-select
        v-model="treeSelected"
        style="width: 300px;"
        check-strictly
        :expand-all="true"
        :load-data="loadData"
        @on-change="handleTreeSelectChange"
        @on-toggle-expand="handleTreeSelectExpand"
        @on-check-change="handleTreeSelectCheckChange"
        @on-select-change="handleTreeSelectClick"
        :data="treeData"
      ></tree-select>
      <Button @click="changeTreeSelectData">更新选中数据</Button>
      <Button @click="changeTreeData">更新树数据</Button>
  </div>
</template>

<script>
import TreeSelect from '_c/tree-select'
import { newTreeData } from '@/mock/data/tree-select'
import { getTreeSelectData } from '@/api/data'
export default {
  name: 'tree_select_page',
  components: {
    TreeSelect
  },
  data () {
    return {
      treeSelected: [112, 113],
      treeData: []
    }
  },
  mounted () {
    getTreeSelectData().then(res => {
      const { data } = res
      this.treeData = data
    })
  },
  methods: {
    changeTreeSelectData () {
      this.treeSelected = [111, 114]
    },
    changeTreeData () {
      this.treeData = newTreeData
      // this.treeSelected = [];
    },
    handleTreeSelectChange (list) {
      // console.log('=-========', list);
    },
    handleTreeSelectExpand (item) {
      // console.log('toggle expand', item);
    },
    handleTreeSelectCheckChange (selectedArray, item) {
      // console.log(selectedArray, item);
    },
    handleTreeSelectClick (selectArray, item) {
      // console.log(selectArray, item);
    },
    loadData (item, callback) {
      setTimeout(() => {
        let data = [
          {
            id: 111,
            title: '1-1-1'
          },
          {
            id: 112,
            title: '1-1-2'
          },
          {
            id: 113,
            title: '1-1-3'
          },
          {
            id: 114,
            title: '1-1-4'
          }
        ]
        callback(data)
      }, 1000)
    }
  }
}
</script>

<style>

</style>