<template>
  <el-table :data="list" border style="width: 100%" v-loading="loading">
    <el-table-column :label="language==0?'所属国家':'Nationality'" prop="personInfo.countryName" min-width="100"/>
    <el-table-column :label="language==0?'姓氏':'Last Name'" prop="personInfo.xing" min-width="100"/>
    <el-table-column :label="language==0?'名':'First Name'" prop="personInfo.ming" min-width="100"/>
    <el-table-column :label="language==0?'短名':'Nick Name'" prop="personInfo.shortName" min-width="110"/>
    <el-table-column :label="language==0?'性别':'Gender'" prop="personInfo.sexStr"/>
    <el-table-column :label="language==0?'年龄':'Age'" prop="personInfo.age"/>
    <el-table-column :label="language==0?'出生日期':'Birth'" prop="personInfo.birth" width="110"/>
    <el-table-column :label="language==0?'手机号码':'Phone Number'" prop="personInfo.phone" min-width="130"/>
    <el-table-column :label="language==0?'邮箱':'E-mail'" prop="personInfo.email" width="150"/>
    <el-table-column :label="language==0?'证件类型':'ID Type'" prop="personInfo.idcTypeStr"/>
    <el-table-column :label="language==0?'证件号码':'ID NO.'" prop="personInfo.idcCode" width="200"/>
    <el-table-column :label="language==0?'会员角色':'Role'" width="150">
      <template #default="scope">
        <div class="esp">
          <span v-for="item in scope.row.personInfo.label?.split(',')" :key="item.id" class="text-primary">
            <span v-if="item==='0'" class="ml5">{{ language == 0 ? '运动员' : 'athletes' }}</span>
            <span v-if="item==='1'" class="ml5">{{ language == 0 ? '教练' : 'coach' }}</span>
            <span v-if="item==='2'" class="ml5">{{ language == 0 ? '领队' : 'team leader' }}</span>
            <span v-if="item==='3'" class="ml5">{{ language == 0 ? '队医' : 'team doctor' }}</span>
            <span v-if="item==='4'" class="ml5">{{ language == 0 ? '翻译' : 'translator' }}</span>
            <span v-if="item==='5'" class="ml5">{{ language == 0 ? '官员' : 'official' }}</span>
            <span v-if="item==='6'" class="ml5">{{ language == 0 ? '其他' : 'other' }}</span>
          </span>
        </div>
      </template>
    </el-table-column>
    <el-table-column :label="language==0?'详细地址':'Detailed Address'" prop="personInfo.address" min-width="140"/>

    <el-table-column :label="language==0?'报项':'Entries'" min-width="300" :fixed="hasAction?false:'right'">
      <template #default="props">
        <ol>
          <li v-for="s in props.row.signInfo">
            {{ s.cptProjectName }}
            {{ s.cptGroupName }}{{ s.cptLevelName }}
            <span v-show="s.cptSonLevelName">[{{ s.cptSonLevelName }}]</span>
            <span v-show="s.zu">-{{ s.zu }}</span>
            <!--                    <el-button type="text" @click="editThis(s)">{{ language == 0 ? '修改' : 'Edit' }}</el-button>-->
            <!--                    <el-button type="text" @click="editMates(s)">更换队友</el-button>-->
            <!--                    <el-button type="text" @click="removeThis(s.id)">{{ language == 0 ? '删除' : 'Delete' }}</el-button>-->
          </li>
        </ol>
      </template>
    </el-table-column>
    <el-table-column :fixed="hasAction?false:'right'" min-width="100" :label="language==0?'保险费':'Premium'" prop="insuranceFee">
      <template #default="scope">
        <span class="text-primary">¥{{ scope.row.insuranceFee }}</span>
      </template>
    </el-table-column>
    <!--                补充信息-->
    <el-table-column v-for="(e,index) in extraTableHead" :key="index" :label="e" min-width="110" align="center">
      <template #default="scope">
        <el-link v-if="scope.row.signInfo[0].extraPersonInfoMapList[index]?.type=='2'"
                 :herf="scope.row.signInfo[0].extraPersonInfoMapList[index].value.url">
          {{ scope.row.signInfo[0].extraPersonInfoMapList[index].value.name }}
        </el-link>
        <img v-else-if="scope.row.signInfo[0].extraPersonInfoMapList[index]?.type=='3'" style="width: 50px;"
             :src="scope.row.signInfo[0].extraPersonInfoMapList[index].value.url||scope.row.signInfo[0].extraPersonInfoMapList[index].value">
        <span v-else>{{ scope.row.signInfo[0].extraPersonInfoMapList[index]?.value }}</span>
      </template>
    </el-table-column>
    <el-table-column v-if="hasAction" :label="language==0?'操作':'Actions'" fixed="right" width="150" align="center">
      <template #default="scope">
        <el-button v-if="extraform&&extraform.length>0"  type="primary" link @click="goPersonInfo(scope.row)">
          <span v-if="scope.row.extraPersonInfo">{{ language == 0 ? '修改' : 'Edit' }}</span>
          <span v-else class="red">{{ language == 0?'完善补充信息':'Additional Information' }}</span>
        </el-button>
      </template>
    </el-table-column>
  </el-table>

</template>

<script setup>
import * as match from "@/apiPc/match";
import {onMounted} from "@vue/runtime-core";
import {watch} from "vue";

const emit = defineEmits(['editExtra'])
const props = defineProps({
  matchId: {
    type: String,
    required: true
  },
  list: {
    type: Array,
    required: true
  },
  extraform: {
    type: Object,
    required: false
  },
  hasAction: {
    type: Boolean,
    required: false,
    default: true
  }
})
import cache from "@/plugins/cache";
const language = ref(cache.local.get('language') || 0)
const extraTableHead = ref([])
const loading = ref(true)
getTableHead()
const goPersonInfo = (row) => {
  emit('editExtra', row)
}
function getTableHead() {
  match.getCptExtraInfo(props.matchId).then(res => {
    extraTableHead.value = res.data
    loading.value = false
  })
}
</script>

<style scoped>

</style>