<template>
  <div class="box mb20">
    <el-card :body-style="{'padding':'0'}">
      <div class="lineHead">
        <ul>
          <li v-for="(l,i) in menu" :key="l.name" :class="active==i?'active':''" @click="changeMenu(l,i)">
            {{ language == 0 ? l.cn : l.en }}
          </li>
        </ul>
      </div>

      <HotTable v-if="active==0"/>
      <AirportPickupTable v-if="active==1"/>
    </el-card>

  </div>
</template>
<script lang="ts" setup>
import {useStorage} from "@vueuse/core/index";
import HotTable from '@/viewsPc/match/components/hotTable.vue'
import AirportPickupTable from '@/viewsPc/match/components/airportPickupTable.vue'

const language = useStorage('language', 0)
const active = ref(0)
const menu = ref([
  {cn: '酒店预订查询', active: 0, en: 'Hotel Reservation Summary'},
  {cn: '接送机预订查询', active: 1, en: 'Transfer Reservation Summary'}
])


function changeMenu(v, i) {
  active.value = i
}
</script>

<style lang="scss" scoped>
.box {
  width: 1600px;
  margin-top: 40px;
}
</style>