<template>
  <el-form :model="queryParams" class="query-form" inline ref="roleForm">
    <el-form-item label="角色名称" prop="roleName">
      <el-input
          v-model="queryParams.roleName"
          placeholder="请输入角色名称"
          clearable
      ></el-input>
    </el-form-item>
    <el-form-item label="角色标识符" prop="roleKey">
      <el-input
          v-model="queryParams.roleKey"
          placeholder="请输入角色标识符"
          clearable
      ></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="searchRole" :icon="Search">搜索</el-button>
      <el-button @click="handleReset" :icon="Refresh">重置</el-button>
    </el-form-item>
  </el-form>
  <div class="table-header-btn">
    <el-button type="primary" @click="handleAdd" :icon="Plus">添加角色</el-button>
    <el-button type="danger" @click="handleCancelAll" :icon="CircleClose" plain>全部取消</el-button>
    <el-button type="danger" @click="handleCancelAuthorization(cancelRoleIds,roleNames)" :icon="CircleClose" plain :disabled="moreCancelDisabled">批量取消</el-button>
  </div>
  <div class="table">
    <el-table
        :data="list"
        row-key="roleId"
        :lazy="true"
        ref="table"
        v-loading="loading"
        @select="handleSelect"
    >
      <el-table-column type="selection" width="55"/>
      <el-table-column label="序号" type="index" align="center" width="60"/>
      <el-table-column prop="roleName" label="角色名称" align="center"/>
      <el-table-column prop="roleKey" label="角色标识符" align="center"/>
      <el-table-column prop="dataScope" label="数据范围" align="center">
        <template #default="scope">
          <el-text v-if="scope.row.dataScope == '1'">所有数据权限</el-text>
          <el-text v-if="scope.row.dataScope == '2'">自定义数据权限</el-text>
          <el-text v-if="scope.row.dataScope == '3'">本部门数据权限</el-text>
          <el-text v-if="scope.row.dataScope == '4'">本部门及以下数据权限</el-text>
        </template>
      </el-table-column>

      <el-table-column prop="roleSort" label="显示顺序" align="center"/>
      <el-table-column prop="state" label="状态" align="center">
        <template #default="scope">
          <tag dict-type="normal_disable" :value="scope.row.state"/>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" align="center" width="180px"/>
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button type="text" size="mini"
                     @click="handleCancelAuthorization(scope.row.roleId,scope.row.roleName)" :icon="CircleClose">取消授权
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <paging :current-page="pageInfo.pageNum" :page-size="pageInfo.pageSize" :page-sizes="[10, 20, 30, 40,50]"
          :total="total" @changeSize="handleSizeChange" @goPage="handleCurrentChange"/>
  <el-dialog v-model="isVisited" :title="title" width="830px">
    <el-form :model="query" class="query-form" inline ref="formInstance">
      <el-form-item label="角色名称" prop="roleName">
        <el-input
            v-model="query.roleName"
            placeholder="请输入角色名称"
            clearable
        ></el-input>
      </el-form-item>
      <el-form-item label="角色标识符" prop="roleKey">
        <el-input
            v-model="query.roleKey"
            placeholder="请输入角色标识符"
            clearable
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getExcludeRole" :icon="Search">搜索</el-button>
        <el-button @click="handleDialogReset" :icon="Refresh">重置</el-button>
      </el-form-item>
    </el-form>
    <div class="table">
      <el-table
          :data="roleList"
          row-key="roleId"
          :lazy="true"
          v-loading="dialogLoading"
          @select="handleDialogSelect"
      >
        <el-table-column type="selection" width="55"/>
        <el-table-column label="序号" type="index" align="center" width="60"/>
        <el-table-column prop="roleName" label="角色名称" align="center"/>
        <el-table-column prop="roleKey" label="角色标识符" align="center"/>
        <el-table-column prop="dataScope" label="数据范围" align="center">
          <template #default="scope">
            <el-text v-if="scope.row.dataScope == '1'">所有数据权限</el-text>
            <el-text v-if="scope.row.dataScope == '2'">自定义数据权限</el-text>
            <el-text v-if="scope.row.dataScope == '3'">本部门数据权限</el-text>
            <el-text v-if="scope.row.dataScope == '4'">本部门及以下数据权限</el-text>
          </template>
        </el-table-column>
        <el-table-column prop="roleSort" label="显示顺序" align="center"/>
        <el-table-column prop="state" label="状态" align="center">
          <template #default="scope">
            <tag dict-type="normal_disable" :value="scope.row.state"/>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" align="center" width="180px"/>
        <el-table-column label="操作" align="center">
          <template #default="scope">
            <el-button type="text" size="mini"
                       @click="handleSubmit(scope.row.roleId)" >添加
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <paging :current-page="pageInfo.pageNum" :page-size="pageInfo.pageSize" :page-sizes="[10, 20, 30, 40,50]"
            :total="dialogTotal" @changeSize="handleSizeChangeDialog" @goPage="handleCurrentChangeDialog"/>

    <template #footer>
      <span>
        <el-button @click="handleCancel">取消</el-button>
        <el-button type="primary" @click="handleSubmit(roleIds)" :disabled="dialogDisabled">批量添加</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import {Plus, Search, Refresh, CircleClose} from "@element-plus/icons-vue";
import {ElMessage, ElMessageBox} from "element-plus";
import {getRoleInfoByMenuId,getRoleExcludeMenuId,unbindAllRole,cancelAuthorization,bindRoleAndMenu} from "@/api/role/role"
import {useRouter} from "vue-router";
import Tag from '@/components/Tag.vue'
import Paging from "@/components/pagination/index.vue";

const router = useRouter();
const menuId = reactive(router.currentRoute.value.params.menuId)
const roleForm = ref();
const table = ref();
const title = ref('添加角色');
const list = ref([]);
const roleList = ref([]);
const total = ref([]);
const dialogTotal = ref([]);
const moreCancelDisabled = ref(true);
const dialogDisabled = ref(true);
const loading = ref(true);
const dialogLoading = ref(true);
const roleNames = ref([]);
const cancelRoleIds = ref([]);
const roleIds = ref([]);
const queryParams = reactive({
  roleName: "",
  roleKey: ""
});
const query = reactive({
  roleName: "",
  roleKey: ""
});
const pageInfo = reactive({
  pageNum: 1,
  pageSize: 10
});
const formInstance = ref();
const isVisited = ref(false);
const form = ref();
//角色搜索重置
const handleReset = () => {
  roleForm.value.resetFields();
  searchRole();
};
const handleDialogReset = () => {
  formInstance.value.resetFields();
  getExcludeRole();
};
//根据角色id获取角色信息
const searchRole = async () => {
  let params = {
    menuId: menuId,
    ...queryParams,
    ...pageInfo
  };
  getRoleInfoByMenuId(params).then(res => {
    if (res.code === 1000) {
      list.value = res.data.rows;
      total.value = res.data.total;
      loading.value = false;
    } else {
      ElMessage.error(res.msg);
    }
  });
};
//获取添加弹窗的角色
const getExcludeRole = async () => {
  let params = {
    menuId: menuId,
    ...query,
    ...pageInfo
  };
  getRoleExcludeMenuId(params).then(res => {
    if (res.code === 1000) {
      roleList.value = res.data.rows;
      dialogTotal.value = res.data.total;
      dialogLoading.value = false;
    } else {
      ElMessage.error(res.msg);
    }
  });
};

//添加角色
const handleAdd = () => {
  getExcludeRole()
  isVisited.value = true
  dialogDisabled.value = true
}
//全部取消授权
const handleCancelAll = () => {
  ElMessageBox.confirm(`确认全部取消授权吗?`, "系统提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning"
  }).then(() => {
    unbindAllRole(menuId).then(res => {
      if (res.code === 1000) {
        ElMessage.success(res.msg);
        searchRole()
      } else {
        ElMessage.error(res.msg);
      }
    });
  })
}
//取消授权
const handleCancelAuthorization = (roleId,roleName) => {
  ElMessageBox.confirm(`确认取消授权角色名称为"${roleName}"的角色吗?`, "系统提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning"
  }).then(() => {
    cancelAuthorization(menuId, roleId).then(res => {
      if (res.code === 1000) {
        ElMessage.success(res.msg);
        moreCancelDisabled.value=true
        searchRole()
      } else {
        ElMessage.error(res.msg);
      }
    });
  })
}

//取消
const handleCancel = () => {
  isVisited.value = false;
};

const handleSelect =  (selection) => {
  if (selection.length !== 0) {
    moreCancelDisabled.value = false;
    cancelRoleIds.value=selection.map(item=>item.roleId).join()
    roleNames.value=selection.map(item=>item.roleName).join()
  } else {
    moreCancelDisabled.value = true;
  }
}
const handleDialogSelect =  (selection) => {
  if (selection.length !== 0) {
    dialogDisabled.value = false;
    roleIds.value=selection.map(item=>item.roleId).join()
  } else {
    dialogDisabled.value = true;
  }
}
//添加角色
const handleSubmit = (roleId) => {
  bindRoleAndMenu(menuId,roleId).then(res => {
    if (res.code === 1000) {
      ElMessage.success(res.msg);
      searchRole()
      isVisited.value = false
    } else {
      ElMessage.error(res.msg);
    }
  });
}
//切换每页显示条数
const handleSizeChange = (val) => {
  pageInfo.pageSize = val;
  searchRole();
};
const handleSizeChangeDialog = (val) => {
  pageInfo.pageSize = val;
  getExcludeRole();
};

//点击页码进行分页功能
const handleCurrentChange = (val) => {
  pageInfo.pageNum = val;
  searchRole();
};
const handleCurrentChangeDialog = (val) => {
  pageInfo.pageNum = val;
  getExcludeRole();
};

searchRole()
</script>
