<template>
  <div class="page-container">
    <el-card class="custom-card" shadow="never">
      <div slot="header" class="custom-card-header">
        <div style="display: flex; align-items: center">
          <el-radio-group v-model="apiParams.type" size="medium" @change="tabChange">
            <el-radio-button label="day">日</el-radio-button>
            <el-radio-button label="week">周</el-radio-button>
            <el-radio-button label="month">月</el-radio-button>
            <el-radio-button label="all">全部</el-radio-button>
          </el-radio-group>

          <span style="margin: 0 8px 0 24px">开始日期:</span>
          <el-date-picker
            v-model="apiParams.start_time"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="请选择">
          </el-date-picker>

          <span style="margin: 0 8px 0 24px">结束日期:</span>
          <el-date-picker
            v-model="apiParams.end_time"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="请选择">
          </el-date-picker>

          <el-button type="primary" style="margin-left: 30px" @click="handleSearch">搜索</el-button>
          <el-button @click="resetSearch">重置</el-button>
        </div>
      </div>

      <div class="custom-card-body">
        <span style="font-weight: bold">数据汇总</span>

        <div class="dashboard-total-content">
          <div
            class="dashboard-total-content-item"
            v-for="(item, i) in dashboards"
            :key="i"
            :style="{ backgroundColor: item.bgColor }"
          >
            <div>
              <span v-if="item.type === 'price'">
                ${{ dataRef[item.prop] || '0.00' }}
              </span>
              <span v-else>
                {{ dataRef[item.prop] || 0 }}
              </span>
            </div>
            <div>{{ item.title }}</div>
          </div>
        </div>
      </div>
    </el-card>

    <div class="table-container">
      <el-table
        :data="tableData"
        style="width: 100%"
        v-loading="loading"
        border
      >
        <el-table-column prop="recharge" label="充值" align="center"></el-table-column>
        <el-table-column prop="withdraw" label="提现" align="center"></el-table-column>
        <el-table-column prop="balance_difference" label="充值差额" align="center"></el-table-column>
        <el-table-column prop="total_price" label="销售额" align="center"></el-table-column>
        <el-table-column prop="user_total_money" label="用户存量" align="center"></el-table-column>
        <el-table-column prop="date" label="日期" align="center"></el-table-column>
      </el-table>

      <div class="pagination-wrapper">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="apiParams.page"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="apiParams.limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { operationIndex } from '@/api/data'

export default {
  data() {
    return {
      loading: false,
      dataRef: {},
      tableData: [],
      total: 0,
      apiParams: {
        type: 'all',
        start_time: '',
        end_time: '',
        limit: 20,
        page: 1,
      },
      dashboards: [
        { title: '充值', prop: 'recharge', bgColor: '#ff8399', type: 'price' },
        { title: '提现', prop: 'withdraw', bgColor: '#71c3ff', type: 'price' },
        { title: '销售额', prop: 'total_price', bgColor: '#7190ff', type: 'price' },
      ]
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    // 拉取数据
    getData() {
      this.loading = true
      operationIndex(this.apiParams).then((res) => {
        this.loading = false
        // 假设你们的 axios 拦截器直接返回了整个 JSON 对象
        if (res.code === 0) {
          const resData = res.data || {}

          // 看板统计数据 (对应返回的 count 对象)
          this.dataRef = resData.count || {}

          // 列表数据 (对应返回的 data 数组)
          this.tableData = resData.data || []

          // 分页总数 (对应返回的 total 字段)
          this.total = resData.total || 0
        } else {
          this.$message.error(res.msg || '获取数据失败')
        }
      }).catch(() => {
        this.loading = false
      })
    },
    // 顶部按钮事件
    handleSearch() {
      this.apiParams.page = 1
      this.getData()
    },
    resetSearch() {
      this.apiParams.type = 'all'
      this.apiParams.start_time = ''
      this.apiParams.end_time = ''
      this.apiParams.page = 1
      this.getData()
    },
    tabChange(val) {
      this.apiParams.type = val
      this.apiParams.page = 1
      this.getData()
    },
    // 分页事件
    handleSizeChange(val) {
      this.apiParams.limit = val
      this.apiParams.page = 1
      this.getData()
    },
    handleCurrentChange(val) {
      this.apiParams.page = val
      this.getData()
    }
  }
}
</script>

<style scoped lang="scss">
.page-container {
  padding: 10px;
  background-color: transparent;
}

.custom-card {
  margin-bottom: 15px;

  ::v-deep .el-card__header {
    padding: 15px 20px;
    background-color: #fff;
  }

  ::v-deep .el-card__body {
    padding: 16px;
  }
}

.dashboard-total-content {
  width: 100%;
  display: flex;
  gap: 15px; /* 项目之间的间距 */
  margin-top: 15px;

  &-item {
    flex: 1; /* 每个项目平均分配宽度 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 6px;
    padding: 20px 10px;
    color: #fff;
    box-sizing: border-box;

    // 第一个数值文本样式
    > div:first-child {
      font-size: 1.8rem;
      font-weight: bold;
      margin-bottom: 8px;
    }

    // 标题文本样式
    > div:last-child {
      font-size: 1rem;
      opacity: 0.9;
    }
  }
}

.table-container {
  background: #fff;
  padding: 15px;
  border-radius: 4px;
}

.pagination-wrapper {
  margin-top: 20px;
  text-align: right;
}
</style>
