<template>
  <div class="collapsebox">
    <div class="pd20">
      <div class="fr mb20">
        <el-input size="small" v-model="query.projectName" :prefix-icon="Search"
                  @change="getList" clearable/>
      </div>
      <el-table :data="list" border>
        <el-table-column :label="language==0?'组别编号':'Event Code'" prop="code" align="center" :min-width="language==0?70:100">

        </el-table-column>
        <el-table-column :label="language==0?'组别名称':'Event'" min-width="150" prop="name" align="center"></el-table-column>
        <el-table-column :label="language==0?'舞种':'DISCIPLINE'" width="110" prop="danceType" align="center">
        </el-table-column>
        <el-table-column :label="language==0?'舞种明细':'Dance Detail'" width="120" prop="danceTypeDetailStr" align="center">
          <template #default="scope">
            <span v-if="scope.row.danceType=='Breaking'">--</span>
            <span v-else>{{scope.row.danceTypeDetailStr}}</span>
          </template>
        </el-table-column>

        <el-table-column :label="language==0?'参赛性别':'Sex'" align="center">
          <template #default="scope">
            <span v-if="scope.row.playTypeStr">{{ scope.row.playTypeStr }}</span>
            <span v-else>{{ scope.row.playType }}</span>
          </template>
        </el-table-column>
        <el-table-column :label="language==0?'参赛年龄':'Age'" align="center" :min-width="isNational?120:240">
          <template #default="scope">

            <div v-if="isNational">
              <span  v-if="scope.row.ageGroup == '0'" >{{ language==0?'不限制':'Unlimited' }}</span>
              <span  v-if="scope.row.ageGroup == '1'" >Juvenile I</span>
              <span  v-if="scope.row.ageGroup == '2'" >Juvenile II</span>
              <span  v-if="scope.row.ageGroup == '3'" >Juv1& II (comb.)</span>
              <span  v-if="scope.row.ageGroup == '4'" >Junior I</span>
              <span  v-if="scope.row.ageGroup == '5'" >Junior II</span>
              <span  v-if="scope.row.ageGroup == '6'" >Juv I & II (comb.)</span>
              <span  v-if="scope.row.ageGroup == '7'" >
                <span v-if="scope.row.danceType=='Breaking'">2006-01-01 {{ language==0?'至':'~' }} 2010-12-31</span>
                <span v-else>Youth</span>
              </span>
              <span  v-if="scope.row.ageGroup == '8'" >Under 21</span>
              <span  v-if="scope.row.ageGroup == '9'" >Adult</span>
              <span  v-if="scope.row.ageGroup == '10'" >Senior I</span>
              <span  v-if="scope.row.ageGroup == '11'" >Senior II</span>
              <span  v-if="scope.row.ageGroup == '12'" >Senior III</span>
              <span  v-if="scope.row.ageGroup == '13'" >Senior IV</span>
              <span  v-if="scope.row.ageGroup == '14'" >Senior V</span>
            </div>
            <div v-else>
              <div>{{ scope.row.birthPeriod.replace(',',language==0?' 至 ':' to ') }}</div>
              <div v-if="scope.row.birthPeriodSecond">{{scope.row.birthPeriodSecond?.replace(',',language==0?' 至 ':' to ')}}</div>
              <div v-if="scope.row.birthPeriodThird">{{scope.row.birthPeriodThird?.replace(',',language==0?' 至 ':' to ')}}</div>
              <div v-if="scope.row.birthPeriodFourth">{{scope.row.birthPeriodFourth?.replace(',',language==0?' 至 ':' to ')}}</div>
              <div v-if="scope.row.birthPeriodFifth">{{scope.row.birthPeriodFifth?.replace(',',language==0?' 至 ':' to ')}}</div>
              <div v-if="scope.row.birthPeriodSixth">{{scope.row.birthPeriodSixth?.replace(',',language==0?' 至 ':' to ')}}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column :label="language==0?'服务费':'Registration Fee'" width="160" align="center">
          <template #default="scope">
            <div class="text-primary">{{ language==0?'¥':'€' }}{{ scope.row.serviceFee }}</div>
          </template>
        </el-table-column>
      </el-table>
      <PaginationPc
          v-show="total>0"
          :total="total"
          v-model:page="query.pageNum"
          v-model:limit="query.pageSize"
          @pagination="getList"
      />
    </div>
<!--    <el-empty :image="`/img/order_no.png`" :image-size="228"  v-if="list.length == 0" description=""/>-->
  </div>
</template>

<script setup>
import {Search} from "@element-plus/icons-vue";
import {useStorage} from "@vueuse/core/index"
import {getProjectByCptId} from "@/apiPc/match";
import PaginationPc from "@/components/PaginationPc";
const language= useStorage('language',0)
const list = ref([])
const total = ref(0)
const query = ref({
  projectName:'',
  pageSize:10,
  pageNum:1
})
const props = defineProps({
  // list: {
  //   type: Array,
  //   required: true,
  //   default:[]
  // },
  matchId: {
    type: String,
    required: false
  },
  isNational: {
    type: Boolean,
    required: false,
    default: false
  },
})
getList()
function getList() {
  getProjectByCptId(props.matchId,query.value).then(res=>{
    list.value = res.rows
    total.value = res.total
  })
}
</script>

<style scoped lang="scss">
.table{width: 100%;border-left: 1px solid #e1e1e1;border-top:1px solid #e1e1e1;
  th{background: #eee;padding: 6px 10px;text-transform: uppercase;
    border-right: 1px solid #e1e1e1;
    border-bottom:1px solid #e1e1e1;
    font-size: 15px;
  }
  td{padding: 6px 10px;border-right: 1px solid #e1e1e1;font-size: 15px;
    border-bottom:1px solid #e1e1e1;vertical-align: middle;text-align: center;
    span{margin-right: 10px}
    span::after{content: ','}
    span:last-child::after{content: ''}
  }
}
</style>