<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 { meterPrint } 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.$bus.$on('refreshTree', pid => {
    //   this._Ztree()
    // })
  },
  methods: {
    _Ztree(tableHeight, businessTypeList) {
      this.key = ''
      this.treeId = 'oriRecordClassTree' + this.$randomCode()
      this.isloading = false
      this.isTree = true
      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所有的类别
    _page: async function(data) {
      const result = await meterPrint.pageSampleInputRecordTemp(data)
      if (result) {
        console.log(result)
        const treeObj = $.fn.zTree.init(
          $('#' + this.treeId),
          this.setting,
          result
        )
        treeObj.expandAll(true)
      } else {
        console.log('请求失败')
      }
      this.isloading = false
      this.isTree = true
    },
    _request() {
      console.log('// 查询所有类别')
      const data = {}
      if (this.key) {
        data.name = this.key
      }
      this._page(data)
      // 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() {
      console.log('采样/实验室查env下，不同类型（采样/实验室）的树数据')
      const data = {}
      // data.businessTypeList = this.businessTypeList
      if (this.key) {
        data.name = this.key
      }
      this._page(data)
      // 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>
<style>
.tree_height {
  height: 300px;
}
</style>
