<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'
let treeObj
let setting

export default {
  data() {
    return {
      key: '',
      idObj: {
        // 要提交的id数据
        id: '',
        idsList: []
      },
      ORGLISTIDS: [],
      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'
          }
        },
        view: {
          showIcon: false
        },
        check: {
          enable: true
        },
        callback: {
          onClick: this.zTreeOnClick
        }
      }
      this.$store.dispatch('LmsEquipClassRole/treeListAll').then(() => {
        $.fn.zTree.init(
          $('#purTree'),
          setting,
          this.$store.state.LmsEquipClassRole.treeList
        )
        treeObj = $.fn.zTree.getZTreeObj('purTree')
        // treeObj.expandAll(true);
        const nodes = treeObj.getNodes()
        for (let i = 0; i < nodes.length; i++) {
          // 设置节点展开
          treeObj.expandNode(nodes[i], true, false, 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.$store
        .dispatch('LmsEquipClassRole/roleClass', this.idObj)
        .then(() => {
          if (this.$store.state.LmsEquipClassRole.success) {
            this.$Message.success('保存成功！')
            this._getselPurIds(this.idObj.id)
          } else {
            this.$Message.error('保存失败！')
          }
        })
    },
    _getselPurIds(ID) {
      // 回显选中的节点树
      const PURIDS = []
      this.$store.dispatch('LmsEquipClassRole/excludeRoleList', ID).then(() => {
        const purIds = this.$store.state.LmsEquipClassRole.include
        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)
      })
    },
    _allCheck() {
      treeObj.checkAllNodes(true)
      this.checkAllNodes = true
    },
    _cancelAllCheck() {
      treeObj.checkAllNodes(false)
      this.checkAllNodes = false
    },
    _search() {
      const PURIDS = []
      const newPURIDS = []
      if (this.key !== '') {
        this.key = $.trim(this.key)
        this.$store
          .dispatch('LmsEquipClassRole/proTreeKeyword', this.key)
          .then(() => {
            $.fn.zTree.init(
              $('#purTree'),
              setting,
              this.$store.state.LmsEquipClassRole.treeList
            )
            const purIds = this.$store.state.LmsEquipClassRole.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++) {
                  const expandNodes = treeObj.getNodeByParam('id', newPURIDS[j])
                  if (expandNodes) {
                    treeObj.checkNode(expandNodes, true)
                  }
                }
              }, 10)
            }

            treeObj = $.fn.zTree.getZTreeObj('purTree')
            const nodes = treeObj.getNodes()
            for (let z = 0; z < nodes.length; z++) {
              // 设置节点展开
              treeObj.expandNode(nodes[z], true, false, true)
            }
          })
      } else {
        this._getZtree()
        this._getselPurIds(this.idObj.id)
      }
    },
    _treeHeight() {
      $('.tree_height1').height(window.screen.height - 450)
      $('.tree_height2').height(window.screen.height - 400)
    }
  }
}
</script>
