<template>
  <div>
    <div>
      <Form onsubmit="return false">
        <Form-item>
          <Input v-model="key" @on-enter="_search" placeholder="请输入关键字,回车查询" style="width:100%"
                 icon="ios-search-strong"/>
        </Form-item>
      </Form>
    </div>
    <!--加载中-->
    <div v-show="loading" class="demo-spin-container spin-bg">
      <Spin fix size="large"></Spin>
    </div>
    <ul :id="treeId" v-show="isTree" class="ztree ztreePro tree_height"
        style="overflow-x: auto;height:360px"></ul>
  </div>
</template>


<script>
import { equip } from '../../api'

/**
 * 添加编辑Ztree
 */
let setting
export default {
  data() {
    return {
      key: '',
      loading: true,
      isTree: false,
      treeId: ''
    }
  },
  mounted() {},
  methods: {
    _treeHeight() {
      $('.tree_height').height(document.documentElement.clientHeight - 290)
    },
    _open: async function() {
      this.treeId = 'equip' + this.$randomCode()
      this._treeHeight()
      this.key = ''
      this.loading = true
      this.isTree = false
      setting = {
        data: {
          simpleData: {
            enable: true,
            idKey: 'id',
            pIdKey: 'pid'
          }
        },
        callback: {
          onClick: this._zTreeOnClick
        }
      }
      // this.$store.dispatch('LmsEquipClass/list').then(() => {
      //   $.fn.zTree.init(
      //     $('#' + this.treeId),
      //     setting,
      //     this.$store.state.LmsEquipClass.list
      //   )
      const result = await equip.pageEquipList()
      console.log('列表数据', result)
      if (result) {
        $.fn.zTree.init($('#' + this.treeId), setting, result)
        setTimeout(() => {
          this.loading = false
          this.isTree = true
        }, 300)
      }

      // })
    },
    _zTreeOnClick(event, treeId, treeNode) {
      this.$emit('on-result-change', treeNode.id)
    },
    _search() {
      if (this.key !== '') {
        this.loading = true
        this.isTree = false
        this.$store
          .dispatch('LmsEquipClass/list', { name: this.key })
          .then(() => {
            $.fn.zTree.init(
              $('#' + this.treeId),
              setting,
              this.$store.state.LmsEquipClass.list
            )
            setTimeout(() => {
              this.loading = false
              this.isTree = true
            }, 300)
          })
      } else {
        this._open()
      }
    }
  }
}
</script>
