<template>
  <!-- 面包屑 -->
  <el-breadcrumb>
    <el-breadcrumb-item>角色管理</el-breadcrumb-item>
    <el-breadcrumb-item to="/role/list">角色列表</el-breadcrumb-item>
  </el-breadcrumb>
  <!-- 搜索 -->
  <el-form inline :model="params">
    <el-form-item label="角色">
      <el-input v-model="params.role" placeholder="请输入角色信息"></el-input>
    </el-form-item>
    <el-form-item label="状态">
      <el-select
        v-model="params.role_status"
        clearable
        placeholder="请选择状态"
      >
        <el-option label="启用" value="1"></el-option>
        <el-option label="停用" value="2"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="tableRef.reload()">搜索</el-button>
    </el-form-item>
  </el-form>
  <el-button type="primary" @click="addRoleDialogVisible = true">
    添加
  </el-button>
  <!-- 下拉操作 -->
  <el-dropdown v-if="selectionData.length">
    <el-button type="primary">
      批量操作<el-icon class="el-icon--right"><arrow-down /></el-icon>
    </el-button>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item @click="handleDelete(selectionData)"
          >批量删除</el-dropdown-item
        >
        <el-dropdown-item @click="changStatus(1)">启用角色</el-dropdown-item>
        <el-dropdown-item @click="changStatus(2)">禁用角色</el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
  <!-- 数据表格 -->
  <DataTable
    ref="tableRef"
    style="width: 100%"
    :onSelectionChange="data => (selectionData = data)"
    :column="column"
    :params="params"
    :request="params => getRoleList(params)"
  >
    <template #chaoz="scope">
      <el-button
        size="small"
        @click="(oauthDialogVisible = true), (currentData = scope.row)"
      >
        授权
      </el-button>
      <el-button size="small" @click="editRoleDialogVisible = scope.row">
        编辑
      </el-button>
      <el-button size="small" type="danger" @click="handleDelete([scope.row])">
        删除
      </el-button>
    </template>
  </DataTable>
  <!-- 添加角色 -->
  <AddRoleDialog
    v-model="addRoleDialogVisible"
    :done="() => tableRef.reload()"
  ></AddRoleDialog>
  <!-- 编辑角色 -->
  <EditRoleDialog
    v-model="editRoleDialogVisible"
    :done="() => tableRef.reload()"
  ></EditRoleDialog>
  <!-- 授权 -->
  <OauthDialog v-model="oauthDialogVisible" :data="currentData"></OauthDialog>
</template>
<script setup>
import { ArrowDown } from '@element-plus/icons-vue';
import { ref, reactive } from 'vue';
import { getRoleList, deleteRole, updateRoleStatus } from '~/service/role';
import AddRoleDialog from './components/AddRoleDialog.vue';
import EditRoleDialog from './components/EditRoleDialog.vue';
import OauthDialog from './components/OauthDialog.vue';

const tableRef = ref();
const selectionData = ref([]);
// 查询参数
const params = reactive({
  role: '',
  role_status: ''
});
const column = [
  {
    fixed: true,
    type: 'selection'
  },
  {
    prop: 'role_name',
    label: '名称',
    width: '150'
  },
  {
    prop: 'role_status_text',
    label: '状态',
    width: '150'
  },
  {
    label: '操作',
    prop: 'chaoz',
    width: '450'
  }
];

const addRoleDialogVisible = ref(false);
const editRoleDialogVisible = ref({});

const currentData = ref({});
const bindUserDialogVisible = ref(false);
const viewUserDialogVisible = ref(false);
const oauthDialogVisible = ref(false);

// 删除数据
const handleDelete = data => {
  ElMessageBox.confirm(`您确定要删除该角色吗？`).then(async () => {
    const { code } = await deleteRole({
      role_guid: data.map(v => v.role_guid).join()
    });
    if (code == 0) {
      tableRef.value.reload();
    }
  });
};
// 修改状态
const changStatus = async status => {
  if (selectionData.value.length == 0) {
    ElMessage.warning('请选择数据');
    return;
  }
  const { code } = await updateRoleStatus({
    role_guid: selectionData.value.map(v => v.role_guid).join(),
    role_status: status
  });
  if (code == 0) {
    tableRef.value.reload();
  }
};
</script>
