<script setup lang="ts">
import type { ContestItem } from '../types'
import { CirclePlus } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import AppList from '@/components/base/AppList.vue'
import { getContestExpertList, updateContestExpert } from '../api'
import { useMapStore } from '@/stores/map'

interface Prop {
  disabled: boolean
}
defineProps<Prop>()

const emit = defineEmits<{
  (e: 'update'): void
  (e: 'update:modelValue', visible: boolean): void
}>()

const ScoringExpertsAddDialog = defineAsyncComponent(() => import('./ScoringExpertsAddDialog.vue'))

const detail = $ref(inject('detail') as ContestItem)

const appList = $ref<InstanceType<typeof AppList> | null>(null)
// 性别
const genderList = useMapStore().getMapValuesByKey('system_gender')
// 角色列表
const roleList = useMapStore().getMapValuesByKey('expert_role')

let list = $ref<any>([])
function fetchList() {
  getContestExpertList({ id: detail.id }).then((res: any) => {
    list = res.data.detail
  })
}
onMounted(() => {
  fetchList()
})
// 列表配置
const listOptions = $computed(() => {
  return {
    hasPagination: false,
    columns: [
      { label: '序号', type: 'index', width: 60 },
      { label: '专家姓名', prop: 'name' },
      { label: '所在单位', prop: 'company' },
      {
        label: '性别',
        prop: 'sex',
        computed({ row }: { row: any }) {
          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: 'info.role',
        computed({ row }: { row: any }) {
          const found = roleList.find(item => item.value === row.info.role)
          return found?.label || row.info.role
        }
      },
      { label: '更新时间', prop: 'updated_time' },
      { label: '操作', slots: 'table-x', width: 80 }
    ],
    data: list
  }
})

const dialogVisible = $ref(false)
function handleAdd(data: any) {
  list.push(data)
}
// 保存
function handleSubmit() {
  const experts = list.map((item: any) => {
    return { id: item.id, expert_id: item.expert_id, role: item.info.role }
  })
  const expertsLeader = experts.filter((item: any) => item.role === '1')
  if (expertsLeader.length !== 1) {
    ElMessage.error('必须有且只有一个专家组长')
    return
  }
  updateContestExpert({ id: detail.id, experts }).then(() => {
    ElMessage.success('保存成功')
    emit('update')
    emit('update:modelValue', false)
  })
}

// 移除
function handleRemoveClass(index: number) {
  ElMessageBox.confirm('确定要移除吗？', '提示').then(() => {
    list.splice(index, 1)
  })
}
</script>

<template>
  <el-dialog title="评分专家列表" :close-on-click-modal="false" @update:modelValue="value => $emit('update:modelValue', value)">
    <el-form :disabled="disabled">
      <AppList v-bind="listOptions" ref="appList">
        <template #header-buttons>
          <el-row justify="space-between">
            <el-button type="primary" :icon="CirclePlus" @click="dialogVisible = true">添加专家</el-button>
            <p>赛项名称： {{ detail.name }}</p>
          </el-row>
        </template>
        <template #table-x="{ $index }">
          <el-button link round type="danger" @click="handleRemoveClass($index)">移除</el-button>
        </template>
      </AppList>
      <el-row justify="center">
        <el-button type="primary" round auto-insert-space @click="handleSubmit">保存</el-button>
        <el-button round auto-insert-space @click="$emit('update:modelValue', false)">取消</el-button>
      </el-row>
    </el-form>
    <ScoringExpertsAddDialog v-model="dialogVisible" @add="handleAdd" v-if="dialogVisible"></ScoringExpertsAddDialog>
  </el-dialog>
</template>
