<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 :placeholder="language==0?'请输入手机号或邮箱搜索':'Please enter phone or email to search'"
                      v-model="query.remarks" @keyup.enter="search"/>
            <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-if="activeTab==0">
              <el-empty v-if="list1.length==0"/>
              <visa-info v-else :list="list1" min></visa-info>
            </div>
            <div v-if="activeTab==1">
              <el-empty v-if="list2.length==0"/>
              <reservation-info v-else :list="list2" min></reservation-info>
            </div>
            <div v-if="activeTab==2">
              <el-empty v-if="list3.length==0"/>
              <pickup-info v-else :list="list3"></pickup-info>
            </div>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import {ref, onMounted} from 'vue'
import { getHomeInviteQuery, getHomeRoomQuery} from "@/apiPc/common";
import {ElMessage} from "element-plus";
import {useStorage} from "@vueuse/core/index";
import VisaInfo from "/src/viewsPc/center/info/visaInfo.vue";
import ReservationInfo from "/@/viewsPc/center/info/reservationInfo.vue";
import {useRouteQuery} from '@vueuse/router'
import PickupInfo from "/@/viewsPc/center/info/pickupInfo.vue";
import { getHomePickQuery} from "/@/apiPc/match";

const language = useStorage('language', 0)
const activeTab = useRouteQuery('n', 0)
const searchVal = useRouteQuery('s')
const form = ref({})
const list1 = ref([])
const list2 = ref([])
const list3 = ref([])
const query = ref({
  status: 1,
  remarks: ''
})
const loading = ref(false)

function changeActiveTab(n) {
  activeTab.value = n
  if (query.value.remarks) {
    search()
  }
}

onMounted(() => {
  if (searchVal.value) {
    query.value.remarks = searchVal.value
    search()
  }
})


function search() {
  if (!query.value.remarks) {
    ElMessage.warning(language.value == 0 ? '请输入手机号或邮箱搜索' : 'Please enter phone or email to search')
    return
  }

  if (activeTab.value == 0) {
    delete query.value.status
  }else{
    query.value.status = 1
  }

  searchVal.value = query.value.remarks
  loading.value = true
  if (activeTab.value == 0) {
    // 签证服务
    getHomeInviteQuery(query.value).then(res => {
      if (!res.data || res.data.length == 0) {
        list1.value = []
        ElMessage.warning(language.value == 0 ? '未查到预定信息' : 'No reservation information found.')
        return
      }
      list1.value = res.data
    })
  }
  if (activeTab.value == 1) {
    // 酒店预定
    getHomeRoomQuery(query.value).then(res => {
      if (!res.data || res.data.length == 0) {
        list2.value = []
        ElMessage.warning(language.value == 0 ? '未查到预定信息' : 'No reservation information found.')
        return
      }
      list2.value = res.data
    })
  }
  if (activeTab.value == 2) {
    // 接送服务
    getHomePickQuery(query.value).then(res => {
      if (!res.data || res.data.length == 0) {
        list3.value = []
        ElMessage.warning(language.value == 0 ? '未查到预定信息' : 'No reservation information found.')
        return
      }
      list3.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>