<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?'服务类型':'Type Of Service'" 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?'抵达时间':'Time Of Arrival'" align="center" width="140">
          <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?'人数':'Number Of People'" :min-width="isNational?120:240" align="center">
          <template #default="{row}">
          </template>
        </el-table-column>
        <el-table-column :label="language==0?'航班 / 车次':'Flight / train number'" 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?'机场 / 火车站':'Airport / Train station'" 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?'航站楼':'Terminal'" 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?'目的地/出发地':'Destination / Place Of Departure'" align="center"
                         width="260">
          <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>