<template>
  <div class="customer-equity-grant">
    <el-card>
      <div class="search-section" slot="header">
        <div class="search-row">
          <el-form :model="searchForm" label-width="70px" inline>
            <el-form-item label="客户号:">
              <el-input v-model="searchForm.customerId" placeholder="请输入客户号" style="width: 220px;" clearable></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 style="width: 100%;" v-loading="loading">
        <el-table-column prop="grantTime" label="发放时间"></el-table-column>
        <el-table-column prop="equityName" label="权益名称"></el-table-column>
        <el-table-column prop="equityCode" label="权益编号"></el-table-column>
        <el-table-column prop="sourceChannel" label="客户来源渠道"></el-table-column>
        <el-table-column prop="customerId" label="客户号"></el-table-column>
        <el-table-column prop="accountType" label="客户账户类型">
          <template slot-scope="scope">
            <el-tag :type="accountTypeTag[scope.row.accountType]" size="small">{{ scope.row.accountType }}</el-tag>
          </template>
        </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 ACCOUNT_TYPES = ['Premier', 'Elite', 'PB', 'Prospect']
const CHANNELS = ['Mobile App', 'Online Banking', 'Branch', 'WeChat Mini Program', 'API']
const EQUITY_NAMES = [
  '机场贵宾厅', '酒店权益', '高尔夫权益', '健康体检', '保险权益',
  '积分兑换', '消费返现', '生日礼遇', '出行权益', '餐饮优惠'
]

function generateMockData() {
  const list = []
  for (let i = 1; i <= 86; i++) {
    const d = new Date(2026, 4, 15)
    d.setDate(d.getDate() - Math.floor(Math.random() * 60))
    d.setHours(Math.floor(Math.random() * 24), Math.floor(Math.random() * 60), Math.floor(Math.random() * 60))
    const pad = n => String(n).padStart(2, '0')
    const timeStr = `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`

    list.push({
      id: i,
      grantTime: timeStr,
      equityName: EQUITY_NAMES[Math.floor(Math.random() * EQUITY_NAMES.length)],
      equityCode: 'EQ' + String(202600000 + i),
      sourceChannel: CHANNELS[Math.floor(Math.random() * CHANNELS.length)],
      customerId: 'CUST' + String(100000 + Math.floor(Math.random() * 900000)),
      accountType: ACCOUNT_TYPES[Math.floor(Math.random() * ACCOUNT_TYPES.length)]
    })
  }
  list.sort((a, b) => b.grantTime.localeCompare(a.grantTime))
  return list
}

export default {
  name: 'CustomerEquityGrant',
  data() {
    return {
      searchForm: { customerId: '' },
      loading: false,
      currentPage: 1,
      pageSize: 10,
      tableData: generateMockData(),
      accountTypeTag: {
        Premier: '',
        Elite: 'success',
        PB: 'warning',
        Prospect: 'info'
      }
    }
  },
  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>
