<template>
  <div class="wallet-page">
    <ul class="wallet-list flex-between">
      <li class="gradient flex-center-between" v-for="(item, index) in 2" :key="index">
        <div class="wallet-list-li-left">
          <div class="">{{ index == 0 ? $t('common.mibi') : $t('common.baomibi') }}{{ $t('personalCenter.yue') }}</div>
          <div class="">5000</div>
        </div>
        <div class="wallet-list-li-right flex-align-center">
          <div class="flex-align-center btn">
            <img src="/src/assets/imgs/my/tixian@2x.png" alt="">
            <div class="">{{ $t('personalCenter.shenqingtixian') }}</div>
          </div>
          <div v-if="index == 1" class="flex-align-center btn">
            <img src="/src/assets/imgs/my/zhuanhuan@2x.png" alt="">
            <div class="">{{ $t('personalCenter.zhuanghuanmibi') }}</div>
          </div>
        </div>
      </li>
    </ul>
    <el-tabs v-model="form.activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane :label="$t(tab.label)" v-for="tab in tabs" :key="tab.name" :name="tab.name">
        <div class="tabs flex-align-center">
          <div :class="{active:index == 0}" class="tab" v-for="(item, index) in 2">{{ index == 0 ? '米币' : '暴米币' }}明细</div>
        </div>
        <ul class="wallet-page-list">
          <li v-for="(item, index) in list" :key="index">
            <div class="title">
              <div class="">订单米币</div>
              <div class="">2024-08-24 14:11:11</div>
            </div>
            <div class="price">+1000</div>
          </li>
        </ul>
      </el-tab-pane>
    </el-tabs>
    <template v-if="list.length">
      <Pagination :total="form.total" :page-size="form.pageSize" :current-page="form.pageNum"
        @page-change="handlePageChange" />
    </template>
    <el-empty v-else :description="$t('common.empty')" />
  </div>
</template>
<script lang="ts" setup>
import { ref, onMounted } from 'vue'

import type { TabsPaneContext } from 'element-plus'
import Pagination from '@/components/Pagination.vue'

const activeName = ref('first')
const tabs = ref([
  { label: 'personalCenter.incomeDetails', name: 0 },
  { label: 'personalCenter.usageRecord', name: 1 }
])
const list = ref([])
const form = ref({
  activeName: 0,
  pageNum: 1,
  pageSize: 10,
  total: 0,
})

const handleClick = (tab: TabsPaneContext) => {
  list.value = []
  form.value.pageNum = 1;
  form.value.activeName = tab.props.name;
  getList()
}
const getList = async () => {

}

const handlePageChange = (newPage: number) => {
  list.value = []
  form.value.pageNum = page;
  getList()
}
onMounted(() => {
  getList()
})
</script>
<style scoped lang="scss">
.wallet-page {

  padding-bottom: 16px;

  .tabs {
    .tab {
      cursor: pointer;
      color: #2D71FF;
      padding: 0 12px;
      line-height: 30px;
      font-size: 14px;
      background: #EAF0FF;
      border-radius: 4px;
      margin-right: 16px;
    }
    .active {
      color: #FFFFFF;
      background: linear-gradient( 90deg, #0055FE 0%, #C832FA 100%);
    }
  }

  .wallet-list {
    gap: 16px;
    padding: 16px;

    li {
      flex: 1;
      padding: 16px;
      border-radius: 16px;

      .wallet-list-li-left {

        div {
          color: #FFFFFF;
          font-size: 14px;
          line-height: 1;

          &:last-child {
            margin-top: 8px;
            font-size: 32px;
            font-weight: bold;
          }
        }
      }

      .wallet-list-li-right {
        .btn {
          cursor: pointer;
          margin-left: 8px;
          color: #2D71FF;
          font-size: 14px;
          padding: 0 20px;
          height: 40px;
          background: #FFFFFF;
          border-radius: 10px;

          img {
            width: 16px;
            height: 16px;
            margin-right: 4px;
          }

          &:hover {
            opacity: 0.7;
          }
        }
      }
    }
  }
}

.wallet-page-list {
  li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    border-radius: 16px;
    background: #F5F7FA;
    margin-bottom: 16px;

    &:last-child {
      margin-bottom: 0;
    }

    .title {
      div {
        font-size: 16px;
        line-height: 1;

        &:last-child {
          margin-top: 8px;
          color: #666666;
          font-size: 14px;
        }
      }
    }

    .price {
      font-size: 16px;
      font-weight: bold;
      color: #F52929;
    }
  }
}
</style>