<template>
  <div class="points-detail">
    <el-card>
      <template #header>
        <div class="search-section">
        <el-form :model="searchForm" label-width="100px" inline>
          <el-form-item label="客户号:">
            <el-input v-model="searchForm.customerId" placeholder="请输入客户号" clearable style="width: 220px;"></el-input>
          </el-form-item>
          <el-form-item label="变动类型:">
            <el-select v-model="searchForm.changeType" placeholder="请选择变动类型" clearable style="width: 220px;">
              <el-option v-for="item in changeTypeOptions" :key="item" :label="item" :value="item"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="查询日期范围:">
            <el-date-picker
              v-model="searchForm.dateRange"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="YYYY-MM-DD"
              style="width: 360px;"
            ></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSearch">查询</el-button>
            <el-button @click="handleReset">重置</el-button>
            <el-button type="success" @click="handleExport">
              <el-icon><Download /></el-icon>导出
            </el-button>
          </el-form-item>
        </el-form>
        </div>
      </template>

      <el-table :data="pagedData" stripe border style="width: 100%;" v-loading="loading">
        <el-table-column prop="customerId" label="客户号"></el-table-column>
        <el-table-column prop="changeDate" label="变动日期"></el-table-column>
        <el-table-column prop="changeAmount" label="变动积分金额"></el-table-column>
        <el-table-column prop="totalPoints" label="积分总数"></el-table-column>
        <el-table-column prop="hyhPoints" label="HYH积分"></el-table-column>
        <el-table-column prop="creditCardPoints" label="信用卡积分"></el-table-column>
        <el-table-column prop="changeType" label="变动类别">
          <template #default="scope">
            <el-tag :type="changeTypeTag[scope.row.changeType]" size="small">{{ scope.row.changeType }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="projectName" label="积分项目类别" show-overflow-tooltip></el-table-column>
      </el-table>

      <el-pagination
        style="margin-top: 20px; text-align: right;"
        @current-change="handlePageChange"
        :current-page="currentPage"
        :page-size="pageSize"
        layout="total, prev, pager, next, jumper"
        :total="filteredData.length"
      ></el-pagination>
    </el-card>
  </div>
</template>

<script>
import { ElMessage } from 'element-plus'

const CHANGE_TYPES = ['获取积分', '使用积分', '积分过期']
const EARN_PROJECTS = ['消费返积分', '开户礼积分', '生日奖励积分', '活动赠送积分', '推荐好友奖励', '月度达标奖励']
const SPEND_PROJECTS = ['积分兑换商品', '积分抵现', '积分兑换券码', '积分兑换里程', '积分兑换权益']

function pad(n) { return String(n).padStart(2, '0') }

function generateMockData() {
  const list = []
  const customerIds = ['CUST100231', 'CUST100458', 'CUST100672', 'CUST100899', 'CUST101024', 'CUST101337', 'CUST101582', 'CUST101790']

  for (let i = 1; i <= 80; i++) {
    const d = new Date(2026, 4, 15)
    d.setDate(d.getDate() - Math.floor(Math.random() * 120))
    const dateStr = `${d.getFullYear()}/${pad(d.getMonth() + 1)}/${pad(d.getDate())}`

    const changeType = CHANGE_TYPES[Math.floor(Math.random() * CHANGE_TYPES.length)]
    let changeAmount, projectName
    if (changeType === '获取积分') {
      changeAmount = Math.floor(Math.random() * 500 + 1)
      projectName = EARN_PROJECTS[Math.floor(Math.random() * EARN_PROJECTS.length)]
    } else if (changeType === '使用积分') {
      changeAmount = Math.floor(Math.random() * 300 + 1)
      projectName = SPEND_PROJECTS[Math.floor(Math.random() * SPEND_PROJECTS.length)]
    } else {
      changeAmount = Math.floor(Math.random() * 200 + 50)
      projectName = '/'
    }

    const totalPoints = Math.floor(Math.random() * 5000 + 100)
    const hyhPoints = Math.floor(totalPoints * (Math.random() * 0.4 + 0.1))
    const creditCardPoints = totalPoints - hyhPoints

    list.push({
      id: i,
      customerId: customerIds[Math.floor(Math.random() * customerIds.length)],
      changeDate: dateStr,
      changeAmount: changeAmount,
      totalPoints: totalPoints,
      hyhPoints: hyhPoints,
      creditCardPoints: creditCardPoints,
      changeType: changeType,
      projectName: projectName
    })
  }
  list.sort((a, b) => b.changeDate.localeCompare(a.changeDate))
  return list
}

export default {
  name: 'PointsDetail',
  data() {
    return {
      searchForm: { customerId: '', changeType: '', dateRange: [] },
      loading: false,
      currentPage: 1,
      pageSize: 10,
      tableData: generateMockData(),
      changeTypeOptions: CHANGE_TYPES,
      changeTypeTag: {
        '获取积分': 'success',
        '使用积分': '',
        '积分过期': 'info'
      }
    }
  },
  computed: {
    filteredData() {
      let list = this.tableData
      const keyword = this.searchForm.customerId.trim()
      if (keyword) {
        list = list.filter(item => item.customerId.includes(keyword))
      }
      if (this.searchForm.changeType) {
        list = list.filter(item => item.changeType === this.searchForm.changeType)
      }
      if (this.searchForm.dateRange && this.searchForm.dateRange.length === 2) {
        const start = this.searchForm.dateRange[0].replace(/-/g, '/')
        const end = this.searchForm.dateRange[1].replace(/-/g, '/')
        list = list.filter(item => item.changeDate >= start && item.changeDate <= end)
      }
      return list
    },
    pagedData() {
      const start = (this.currentPage - 1) * this.pageSize
      return this.filteredData.slice(start, start + this.pageSize)
    }
  },
  methods: {
    handleSearch() {
      this.currentPage = 1
    },
    handleReset() {
      this.searchForm = { customerId: '', changeType: '', dateRange: [] }
      this.currentPage = 1
    },
    handlePageChange(page) {
      this.currentPage = page
    },
    handleExport() {
      ElMessage.success('导出任务已提交，请稍后在下载中心查看')
    }
  }
}
</script>

<style scoped>
.search-section {
  display: flex;
  align-items: center;
}
</style>
