<template>
  <div class="bf-permissiontree">
    <!-- 权限树 -->
    <div class="cont">
      <div class="paren_header">
        <p class="manageTitle">{{ title }}</p>
      </div>
      <div class="paren_type">
        <ul>
          <!-- <li>
            <div class="log"></div>
            <p>时效规则有</p>
          </li> -->
          <li class="icon-gz">
            <div class="log"></div>
            <p>数据规则有</p>
          </li>
          <!-- <li>
            <div class="log"></div>
            <p>显示及编辑权限</p>
          </li>
          <li>
            <div class="log"></div>
            <p>显示权限</p>
          </li> -->
        </ul>
      </div>
      <div class="paren_cont">
        <el-scrollbar style="height: 100%">
          <el-tree :data="treeData" show-checkbox @check="currentChange" @node-click="handleNodeClick" :defaultProps="defaultProps" :expand-on-click-node="false" node-key="auth_id" :default-expanded-keys="defaultExpandedKeys" ref="tree" highlight-current>
            <span class="custom-tree-node" slot-scope="{ data }">
              {{ data.auth_name }}
              <div class="logup">
                <div class="one" v-if="
                    data.AuthList != null && data.AuthList.ValidBegin != null
                  "></div>
                <div class="two" v-if="data.AuthList != null && data.AuthList.Action == '1'"></div>
                <div class="four" v-if="data.AuthList != null && data.AuthList.Action == '2'"></div>
                <div class="three" v-if="
                    data.AuthList &&
                    (data.AuthList.EditCol ||
                      data.AuthList.DeleteRow ||
                      data.AuthList.EditRow ||
                      data.AuthList.NewCol ||
                      data.AuthList.QueryCol ||
                      data.AuthList.QueryRow)
                  "></div>
              </div>
            </span>
          </el-tree>
        </el-scrollbar>
      </div>
    </div>
  </div>
</template>
<script>
// import treeData from "@/views/authorityManagement/minixs/treeData";
import { translateDataToTreeAll } from "@/utils/validate";
import { Query } from '@/api/dataIntegration';
export default {
  props: {
    title: {
      type: String,
      default: "",
    },
    checkedKeys: {
      type: Array,
      default: () => [],
    },
  },
  data () {
    return {
      active: 0,
      treeData: [],
      treeTitles: [],
      defaultProps: {
        children: "children",
        label: "auth_name",
      },
      defaultExpandedKeys: [-1],
      dataObj: {}, //上级权限指定树数据
      AuthArrList: [],//权限列表源数据
      AuthList: [],//权限规则列表
      checkedList: []//选中的列表
    };
  },
  watch: {
    checkedKeys: {
      handler (val) {
        this.checkedList = val;
        this.$refs.tree.setCheckedKeys(val)
      },
      deep: true,
    },
    "$store.state.auth.authList": {
      handler (val) {
        this.AuthList = val;
        this.resetData();
        this.defaultExpandedKeys = [this.$store.getters.authId]
      },
      deep: true,
    },
  },
  created () {
    this.getDataList()
  },
  methods: {
    //获取权限列表
    getDataList () {
      Query({
        id: DATACONTENT_ID.authTreeId,
        dataContent: ['']
      }).then((result) => {
        if (result.code == 0) {
          this.AuthArrList = _.cloneDeep(result.returnData.listValues)
          this.toTree(this.AuthArrList)
        } else {
          this.$message.error(result.message)
        }
      });
    },
    //数据转树形
    toTree () {
      this.treeData = [];
      const arr = translateDataToTreeAll(
        this.AuthArrList,
        "up_auth_id",
        "auth_id"
      )
      const items = {
        auth_id: -1,
        auth_name: "所有权限",
        auth_status: 0,
        up_auth_id: -2,
        auth_type: 0,
        children: arr,
      };
      this.treeData = [items]
    },
    // 树节点选中
    currentChange () {
      const datas = this.$refs.tree.getCheckedNodes()
      this.setDataObj(datas)
    },
    // 选中后设置初始数据
    setDataObj (arr) {
      arr.forEach((item) => {
        if (!item.AuthList) {
          item.AuthList = {
            auth_id: item.auth_id,
            QueryRow: "",
            QueryCol: "",
            NewCol: "",
            EditRow: "",
            EditCol: "",
            DeleteRow: "",
          };
        }
      });
      this.$emit("getTreeData", arr);
    },
    //获取指定数据
    decompose (data, id) {
      for (let i = 0; i < data.length; i++) {
        if (data[i].AuthId == id) {
          this.data = [data[i]];
        } else if (data[i].children && data[i].children.length > 0) {
          this.decompose(data[i].children, id);
        }
      }
    },
    //获取权限规则 从新组合数据
    resetData () {
      this.AuthArrList.forEach((item1) => {
        item1["AuthList"] = null;
        this.AuthList.forEach((item2) => {
          if (item1.auth_id == item2.auth_id) {
            item1.AuthList = item2.AuthList;
          }
        });
      });
      this.toTree();
    },
    //获取点击目标
    handleNodeClick (data) {
      if (data.children) {
        delete data.children
      }
      const arr = this.$store.getters.authArrs;
      arr.push(data);
      const datas = _.unionBy(arr, "auth_id");
      // const newDatas = _.cloneDeep(datas);
      // this.$store.dispatch("auth/changeAuthMsg", newDatas);
      this.$store.dispatch("auth/changeAuthArrs", datas);
      this.$store.dispatch("auth/changeAuthId", data.auth_id);
    }
  },
};
</script>
<style lang="scss">
@import "./permissiontree.scss";
</style>
