<script setup lang="ts">
import { showConfirm } from '@/components/Toast'
import { ref, computed, onMounted } from 'vue'
import { useUserStore } from '@/stores/user'
import { openPay, getOrderInfo, wxLogin } from '@/api/api'
import { useRoute } from 'vue-router'
import { GetRequest, getWeChatCode, getRemark } from '@/utils/index'
import { useI18n } from 'vue-i18n'
const route = useRoute()
const { locale: language, t } = useI18n()
const tabs = [
          {
          name: t('manage.myOrders.tabs0'),
          component: 'deviceOrder'
        },
        {
          name: t('manage.myOrders.tabs1'),
          component: 'interestsOrder'
        },
        {
          name: t('manage.myOrders.tabs2'),
          component: 'rechargeOrder'
        },
        {
          name: t('manage.myOrders.tabs3'),
          component: 'downOrder'
        }
]
const userStore = useUserStore();
// const isEur = userStore.isEur
const tabComponent = ref('deviceOrder')
const searchKey = ref('')
const searchShow = ref(false)
const invoice = ref(null)
</script>
<template>
  <div class="order-layout">
    <!-- <showInvoice :invoice="invoice" :consumeType="consumeType" v-if="invoice" @cancle="invoice = null" /> -->
    <div class="order-header">
      <ul class="tab-list">
        <li :class="{active: tabComponent === item.component}" v-for="item in tabs" :key="item.component" @click="handleTabChange(item)">{{ item.name }}</li>
      </ul>
      <div class="search-w" v-show="tabComponent === 'consumption' && searchShow">
        <input type="text" v-model="searchKey" @keyup.enter="handleSearch" :placeholder="$t('manage.Spending.placeholdersearchID')">
        <h-icon type="search" class="search-icon" @click="handleSearch" />
      </div>
    </div>
    <!-- <keep-alive>
      <component :is="tabComponent" ref="liveComponent" @changeSearchShow="changeSearchShow" />
    </keep-alive> -->

  </div>
</template>

<style lang="less" scoped>
.pcPage {
  background: #f7f7f7;
  max-width: 100vw;
  display: block;
  color:#202020;
}
</style>
