<template>
  <div class="mt20"></div>
  <el-table :data="list"  :sum-text="sumText" border style="width: 100%" v-loading="loading">
    <el-table-column :label="language==0?'序号':'Index'" type="index" width="70" align="center"/>
    <el-table-column :label="language==0?'姓氏':'Surname'" prop="personInfo.xing" min-width="100"/>
    <el-table-column :label="language==0?'名':'Name'" prop="personInfo.ming" min-width="100"/>
    <el-table-column :label="language==0?'所属国家/地区':'Country'" prop="" :min-width="language==0?'100':'120'">
      <template #default="scope">
        <span v-if="scope.row.personInfo.countryName">{{scope.row.personInfo.countryName}}</span>
        <span v-if="scope.row.personInfo.representing">{{scope.row.personInfo.representing}}</span>
      </template>
    </el-table-column>
    <el-table-column :label="language==0?'性别':'Gender'" prop="personInfo.sexStr"/>
    <el-table-column :label="language==0?'证件类型':'ID Type'" :width="language==0?'':'140'" prop="personInfo.idcTypeStr"/>
    <el-table-column :label="language==0?'证件号码':'ID NO.'" prop="personInfo.idcCode" width="200"/>
    <el-table-column :label="language==0?'出生日期':'Birth'" prop="personInfo.birth" width="110"/>
    <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">{{ language==0?'¥':'€' }}{{ 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'"
                 :href="fillImgUrl(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="fillImgUrl(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>
  <div v-if="showSummary" class="rowSummary">
    <div>
      {{  language==0?'总人数':'Count' }}:  <span class="mr20">{{ list.length }}</span>

      {{  language==0?'金额小计':'Amount' }}:  <span>{{ language==0?'¥':'€' }}{{ total }}</span>
    </div>
  </div>

</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
  },
  showSummary:{
    type: Boolean,
    required: false,
    default: false
  },
  total:{
    type: Number,
    required: false,
    default: '0'
  }
})
import {useStorage} from "@vueuse/core/index";
const language= useStorage('language',0)
const extraTableHead = ref([])
const loading = ref(true)
const sumText = ref('保险费')
getTableHead()
const goPersonInfo = (row) => {
  emit('editExtra', row)
}
function getTableHead() {
  match.getCptExtraInfo(props.matchId).then(res => {
    extraTableHead.value = res.data
    loading.value = false
  })
}
function totalMethod() {
}
</script>

<style scoped lang="scss">
.rowSummary{text-align: right;padding: 0 20px;
  height: 40px;line-height: 40px;
  background: #FAFBFD;font-size: 16px;
  color: #95A1A6;
  border: 1px solid #EEEFF0;
  span{font-size: 18px;font-family: DIN Alternate;
    color: #000;}
}
</style>