<template>
  <Modal v-model="isShowTreeModal"  @on-cancel="cancel" :mask-closable="false" :closable="false" title="选择组织机构" width="550" v-draggable="options">
    <bc-tree :tree-type="treeType"  :url="url" :params="params" :treeId="treeId"  :show-icon="showIcon"
             :show-line="showLine" :height="height" :reload="reload" :icon="icon" :selectedMulti="selectedMulti" :dblClickExpand="dblClickExpand"
             :checkEnable="checkEnable" :chkboxType="chkboxType" :sequence="sequence" :setting="setting" :selectedId="selectedId" :showDep="showDep"
             :ztreeName="ztreeName" :ztreeNameShow="ztreeNameShow"
             @onClick="clickTree" @onCheck="checkTree" @onExpand="expandTree">
    </bc-tree>
    <div slot="footer">
      <Button @click="cancel" size="small">取消</Button>
      <Button type="primary" @click="ok" size="small">确定</Button>
    </div>
  </Modal>
</template>

<script>
  export default {
    name: "bc-tree-modal",
    props:{
      treeId:{ type: String, default: 'bc-tree' },
      searchId:{ type: String, default: 'keyword' },
      height:{ type: Number, default: 550 },
      reload:{ type: Boolean, default: false },//重新加载
      showLine:{ type: Boolean, default: false }, //设置 zTree 是否显示节点之间的连线。
      showIcon:{ type: Boolean, default: false }, //设置 zTree 是否显示节点的图标。
      icon:{ type: String, default: '' }, //设置 zTree 是否显示节点的图标。
      selectedMulti:{ type: Boolean, default: false }, //设置是否允许同时选中多个节点。
      dblClickExpand:{ type: Boolean, default: true }, //双击节点时，是否自动展开父节点的标识.
      checkEnable:{ type: Boolean, default: false }, //设置 zTree 的节点上是否显示 checkbox / radio
      chkboxType: Object, //勾选 checkbox 对于父子节点的关联关系。[setting.check.enable = true 且 setting.check.chkStyle = "checkbox" 时生效]
      treeType:{ type: String, default: 'common' }, //树类型，区域(area)/单位(company)/通用(common)
      sequence:{ type: Boolean, default: false },
      url:{ type: String, default: '' }, //
      params: {type:Object,default:function() {return null}},
      setting: {type:Object,default:function() {return null}},
      selectedId:{type:String,default:''},
      showDep:{type: Boolean, default: false},//是否显示机构复选框
      ztreeName:{type: String, default: '组织机构树'},
      ztreeNameShow:{type: Boolean, default: false},//是否展示树文字说明
      isShowTreeModal:{type: Boolean, default: false},//是否弹出树选择框
    },
    data(){
      return {
        checkTreeNode:{},
        checkTreeExpandNode:{},
        options: {
          trigger: '.ivu-modal-header',
          body: '.ivu-modal',
          recover: true
        },
      }
    },
    methods:{
      cancel () {
        this.$emit("update:isShowTreeModal", false);
      },
      clickTree(event, treeId, treeNode){
        this.checkTreeNode = treeNode;
      },
      checkTree(event, treeId, treeNode){
        this.checkTreeNode = treeNode;
      },
      expandTree(event, treeId, treeNode){
        this.checkTreeExpandNode = treeNode;
      },
      ok(){
        if(Object.keys(this.checkTreeNode).length===0){
          this.$Message.error("请选择后再点击确定！");
          return false;
        }
        this.$emit("checkTreeNode", this.checkTreeNode);
        if(Object.keys(this.checkTreeExpandNode).length>0){
          this.$emit("checkTreeExpandNode", this.checkTreeExpandNode);
        }
        this.$emit("update:isShowTreeModal", false);
        this.checkTreeNode = {};
        this.checkTreeExpandNode = {};
      }
    }
  }
</script>

<style scoped>

</style>
