<template>
  <div class="bf-postmanagementadd">
    <div class="postmanagementadd_header">
      <div class="postmanagementadd_top">
        <div class="tltleLeft">编辑岗位</div>
        <div class="btn" style="margin-top: 20px">
          <el-button @click="editAuth" type="primary">保存</el-button>
        </div>
      </div>
      <div class="addApp-form-content dialog-public-background">
        <el-form :inline="true" ref="addFrom" :rules="rules" class="form" :model="addFrom">
          <el-form-item prop="name" label="岗位名称">
            <el-input maxlength="16" placeholder="岗位名称" v-model="addFrom.name"></el-input>
          </el-form-item>
          <el-form-item label="描述" style="margin-left: 40px">
            <el-input style="width: 640px" placeholder="请输入描述" maxlength="200" v-model="addFrom.textarea2"></el-input>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="content">
      <!-- 开启角色 -->
      <el-row :gutter="24" v-if="this.openRole != 0">
        <el-col :span="8">
          <div class="part">
            <Organization title="所属岗位" :data="data" :defaultProps="defaultProps" :checkedKeys="[GroupUpid]" :nodekey="'GroupId'" :checkedIdList="checkedIdList" @getTreeData="getTreeData" :type="true" />
          </div>
        </el-col>
        <el-col :span="8">
          <div class="part">
            <rolelists title="角色列表" @checkChange="checkChange" @checkClick="radioChanges" :checkBoxList="checkRole" :dataList="roleList" :roleType="roleType" :GroupIds="GroupIds" :number="8" />
          </div>
        </el-col>
        <el-col :span="8">
          <div class="part">
            <permissionlist title="权限列表" :RoleList="powerList" :check="true" @Competen="Competen" />
          </div>
        </el-col>
      </el-row>
      <!-- 无角色 -->
      <el-row :gutter="24" v-else>
        <el-col :span="8">
          <div class="part">
            <Organization title="所属岗位" :data="dataObj" :defaultProps="defaultProps" :nodekey="'GroupId'" :checkedKeys="[GroupUpid]" :checkedIdList="checkedIdList" @getTreeData="getTreeData" />
          </div>
        </el-col>
        <el-col :span="8">
          <div class="part">
            <Permissiontree @nodeClick="nodeClick" :checkedKeys="powerT" @getTreeData="getTreeDatas" :queryType="queryType" :queryId="queryId" title="权限树" />
          </div>
        </el-col>
        <el-col :span="8">
          <div class="part">
            <Rulesofcompetency title="权限规则" />
          </div>
        </el-col>
      </el-row>
    </div>
    <Dialog :flag="dialogVisible">
      <div class="closeDialog">
        <div class="title">删除账号</div>
        <div class="content">是否确定要删除该账号？</div>
        <div class="foot right t30">
          <el-button size="medium" class="r24">取消</el-button>
          <el-button size="medium" type="danger">删除</el-button>
        </div>
      </div>
    </Dialog>
  </div>
</template>
<script>
import Organization from "@/components/usergrouptree/index.vue";
import Permissiontree from "@/components/permissiontree/index.vue";
import Rulesofcompetency from "@/components/rulesofcompetency/index.vue";
import rolelists from "@/components/rolelist/index.vue";
import permissionlist from "@/components/permissionlist/index.vue";
import Dialog from "@/layout/components/Dialog/index.vue";
import { QueryRole, RoleAuths } from "@/api/apiAuthority";
import {
  GetGroupDetails,
  EditGroupAcc,
  GetRoleByGroup,
} from "@/api/AccountGroup.js";
import treeData from "../minixs/treeData";

export default {
  mixins: [treeData],
  components: {
    Organization,
    Permissiontree,
    Rulesofcompetency,
    rolelists,
    permissionlist,
    Dialog,
  },
  props: {
    postList: {
      type: String,
    },
    roleData: {
      type: Array,
      default: () => [],
    },
  },
  data () {
    return {
      roleType: "",
      checkedAuthList: [],
      GroupId: this.$route.query.GroupId,
      GroupUpid: this.$route.query.GroupUpid,
      butPreser: "保存",
      dialogVisible: false,
      OpenRole: 0,
      OpenGroup: 0,
      checkRole: [],
      powerT: [],
      data: [], //上级岗位
      checkedIdList: [],
      checkTrees: [], //上级权限选中的树数据
      powerTree: [], //选中的权限树数据
      rulesObj: {}, //权限规则数据
      roleList: [], //角色
      checkRoles: [], //选中的角色
      powerList: [],
      addFrom: {
        name: "",
        textarea2: "",
        // isUsed: "",
      },
      rules: {
        //表单验证
        name: [
          { required: true, message: "请输入岗位名称", trigger: "blur" },
        ],
      },
      defaultProps: {
        children: "children",
        label: "GroupName",
      },
      treeData1: [],
      AppId: 0,
      UpId: 0,
      dataObj: null,
      queryId: "",
      queryType: "group",
      objID: "",
      GroupIds: [],
    };
  },

  created () {
    let obj;
    if (typeof this.$store.state.app.systemSet == "string") {
      obj = JSON.parse(this.$store.state.app.systemSet);
    } else {
      obj = this.$store.state.app.systemSet;
    }
    const { OpenRole, OpenGroup } = obj;
    this.openRole = OpenRole;
    this.OpenGroup = OpenGroup;
    this.getDeaitls();
    this.getGroupTree();
    const { GroupUpid } = this.$route.query;
    this.UpId = GroupUpid;
    this.queryId = GroupUpid;
    this.objID = GroupUpid;
    if (OpenRole) {
      this.title = "角色";
      this.GroupIds = [GroupUpid];
      // this.RoleBox();
    }
    // if (this.UpId == -1) {
    //   this.queryId = "";
    //   this.queryType = "all";
    //   this.RoleBox();
    // } else {
    // this.queryRole();
    // }
  },
  watch: {
    dataList: {
      handler (val) {
        const arr = [val];
        // this.decompose(arr, this.GroupUpid);
        if (Array.isArray(val)) {
          this.data = val;
        } else {
          this.data = [val];
        }
      },
      deep: true,
    },
  },

  methods: {
    //权限树点击
    nodeClick (obj) {
      const arr = this.$store.getters.authArrs;
      arr.push(obj);
      this.$store.dispatch("auth/changeAuthArrs", arr);
    },
    //获取权限树回调
    getTreeDatas (arr) {
      this.checkedAuthList = arr;
    },
    //获取选中的树数据
    getTreeData (arr) {
      this.checkTrees = arr;
      if (this.checkTrees.length == 1) {
        let id = arr[0].GroupId
        console.log(id)
        this.GroupIds = [id]
        // this.GroupIds = [arr[0].GroupId]
      }
    },

    //获取权限规则
    getData (obj) {
      this.rulesObj = obj;
    },
    //获取指定数据
    decompose (data, id) {
      for (let i = 0; i < data.length; i++) {
        if (data[i].GroupId == id) {
          this.dataObj = data[i];
          delete this.dataObj.children;
          this.dataObj = [this.dataObj];
        } else if (data[i].children && data[i].children.length > 0) {
          this.decompose(data[i].children, id);
        }
      }
    },
    //岗位详情
    async getDeaitls () {
      try {
        const res = await GetGroupDetails({
          GroupId: this.GroupId,
        });
        if (res.code === 0) {
          const { GroupDesc, GroupName, Status, RoleList } = res.returnData;
          this.addFrom.name = GroupName;
          this.addFrom.textarea2 = GroupDesc;
          this.roleList = RoleList;
          // this.addFrom.isUsed = Status;
          this.$store.state.auth.authList = res.returnData.AuthList;
          res.returnData.AuthList.forEach((item) => {
            this.powerT.push(item.AuthId);
          });
          res.returnData.RoleList.forEach((item, index) => {
            if (item.IsSelected == 1) {
              this.checkRole.push(item);
            }
          });
          this.checkRoles = this.checkRole;
        } else {
          this.$message.error(res.message);
        }
      } catch (error) {
        console.log("出错了", error);
      }
    },
    async radioChanges (data) {
      try {
        let params = {
          RoleIds: [data.RoleId],
        };
        const res = await RoleAuths(params);
        if (res.code === 0) {
          this.powerList = res.returnData;
        } else {
          this.$message.error(res.message);
        }
      } catch (error) {
        console.log("出错了", error);
      }
    },
    //角色列表
    async queryRole () {
      try {
        const res = await GetRoleByGroup({
          GroupId: this.objID,
        });
        if (res.code === 0) {
          const arr = res.returnData.records;
          const userArr = [];
          arr.forEach((item) => {
            item.name = item.RoleName;
            if (item.IsSelected == 1) {
              userArr.push(item);
            }
          });
          // this.roleList = userArr;
        } else {
          this.$message.error(res.message);
        }
      } catch {
        console.log("出错了", error);
      }
    },
    //所有角色列表
    async RoleBox () {
      try {
        const res = await QueryRole({
          QueryName: "",
        });
        if (res.code === 0) {
          const arr = res.returnData.records;
          arr.forEach((item) => {
            item.name = item.RoleName;
          });
          // this.roleList = arr;
        } else {
          this.$message.error(res.message);
        }
      } catch {
        console.log("出错了", error);
      }
    },
    //删除岗位
    // async deleteAuth() {
    //   this.dialogVisible = true;
    // },
    // async delAcc() {
    //   try {
    //     const res = await DelAccGroup({
    //       GroupId: this.GroupId,
    //     });
    //     if (res.code === 0) {
    //       this.$message.success(res.message);
    //       setTimeout(() => {
    //         this.$router.push("/AccountGroup");
    //       }, 2000);
    //     } else {
    //       this.$message.error(res.message);
    //     }
    //   } catch (error) {
    //     console.log("出错了", error);
    //   }
    // },
    //获取权限列表
    async radioChange (data) {
      try {
        let params = {
          RoleId: data,
        };
        const res = await RoleAuths(params);
        if (res.code === 0) {
          this.RoleList = res.returnData;
        } else {
          this.$message.error(res.message);
        }
      } catch (error) {
        console.log("出错了", error);
      }
    },
    Competen (data) {
      this.$emit("Competen", data);
    },
    //岗位修改保存
    async editAuth () {
      this.checkedAuthList.forEach((item) => {
        this.treeData1.push(item.AuthList);
      });
      this.treeData1.forEach((item, index) => {
        this.$store.getters.authArrs.forEach((item2) => {
          if (item.AuthId == item2.AuthId) {
            this.treeData1[index] = item2.AuthList;
          }
        });
      });
      try {
        const res = await EditGroupAcc({
          GroupName: this.addFrom.name,
          GroupDesc: this.addFrom.textarea2,
          GroupId: this.GroupId,
          GroupUpid: this.GroupUpid,
          RoleList: this.checkRoles,
          AuthList: this.treeData1,
          // Status: this.addFrom.isUsed,
        });

        if (res.code === 0) {
          this.$message.success(res.message);
          setTimeout(() => {
            this.$router.push("/AccountGroup");
          }, 2000);
        } else {
          this.$message.error(res.message);
        }
      } catch (error) {
        console.log("出错了", error);
      }
    },
    //角色选取
    checkChange (arr) {
      const datas = [];
      const arrs = [];
      for (let i = 0; i < arr.length; i++) {
        datas.push(this.roleList[arr[i]]);
      }
      datas.forEach((item) => {
        const RoleC = {
          IsSelected: 1,
          RoleId: item.RoleId,
          RoleName: item.RoleName,
        };
        arrs.push(RoleC);
      });
      this.checkRoles = arrs;
    },
  },
  mounted () {
    this.roleType = "roleByUpId"
  }
};
</script>
<style lang="scss">
.bf-postmanagementadd {
  width: 100%;
  padding: 30px 64px;
  > .postmanagementadd_header {
    width: 100%;
    height: 184px;
    background: #ffffff;
    box-shadow: 0px 6px 7px 0px rgba(0, 0, 0, 0.06);
    border-radius: 16px;
    padding: 0 32px 0 32px;
    margin-bottom: 24px;
    > .postmanagementadd_top {
      width: 100%;
      height: 88px;
      display: flex;
      position: relative;
      justify-content: space-between;
      margin-bottom: 16px;

      .tltleLeft {
        font-size: 24px;
        font-weight: bold;
        color: #303133;
        margin-top: 20px;
      }
      .isUsed {
        margin-top: 20px;
        position: absolute;
        left: 194px;
        top: 6px;
      }
      > .but {
        height: 40px;
      }
    }
    > .postmanagementadd_list {
      width: 100%;
      display: flex;
      > .list_up {
        display: flex;
        margin-right: 40px;
        > p {
          white-space: nowrap;
          text-overflow: ellipsis;
          font-size: 14px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #303133;
          margin-top: 0;
          margin-bottom: 0;
          display: flex;
          align-items: center;
          margin-right: 16px;
        }
        > .el-input {
          width: 184px;
          height: 32px;
          background: #f9fbff;
          border-radius: 6px;
          > .el-input__inner {
            width: 100%;
            height: 100%;
            background: #f9fbff;
            border-radius: 6px;
          }
        }
        > .el-textarea {
          width: 640px;
          height: 33px;
          border-radius: 4px;
          .el-textarea__inner {
            width: 100%;
            height: 100%;
            background: #f9fbff;
            border: 1px solid #d7dae3;
            border-radius: 4px;
            resize: none;
          }
        }
      }
    }
  }
  .content {
    width: 100%;
    height: calc(100% - 184px);
    padding-top: 24px;
    box-sizing: border-box;
    // .el-row {
    //   height: 100%;
    //   .el-col {
    //     height: 100%;
    //   }
    // }
    .part {
      width: 100%;
      height: 856px;
      background: #ffffff;
      box-shadow: 0px 6px 7px 0px rgba(0, 0, 0, 0.06);
      border-radius: 16px;
    }
    .last {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
    .part2 {
      width: 100%;
      height: 512px;
      background: #ffffff;
      box-shadow: 0px 6px 7px 0px rgba(0, 0, 0, 0.06);
      border-radius: 16px;
    }
    .part3 {
      width: 100%;
      height: 320px;
      background: #ffffff;
      box-shadow: 0px 6px 7px 0px rgba(0, 0, 0, 0.06);
      border-radius: 16px;
      margin-top: 25px;
      overflow: hidden;
    }
  }
}
</style>
