<template>
  <div class="mt20">
    <!--    {{isNational}}-->
  </div>
  <!--  参赛人员清单-->
  <el-table v-loading="loading" :data="list" :sum-text="sumText" border style="width: 100%">
    <el-table-column :label="language==0?'序号':'Index'" align="center" type="index" width="70" />
    <el-table-column
      v-if="!isNational" :label="language==0?'姓名':'Real Name'" align="center"
      min-width="100" prop="personInfo.realName"
    />
    <el-table-column v-if="isNational" :label="language==0?'姓氏':'Surname'" min-width="100" prop="personInfo.xing" />
    <el-table-column v-if="isNational" :label="language==0?'名':'Name'" min-width="100" prop="personInfo.ming" />
    <el-table-column
      :label="language==0?'所属国家/地区':'Country'" align="center" header-align="center"
      min-width="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'" align="center" prop="personInfo.sexStr" />
    <el-table-column
      v-if="!isNational" :label="language==0?'证件类型':'ID Type'" :width="language==0?'':'140'"
      align="center" header-align="center" prop="personInfo.idcTypeStr"
    />
    <el-table-column
      v-if="!isNational" :label="language==0?'证件号码':'ID NO.'" header-align="center" prop="personInfo.idcCode"
      width="200"
    />
    <el-table-column
      v-if="isNational" :label="language==0?'WDSF 会员号':'WDSF MIN'" header-align="center"
      prop="personInfo.wdsfMin" width="200"
    />
    <el-table-column
      v-if="!isNational" :label="language==0?'出生日期':'Date of Birth'" align="center"
      header-align="center" prop="personInfo.birth" width="130"
    />
    <el-table-column
      v-if="isNational" :label="language==0?'年龄组':'Age group'" header-align="center" prop="personInfo.ageGroup"
      width="110"
    />
    <el-table-column
      v-if="isNational" :label="language==0?'舞种':'Division'" header-align="center" prop="personInfo.division"
      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 ? '领队' : '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
      :fixed="hasAction?false:'right'" :label="language==0?'报项':'REGISTERED COMPETITION'" header-align="center"
      min-width="300"
    >
      <template #default="props">
        <ol>
          <li v-for="s in props.row.signInfo" :key="s">
            {{ 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
      v-if="showSummary"
      :fixed="hasAction?false:'right'" :label="language==0?'保险费':'Premium'" align="center"
      min-width="100" 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" align="center" min-width="110">
      <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)"
          target="_blank"
        >
          <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'"
          :src="fillImgUrl(scope.row.signInfo[0].extraPersonInfoMapList[index]?.value?.url||scope.row.signInfo[0]?.extraPersonInfoMapList[index]?.value)"
          style="width: 50px;"
        >
        <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'" align="center" fixed="right" width="150">
      <template #default="scope">
        <el-button v-if="extraform&&extraform.length>0" link type="primary" @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 class="rowSummary">
    <div>
      <div style="display: inline-block">
        {{ language == 0 ? '总人数' : 'Count' }}: <span class="mr20">{{ list.length }}</span>
      </div>
      
      <div v-if="showSummary" style="display: inline-block">
        {{ language == 0 ? '金额小计' : 'Amount' }}: <span>{{ language == 0 ? '¥' : '€' }}{{ total }}</span>
      </div>
    
    </div>
  </div>

</template>

<script setup>
import * as match from '@/apiPc/match'
import { ref } 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 lang="scss" scoped>
.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>