<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="isloading" class="demo-spin-container spin-bg tree_height">
      <Spin fix size="large"></Spin>
    </div>
    <ul :id="treeId" v-show="isTree"
        class="ztree ztreePro tree_height" style="overflow-x: auto;"></ul>
  </div>
</template>

<style>
</style>

<script>
/**
 * 原始记录类别添加编辑Ztree
 */

import { soilTest } from '../../../api'

export default {
  data() {
    return {
      treeId: '',
      key: '',
      isloading: true,
      isTree: false,
      setting: {
        data: {
          simpleData: {
            enable: true,
            idKey: 'id',
            pIdKey: 'pid'
          }
        },
        callback: {
          onClick: this.zTreeOnClick
        }
      },
      businessTypeList: ''
    }
  },
  created() {
    // this._Ztree()
  },
  methods: {
    _Ztree(tableHeight, businessTypeList) {
      console.log('请求树')
      console.log(tableHeight, businessTypeList)
      this.key = ''
      this.treeId = 'oriRecordClassTree' + this.$randomCode()
      this.isloading = true
      this.isTree = false
      if (businessTypeList === undefined) {
        // 查询所有类别
        this._request()
      } else {
        // 采样实/实验室不同类型
        this.businessTypeList = businessTypeList
        this._requestByBusinessTypeList()
      }
      if (tableHeight) {
        $('.tree_height').height(tableHeight)
      } else {
        $('.tree_height').height(document.documentElement.clientHeight - 230)
      }
    },
    zTreeOnClick(event, treeId, treeNode) {
      this.$emit('on-result-change', treeNode)
    },
    _search() {
      this.isloading = true
      this.isTree = false
      // 查询实验室、采样、所有类型的数据
      if (this.businessTypeList !== undefined) {
        this._requestByBusinessTypeList()
      } else {
        this._request()
      }
      this.$emit('on-result-change')
    },
    // 原始记录模板管理查env所有的类别
    _request() {
      const data = {}
      if (this.key) {
        data.name = this.key
      }
      this.$store.dispatch('ElnTemplateCategory/list', data).then(() => {
        const treeObj = $.fn.zTree.init(
          $('#' + this.treeId),
          this.setting,
          this.$store.state.ElnTemplateCategory.list
        )
        treeObj.expandAll(true)
        setTimeout(() => {
          this.isloading = false
          this.isTree = true
        }, 300)
      })
    },
    // 采样/实验室查env下，不同类型（采样/实验室）的树数据
    _requestByBusinessTypeList: async function() {
      const data = {}
      data.businessTypeList = this.businessTypeList
      if (this.key) {
        data.name = this.key
      }
      const result = await soilTest.zTree(data)
      if (result) {
        const treeObj = $.fn.zTree.init(
          $('#' + this.treeId),
          this.setting,
          result
        )
        treeObj.expandAll(true)
        setTimeout(() => {
          this.isloading = false
          this.isTree = true
        }, 300)
      }
      // this.$store.dispatch('ElnTemplateCategory/listType', data).then(() => {
      //   const treeObj = $.fn.zTree.init(
      //     $('#' + this.treeId),
      //     this.setting,
      //     this.$store.state.ElnTemplateCategory.list
      //   )
      //   treeObj.expandAll(true)
      //   setTimeout(() => {
      //     this.isloading = false
      //     this.isTree = true
      //   }, 300)
      // })
    }
  }
}
</script>
