<template>
  <Modal v-model="checkModal" title="选择" width="700" :scrollable="true" @on-cancel="cancel">
    <div>
      <row>
        <Col span="11">
          <div>
            <Input placeholder="请输入关键字搜索..." :id="'search-'+treeId" :name="'search-'+treeId"></Input>
            <card style="height: 450px;overflow-y: scroll;margin-top: 5px">
              <ul :id="treeId" class="ztree"></ul>
            </card>
          </div>
        </Col>
        <Col span="2">
          <div style="margin-top: 180px;margin-left: 15px">
            <Button style="width: 23px" size="small" disabled>
              <Icon type="ios-arrow-forward" size="18" style="margin-left: -5px;color: #808695"/>
            </Button>
            <br>
            <Button style="width: 23px;margin-top: 18px" size="small" disabled>
              <Icon type="ios-arrow-back" size="18" style="margin-left: -6px;color: #808695"/>
            </Button>
          </div>
        </Col>
        <Col span="11">
          <div style="width: 90%;margin-top: 11px;margin-left: 10px">
            <div style="float: left;width: 50%;text-align: left">
              已选({{columns.length}})
            </div>
            <div style="float: right;width: 50%;text-align: right">
              <a @click="clear">清空</a>
            </div>
            <br>
          </div>
          <card style="height: 450px;;overflow-y: scroll;margin-top: 10px">
            <List size="small">
              <ListItem v-for="(item,index) in columns" :key="item.id">
                <p>
                  <Icon type="md-bookmark" size="20"/>
                  <span style="font-size: 13px">&nbsp&nbsp{{item.ename}}</span></p>
                <ListItemMeta/>
                <template slot="action">
                  <li>
                    <Icon type="md-close" size="16" @click="deleteOne(index)"/>
                  </li>
                </template>
              </ListItem>
            </List>
          </card>
        </Col>
      </row>
    </div>
    <div slot="footer">
      <Button @click="cancel" size="small">取消</Button>
      <Button type="primary" :loading="saveLoading" @click="ok" size="small">确定</Button>
    </div>
  </Modal>
</template>
<script>
  import 'ztree/js/jquery.ztree.exhide'
  import {fuzzySearch} from '@/components/ztree/ztreeSearch'

  let $this;
  export default {
    name: "bcCheck",
    props: {
      show: {
        type: Boolean,
        default: false
      },
      treeId: {
        type: String,
        default: '1'
      },
      treeData: {
        type: Array,
        default: function () {
          return []
        }
      },
      resultData: {
        type: Array,
        default: function () {
          return []
        }
      },
      multi: {
        type: Boolean,
        default: false
      },
      types: {
        type: Array,
        default: function () {
          return []
        }
      },
      ifOnlyLeaf: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        key1: '',
        checkModal: false,
        num: null,
        columns: [],
        saveLoading: false,
        treeData2: [],
        setting: {//ztree树初始化设置
          view: {
            showLine: false,
            showIcon: false,
            selectedMulti: false,
          },
          data: {
            simpleData: {
              enable: true,
              idKey: "id",
              pIdKey: "pId",
              rootPId: null
            }
          },
          callback: {
            onClick: this.clickArea,
          },
          check: {
            enable: false,
            chkboxType: {"Y": "", "N": ""},
          }
        },
      }
    },
    methods: {
      clear() {
        this.columns = [];
      },
      deleteOne(index) {
        this.columns.splice(index, 1)
      },
      clickArea(event, treeId, treeNode, clickFlag) {
        if (this.judgeTypes(treeNode)) {
          if (this.columns.length == 0 || this.columns[0].ename != treeNode.ename) {
            if (this.multi) {
              if (this.columns.length >= 2)
                for (let i = 0; i < this.columns.length; i++) {
                  if (this.columns[i].ename == treeNode.ename) {
                    return;
                  }
                }
              let columns = Object.assign({}, treeNode);
              this.columns.splice(0, 0, columns);
              this.$forceUpdate();
            } else {
              if (this.columns.length >= 1) {
                this.$Message.warning('您只能选择一个！')
              } else {
                let columns = Object.assign({}, treeNode);
                this.columns.splice(0, 0, columns);
                this.$forceUpdate();
              }
            }
          }
        }
      },
      reloadTreeData() {
        if (this.treeData2.length > 0) {
          this.treeData2.forEach((n, index) => {
            n.ename = n.name;
            if (index === 0) {
              n.open = true;
            }
          });
          $.fn.zTree.init($("#" + this.treeId), this.setting, this.treeData2);
          fuzzySearch(this.treeId, 'search-' + this.treeId, null, false);//搜索功能
          return;
        }
      },
      judgeTypes(treeNode) {
        if(this.ifOnlyLeaf && treeNode.isParent){
          this.$Message.warning("只能选择最末级的数据！")
          return false
        }
        if (this.types.length == 0) {
          return true
        } else {
          for (let i = 0; i < this.types.length; i++) {
            if (treeNode.type == this.types[i]) {
              return true
            }
          }
          this.$Message.warning("不能选择该类型的值！")
          return false
        }
      },
      cancel() {
        this.$emit('update:show', false)
      },
      ok() {
        this.$emit('update:show', false);
        this.$emit('update:resultData', this.columns);
        this.$emit('checkOk', this.columns);
      },
      clearCache() {
        this.columns = [];
        this.$emit('update:resultData', [])
        var treeObj = $.fn.zTree.getZTreeObj(this.treeId);
        treeObj.cancelSelectedNode();
      }
    },
    mounted: function () {
      $this = this;
      //this.treeData2 = JSON.parse(JSON.stringify( this.treeData));
      //this.reloadTreeData();
    },
    watch: {
      show: {
        immediate: true,
        handler: function () {
          this.checkModal = this.show;
        }
      },
      treeData: {
        immediate: true,
        handler: function () {
          this.treeData2 = JSON.parse(JSON.stringify(this.treeData));
          this.columns = JSON.parse(JSON.stringify(this.resultData));
          this.$nextTick(() => {
            this.reloadTreeData();
          });
        }
      },
      resultData: {
        immediate: true,
        handler: function () {
          this.columns = JSON.parse(JSON.stringify(this.resultData));
        }
      }
    }
  }
</script>
