<template>
  <div class="collapsebox">
    <div class="pd20">
      <div class="fr mb20">
        <el-input
          v-model.trim="query.projectName"
          :placeholder="language==0?'请输入邮箱或联系方式':'Please enter email or contact information'"
          :prefix-icon="Search"
          clearable
          size="small"
          @change="getList"/>
      </div>
      <el-table :data="list" border>
        <el-table-column :label="language==0?'序号':'Serial'" :min-width="language==0?60:80" align="center"
                         type="index"/>
        <el-table-column :label="language==0?'酒店名称':'Hotel Name'" align="center" min-width="150"
                         prop="name"></el-table-column>
        <el-table-column :label="language==0?'联系人':'Contacts'" align="center" prop="danceType" width="110">
        </el-table-column>
        <el-table-column :label="language==0?'联系方式':'Contact Way'" align="center" prop="danceTypeDetailStr"
                         width="120">
        </el-table-column>

        <el-table-column :label="language==0?'预留日期':'Reservation Date'" align="center">
          <template #default="{row}">
            <span v-if="row.playTypeStr">{{ row.playTypeStr }}</span>
            <span v-else>{{ row.playType }}</span>
          </template>
        </el-table-column>
        <el-table-column :label="language==0?'房型':'Room Type'" :min-width="isNational?120:240" align="center">
          <template #default="{row}">
            <div v-if="isNational">
              <span v-if="row.ageGroup == '0'">{{ language == 0 ? '不限制' : 'Unlimited' }}</span>
              <span v-if="row.ageGroup == '1'">Juvenile I</span>
              <span v-if="row.ageGroup == '2'">Juvenile II</span>
              <span v-if="row.ageGroup == '3'">Juv1& II (comb.)</span>
              <span v-if="row.ageGroup == '4'">Junior I</span>
              <span v-if="row.ageGroup == '5'">Junior II</span>
              <span v-if="row.ageGroup == '6'">Juv I & II (comb.)</span>
              <span v-if="row.ageGroup == '7'">
                <span v-if="row.danceType=='Breaking'">2006-01-01 {{
                    language == 0 ? '至' : '~'
                  }} 2010-12-31</span>
                <span v-else>Youth</span>
              </span>
              <span v-if="row.ageGroup == '8'">Under 21</span>
              <span v-if="row.ageGroup == '9'">Adult</span>
              <span v-if="row.ageGroup == '10'">Senior I</span>
              <span v-if="row.ageGroup == '11'">Senior II</span>
              <span v-if="row.ageGroup == '12'">Senior III</span>
              <span v-if="row.ageGroup == '13'">Senior IV</span>
              <span v-if="row.ageGroup == '14'">Senior V</span>
            </div>
            <div v-else>
              <div>{{ row.birthPeriod.replace(',', language == 0 ? ' 至 ' : ' to ') }}</div>
              <div v-if="row.birthPeriodSecond">
                {{ row.birthPeriodSecond?.replace(',', language == 0 ? ' 至 ' : ' to ') }}
              </div>
              <div v-if="row.birthPeriodThird">
                {{ row.birthPeriodThird?.replace(',', language == 0 ? ' 至 ' : ' to ') }}
              </div>
              <div v-if="row.birthPeriodFourth">
                {{ row.birthPeriodFourth?.replace(',', language == 0 ? ' 至 ' : ' to ') }}
              </div>
              <div v-if="row.birthPeriodFifth">
                {{ row.birthPeriodFifth?.replace(',', language == 0 ? ' 至 ' : ' to ') }}
              </div>
              <div v-if="row.birthPeriodSixth">
                {{ row.birthPeriodSixth?.replace(',', language == 0 ? ' 至 ' : ' to ') }}
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column :label="language==0?'数量':'Quantity'" align="center" width="160">
          <template #default="{row}">
            <div class="text-primary">{{ language == 0 ? '¥' : '€' }}{{ row.serviceFee }}</div>
          </template>
        </el-table-column>
        <el-table-column :label="language==0?'状态':'State'" align="center" width="160">
          <template #default="{row}">
            <div class="text-primary">{{ language == 0 ? '¥' : '€' }}{{ row.serviceFee }}</div>
          </template>
        </el-table-column>
      </el-table>
      <PaginationPc
        v-show="total>0"
        v-model:limit="query.pageSize"
        v-model:page="query.pageNum"
        :total="total"
        @pagination="getList"
      />
    </div>
  </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({
  matchId: {
    type: String,
    required: false
  },
  isNational: {
    type: Boolean,
    required: false,
    default: false
  },
})

function getList() {
  getProjectByCptId(props.matchId, query.value).then(res => {
    list.value = res.rows
    total.value = res.total
  })
}
</script>

<style lang="scss" scoped>
.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>