<!--
 * @Author: your name
 * @Date: 2021-11-29 16:31:31
 * @LastEditTime: 2022-03-02 13:51:29
 * @LastEditors: Please set LastEditors
 * @Description: 新增/编辑角色
 * @FilePath: \Foshan4A2.0\src\views\authorityManagement\components\authorityRoleStatus.vue
-->
<template>
  <div class="authorityPower">
    <!--新增权限项-->
    <div class="power-content flex-wrap">
      <div class="r24 flex1 part">
        <div style="padding: 27px 24px;height: 100%;" class="addApp-form">
          <div class="addApp-form-title flex">
            <div class="manageTitle">账号信息</div>
            <!-- <div class="title">
              编辑角色
              <span class="isqy">
                <span>是否启用</span>
                <el-radio v-model="radio" :label="1">是</el-radio>
                <el-radio v-model="radio" :label="0">否</el-radio>
              </span>
            </div> -->
            <!-- <div v-is="['role_edit save','admin']" class="btn">
              <el-button @click="saveBtn('form')" size="small" type="primary">保存</el-button>
            </div> -->
          </div>
          <div class="addApp-form-content dialog-public-background">
            <el-form :inline="true" label-width="80px" ref="form" :rules="rules" class="form" :model="form">
              <el-form-item prop="name" label="账号名称">
                <el-input disabled placeholder="请输入角色名称" maxlength="32" v-model="form.name"></el-input>
              </el-form-item>
              <el-form-item label="账号描述">
                <el-input style="width: 340px" disabled type="textarea" :rows="3" maxlength="200" placeholder="请输入描述" v-model="form.app"></el-input>
              </el-form-item>
              <el-form-item label="是否启用">
                <el-radio disabled v-model="form.id" :label="1">是</el-radio>
                <el-radio disabled v-model="form.id" :label="2">否</el-radio>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
      <div class="flex1 r24 part">
        <Rolelist v-loading="loading" element-loading-text="数据加载中" @checkChange="checkChange" @checkClick="checkClick" :roleType="roleType" :checkBoxList="radioCheck" :active="true" class="hucRole" :imageSize="80" :number="8" title="角色" />
      </div>
      <div class="flex1 part">
        <Permissionlist v-loading="permission" element-loading-text="数据加载中" :check="true" :imageSize="80" :RoleList="RoleList" class="hucPower" title="权限名称" />
      </div>
    </div>
  </div>
</template>

<script>
import Permissionlist from "@/components/permissionlist";
import Rulesofcompetency from "@/components/rulesofcompetency";
import Permissiontree from "@/components/permissiontree";
import Rolelist from "@/components/rolelist";
import { RoleDetails, EditRole, RoleAuths } from "@/api/apiAuthority";
import { GeneralDataReception, Query } from '@/api/dataIntegration';
export default {
  name: "AuthorityRoleEdit",
  components: { Permissionlist, Rulesofcompetency, Permissiontree, Rolelist },
  data () {
    return {
      radio: 1,
      form: {
        //应用表单
        name: "",
        id: "",
        app: "",
      },
      rules: {
        //表单验证
        name: [{ required: true, message: "请输入角色名称", trigger: "blur" }],
      },
      loading: false,
      permission: false,
      treeData: [],
      arrs: [],
      checkedKeys: [],
      RoleList: [],
      radioCheck: [],
      checkedBoxs: [],
      defRoleId: [],
      roleId: null,
      Status: null,
      authTo: {},
      authList: [],
      authId: [],
      type: null, //参数类型
      roleType: "",
    };
  },
  created () {
    //this.getAuthTree();
    const { userId } = this.$route.query;
    this.roleId = userId;
    this.getAccountInfo();
    this.roleDetails()
  },
  mounted () {
    this.roleType = "onlyRole";
  },
  methods: {
    // 获取当前账号信息
    async getAccountInfo () {
      const res = await Query({
        id: DATACONTENT_ID.accountDetailsId,
        dataContent: [this.roleId]
      })
      if (res.code == 0) {
        const { listValues } = res.returnData
        const obj = listValues[0]
        const { user_name, user_status, user_comment } = obj
        this.form.name = user_name
        this.form.app = user_comment
        this.form.id = user_status
      } else {
        this.$message.error(res.message)
      }
    },
    //角色明细
    async roleDetails () {
      try {
        // this.loading = true;
        const res = await Query({
          id: DATACONTENT_ID.accountRoleId,
          dataContent: [this.roleId]
        })
        if (res.code == 0) {
          const { listValues } = res.returnData;
          if (listValues && listValues.length) {
            this.checkedBoxs = listValues;
            listValues.forEach((item) => {
              item.flag = true;
              item.RoleId = item.role_id;
            });
            this.radioCheck = listValues;
            this.roleAuths(listValues[0].role_id);
          }
          this.checkedKeys.push(this.checkedBoxs)
          this.loading = false;
        } else {
          this.$message.error(res.message);
          this.loading = false;
        }
      } catch (error) {
        console.log("出错了", error);
        this.loading = false;
      }
    },
    //删除
    removeRole () {
      this.deleteRole(this.roleId);
    },
    //获取权限树回调
    getTreeData (arr) {
      this.treeData = arr;
    },
    //获取权限规则回调
    getData (obj) {
      this.authTo = obj;
    },
    //互斥角色选中回调
    async checkChange (arr) {
      this.checkedKeys.push(arr)
      const data1 = this.checkedKeys[this.checkedKeys.length - 1] //最后一条数据
      const data2 = this.checkedKeys[this.checkedKeys.length - 2] //倒数第二条数据
      if (data1.length > data2.length) {
        this.checksBoxTs(data1, data2, 'add')
      } else {
        this.checksBoxTs(data2, data1, 'del')
      }
    },
    async checksBoxTs (datas, arr, type) {
      const res = datas.filter(item => !arr.some(p => item.role_id == p.role_id))
      if (res && res.length) {
        let obj = {
          role_id: res[res.length - 1].role_id,
          user_id: this.roleId
        }
        if (type == 'add') {
          obj.event = 1
        } else {
          obj.event = 3
        }
        const result = await GeneralDataReception({
          serviceId: SERVICE_ID.roleScId,
          dataContent: JSON.stringify(obj)
        })
        if (result.code == 0) {
          this.$message.success(result.message)
        } else {
          this.$message.error(result.message)
        }
      } else {
        this.$message.error('未选中数据')
      }
    },
    //互斥角色点击回调
    checkClick (item) {
      this.roleAuths(item.role_id);
    },
    async roleAuths (id) {
      try {
        this.permission = true;
        const res = await Query({
          id: DATACONTENT_ID.roleAuthId,
          dataContent: [id]
        });
        if (res.code == 0) {
          this.RoleList = res.returnData.listValues;
          this.permission = false;
        } else {
          this.$message.error(res.message);
          this.permission = false;
        }
      } catch (error) {
        console.log("出错了", error);
        this.permission = false;
      }
    },
    //保存
    saveBtn () {
      this.editRole();
    },
    //确认保存
    async editRole () {
      try {
        const res = await GeneralDataReception({
          serviceId: SERVICE_ID.roleScId,
          dataContent: JSON.stringify(this.ruleFormObj)
        });
        if (res.code === 0) {
          this.$message.success(res.message);
          this.$store.dispatch("tagsView/delView", this.$route);
          this.$router.push("/role");
        } else {
          this.$message.error(res.message);
        }
      } catch (error) {
        console.log("出错了", error);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../../authorityManagement/css/role.scss";
.part {
  background-color: #fff;
}
</style>
