<script setup lang="ts">
import type { Expert } from '../types'
import { CirclePlus, Upload } from '@element-plus/icons-vue'
import AppList from '@/components/base/AppList.vue'
import { getExpertList } from '../api'
import { useMapStore } from '@/stores/map'
import { useGetContestList } from '@/composables/useGetContestList'

const ViewDialog = defineAsyncComponent(() => import('../components/ViewDialog.vue'))
const FormDialog = defineAsyncComponent(() => import('../components/FormDialog.vue'))
const ImportDialog = defineAsyncComponent(() => import('../components/ImportDialog.vue'))

const appList = $ref<InstanceType<typeof AppList> | null>(null)

// 性别
const genderList = useMapStore().getMapValuesByKey('system_gender')
const { contests } = useGetContestList()
// 列表配置
const listOptions = $computed(() => {
  return {
    remote: {
      httpRequest: getExpertList,
      params: { competition_id: '', name: '' }
    },
    filters: [
      {
        type: 'select',
        prop: 'competition_id',
        label: '赛项',
        placeholder: '请选择赛项',
        options: contests.value,
        valueKey: 'id',
        labelKey: 'name'
      },
      { type: 'input', prop: 'name', label: '专家姓名', placeholder: '请输入专家姓名' }
    ],
    columns: [
      { label: '序号', type: 'index', width: 60 },
      { label: '专家姓名', prop: 'name' },
      { label: '电话', prop: 'mobile' },
      { label: '所在单位', prop: 'company' },
      {
        label: '性别',
        prop: 'sex',
        computed({ row }: { row: Expert }) {
          const found = genderList.find(item => item.value === row.sex)
          return found?.label || row.sex
        }
      },
      { label: '职务', prop: 'position.label' },
      { label: '省', prop: 'province' },
      { label: '市', prop: 'city' },
      { label: '区/县', prop: 'area' },
      { label: '批改次数', prop: 'check_count' },
      { label: '更新时间', prop: 'updated_time' },
      { label: '操作', slots: 'table-x', width: 200 }
    ]
  }
})

const importVisible = $ref(false)
const rowData = ref<Expert>()

// 查看
let viewDialogVisible = $ref(false)
function handleView(row: Expert) {
  rowData.value = row
  viewDialogVisible = true
}

// 新增
function handleAdd() {
  rowData.value = undefined
  dialogVisible = true
}

// 编辑
let dialogVisible = $ref(false)
function handleUpdate(row: Expert) {
  rowData.value = row
  dialogVisible = true
}

function onUpdateSuccess() {
  appList?.refetch()
}
</script>

<template>
  <AppCard title="评分专家管理">
    <AppList v-bind="listOptions" ref="appList">
      <template #header-buttons>
        <el-button type="primary" round :icon="CirclePlus" @click="handleAdd" v-permission="'expert-create'"
          >新增评分专家</el-button
        >
        <el-button
          type="primary"
          round
          :icon="Upload"
          @click="importVisible = true"
          v-permission="'expert-batch-import'"
          >批量导入</el-button
        >
      </template>

      <template #table-x="{ row }: { row: Expert }">
        <el-button type="primary" round @click="handleView(row)" v-permission="'expert-detail'">查看</el-button>
        <el-button type="primary" round @click="handleUpdate(row)" v-permission="'expert-update'">编辑</el-button>
      </template>
    </AppList>
  </AppCard>
  <!-- 查看 -->
  <ViewDialog v-model="viewDialogVisible" :data="rowData" v-if="viewDialogVisible && rowData"></ViewDialog>
  <!-- 编辑 -->
  <FormDialog v-model="dialogVisible" :data="rowData" @update="onUpdateSuccess" v-if="dialogVisible"></FormDialog>
  <!-- 批量导入 -->
  <ImportDialog v-model="importVisible" @update="onUpdateSuccess" v-if="importVisible"></ImportDialog>
</template>
