<template>
  <Modal v-model="show1" :mask-closable="false" :closable="false" :title="modalTitle" :resParams="resParams" width="420" v-draggable="options">

    <Row type="flex" class="area-tree-row">
      <Input placeholder="请输入关键字搜索..." id="keyword" name="keyword" ></Input>
      <div class="area-tree-div">
        <ul id="resTree" class="ztree"></ul>
      </div>
    </Row>
    <template #footer>
    <div>
      <Button size="large"  @click="cancel">关闭</Button>
      <Button v-if="flag=='1'" type="primary" size="large" :loading="saveLoading" @click="ok">保存</Button>
      <Button v-else-if="flag=='2'" type="primary" size="large" :loading="saveLoading" @click="choseRes">确定</Button>
    </div>
    </template>
  </Modal>
</template>

<script>
  import { getTree,addRoleRes } from '../../../../api/rbac/res-manage'
  import 'ztree/js/jquery.ztree.exhide'
  import {fuzzySearch} from '../../../bc-ztree/ztreeSearch'

  export default {
    name: "res-tree",
    props : {
      resTreeShow:Boolean,//接受父附件的展示状态
      resParams: Object,  //组件间交互的参数
      openCheck:Boolean //是否开启多选框
    },
    data () {
      return{
        show1:false,//此组件展示状态
        parentId:0,//父id
        resId:0,
        objectId:0,//关联对象id
        flag:'',//类型标记-- 1-为角色添加资源 2-选择资源并返回对象
        saveLoading: false,//保存特效展示状态
        modalTitle: '',//标题
        options: {
          trigger: '.ivu-modal-header',
          body: '.ivu-modal',
          recover: true
        },
        resData:[],//数据源
        setting: {//ztree树初始化设置
          view: {
            showLine: false,
            selectedMulti: false,
            // showIcon: false
          },
          data: {
            simpleData: {
              enable: true,
              idKey: "id",
              pIdKey: "pid",
              rootPId: null
            }
          },
          check:{
            enable: this.openCheck,
            chkboxType: { "Y": "ps", "N": "ps" }
          }
        },
      }
    },
    methods: {
      ok () {//确认保存
        //获得勾选的节点
        let treeObj = $.fn.zTree.getZTreeObj("resTree");
        let nodes = treeObj.getCheckedNodes(true);//所有已勾选节点
        let ondeIds = [];//已勾选id
        for(let node of nodes) {
          ondeIds.push(node.id);
        }
        //判断是否勾选
        if(ondeIds.length==0){
          this.$Message.warning("请选择待操作节点");
          return;
        }
        //发送请求--star
        this.saveLoading = true;
        addRoleRes(this.objectId,ondeIds).then(res => {
          this.$Message.success( "操作成功！");
          //关闭弹窗
          this.show1 = false;
          this.$emit('update:resTreeShow', false);
          //重载表格
          this.$emit('reload-data');
          this.saveLoading = false;
        }).catch(err =>{
          this.$Message.error( "操作失败！");
          this.saveLoading = false;
          console.log(err);
        })
        //发送请求--end
      },
      choseRes () {//确认选择节点
        this.saveLoading = true;
        this.show1 = false;
        this.$emit('update:resTreeShow', false);
        let treeObj = $.fn.zTree.getZTreeObj("resTree");
        let node = treeObj.getSelectedNodes()[0];
        this.$emit('choseRes', node);
        this.saveLoading = false;
      },
      cancel () {//关闭退出
        $("[name='keyword']").val('');
        this.show1 = false;
        this.$emit( "update:resTreeShow", false );
      },
      initData () {//初始化
        getTree().then(res => {
          //console.log(res);
          $.fn.zTree.init($("#resTree"), this.setting, res.result);
          fuzzySearch('resTree','keyword',null,false);//搜索功能
          //隐藏当前节点与子节点
          if(this.resId != 0){
            let treeObj = $.fn.zTree.getZTreeObj("resTree");
            let node = treeObj.getNodeByParam('id',this.resId);//当前父组件传进来的节点
            treeObj.removeNode(node);
          }

        })
      }/*,
      loadData (item, callback) {//异步加载子节点
        getChilds(item.id).then(res => {
          res.result.forEach(res=>{
            res.title=res.resName;
            res.loading=false;
            res.children=[];
          });
          callback(res.result);
          //如果没有获取到子节点,那么取消掉当前节点的父节点资格
          if (res.result.length==0){
            delete item['children'];
            delete item['loading'];
          }
        });
      }*/
    },
    watch:{
      resTreeShow:{//监听组件的展示
        immediate:true,
        handler:function(){
          this.show1=this.resTreeShow;
          if (this.resTreeShow){
            this.initData();//初始化数据
          }
        }
      },
      resParams:{//父组件的交互参数
        immediate:true,
        handler:function(){
          //赋值
          this.parentId=this.resParams.parentId == null?0:this.resParams.parentId;
          this.objectId=this.resParams.objectId == null?0:this.resParams.objectId;
          this.resId=this.resParams.resId == null?0:this.resParams.resId;
          this.flag=this.resParams.flag;
          this.modalTitle=this.resParams.title;
        }
      }
    }
  }
</script>

<style scoped>
  .ivu-form-item-search {
    margin-bottom: 3px;
  }
</style>
