<script setup>
import { showConfirm } from '@/components/Toast'
import deviceOrder from './components/deviceOrder.vue'
import interestsOrder from './components/interestsOrder.vue'
import rechargeOrder from './components/rechargeOrder.vue'
import downOrder from './components/downOrder.vue'
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'),
    key: 'deviceOrder',
    component: deviceOrder
  },
  {
    name: t('manage.myOrders.tabs1'),
    key: 'interestsOrder',
    component: interestsOrder
  },
  {
    name: t('manage.myOrders.tabs2'),
    key: 'rechargeOrder',
    component: rechargeOrder
  },
  {
    name: t('manage.myOrders.tabs3'),
    key: 'downOrder',
    component: downOrder
  }
]
const userStore = useUserStore()
// const isEur = userStore.isEur
const tabComponent = ref({
  name: 'deviceOrder',
  dom: deviceOrder
})
const searchKey = ref('')
const searchShow = ref(false)
const invoice = ref(null)
// const consumeType =
function handleTabChange(item) {
  tabComponent.value = {
    name: item.key,
    dom: item.component
  }
}
function changeSearchShow(bool) {
  searchShow.value = bool
}
</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.name === item.key }"
          v-for="item in tabs"
          :key="item.component"
          @click="handleTabChange(item)"
        >
          {{ item.name }}
        </li>
      </ul>
      <div class="search-w" v-show="tabComponent.name === '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.dom" />
    </keep-alive>
  </div>
</template>



<style lang="less" scoped>
.order-header {
  margin-bottom: 20px;
  position: relative;
  .search-w {
    height: 40px;
    width: 256px;
    background: #ebebeb;
    position: absolute;
    right: 0;
    top: 0;
    input {
      background: transparent;
      border: none;
      width: 100%;
      height: 40px;
      line-height: 40px;
      padding: 0 50px 0 20px;
    }
    .search-icon {
      position: absolute;
      right: 20px;
      top: 0;
      height: 40px;
      line-height: 40px;
      font-size: 20px;
      cursor: pointer;
    }
  }
}
.tab-list {
  display: inline-block;
  position: relative;
  height: 40px;
  line-height: 40px;
  li {
    display: inline-block;
    margin-right: 30px;
    cursor: pointer;
    font-size: 16px;
    line-height: 1.5;
    color: #909090;
    font-weight: 600;
    &:last-child {
      margin-right: 0;
    }
  }
  .active {
    color: #323233;
    &::after {
      content: '';
      display: block;
      width: 40px;
      height: 2px;
      background: #15bec8;
    }
  }
}
.order-layout {
  background: #fff;
  color: #646566;
  padding: 18px 30px 30px;
}
</style>
