<template>
  <div class="sms-send-record">
    <el-card>
      <!-- 搜索区域 -->
      <template #header>
        <div class="search-section">
        <div class="search-row">
          <el-form :model="searchForm" label-width="100px" inline>
            <el-form-item label="接收手机号:">
              <el-input v-model="searchForm.mobile" placeholder="请输入" clearable style="width: 180px" />
            </el-form-item>
            <el-form-item label="模板名称:">
              <el-select v-model="searchForm.templateId" clearable placeholder="全部" style="width: 200px">
                <el-option
                  v-for="item in templateOptions"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="发送状态:">
              <el-select v-model="searchForm.status" clearable placeholder="全部" style="width: 120px">
                <el-option label="成功" value="success" />
                <el-option label="失败" value="failed" />
              </el-select>
            </el-form-item>
            <el-form-item label="发送时间:">
              <el-date-picker
                v-model="searchForm.sentRange"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="YYYY-MM-DD"
                style="width: 260px"
              />
            </el-form-item>
            <div class="button-group">
              <el-button type="primary" @click="handleSearch">查询</el-button>
              <el-button @click="handleReset">重置</el-button>
            </div>
          </el-form>
        </div>
        </div>
      </template>

      <!-- 表格 -->
      <el-table :data="pagedData" stripe style="width: 100%" border>
        <el-table-column prop="id" label="发送 ID" width="180" />
        <el-table-column prop="mobile" label="接收手机号" width="140" />
        <el-table-column prop="templateName" label="模板名称" min-width="180" show-overflow-tooltip />
        <el-table-column prop="content" label="发送内容" min-width="320" show-overflow-tooltip />
        <el-table-column prop="productName" label="关联权益商品" width="160" show-overflow-tooltip />
        <el-table-column label="发送状态" width="100">
          <template #default="scope">
            <el-tag :type="scope.row.status === 'success' ? 'success' : 'danger'" size="small">
              {{ scope.row.status === 'success' ? '成功' : '失败' }}
            </el-tag>
          </template>
        </el-table-column>
<el-table-column prop="sentAt" label="发送时间" width="160" />
      </el-table>

      <!-- 分页 -->
      <div class="pagination-section">
        <span class="total">共 {{ filteredData.length }} 条</span>
        <el-pagination
          layout="prev, pager, next, sizes, jumper"
          v-model:current-page="page.current"
          v-model:page-size="page.size"
          :page-sizes="[10, 20, 50]"
          :total="filteredData.length"
        />
      </div>
    </el-card>
  </div>
</template>

<script>
import smsTemplateStore from '@/store/smsTemplateStore'

export default {
  name: 'SmsSendRecord',
  data() {
    return {
      searchForm: {
        mobile: '',
        templateId: '',
        status: '',
        sentRange: []
      },
      page: { current: 1, size: 10 },
      records: [
        {
          id: 'SMS20260510001',
          mobile: '138****5821',
          templateId: 'SMS_TPL_001',
          templateName: '通用权益支付成功模板',
          content: '【银行】您购买的星巴克电子券已支付成功，卡号：8821****3340，卡密：xc**29，有效期至2026-08-31，详情：https://m.bank.com/c/8821',
          productName: '星巴克电子券',
          status: 'success',
          failReason: '',
          sentAt: '2026-05-10 14:08:21'
        },
        {
          id: 'SMS20260510002',
          mobile: '139****0173',
          templateId: 'SMS_TPL_002',
          templateName: '券码类短信模板',
          content: '【银行】尊敬的客户，您的肯德基早餐券购买成功，券码为KFC8821X，请于2026-06-30前使用。',
          productName: '肯德基早餐券',
          status: 'success',
          failReason: '',
          sentAt: '2026-05-10 15:22:09'
        },
        {
          id: 'SMS20260510003',
          mobile: '186****4502',
          templateId: 'SMS_TPL_001',
          templateName: '通用权益支付成功模板',
          content: '【银行】您购买的爱奇艺会员月卡已支付成功，卡号：QY002****9981，卡密：iq**aa，有效期至2026-06-10，详情：https://m.bank.com/c/qy002',
          productName: '爱奇艺会员月卡',
          status: 'failed',
          failReason: '号码格式错误',
          sentAt: '2026-05-10 16:01:55'
        },
        {
          id: 'SMS20260509001',
          mobile: '135****7714',
          templateId: 'SMS_TPL_003',
          templateName: '实物类短信模板',
          content: '【银行】您购买的小米保温杯已受理，我们将尽快安排发货，感谢您的支持。',
          productName: '小米保温杯',
          status: 'success',
          failReason: '',
          sentAt: '2026-05-09 10:45:33'
        },
        {
          id: 'SMS20260509002',
          mobile: '137****3398',
          templateId: 'SMS_TPL_002',
          templateName: '券码类短信模板',
          content: '【银行】尊敬的客户，您的麦当劳套餐券购买成功，券码为MD0089Z，请于2026-07-31前使用。',
          productName: '麦当劳套餐券',
          status: 'failed',
          failReason: '运营商通道拥塞',
          sentAt: '2026-05-09 18:12:48'
        },
        {
          id: 'SMS20260508001',
          mobile: '152****6024',
          templateId: 'SMS_TPL_001',
          templateName: '通用权益支付成功模板',
          content: '【银行】您购买的腾讯视频季卡已支付成功，卡号：TX007****4412，卡密：vp**xz，有效期至2026-08-08，详情：https://m.bank.com/c/tx007',
          productName: '腾讯视频季卡',
          status: 'success',
          failReason: '',
          sentAt: '2026-05-08 09:33:12'
        },
        {
          id: 'SMS20260508002',
          mobile: '188****1156',
          templateId: 'SMS_TPL_003',
          templateName: '实物类短信模板',
          content: '【银行】您购买的网易严选毛巾已受理，我们将尽快安排发货，感谢您的支持。',
          productName: '网易严选毛巾',
          status: 'success',
          failReason: '',
          sentAt: '2026-05-08 13:47:50'
        },
        {
          id: 'SMS20260507001',
          mobile: '177****8809',
          templateId: 'SMS_TPL_002',
          templateName: '券码类短信模板',
          content: '【银行】尊敬的客户，您的喜茶饮品券购买成功，券码为HC8821D，请于2026-06-15前使用。',
          productName: '喜茶饮品券',
          status: 'success',
          failReason: '',
          sentAt: '2026-05-07 11:09:22'
        }
      ]
    }
  },
  computed: {
    templateOptions() {
      return smsTemplateStore.state.list.map(item => ({ id: item.id, name: item.name }))
    },
    filteredData() {
      const { mobile, templateId, status, sentRange } = this.searchForm
      return this.records.filter(row => {
        if (mobile && !row.mobile.includes(mobile)) return false
        if (templateId && row.templateId !== templateId) return false
        if (status && row.status !== status) return false
        if (sentRange && sentRange.length === 2) {
          const day = row.sentAt.slice(0, 10)
          if (day < sentRange[0] || day > sentRange[1]) return false
        }
        return true
      })
    },
    pagedData() {
      const start = (this.page.current - 1) * this.page.size
      return this.filteredData.slice(start, start + this.page.size)
    }
  },
  methods: {
    handleSearch() {
      this.page.current = 1
    },
    handleReset() {
      this.searchForm = { mobile: '', templateId: '', status: '', sentRange: [] }
      this.page.current = 1
    }
  }
}
</script>

<style scoped>
.sms-send-record { padding: 0; }

.search-section { display: flex; flex-direction: column; }
.search-row .el-form { display: flex; flex-wrap: wrap; gap: 8px 0; }
.search-row .el-form-item { margin-right: 8px; margin-bottom: 8px; }

.button-group { display: flex; gap: 5px; margin-top: 2px; }

.pagination-section {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 20px;
  margin-top: 20px;
}
.pagination-section .total { color: #606266; font-size: 13px; }
</style>
