
<template>
  <div>
    <div>
      <Form  onsubmit="return false">
        <Form-item>
          <Input v-model="key" @on-enter="_search"
                 @on-click="_search" placeholder="请输入关键字,回车查询"  style="width:100%" icon="ios-search-strong" ></Input>
        </Form-item>
      </Form>

    </div>
    <!--加载中-->
    <div v-show="isloading" class="demo-spin-container spin-bg">
      <Spin fix size="large"></Spin>
    </div>
    <ul id="equipClassTree" v-show="isTree"  class="ztree ztreePro tree_height"  style="overflow-x: auto;" ></ul>
  </div>
</template>

<style>
</style>

<script>
import { meterSample } from '../../../api'
/**
 * 添加编辑Ztree
 */
let setting
export default {
  data() {
    return {
      key: '',
      isloading: true,
      isTree: false
    }
  },
  mounted() {
    // this._treeHeight()
  },
  created() {
    // this._Ztree()
    // this.$bus.$on('class', msg => {
    //   this._Ztree()
    // })
  },
  methods: {
    _Ztree() {
      this.key = ''
      this.isloading = true
      this.isTree = false
      setting = {
        data: {
          simpleData: {
            enable: true,
            idKey: 'id',
            pIdKey: 'pid'
          }
        },
        callback: {
          onClick: this.zTreeOnClick
        }
      }

      // this.$store.dispatch('LmsTemplateClassifyManage/list').then(() => {
      //   $.fn.zTree.init(
      //     $('#equipClassTree'),
      //     setting,
      //     this.$store.state.LmsTemplateClassifyManage.list
      //   )
      //   setTimeout(() => {
      //     this.isloading = false
      //     this.isTree = true
      //   }, 300)
      // })
    },
    _page: async function() {
      console.log('page')
      Object.assign(this.formObj, this.$refs.pageTable._searchParams())
      const result = await meterSample.templateList(this.formObj)
      if (result) {
        $.fn.zTree.init(
          $('#equipClassTree'),
          setting,
          this.$store.state.LmsTemplateClassifyManage.list
        )
        setTimeout(() => {
          this.isloading = false
          this.isTree = true
        }, 300)
      }
    },
    zTreeOnClick(event, treeId, treeNode) {
      this.$emit('on-result-change', treeNode.id)
    },
    _search() {
      if (this.key !== '') {
        this.isloading = true
        this.isTree = false
        this.$store
          .dispatch('LmsTemplateClassifyManage/getTreeKeyword', this.key)
          .then(() => {
            $.fn.zTree.init(
              $('#equipClassTree'),
              setting,
              this.$store.state.LmsTemplateClassifyManage.list
            )

            setTimeout(() => {
              this.isloading = false
              this.isTree = true
            }, 300)
          })
      } else {
        this._Ztree()
      }
    },
    _treeHeight() {
      $('.tree_height').height(document.documentElement.clientHeight - 225)
    }
  }
}
</script>
