<script setup>
import { ref } from 'vue'
import { Plus, Delete, Edit, DocumentCopy } from '@element-plus/icons-vue'
import { adminListService, adminDelService } from '@/api/user'
import AdminAdd from './components/AdminAdd.vue'
import AdminDetail from './components/AdminDetail.vue'
import PasswdUpdate from '@/components/PasswdUpdate.vue'
const loading = ref(false)
const total = ref(0)
const adminList = ref()
const params = ref({
  current: 1,
  size: 10
})

const getAdminList = async () => {
  loading.value = true
  const {
    data: { data }
  } = await adminListService(params.value)
  total.value = data.total
  adminList.value = data.list
  console.log(data.list)

  loading.value = false
}
getAdminList()

// 文本复制
const copyStatus = ref('')

const copyToClipboard = (copyText) => {
  // 创建一个隐藏的输入框
  const tempInput = document.createElement('input')
  tempInput.style.position = 'absolute'
  tempInput.style.left = '-9999px'
  tempInput.style.top = '-9999px'
  document.body.appendChild(tempInput)

  // 将要复制的文本赋值给输入框
  tempInput.value = copyText
  tempInput.select()

  // 尝试复制
  try {
    document.execCommand('copy')
    copyStatus.value = '复制成功！'
  } catch (err) {
    copyStatus.value = '复制失败，请手动复制'
    console.error('复制失败:', err)
  } finally {
    ElMessage.info(copyStatus.value)
    // 移除临时输入框
    document.body.removeChild(tempInput)
  }
}

// 添加管理员信息
const adminAddRef = ref()
const adminAdd = () => {
  adminAddRef.value.open()
}

// 移除管理员信息
const remove = (userId) => {
  ElMessageBox.confirm('确认移除该条管理员信息?', '提示', {
    confirmButtonText: 'OK',
    cancelButtonText: 'Cancel',
    type: 'warning'
  })
    .then(async () => {
      await adminDelService(userId)
      ElMessage.success('移除成功')
    })
    .catch(() => {})
}

// 管理场馆
const adminDetail = ref()
const manage = (userId) => {
  adminDetail.value.open(userId)
}

// 修改管理员账号密码
const passwdRef = ref()
const passwdUpdate = (id) => {
  passwdRef.value.open(id)
}
</script>
<template>
  <page-container title="超级管理员">
    <!-- 表格区域 -->
    <el-table :data="adminList" stripe v-loading="loading">
      <el-table-column type="index" label="序号" width="100" />
      <el-table-column label="用户名" prop="username"></el-table-column>
      <el-table-column label="密码">
        <template #default="{ row }">
          {{ '******' }}
          <el-button
            plain
            :icon="DocumentCopy"
            type="info"
            title="查看用户认证信息"
            size="small"
            @click="copyToClipboard(row.accessCode)"
            style="
              width: 16px;
              height: 16px;
              font-size: 12px;
              margin-left: 2%;
              margin-top: -4%;
            "
          ></el-button>
        </template>
      </el-table-column>
      <el-table-column label="联系电话" prop="userPhone"></el-table-column>
      <el-table-column label="邮箱信息">
        <template #default="{ row }">
          {{ row.email || '用户未设置邮箱信息' }}
        </template>
      </el-table-column>
      <el-table-column label="类型">
        <template #default="">
          {{ '管理员' }}
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="{ row }">
          <el-button
            circle
            plain
            :icon="Plus"
            title="管理场馆"
            @click="manage(row.id)"
          ></el-button>
          <el-button
            circle
            plain
            :icon="Edit"
            type="primary"
            title="修改管理员账号密码"
            @click="passwdUpdate(row.id)"
          ></el-button>
          <el-button
            circle
            plain
            :icon="Delete"
            type="danger"
            title="移除管理员"
            @click="remove(row.id)"
          ></el-button>
        </template>
      </el-table-column>
      <template #empty>
        <el-empty description="无数据" />
      </template>
    </el-table>
    <el-button class="mt-4" style="width: 100%" @click="adminAdd">
      <el-icon
        ><Plus />
        添加管理员信息
      </el-icon>
    </el-button>
    <!-- 分页区域 -->
    <el-pagination
      v-model:current-page="params.current"
      v-model:page-size="params.size"
      :page-sizes="[10, 20, 50]"
      layout="jumper, total, sizes, prev, pager, next"
      background
      :total="total"
      @size-change="onSizeChange"
      @current-change="onCurrentChange"
      style="margin-top: 20px; justify-content: flex-end"
    />
  </page-container>
  <!-- 添加管理员信息 -->
  <AdminAdd ref="adminAddRef" @success="onSizeChange(10)"></AdminAdd>
  <!-- 管理场馆 -->
  <AdminDetail ref="adminDetail"></AdminDetail>
  <!-- 修改管理员密码 -->
  <PasswdUpdate ref="passwdRef" @success="onSizeChange(10)"></PasswdUpdate>
</template>
