<template>
  <div class="timedTask from-clues">
    <div class="from-clues-header">
      <el-form ref="ruleForm" :model="form" label-width="100px">
        <el-form-item>
          <Breadcrumb />
        </el-form-item>
        <el-row class="mb-5">
          <el-col :span="2" class="btnColRight">
            <btn nativeType="cx" @click="handleAddEdit">增加角色</btn>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="from-clues-content">
      <lb-table
        :page-size="pageData.size"
        :current-page.sync="pageData.current"
        :total="pageData.total"
        @size-change="handleSizeChange"
        @p-current-change="handleCurrentChange"
        :column="tableData.columns"
        :data="listdata"
        :expand-row-keys="keyList"
        row-key="id"
      >
      </lb-table>
    </div>
    <EditDialog ref="addEditDialog" @ok="reloadTableData" />
    <Roleslistdiglog ref="rolesForm" />
  </div>
</template>
<script>
import {
  getUuid,
  judgeSort,
  realMove,
  findParents,
  removeTreeListItem,
} from "@/utils/operation";
import { getRolesById, getUserRoles } from "@/api/quanxianmanagement";
import data from "./data";
import sjsbTask from "@/api/sjsbTask.js";
import { api, getAction,deleteAction } from "@/api/manageApi";
import tableMixin from "@/mixins/tableMixin.js";
import EditDialog from "./edit-dialog.vue";
import Roleslistdiglog from "./roleslistdiglog.vue";
export default {
  name: "menus",
  mixins: [tableMixin],
  components: {
    EditDialog,
    Roleslistdiglog,
  },
  data() {
    return {
      personlist: null,
      waitMemberList: [],
      keyList: [],
      listdata: [],
      tableUrl: api.roles,
      form: {
        job_name: "",
        currentPage: 1,
      },
      // 当前所选角色id
      roleId: "",
      title: "",
      queryParam: {},
      selectType: "0",
      queryName: "",
      organizationId: "", // 组织机构ID
      departmentId: "", // 部门ID
      departmentList: [], // 部门列表
      levelList: [], // 职务级别
      sexList: [],
      typeOptions: [
        {
          value: "0",
          label: "姓名",
        },
        {
          value: "1",
          label: "工号",
        },
        {
          value: "2",
          label: "部门",
        },
        {
          value: "3",
          label: "机构",
        },
      ],

      selectionList: [],
      tableData: {
        columns: [
          {
            label: "序号",
            type: "index",
            width: "50",
            index: this.indexMethod,
          },
        ]
          .concat(data.columns())
          .concat([
            {
              label: "排序",
              width: 380,
              render: (h, scope) => {
                return (
                  <div>
                    <el-button
                      type="text"
                      disabled={scope.row.isTop}
                      onClick={() => {
                        this.moveUpward(scope.$index, scope.row);
                      }}
                    >
                      上移
                    </el-button>
                    <el-button
                      type="text"
                      disabled={scope.row.isBottom}
                      onClick={() => {
                        this.moveDown(scope.$index, scope.row);
                      }}
                    >
                      下移
                    </el-button>
                  </div>
                );
              },
            },
          ])
          .concat([
            {
              label: "操作",
              width: 380,
              render: (h, scope) => {
                return (
                  <div>
                  <el-tooltip class="item" effect="dark" disabled={scope.row.type !== 'Everyone'} content="没有点击的权限" placement="top">
                   <span>
                    <el-button
                      disabled={scope.row.type === 'Everyone'}
                      type="text"
                      size="mini"
                      icon="el-icon-video-pause"
                      onClick={() => {
                        this.getUserList(scope.row);
                      }}
                    >
                      人员
                    </el-button>
                    </span>
                    </el-tooltip>
                   <el-tooltip class="item" effect="dark" disabled={scope.row.category !== 1} content="系统内置角色 不允许修改" placement="top">
                   <span>
                    <el-button
                     disabled={scope.row.category === 1}
                      type="text"
                      size="mini"
                      icon="el-icon-edit"
                      onClick={() => {
                        this.handleAddEdit(scope.row);
                      }}
                    >
                      修改
                    </el-button>
                    </span>
                    </el-tooltip>
                    <el-tooltip class="item" effect="dark" disabled={scope.row.category !== 1} content="系统内置角色 不允许删除" placement="top">
                   <span>
                    <el-button
                      type="text"
                      disabled={scope.row.category === 1}
                      size="mini"
                      icon="el-icon-delete"
                      // style="color:#F56C6C"
                      onClick={() => {
                        this.handleDelete(scope.row.id, scope.row.name);
                      }}
                    >
                      删除
                    </el-button>
                    </span>
                    </el-tooltip>
                  </div>
                );
              },
            },
          ]),
        data: [],
      },
      pageData: {
        total: 5,
        pageSize: 15,
        current: 1,
      },
    };
  },
  created() {
    this.getTableData();
  },
  mounted() {},
  methods: {
    // 获取角色列表
    getTableData() {
      let Builtinrole=[]
      let Publicrole=[]

      getRolesById(1)
        .then((res) => {
          Builtinrole = res.content;
                getRolesById(2)
        .then((res) => {
          Publicrole = res.content;

          this.listdata = Builtinrole.concat(Publicrole);

           this.listdata = judgeSort(this.listdata);
        })
        .catch((e) => console.error(e));
       })
        .catch((e) => console.error(e));


    },
  //  人员配置
    getUserList(row) {
      const params = {};
      const queryOptions = {
        conditionGroup: {
          conditions: [
            {
              property: "organizationId",
              value: row.organizationId,
              operator: "EQ",
            },
            {
              property: "departmentId",
              value: row.departmentId,
              operator: "EQ",
            },
          ],
          queryRelation: "AND",
        },
        orderBys: [{ property: "sort", direction: "desc" }],
      };
      params.queryOptions = JSON.stringify(queryOptions);
      getUserRoles(row.id).then((res) => {
        if (res.status === 1) {
          this.personlist = res.content;
          getAction(api.users, params).then((res) => {
            if (res.status === 1) {
              this.waitMemberList = res.content;
              if (this.personlist) {
                this.waitMemberList.forEach((item, i) => {
                  this.personlist.forEach((val) => {
                    if (item.id === val.id) {
                      this.waitMemberList[i].selectStatus = 0;
                    }
                  });
                });
              }

              this.$refs.rolesForm.adds(this.waitMemberList, row.id);
            } else {
              this.$message.error({ message: res.message, showClose: true });
            }
          });
          this.$refs.rolesForm.title = "人员配置";
        } else this.$message.error({ message: res.message, showClose: true });
      });
    },
    // 新增、修改角色
    handleAddEdit(value) {
      this.$refs.addEditDialog.menuType = this.menuType;
      this.$refs.addEditDialog.roleId = value.id;
      this.roleSort = value.sort ? value.sort : 0;
      if (value.id) {
        this.$refs.addEditDialog.dialogForm.roleName = value.name;
        this.$refs.addEditDialog.dialogForm.roleType = value.type;
        this.$refs.addEditDialog.dialogForm.roleTextArea = value.description;
      }
      this.$refs.addEditDialog.showAddEditDialog = true;
      this.$refs.addEditDialog.dialogTitle = value.id ? "修改" : "新增";
    },
    // 上移下移
    moveUpward(index, row) {
      realMove(row.id, "UP", this.listdata);
      this.key++;
      let id = findParents(this.listdata, row.id);
      this.keyList = id;
    },
    moveDown(index, row) {
      realMove(row.id, "DOWN", this.listdata);
      this.key++;
      let id = findParents(this.listdata, row.id);
      this.keyList = id;
    },

     // 删除
    handleDelete: function(id, content = '') {
      this.$confirm(
        `<div  class="customer-message-wrapper">
              <h5 class="title">您确认要执行该操作用于以下信息:</h5>
              <p class="content" aria-controls="${content}">${content}
              </p>
               <p class="result">执行后，数据将
                 <span >无法恢复</span>
                </p>
        </div>`,
        '执行确认',
        {
          dangerouslyUseHTMLString: true,
          customClass: 'customer-delete',
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      )
        .then(() => {
          if (!this.tableUrl) {
            this.$message.error({
              message: '请设置tableUrl属性为接口地址!',
              showClose: true
            })
            return
          }
          const url = this.tableUrl + '/' + id
          deleteAction(url).then(res => {
            if (res.status === 1) {
              this.$message.success({ message: res.message, showClose: true })
              this.getTableData()
            } else {
              this.$message.error({ message: res.message, showClose: true })
            }
          })
        })
        .catch(() => {})
    },
      // 新增回显
    reloadTableData() {
      this.getTableData()
    },
  },
};
</script>
<style scoped lang="scss">
@import "~@/styles/mixin.scss";
@import "~@/styles/public.scss";
.btnColRight {
  margin-left: -30px;
  margin-top: 20px;
}
</style>