<template>
  <div class="application scroll-y">
    <div class="application-head flex">
      <div class="manageTitle">角色管理</div>
      <div class="flex-wrap">
        <Search @clear="clear" @search="search" />
        <el-button size="default" @click="addApp" plain>新增</el-button>
      </div>
    </div>
    <div class="application-content">
      <Table :tableHeader="tableHeader" @btnClick="btnClick" :tableBtnGroup="tableBtnGroup" :tableData="tableData" />
    </div>
    <!--删除弹框-->
    <Dialog :flag="flag" msgTitle="删除角色" type="del" :delName="title" @delRest="delRest" @delRemove="remove" />
    <!--新增/编辑-->
    <Dialog :flag="editDialogVisible" :msgTitle="editDialogTitle" @submitForm="submitForm(ruleFormRef)" @resetForm="resetForm(ruleFormRef)" :show-flag="true">
      <el-form ref="ruleFormRef" :model="ruleForm" label-width="110px" class="demo-ruleForm">
        <el-form-item label="角色名称" prop="roleName">
          <el-input v-model="ruleForm.roleName" size="default" placeholder="请输入角色名称" />
        </el-form-item>
        <el-form-item label="角色描述" prop="roleDesc">
          <el-input v-model="ruleForm.roleDesc" size="default" type="textarea" :rows="3" placeholder="请输入角色描述" />
        </el-form-item>
        <el-form-item label="是否启用" prop="roleStatus">
          <el-radio-group v-model="ruleForm.roleStatus">
            <el-radio label="1">启用</el-radio>
            <el-radio label="2"> 禁用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
    </Dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import { ElMessage, FormInstance, FormRules } from "element-plus";
import Table from "@/components/tableTemp/index.vue";
import Search from "@/components/search/index.vue";
const router = useRouter();
const ruleFormRef = ref<FormInstance>();
const tableHeader = [
  { label: "角色名称", key: "roleName" },
  { label: "账号数", key: "accountNum" },
  { label: "权限项数", key: "authNum" },
  { label: "是否存在互斥", key: "isHc" },
  { label: "启用状态", key: "status" },
  { label: "描述", key: "desc" },
];
const tableData = ref([
  {
    id: 1,
    roleName: "11",
    accountNum: "22",
    authNum: "33",
    isHc: "是",
    status: "启用",
    desc: "555",
  },
  {
    id: 2,
    roleName: "11",
    accountNum: "22",
    authNum: "33",
    isHc: "是",
    status: "启用",
    desc: "555",
  },
]);
const tableBtnGroup = [
  {
    name: "编辑",
    className: "editBtn",
    param: "edit",
  },
  {
    name: "查看权限",
    className: "editBtn",
    param: "auth",
  },
  {
    name: "删除",
    className: "delBtn",
    param: "del",
  },
];
const flag = ref(false);
const title = ref("");
const dT = ref("add");
const editDialogVisible = ref(false);
const editDialogTitle = ref("新增角色");
const ruleForm = reactive({
  roleName: "",
  roleDesc: "",
  roleStatus: "",
});
const rowIndex = ref(1);
const search = (val) => {
  ElMessage.success(`搜索成功：${val}`);
};
const clear = () => {
  ElMessage.success(`清除`);
};
const btnClick = (index, row, param) => {
  rowIndex.value = index;
  if (param == "del") {
    flag.value = true;
    title.value = row.roleName;
  } else if (param == "edit") {
    dT.value = "edit";
    editDialogVisible.value = true;
    editDialogTitle.value = "编辑角色";
    ruleForm.roleName = row.roleName;
    ruleForm.roleDesc = row.desc;
    ruleForm.roleStatus = row.status;
  } else {
    router.push("/userManagement/auth");
  }
};
const delRest = () => {
  flag.value = false;
};
const remove = () => {
  tableData.value.splice(rowIndex.value, 1);
  ElMessage.success("删除成功");
  flag.value = false;
};
const addApp = () => {
  editDialogVisible.value = true;
  editDialogTitle.value = "新增角色";
  dT.value = "add";
  ruleForm.roleDesc = "";
  ruleForm.roleName = "";
  ruleForm.roleStatus = "";
};
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      if (dT.value == "add") {
        const len = tableData.value.length;
        tableData.value.push({
          id: len + 1,
          roleName: ruleForm.roleName,
          desc: ruleForm.roleDesc,
          status: ruleForm.roleStatus,
          accountNum: "22",
          authNum: "33",
          isHc: "是",
        });
        ElMessage.success("新增成功");
      } else {
        tableData.value[rowIndex.value] = {
          id: tableData.value[rowIndex.value].id,
          roleName: ruleForm.roleName,
          desc: ruleForm.roleDesc,
          status: ruleForm.roleStatus,
          accountNum: "22",
          authNum: "33",
          isHc: "是",
        };
        ElMessage.success("编辑成功");
      }
      editDialogVisible.value = false;
    } else {
      console.log("error submit!", fields);
    }
  });
};

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
  editDialogVisible.value = false;
};
</script>

<style lang="scss" scoped>
.application {
  &-content {
    margin-top: 24px;
    height: calc(100% - 56px);
  }
}
</style>