<template>
  <div class="customer-equity-grant">
    <el-card>
      <template #header>
        <div class="search-section">
          <el-form :model="searchForm" label-width="130px">
          <el-row :gutter="16">
            <el-col :span="8">
              <el-form-item label="客户号:">
                <el-input v-model="searchForm.customerId" placeholder="请输入客户号" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="权益编号:">
                <el-input v-model="searchForm.equityCode" placeholder="请输入权益编号" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="发放时间:">
                <el-date-picker
                  v-model="searchForm.grantTimeRange"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  value-format="YYYY-MM-DD"
                  style="width: 100%;"
                ></el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="16">
            <el-col :span="8">
              <el-form-item label="Channel 名称:">
                <el-select v-model="searchForm.channelName" placeholder="请选择 Channel 名称" clearable filterable style="width: 100%;">
                  <el-option v-for="item in channelOptions" :key="item.id" :label="item.name" :value="item.name"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="Campaign 名称:">
                <el-select v-model="searchForm.campaignName" placeholder="请选择 Campaign 名称" clearable filterable style="width: 100%;">
                  <el-option v-for="item in campaignOptions" :key="item.id" :label="item.name" :value="item.name"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="客户账户类型:">
                <el-select v-model="searchForm.accountType" placeholder="请选择客户账户类型" clearable style="width: 100%;">
                  <el-option v-for="item in accountTypeOptions" :key="item" :label="item" :value="item"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="16">
            <el-col :span="24" class="action-col">
              <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-col>
          </el-row>
        </el-form>
        </div>
      </template>

      <el-table :data="pagedData" stripe style="width: 100%;" v-loading="loading">
        <el-table-column prop="grantTime" label="发放时间" width="170"></el-table-column>
        <el-table-column prop="equityName" label="权益名称"></el-table-column>
        <el-table-column prop="equityCode" label="权益编号" width="130"></el-table-column>
        <el-table-column prop="campaignId" label="Campaign ID" width="120"></el-table-column>
        <el-table-column prop="campaignName" label="Campaign 名称" show-overflow-tooltip></el-table-column>
        <el-table-column prop="channelId" label="Channel ID" width="120"></el-table-column>
        <el-table-column prop="channelName" label="Channel 名称"></el-table-column>
        <el-table-column prop="customerId" label="客户号" width="140"></el-table-column>
        <el-table-column prop="accountType" label="客户账户类型" width="130">
          <template #default="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>
import { ElMessage } from 'element-plus'

const ACCOUNT_TYPES = ['Premier', 'Elite', 'PB', 'Prospect']
const CHANNELS = [
  { id: 'CH0001', name: '汇丰中国客户服务号' },
  { id: 'CH0002', name: 'MGM - Mortgage' },
  { id: 'CH0003', name: 'MGM - Premier' },
  { id: 'CH0004', name: 'CCSS SMS' },
  { id: 'CH0005', name: 'GPB Referral' },
  { id: 'CH0006', name: 'HK referral' },
  { id: 'CH0007', name: 'Non WPB staff Referral' },
  { id: 'CH0008', name: 'Pinnacle Referral' },
  { id: 'CH0009', name: 'RBB Refferal' },
  { id: 'CH0010', name: 'New staff' },
  { id: 'CH0011', name: 'IBC referral staff code' },
  { id: 'CH0012', name: 'HTC' },
  { id: 'CH0013', name: 'NIVIDA' },
  { id: 'CH0014', name: 'Mobile X' },
  { id: 'CH0015', name: 'PWS site' },
  { id: 'CH0016', name: '汇丰中国小程序' },
  { id: 'CH0017', name: '汇丰中国订阅号' },
  { id: 'CH0018', name: '推文尾部入口' },
  { id: 'CH0019', name: 'Chatbot' },
  { id: 'CH0020', name: 'SMS' },
  { id: 'CH0021', name: 'River APP' }
]
const EQUITY_NAMES = [
  '机场贵宾厅', '酒店权益', '高尔夫权益', '健康体检', '保险权益',
  '积分兑换', '消费返现', '生日礼遇', '出行权益', '餐饮优惠'
]
const CAMPAIGNS = [
  { id: 'CP9001', name: 'Q3 大客户回馈' },
  { id: 'CP9002', name: '新春开户活动' },
  { id: 'CP9003', name: '618 消费季营销' },
  { id: 'CP9004', name: '双十一专享权益' },
  { id: 'CP9005', name: 'Premier 升级礼遇' }
]

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())}`

    const campaign = CAMPAIGNS[Math.floor(Math.random() * CAMPAIGNS.length)]
    const channel = CHANNELS[Math.floor(Math.random() * CHANNELS.length)]
    list.push({
      id: i,
      grantTime: timeStr,
      equityName: EQUITY_NAMES[Math.floor(Math.random() * EQUITY_NAMES.length)],
      equityCode: 'Q' + String(202600000 + i),
      campaignId: campaign.id,
      campaignName: campaign.name,
      channelId: channel.id,
      channelName: channel.name,
      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: '',
        grantTimeRange: [],
        channelName: '',
        campaignName: '',
        equityCode: '',
        accountType: ''
      },
      loading: false,
      currentPage: 1,
      pageSize: 10,
      tableData: generateMockData(),
      channelOptions: CHANNELS,
      campaignOptions: CAMPAIGNS,
      accountTypeOptions: ACCOUNT_TYPES,
      accountTypeTag: {
        Premier: '',
        Elite: 'success',
        PB: 'warning',
        Prospect: 'info'
      }
    }
  },
  computed: {
    filteredData() {
      let list = this.tableData
      const customerId = this.searchForm.customerId.trim()
      if (customerId) {
        list = list.filter(item => item.customerId.includes(customerId))
      }
      if (this.searchForm.grantTimeRange && this.searchForm.grantTimeRange.length === 2) {
        const start = this.searchForm.grantTimeRange[0]
        const end = this.searchForm.grantTimeRange[1] + ' 23:59:59'
        list = list.filter(item => item.grantTime >= start && item.grantTime <= end)
      }
      if (this.searchForm.channelName) {
        list = list.filter(item => item.channelName === this.searchForm.channelName)
      }
      if (this.searchForm.campaignName) {
        list = list.filter(item => item.campaignName === this.searchForm.campaignName)
      }
      const equityCode = this.searchForm.equityCode.trim()
      if (equityCode) {
        list = list.filter(item => item.equityCode.includes(equityCode))
      }
      if (this.searchForm.accountType) {
        list = list.filter(item => item.accountType === this.searchForm.accountType)
      }
      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: '',
        grantTimeRange: [],
        channelName: '',
        campaignName: '',
        equityCode: '',
        accountType: ''
      }
      this.currentPage = 1
    },
    handlePageChange(page) {
      this.currentPage = page
    },
    handleExport() {
      ElMessage.success('导出任务已提交，请稍后在下载中心查看')
    }
  }
}
</script>

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

.action-col {
  display: flex;
  align-items: center;
  gap: 8px;
}
</style>
