<template>
  <el-dialog
    v-dialogDrag
    :visible.sync="showModal"
    title="选择表单按钮"
  >
    <!--<div>-->
    <!--<Form onsubmit="return false">-->
    <!--<Form-item>-->
    <!--<el-input-->
    <!--v-model="key"-->
    <!--style="width: 460px;"-->
    <!--type="text"-->
    <!--placeholder="请输入名称,回车查询"-->
    <!--@keyup.enter.native="_search"-->
    <!--/>-->
    <!--</Form-item>-->
    <!--</Form>-->
    <!--</div>-->
    <div v-loading="isLoading" style="text-align: center;overflow-y: auto;height: 450px">
      <ul v-show="isTree" :id="treeId" class="ztree" />
    </div>
    <div slot="footer" class="btn-width">
      <el-button style="margin-left: 8px" @click="_cancel">
        取消
      </el-button>
      <el-button type="primary" @click="_ok">
        确定
      </el-button>
    </div>
  </el-dialog>
</template>
<script>
/**
 * 选择表单按钮（是否表单为是的按钮）tree
 */
import { sysResource } from '../../../api'
export default {
  data() {
    return {
      showModal: false,
      selNotes: [],
      isLoading: false,
      isTree: false,
      treeId: '',
      key: '',
      treeObj: {},
      setting: {
        data: {
          simpleData: {
            enable: true,
            idKey: 'id',
            pIdKey: 'pid'
          }
        },
        check: {
          enable: true,
          chkStyle: 'radio',
          radioType: 'all'
        },
        view: {
          showIcon: false
        },
        callback: {
          onClick: this.zTreeOnClick
        }
      }
    }
  },
  methods: {
    _open(btnId) {
      this.showModal = true
      this.isLoading = true
      this.isTree = false
      this.selNotes = []
      this._base(btnId)
    },
    // 编辑回显 tree name
    _editFormZtree(btnId) {
      this._base(btnId)
    },
    _base(btnId) {
      this.key = ''
      this.treeId = 'selBtnForm' + this.$randomCode()
      this._search(btnId)
    },
    _search: async function(btnId) {
      // buttonForm 为true 显示【是否报表】为是的按钮
      const data = {
        buttonForm: true
      }
      if (this.key) {
        data.name = this.key
      }
      const result = await sysResource.menuTreeList(data)
      this.treeObj = $.fn.zTree.init($('#' + this.treeId), this.setting, result)
      /** 过滤掉非表格列前面的radio */
      const node = this.treeObj.getNodes() // 获取根节点
      const allNodes = this.treeObj.transformToArray(node) // 遍历所有节点
      if (allNodes.length > 0) {
        for (let i = 0; i < allNodes.length; i++) {
          if (allNodes[i].uri !== 'formBtn') {
            // 判断需要显示单选框的条件(uri不为formBtn)
            allNodes[i].nocheck = true // nocheck为true表示没有选择框
            this.treeObj.updateNode(allNodes[i]) // 刷新
          }
        }
      }
      /** 过滤掉非表格列前面的checkbox */
      setTimeout(() => {
        if (btnId) {
          this._echoTree(btnId)
        } else {
          this.isLoading = false
          this.isTree = true
        }
      }, 300)
    },
    // 回显选中的节点树
    _echoTree(btnId) {
      const node = this.treeObj.getNodeByParam('id', btnId, null)
      if (node) {
        this.treeObj.checkNode(node, true)
      }
      this.isLoading = false
      this.isTree = true
    },
    zTreeOnClick(event, treeId, treeNode) {
      this.treeObj.checkNode(treeNode, !treeNode.checked, true)
    },
    _cancel() {
      this.showModal = false
    },
    _ok() {
      this.selNotes = this.treeObj.getCheckedNodes(true)
      if (this.selNotes.length === 0) {
        this.$message.warning('请选中所属按钮！')
      } else {
        this.$emit('on-result-change', this.selNotes[0])
        this.showModal = false
      }
    }
  }
}
</script>
