<template>
  <div>
    <el-dialog title="角色管理" v-model="dialogVisible">
      <div>
        <el-row class="mb-5">
          <el-col :span="12" class="flex">
            <el-input v-model="query.key" placeholder="请输入" clearable />
            <el-button
              class="ml-2"
              type="primary"
              :icon="Search"
              @click="onSearch"
              :loading="loading"
              >查询</el-button
            >
          </el-col>
        </el-row>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="name" label="角色名称"> </el-table-column>
          <el-table-column prop="userTotal" label="人员数量" />
          <el-table-column prop="status" label="操作" width="180">
            <template #default="scope">
              <el-space :size="size" spacer="|">
                <el-button type="primary" link @click="handleEdit(scope.row)">编辑</el-button>
                <el-popconfirm
                  title="确定要删除此角色吗"
                  @confirm="onDelete(scope.row.id)"
                >
                  <template #reference>
                    <el-link type="danger">删除</el-link>
                  </template>
                </el-popconfirm>
              </el-space>
            </template>
          </el-table-column>
        </el-table>

        <el-pagination
          class="mt-4 justify-end"
          background
          :current-page="query.page"
          :page-size="query.pageSize"
          :total="total"
          layout="total, prev, pager, next"
          @current-change="onChangePage"
        ></el-pagination>
      </div>
      <ComponentEditRoleDialog
        v-model:show="visibleEditRole"
        :rowData="rowData"
      ></ComponentEditRoleDialog>
    </el-dialog>
  </div>
</template>
<script lang="ts" setup>
import { request } from "@/utils";
import { ref, computed, defineProps, defineEmits, watch } from "vue";
import { Search } from "@element-plus/icons-vue";

import ComponentEditRoleDialog from "./EditRoleDialog.vue";
import { ElMessage } from "element-plus";

const props = defineProps({
  show: {
    type: Boolean,
    default: false
  }
});
const emits = defineEmits(["update:show"]);
const dialogVisible = computed({
  get() {
    return props.show;
  },
  set(n) {
    emits("update:show", n);
  }
});
watch(
  () => dialogVisible.value,
  n => {
    if (n) {
      init();
    } else {
    }
  }
);
const query = ref({
  page: 1,
  pageSize: 10,
  key: ""
});
const total = ref(0);
const tableData = ref([]);
const loading = ref(false);
const visibleEditRole = ref(false);
const rowData = ref({});
const getList = () => {
  loading.value = true;
  request
    .get("/mechanism/role/paginate", {
      params: query.value
    })
    .then(resp => {
      tableData.value = resp.data.list;
      total.value = resp.data.total;
    })
    .finally(() => {
      loading.value = false;
    });
};
const onSearch = () => {
  query.value.page = 1;
  getList();
};
const onChangePage = page => {
  query.value.page = page;
  getList();
};

const handleEdit = row => {
  rowData.value = row;
  visibleEditRole.value = true;
};

const onDelete = id => {
  request.post("/mechanism/role/delete", { id }).then(resp => {
    ElMessage.success(resp.message);
    getList();
  });
};
const init = () => {
  rowData.value = {};
  getList();
};
</script>
