<template>
  <div style="margin: 20px;">
    <a-card title="算力券管理">
      <div style="width: 300px;border: 1px solid #e8e8e8;line-height: 45px;border-radius: 5px;">
        <div
          style="background: linear-gradient(90deg, rgba(240, 245, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);height: 45px;line-height: 45px;padding: 0 10px;">
          可用算力券</div>
        <div style="font-size:18px;font-weight: bold;padding: 0 10px;">￥{{ couponTotal }}</div>
      </div>
      <!-- 账单表格 -->
      <div style="margin-top: 20px;">
        <a-table :columns="columns" :data-source="billData" :pagination="pagination" @change="handleTableChange"
          :loading="loading" class="bill-table" :scroll="{ x: 1200 }" bordered>
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'status'">
              <a-tag v-if="record.status === 'enabled'" color="green">有效</a-tag>
              <a-tag v-else color="red">失效</a-tag>
            </template>
          </template>
        </a-table>
      </div>
    </a-card>
  </div>
</template>
<script setup lang="ts">
import { ref, onBeforeMount, h } from 'vue';
import { getMyCouponTotal, getRecommendList } from '@/apis/home';
import { message } from 'ant-design-vue';
const loading = ref(false);
const billData = ref([])
const couponTotal = ref(0);
const columns = [
  {
    title: '算力券名称',
    dataIndex: 'name',
    key: 'name',
    width: 200,
  },
  {
    title: '算力点',
    dataIndex: 'amount',
    key: 'amount',
    width: 200,
  },
  {
    title: '生效时间',
    dataIndex: 'StartAt',
    key: 'StartAt',
    width: 150,
  },
  {
    title: '失效时间',
    dataIndex: 'EndAt',
    key: 'EndAt',
    width: 100,
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status',
    width: 100,
  }

];
const pagination = ref({
  current: 1,
  pageSize: 10,
  total: 0,
  showSizeChanger: true,
  showQuickJumper: true,
  showTotal: (total: number) => `共 ${total} 条记录`
})
// 表格变化处理
const handleTableChange = () => {


}
const getBillData = () => {
  loading.value = true;
  try {
    getRecommendList().then((res: any) => {
      console.log('res', res);
      billData.value = res.data;
      pagination.value.total = res.total;
      loading.value = false;
    })
  } catch (error) {
    loading.value = false;
    message.error('获取算力券列表失败');
  }
};
const getValue = () => {
  // 获取其他必要的数据
  try {
    getMyCouponTotal().then((res: any) => {
      console.log('res', res);
      couponTotal.value = res;
    })
  } catch (error) {
    message.error('获取算力券总额失败');
  }
};
onBeforeMount(() => {
  // 初始化获取数据
  getValue()
  getBillData()
})
</script>