<template>
  <div class="bf-permissionlist">
    <!-- 权限列表 -->
    <div class="right">
      <div class="paren_header">
        <p class="manageTitle">{{ title }}</p>
      </div>
      <div class="paren_type">
        <ul>
          <li>
            <div class="log"></div>
            <p>时效规则有</p>
          </li>
          <li>
            <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_list">
        <ul>
          <li v-for="(item, index) in dataLists" :key="index">
            <div class="up_type" :class="active === index ? 'up_types' : 'up_type'" @click="upActive(item, index)">
              {{ item.AppName }}
            </div>
          </li>
        </ul>
      </div>
      <template v-if="RoleData.length">
        <div :class="active ? 'bgActive' : ''" class="paren_content">
          <el-scrollbar style="height: 100%">
            <el-row :gutter="16">
              <el-col :span="8" v-for="(item, index) in RoleData" :key="index">
                <div :title="item.AuthName" class="cide">
                  <div class="cide_header">
                    <p>{{ item.AuthName }}</p>
                    <span @click.stop="upStart(item)">查看</span>
                  </div>
                  <div class="cide_cont">
                    <ul>
                      <li v-if="item.ValidBegin" class="statusDate"></li>
                      <li v-if="
                          item.DeleteRow ||
                          item.EditCol ||
                          item.EditRow ||
                          item.NewCol ||
                          item.QueryCol ||
                          item.QueryRow
                        " class="statusShow"></li>
                      <li v-if="item.Action" :class="'statusRule' + item.Action"></li>
                    </ul>
                  </div>
                </div>
              </el-col>
            </el-row>
          </el-scrollbar>
        </div>
      </template>
      <template v-else>
        <NoData />
      </template>
      <Competencypop :dialogVisiblestart="dialogVisiblestart" :form="form" @handleClose="handleClose" />
    </div>
  </div>
</template>
<script>
import "./permissionlist.scss";
import Competencypop from "../competencypop/index.vue";
import NoData from "@/components/nodata"
export default {
  props: {
    title: {
      type: String,
      default: "",
    },
    check: {
      type: Boolean,
      default: false,
    },
    RoleList: {
      type: Array,
      default: () => [],
    },
    imageSize: {
      type: Number,
      default: 160,
    },
  },
  data () {
    return {
      dialogVisiblestart: false,
      active: 0,
      msg: 0,
      RoleData: [],
      dataLists: [],
      jurisdiction: [
        {
          name: "权限名称",
        },
        {
          name: "权限名称",
        },
        {
          name: "权限名称",
        },
        {
          name: "权限名称",
        },
      ],
      DataList: [],
      form: {},
    };
  },
  components: {
    Competencypop,
    NoData
  },
  mounted () {
    this.Roleup();
  },
  watch: {
    RoleList: {
      handler (arr) {
        this.RoleData = [];
        this.dataLists = [];
        if (arr && arr.length) {
          this.Roleup(arr);
        }
      },
      deep: true,
    },
  },
  methods: {
    Roleup (arr) {
      const datas = _.cloneDeep(arr);
      const arrs = _.unionBy(datas, "AppId");
      const newDatas = arrs.filter((item) => item.AppId);
      if (newDatas && newDatas.length) {
        this.dataLists = newDatas;
        const goodDatas = this.getData(newDatas[0].AppId);
        this.RoleData = goodDatas;
      } else {
        this.RoleData = [];
        this.dataLists = [];
      }
    },
    upActive (item, index) {
      this.active = index;
      this.RoleData = this.getData(item.AppId);
    },
    getData (id) {
      const datas = [];
      this.RoleList.forEach((item) => {
        if (item.AppId === id) {
          datas.push(item);
        }
      });
      return datas;
    },
    //打开编辑
    upStart (item) {
      this.form = item;
      // if (item.Action == 2) {
      //   this.dialogVisiblestart = true
      // }
      this.dialogVisiblestart = true;
    },
    //关闭编辑
    handleClose (data) {
      let arr = {
        AuthId: "",
      };
      this.dialogVisiblestart = false;
      this.$emit("Competen", data);
    },
  },
};
</script>
<style lang="scss">
</style>