<template>
  <div class="cash-discount-grant">
    <el-card>
      <div slot="header" class="search-section">
        <div class="search-row">
          <el-form :model="searchForm" label-width="70px" inline>
            <el-form-item label="客户号:">
              <el-input v-model="searchForm.customerId" placeholder="请输入客户号" clearable style="width: 220px;"></el-input>
            </el-form-item>
            <div class="button-group" style="margin-left: 20px;">
              <el-button type="primary" @click="handleSearch">查询</el-button>
              <el-button @click="handleReset">重置</el-button>
              <el-button type="success" icon="el-icon-download" @click="handleExport">导出</el-button>
            </div>
          </el-form>
        </div>
      </div>

      <el-table :data="pagedData" stripe border style="width: 100%;" v-loading="loading">
        <el-table-column prop="customerId" label="客户号" width="160"></el-table-column>
        <el-table-column prop="discountType" label="立减金类型" width="130"></el-table-column>
        <el-table-column prop="binRestriction" label="是否有bin卡限制" width="140">
          <template slot-scope="scope">
            <el-tag :type="scope.row.binRestriction === '是' ? 'warning' : 'info'" size="small">{{ scope.row.binRestriction }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="grantDate" label="发放日期" width="120"></el-table-column>
        <el-table-column prop="grantAmount" label="发放金额" width="110">
          <template slot-scope="scope">
            <span>¥{{ scope.row.grantAmount }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="grantReason" label="发放事由" min-width="160" show-overflow-tooltip></el-table-column>
        <el-table-column prop="validPeriod" label="使用有效期" width="220"></el-table-column>
        <el-table-column prop="claimed" label="是否领取" width="100">
          <template slot-scope="scope">
            <el-tag :type="scope.row.claimed === '是' ? 'success' : 'danger'" size="small">{{ scope.row.claimed }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="claimTime" label="领取时间" width="160"></el-table-column>
        <el-table-column prop="used" label="是否使用" width="100">
          <template slot-scope="scope">
            <el-tag :type="scope.row.used === '是' ? 'success' : 'danger'" size="small">{{ scope.row.used }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="useTime" label="使用时间" width="160"></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>
const DISCOUNT_TYPES = ['借记卡', '信用卡']
const GRANT_REASONS = ['新开户礼遇', '月度消费达标奖励', '生日专属福利', '双十一营销活动', '服务补偿', '升级Premier礼遇', '推荐好友奖励', '季度活跃奖励']

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

function randomDate(baseDate, offsetDays) {
  const d = new Date(baseDate)
  d.setDate(d.getDate() - Math.floor(Math.random() * offsetDays))
  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`
}

function randomDateTime(baseDate, offsetDays) {
  const d = new Date(baseDate)
  d.setDate(d.getDate() - Math.floor(Math.random() * offsetDays))
  d.setHours(Math.floor(Math.random() * 14 + 8), Math.floor(Math.random() * 60), Math.floor(Math.random() * 60))
  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`
}

function generateMockData() {
  const list = []
  const base = new Date(2026, 4, 15)
  const amounts = [10, 20, 30, 50, 88, 100, 128, 200]

  for (let i = 1; i <= 65; i++) {
    const grantDate = randomDate(base, 90)
    const validStart = grantDate
    const validEnd = new Date(grantDate)
    validEnd.setDate(validEnd.getDate() + 30 + Math.floor(Math.random() * 60))
    const validEndStr = `${validEnd.getFullYear()}-${pad(validEnd.getMonth() + 1)}-${pad(validEnd.getDate())}`

    const claimed = Math.random() > 0.25 ? '是' : '否'
    const used = claimed === '是' && Math.random() > 0.35 ? '是' : '否'

    list.push({
      id: i,
      customerId: 'CUST' + String(100000 + Math.floor(Math.random() * 900000)),
      discountType: DISCOUNT_TYPES[Math.floor(Math.random() * DISCOUNT_TYPES.length)],
      binRestriction: Math.random() > 0.5 ? '是' : '否',
      grantDate: grantDate,
      grantAmount: amounts[Math.floor(Math.random() * amounts.length)],
      grantReason: GRANT_REASONS[Math.floor(Math.random() * GRANT_REASONS.length)],
      validPeriod: `${validStart} 至 ${validEndStr}`,
      claimed: claimed,
      claimTime: claimed === '是' ? randomDateTime(base, 60) : '-',
      used: used,
      useTime: used === '是' ? randomDateTime(base, 30) : '-'
    })
  }
  list.sort((a, b) => b.grantDate.localeCompare(a.grantDate))
  return list
}

export default {
  name: 'CashDiscountGrant',
  data() {
    return {
      searchForm: { customerId: '' },
      loading: false,
      currentPage: 1,
      pageSize: 10,
      tableData: generateMockData()
    }
  },
  computed: {
    filteredData() {
      const keyword = this.searchForm.customerId.trim()
      if (!keyword) return this.tableData
      return this.tableData.filter(item => item.customerId.includes(keyword))
    },
    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 = ''
      this.currentPage = 1
    },
    handlePageChange(page) {
      this.currentPage = page
    },
    handleExport() {
      this.$message.success('导出任务已提交，请稍后在下载中心查看')
    }
  }
}
</script>

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

.search-row {
  display: flex;
  align-items: center;
}

.button-group {
  display: inline-flex;
  gap: 8px;
}
</style>
