<template>
  <div class="collapsebox">
    <div class="pd20">
      <table class="table" cellspacing="0" cellpadding="0" v-if="list.length > 0">
        <tr v-if="language==0">
          <th>组别编号</th>
          <th>组别名称</th>
          <th>舞种</th>
          <th>舞种明细</th>
          <th>参赛性别</th>
          <th>参赛年龄</th>
          <th>服务费（元）</th>
        </tr>
        <tr v-else>
          <th>Group code</th>
          <th>Group</th>
          <th>Dance Style</th>
          <th>Dance Detail</th>
          <th>Sex</th>
          <th>Age</th>
          <th>Registration Fee</th>
        </tr>
        <tr  v-for="(p,index) in list" :key="index">
          <td>{{ p.code }}</td>
          <td>{{ p.name }}</td>
          <td>{{ p.danceType }}</td>
          <td>{{ p.danceTypeDetailStr }}</td>
          <td>{{ p.playTypeStr }}</td>
          <td>
            <div>{{ p.birthPeriod }}</div>
            <div>{{p.birthPeriodSecond}}</div>
          </td>
          <td>{{ language==0?'¥':'€' }}{{ p.serviceFee }}</td>
        </tr>
      </table>

    </div>
    <el-empty :image="`/img/order_no.png`" :image-size="228"  v-if="list.length == 0" description=""/>
  </div>
</template>

<script setup>
import {useStorage} from "@vueuse/core/index"
const language= useStorage('language',0)

const props = defineProps({
  list: {
    type: Array,
    required: true,
    default:[]
  }
})
</script>

<style scoped lang="scss">
.table{width: 100%;border-left: 1px solid #e1e1e1;border-top:1px solid #e1e1e1;
  th{background: #eee;padding: 6px 10px;
    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>