<template>
  <div class="collapsebox">
    <div class="pd20">
      <div class="fl mb20" style="display: flex;">
        <el-input
          v-model.trim="query.text"
          :placeholder="language==0?'请输入邮箱或联系方式':'Please enter email or contact information'"
          :prefix-icon="Search"
          clearable
          size="small"
          style="width: 260px;"/>
        <el-button size="small" style="margin-left: 20px" type="primary" @click="getList">
          {{ language == 0 ? '查询' : 'SEARCH' }}
        </el-button>
      </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="hotelName"></el-table-column>
        <el-table-column :label="language==0?'联系人':'Contacts'" align="center" min-width="110" prop="contacts">
        </el-table-column>
        <el-table-column :label="language==0?'联系方式':'Contact Way'" align="center" prop="phone"
                         width="120">
        </el-table-column>

        <el-table-column :label="language==0?'预留日期':'Reservation Date'" align="center" min-width="120"
                         prop="reservationDate">
        </el-table-column>
        <el-table-column :label="language==0?'房型':'Room Type'" :min-width="isNational?120:240" align="center"
                         prop="roomType">
        </el-table-column>
        <el-table-column :label="language==0?'数量':'Quantity'" align="center" prop="num" width="160">
        </el-table-column>
        <el-table-column :label="language==0?'状态':'State'" align="center" prop="status" width="160">
          <template #default="{row}">
            {{ language == 0 ? '已预留' : 'Reserved' }}
          </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 {hotelList} from "@/apiPc/match";
import PaginationPc from "@/components/PaginationPc";
import {useRoute} from 'vue-router'

const language = useStorage('language', 0)
const list = ref([])
const total = ref(0)
const route = useRoute()
const query = ref({
  projectName: '',
  pageSize: 10,
  pageNum: 1,
  activeId: route.query.matchId
})

function getList() {
  // query.value.text = encodeURIComponent(query.value.text1)
  hotelList(query.value).then(res => {
    list.value = res
    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>