<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: [
      { type: 'expand', slots: 'class' },
      { label: '序号', type: 'index', width: 60 },
      { label: '专家姓名', prop: 'name' },
      { label: '电话', prop: 'mobile' },
      { 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)
// const classIds: any = ref()
function handleAdd(data: any) {
  // classIds.value = class_ids
  list.push(data)
}
// 保存
function handleSubmit() {
  const experts = list.map((item: any) => {
    return { id: item.id, expert_id: item.expert_id, role: item.info.role, class_id: item.info.class_id }
  })
  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
    width="1000px"
    title="评分专家列表"
    :close-on-click-modal="false"
    @update:modelValue="value => $emit('update:modelValue', value)"
  >
    <!-- <el-form :disabled="false"> -->
    <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 #class="{ row }">
          <div style="padding-left: 20px">
            <h3>班级信息</h3>
            <el-table :data="row.class_info" :border="false">
              <el-table-column width="200" label="班级id" prop="id" />
              <el-table-column label="班级名称" prop="name" />
            </el-table>
          </div>
        </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>
