<template>
  <div>
    <div style="margin-top: 15px">
      <Form v-show="isPur" inline onsubmit="return false">
        <Form-item style="width:100%">
          <Input
            v-model="key"
            placeholder="请输入关键字，回车查询"
            style="width:400px"
            icon="ios-search-strong"
            @on-enter="_search"
          /></Input>
        </Form-item>
      </Form>
      <div v-show="!isPur" class="tree_height2">
        <img :src="imgUrl">
      </div>
    </div>
    <ul v-show="isPur" id="purTree" class="ztree tree_height1" style="overflow-x: auto;" />
    <!--保存-->
    <div class="saveDiv" style="height: 54px;">
      <Button
        v-show="isPur"
        v-if="!checkAllNodes"
        type="primary"
        style="width: 100px;margin-right: 10px;"
        @click="_allCheck"
      >
        全选
      </Button>
      <Button
        v-show="isPur"
        v-else-if="checkAllNodes"
        type="primary"
        style="width: 100px;margin-right: 10px;"
        @click="_cancelAllCheck"
      >
        取消全选
      </Button>
      <Button v-show="isPur" type="primary" style="width: 100px;" @click="_ok">
        保 存
      </Button>
    </div>
  </div>
</template>
<script>
/**
 * 添加编辑Ztree
 */
import Global from '../../../api/config'
import { consumeCategory } from '../../../api'
let treeObj
let setting

export default {
  data() {
    return {
      key: '',
      idObj: {
        // 要提交的id数据
        id: '',
        idsList: []
      },
      ORGLISTIDS: [],
      treeListData: [],
      isPur: false,
      imgUrl: Global.staticURL + '/img/noData.png',
      checkAllNodes: false,
      checkAll: false,
      PURIDS: [],
      searchPURIDS: []
    }
  },
  mounted() {
    this._treeHeight()
  },
  methods: {
    _openZtree(id) {
      this._getZtree()
      this._getselPurIds(id)
      this.idObj.id = id
      this.isPur = true
    },
    _getZtree() {
      setting = {
        data: {
          simpleData: {
            enable: true,
            idKey: 'id',
            pIdKey: 'pid'
          }
        },
        check: {
          enable: true
        },
        callback: {
          onClick: this.zTreeOnClick
        }
      }
      this._chemicalTreeListAll()
    },

    _chemicalTreeListAll: async function() {
      this.treeListData = await consumeCategory.getTreeListAll()
      $.fn.zTree.init($('#purTree'), setting, this.treeListData)
      treeObj = $.fn.zTree.getZTreeObj('purTree')
      treeObj.expandAll(true)
    },

    zTreeOnClick(e, treeId, treeNode, clickFlag) {
      treeObj.checkNode(treeNode, !treeNode.checked, true)
    },
    _ok() {
      const nodesList = []
      const nodes = treeObj.getCheckedNodes(true)
      for (let i = 0; i < nodes.length; i++) {
        nodesList.push(nodes[i].id)
      }
      this.idObj.idsList = nodesList
      this._save(this.idObj)
    },

    _save: async function(data) {
      const result = await consumeCategory.addRoleCategory(data)
      console.log('ppppp', result)
      if (result) {
        this.$message('保存成功!')
        this._getselPurIds(this.idObj.id)
      } else {
        this.$Message.error('保存失败！')
      }
    },
    _allCheck() {
      treeObj.checkAllNodes(true)
      this.checkAllNodes = true
    },
    _cancelAllCheck() {
      treeObj.checkAllNodes(false)
      this.checkAllNodes = false
    },
    _getselPurIds(id) {
      // 回显选中的节点树
      this._getRoleCategory(id)
    },

    _getRoleCategory: async function(id) {
      const include = await consumeCategory.excludeRoleList(id)
      const purIds = include
      const PURIDS = []
      for (let i = 0; i < purIds.length; i++) {
        PURIDS.push(purIds[i].id)
      }
      this.PURIDS = PURIDS
      setTimeout(() => {
        // 延时显示
        for (let j = 0; j < PURIDS.length; j++) {
          treeObj.checkNode(treeObj.getNodeByParam('id', PURIDS[j]), true)
        }
      }, 10)
      if (this.treeListData === include) {
        this.checkAllNodes = true
      } else {
        this.checkAllNodes = false
      }
    },

    _search() {
      const PURIDS = []
      const newPURIDS = []
      if (this.key !== '') {
        this.key = $.trim(this.key)
        this.$store
          .dispatch('LmsChemicalCategory/proTreeKeywordSearch', this.key)
          .then(() => {
            $.fn.zTree.init(
              $('#purTree'),
              setting,
              this.$store.state.LmsChemicalCategory.treeList
            )
            const purIds = this.$store.state.LmsChemicalCategory.treeList
            for (let i = 0; i < purIds.length; i++) {
              PURIDS.push(purIds[i].id)
            }
            this.searchPURIDS = PURIDS
            if (this.searchPURIDS.length !== 0) {
              for (let n = 0; n < this.searchPURIDS.length; n++) {
                for (let m = 0; m < this.PURIDS.length; m++) {
                  if (this.searchPURIDS[n] === this.PURIDS[m]) {
                    newPURIDS.push(this.searchPURIDS[n])
                  }
                }
              }
              setTimeout(() => {
                // 延时显示
                for (let j = 0; j < newPURIDS.length; j++) {
                  treeObj.checkNode(
                    treeObj.getNodeByParam('id', newPURIDS[j]),
                    true
                  )
                }
              }, 10)
            }
          })
      } else {
        this._getZtree()
        this._getselPurIds(this.idObj.id)
      }
    },
    _treeHeight() {
      $('.tree_height1').height(window.screen.height - 450)
      $('.tree_height2').height(window.screen.height - 400)
    }
  }
}
</script>
