<template>
  <div class="permission-admin">
    <el-card class="!border-none mb-4" shadow="never" v-if="showSearch">
      <el-form class="mb-[-16px]" ref="queryFormRef" :model="queryParams" inline>
        <el-form-item class="w-[280px]" label="管理员账号" prop="account">
          <el-input v-model="queryParams.account" placeholder="请输入管理员账号" clearable @keyup.enter="handleQuery" />
        </el-form-item>
        <el-form-item class="w-[280px]" label="管理员名称" prop="name">
          <el-input v-model="queryParams.name" placeholder="请输入管理员名称" clearable @keyup.enter="handleQuery" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleQuery">搜索</el-button>
          <el-button @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card v-loading="isLoading" class="!border-none" shadow="never">
      <div class="wd-card-header">
        <el-button v-perms="['auth.admin/add']" type="primary" icon="Plus" @click="handleAdd">新增</el-button>
        <el-button
          v-perms="['auth.admin/edit']"
          type="warning"
          icon="Edit"
          :disabled="multipleSelection.length != 1"
          @click="handleEdit()"
        >
          修改
        </el-button>
        <el-button
          v-perms="['auth.admin/delete']"
          type="danger"
          icon="Delete"
          :disabled="multipleSelection.length == 0"
          @click="handleDelete()"
        >
          删除
        </el-button>
        <right-toolbar v-model:showSearch="showSearch" v-model:columns="columns" @refresh="getLists"></right-toolbar>
      </div>
      <el-table size="large" :data="tableData" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="ID" prop="id" min-width="60" align="center" v-if="columns.id.visible" />>
        <el-table-column label="头像" min-width="100" align="center" v-if="columns.avatar.visible">
          <template #default="{ row }">
            <el-avatar :size="50" :src="row.avatar"></el-avatar>
          </template>
        </el-table-column>
        <el-table-column label="账号" prop="account" min-width="100" align="center" v-if="columns.account.visible" />
        <el-table-column label="名称" prop="name" min-width="100" align="center" v-if="columns.name.visible" />
        <el-table-column
          label="角色"
          prop="role_name"
          min-width="100"
          align="center"
          show-tooltip-when-overflow
          v-if="columns.role_name.visible"
        />
        <el-table-column
          label="部门"
          prop="dept_name"
          min-width="100"
          align="center"
          show-tooltip-when-overflow
          v-if="columns.dept_name.visible"
        />
        <el-table-column
          label="创建时间"
          prop="create_time"
          min-width="180"
          align="center"
          v-if="columns.create_time.visible"
        />
        <el-table-column
          label="最近登录时间"
          prop="login_time"
          min-width="180"
          align="center"
          v-if="columns.login_time.visible"
        />
        <el-table-column
          label="最近登录IP"
          prop="login_ip"
          min-width="120"
          align="center"
          v-if="columns.login_ip.visible"
        />
        <el-table-column
          label="状态"
          min-width="100"
          v-perms="['auth.admin/edit']"
          align="center"
          v-if="columns.status.visible"
        >
          <template #default="{ row }">
            <el-switch
              v-if="row.is_admin != 1"
              v-model="row.disable"
              :active-value="0"
              :inactive-value="1"
              @change="changeStatus(row.id, row.disable)"
            />
          </template>
        </el-table-column>
        <el-table-column label="操作" width="120" fixed="right" align="center" v-if="columns.operation.visible">
          <template #default="{ row }">
            <el-button v-perms="['auth.admin/edit']" type="primary" link @click="handleEdit(row.id)"> 编辑 </el-button>
            <el-button
              v-if="row.is_admin != 1"
              v-perms="['auth.admin/delete']"
              type="danger"
              link
              @click="handleDelete(row.id)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="flex mt-4 justify-end">
        <Pagination v-model="queryParams" :total="total" @change="getLists" />
      </div>
    </el-card>
    <edit-admin ref="editRef" @success="getLists" />
  </div>
</template>

<script setup lang="ts" name="PermissionAdmin">
import type { FormInstance } from 'element-plus'
import { adminLists, adminDelete, adminDisable } from '@/api/permission/admin'
import EditAdmin from './edit.vue'

// 组件参数
const queryFormRef = shallowRef<FormInstance>()
const editRef = shallowRef<InstanceType<typeof EditAdmin>>()
const queryParams = reactive({
  page: 1,
  limit: 10,
  account: '',
  name: ''
})
const multipleSelection = ref<any[]>([])
const total = ref(0)
const isLoading = ref(false)
const tableData = ref<any[]>([])
const showSearch = ref(true)
const columns = ref({
  id: { label: 'ID', visible: true },
  avatar: { label: '头像', visible: true },
  account: { label: '账号', visible: true },
  name: { label: '名称', visible: true },
  role_name: { label: '角色', visible: true },
  dept_name: { label: '部门', visible: true },
  create_time: { label: '创建时间', visible: true },
  login_time: { label: '最近登录时间', visible: true },
  login_ip: { label: '最近登录IP', visible: true },
  status: { label: '状态', visible: true },
  operation: { label: '操作', visible: true }
})

// 获取列表
const getLists = async () => {
  isLoading.value = true
  adminLists(queryParams)
    .then((res) => {
      tableData.value = res.data || []
      total.value = res.total || 0
      isLoading.value = false
    })
    .catch(() => {
      isLoading.value = false
    })
}
// 搜索
const handleQuery = () => {
  queryParams.page = 1
  getLists()
}
// 重置
const resetQuery = () => {
  queryFormRef.value?.resetFields()
  handleQuery()
}
// 多选框选中数据
const handleSelectionChange = (selection: any[]) => {
  multipleSelection.value = selection
}
// 新增
const handleAdd = async () => {
  editRef.value?.open('add')
  editRef.value?.setFormData()
}
// 编辑
const handleEdit = async (id?: number) => {
  editRef.value?.open('edit')
  editRef.value?.setFormData(id ? id : multipleSelection.value[0].id)
}
// 删除
const handleDelete = (id?: number) => {
  const adminIds = id || multipleSelection.value.map((item) => item.id)
  ElMessageBox.confirm(`是否确认删除管理员ID为 ${adminIds} 的数据项吗？`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(async () => {
      await adminDelete({ id: adminIds })
      ElMessage.success('删除成功')
      getLists()
    })
    .catch(() => {})
}
// 状态切换
const changeStatus = async (id: number, disable: number) => {
  await adminDisable({ id, disable })
  getLists()
}

onMounted(() => {
  getLists()
})
</script>
