<template>
  <Div v-model="show1" style="margin-left: 10px;">
    <Card>
      <template #title>
      <p style="height: 25px;"><Icon type="md-contacts" />资源权限设置
        <Button type="text" size="small" :loading="saveLoading" @click="ok" style="float: right">保存</Button>
      </p>
      </template>

      <Row type="flex" class="area-tree-row">
        <Input placeholder="请输入关键字搜索..." id="keyword" name="keyword" ></Input>
        <div class="area-tree-div" style="height: 300px;width:100%;overflow-y: auto;overflow-x:hidden">
          <ul id="resTreeDiv" class="ztree"></ul>
        </div>
      </Row>


    </Card>
  </Div>
</template>

<script>
  import { getResTreeByObj,saveObjRes } from '../../../../api/rbac/obj-res-api'
  import 'ztree/js/jquery.ztree.exhide'
  import {fuzzySearch} from '../../../bc-ztree/ztreeSearch.js'

  export default {
    name: "authorityResPart",
    props : {
      nowObj: Object,  //组件间交互的参数  当前选择的角色对象
    },
    data () {
      return{
        show1:true,//此组件展示状态
        saveLoading: false,//保存特效展示状态
        resData:[],//数据源
        treeObj:null,
        setting: {//ztree树初始化设置
          view: {
            showLine: false,
            selectedMulti: false,
            // showIcon: false
          },
          data: {
            simpleData: {
              enable: true,
              idKey: "id",
              pIdKey: "pid",
              rootPId: null
            }
          },
          check:{
            enable: true,
            chkboxType: { "Y": "ps", "N": "ps" }
          },
          callback: {
            onClick: this.clickRes
          }
        },
      }
    },
    methods: {
      ok () {//确认保存
        //获得勾选的节点
        this.treeObj = $.fn.zTree.getZTreeObj("resTreeDiv");
        let nodes = this.treeObj.getCheckedNodes(true);//所有已勾选节点
        let nodeIds = [];//已勾选id
        for(let node of nodes) {
          nodeIds.push(node.id);
        }
        //判断是否勾选
        if(nodeIds.length==0){
          this.$Message.warning("通过资源树操作至少保存一项权限");
          return;
        }
        //发送请求--star
        this.saveLoading = true;
        saveObjRes(this.nowObj.id,1,nodeIds).then(res => {
          this.$Message.success( "操作成功！");
          //关闭弹窗
          this.saveLoading = false;
          //重载表格
          this.$emit('reload-table-data');
        }).catch(err =>{
          this.$Message.error( "操作失败！");
          this.saveLoading = false;
          console.log(err);
        })
        //发送请求--end
      },
      selectHasPermissionNode (nodes) {//选中有权限的节点
        nodes.forEach(node => {
          //debugger;
          if (node.hasPermission) {
            this.treeObj.checkNode(node, true, false);
          }
          if (node.children && node.children.length>0){
            this.selectHasPermissionNode(node.children);
          }
        })
      },
      initData () {//初始化
        if (!this.nowObj.id){return false;}
        getResTreeByObj(this.nowObj.id).then(res => {
          this.treeObj = $.fn.zTree.init($("#resTreeDiv"), this.setting, res.result);
          fuzzySearch('resTreeDiv','keyword',null,false);//搜索功能
          //加载完后,初始化选择框
          let nodes = this.treeObj.getNodes();
          this.selectHasPermissionNode(nodes);
        })
      },
      clickRes (event, treeId, treeNode, clickFlag){//点击资源的事件
        this.$emit('update:nowRes', treeNode)
      }
    },
    watch:{
      nowObj:{//父组件的交互参数
        immediate:true,
        handler:function(){
          //赋值
          this.initData();//初始化数据
        }
      }
    }
  }
</script>

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