<script setup lang="ts">
import type { Expert } from '../types'
import { getExpertContestList } from '../api'
import { useMapStore } from '@/stores/map'

interface Props {
  data: Expert
}
const props = defineProps<Props>()

// 角色列表
const roleList = useMapStore().getMapValuesByKey('expert_role')

// 列表配置
const listOptions = {
  hasPagination: false,
  remote: {
    httpRequest: getExpertContestList,
    params: { id: props.data.id },
    callback(res: any) {
      return { list: res.detail.competitions }
    }
  },
  columns: [
    { label: '序号', type: 'index', width: 60 },
    { label: '赛项名称', prop: 'name' },
    {
      label: '角色',
      prop: 'role',
      computed({ row }: { row: any }) {
        const found = roleList.find(item => item.value === row.role)
        return found?.label || row.role
      }
    }
  ]
}
</script>
<template>
  <el-dialog title="查看专家信息">
    <el-descriptions :column="2">
      <el-descriptions-item label="姓名：">{{ data.name }}</el-descriptions-item>
      <el-descriptions-item label="联系电话：">{{ data.mobile }}</el-descriptions-item>
      <el-descriptions-item label="所在单位：">{{ data.company }}</el-descriptions-item>
      <el-descriptions-item label="职务：">{{ data.position.label }}</el-descriptions-item>
    </el-descriptions>
    <AppList v-bind="listOptions"></AppList>
    <el-row justify="center">
      <el-button round auto-insert-space @click="$emit('update:modelValue', false)">关闭</el-button>
    </el-row>
  </el-dialog>
</template>
