<template>
  <div>
    <div class="box">
      <el-card class="mt20 mb20" :body-style="{'padding':'0'}">
        <div class="lineHead">
          <h3>{{ language==0?'服务查询': 'Service Search' }}</h3>
        </div>
        <div class="pd20">
          <div class="topsearch">
            <el-input v-if="activeTab==0" :placeholder="language==0?'请输入护照号搜索':'Please enter passport number to search'"
                      v-model="query.passportNo"/>
            <el-input v-else :placeholder="language==0?'请输入姓名搜索':'Please enter name to search'"
                      v-model="query.contacts"/>
            <el-button class="btn-lineG" type="primary" @click="search">
              <el-icon class="mr20">
                <Search/>
              </el-icon>
              {{ language==0?'搜索': 'Search' }}
            </el-button>
          </div>

          <div class="stab">
            <div :class="activeTab==0?'active':''" @click="changeActiveTab(0)">
              <img v-show="activeTab!=0" src="@/assets/img/tag01@2x.png"/>
              <img v-show="activeTab==0" src="@/assets/img/tag01_dwn@2x.png"/>
              {{language==0?'签证服务':'Visa Services'}}
            </div>
            <div :class="activeTab==1?'active':''" @click="changeActiveTab(1)">
              <img v-show="activeTab!=1" src="@/assets/img/tag02@2x.png"/>
              <img v-show="activeTab==1" src="@/assets/img/tag02_dwn@2x.png"/>
              {{language==0?'酒店预定':'Hotel Reservation'}}
            </div>
            <div :class="activeTab==2?'active':''" @click="changeActiveTab(2)">
              <img v-show="activeTab!=2" src="@/assets/img/tag03@2x.png"/>
              <img v-show="activeTab==2" src="@/assets/img/tag03_dwn@2x.png"/>
              {{language==0?'接送服务':'Pick-up Service'}}
            </div>
          </div>
          <div>
            <div v-for="item in list">
              {{item}}
            </div>
          </div>

          <el-empty v-if="list.length==0"/>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import {ref, computed, onMounted} from 'vue'
import {getHomeCarQuery, getHomeInviteQuery, getHomeRoomQuery} from "@/apiPc/common";
import {ElMessage} from "element-plus";
import {useStorage} from "@vueuse/core/index";

const language = useStorage('language', 0)
const activeTab = ref(0)
const form = ref({})
const list = ref([])
const query = ref({
  status: 1
})
const loading = ref(false)
function changeActiveTab(n) {
  activeTab.value = n
  query.value.passportNo = ''
  query.value.contacts = ''
}
function search() {
  if (!query.value.passportNo && activeTab.value == 0) {
    ElMessage.warning(language.value==0?'请输入护照号搜索':'Please enter keyword to search')
    return
  }
  if (!query.value.contacts && activeTab.value != 0) {
    ElMessage.warning(language.value==0?'请输入关键字搜索':'Please enter keyword to search')
    return
  }
  loading.value = true
  if(activeTab.value == 0){
    // 签证服务
    getHomeInviteQuery(query.value).then(res=>{
      if (!res.data||res.data.length==0) {
        list.value = []
        ElMessage.warning(language.value==0?'未找到结果，请重新查询':'No result')
        return
      }
      list.value = res.data
    })
  }
  if(activeTab.value == 1){
    // 酒店预定
    getHomeRoomQuery(query.value).then(res=>{
      if (!res.data||res.data.length==0) {
        list.value = []
        ElMessage.warning(language.value==0?'未找到结果，请重新查询':'No result')
        return
      }
      list.value = res.data
    })
  }
  if(activeTab.value == 2){
    // 接送服务
    getHomeCarQuery(query.value).then(res=>{
      if (!res.data||res.data.length==0) {
        list.value = []
        ElMessage.warning(language.value==0?'未找到结果，请重新查询':'No result')
        return
      }
      list.value = res.data
    })
  }
}
</script>

<style scoped lang="scss">
.highlight {
  background: yellow;
}
.topsearch{display: flex;gap:10px;
  .el-input {--el-input-bg-color: #F5F7F9;height: 50px;
    --el-input-border-radius: 10px;}
  .btn-lineG{border-radius: 10px;height: 50px;width: 130px;font-size: 20px;}
}
.stab{display: flex;gap: 20px;margin: 20px 0 0 ;
  div{font-weight: 400;padding: 10px 0;display: flex;align-items: center;
    font-size: 18px;cursor: pointer;
    color: #4C5359;
    img{height: 30px;}
  }
  .active{color: #030303;border-bottom: 2px solid #030303;}
}
</style>