<template>
  <div class="mt20">
<!--    {{isNational}}-->
  </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 v-if="!isNational" :label="language==0?'姓名':'Real Name'" prop="personInfo.realName"  align="center" min-width="100"/>
    <el-table-column v-if="isNational" :label="language==0?'姓氏':'Surname'" prop="personInfo.xing" min-width="100"/>
    <el-table-column v-if="isNational" :label="language==0?'名':'Name'" prop="personInfo.ming" min-width="100"/>
    <el-table-column :label="language==0?'所属国家/地区':'Country'" min-width="120" header-align="center" align="center">
      <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" align="center"/>
    <el-table-column v-if="!isNational" :label="language==0?'证件类型':'ID Type'"  align="center" :width="language==0?'':'140'" prop="personInfo.idcTypeStr" header-align="center"/>
    <el-table-column v-if="!isNational" :label="language==0?'证件号码':'ID NO.'" prop="personInfo.idcCode" width="200" header-align="center"/>
    <el-table-column v-if="isNational" :label="language==0?'WDSF 会员号':'WDSF MIN'" prop="personInfo.wdsfMin" width="200" header-align="center"/>
    <el-table-column v-if="!isNational" :label="language==0?'出生日期':'Date of Birth'"  align="center" prop="personInfo.birth" width="130" header-align="center"/>
    <el-table-column v-if="isNational" :label="language==0?'年龄组':'Age group'" prop="personInfo.ageGroup" width="110" header-align="center"/>
    <el-table-column v-if="isNational" :label="language==0?'舞种':'Division'" prop="personInfo.division" width="110" header-align="center"/>
<!--    <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 ? '领队' : 'head of team' }}</span>-->
<!--            <span v-if="item==='4'" class="ml5">{{ language == 0 ? '队医' : 'Team doctor' }}</span>-->
<!--            <span v-if="item==='5'" class="ml5">{{ language == 0 ? '翻译' : 'Interpreter' }}</span>-->
<!--            <span v-if="item==='6'" class="ml5">{{ language == 0 ? '官员' : 'official' }}</span>-->
<!--            <span v-if="item==='3'" 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?'报项':'REGISTERED COMPETITION'" min-width="300"  header-align="center" :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"  align="center" :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'"
                 target="_blank"
                 :href="fillImgUrl(scope.row.signInfo[0].extraPersonInfoMapList[index]?.value?.url)">
          <span class="text-primary">{{ scope.row.signInfo[0].extraPersonInfoMapList[index]?.value?.name }}</span>
        </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 isNational = ref(false)
const sumText = ref('保险费')
getTableHead()
getMatch()
const goPersonInfo = (row) => {
  emit('editExtra', row)
}
function getTableHead() {
  match.getCptExtraInfo(props.matchId).then(res => {
    extraTableHead.value = res.data
    loading.value = false
  })
}
function getMatch() {
  match.getMatchById({ id: props.matchId }).then(res => {
    if(res.data.languageSource == '100'){
      isNational.value = false
    }else {
      isNational.value = true
    }
  })
}

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;}
}
:deep(.el-table){
  th.cell{
    text-transform: uppercase;
  }
 }
</style>