<template>
  <div class="sms-template-list">
    <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.name" placeholder="请输入" clearable style="width: 180px" />
            </el-form-item>
            <el-form-item label="模板 ID:">
              <el-input v-model="searchForm.id" placeholder="请输入" clearable style="width: 180px" />
            </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 class="action-row">
          <el-button type="primary" @click="handleCreate">
            <el-icon><Plus /></el-icon>新建短信模板
          </el-button>
        </div>
        </div>
      </template>

      <!-- 表格 -->
      <el-table :data="pagedData" stripe style="width: 100%" border>
        <el-table-column label="操作" width="140" fixed="left">
          <template #default="scope">
            <el-button type="text" size="small" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button
              type="text"
              size="small"
              style="color: #F56C6C"
              @click="handleDelete(scope.row)"
            >删除</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="id" label="模板 ID" width="160" />
        <el-table-column prop="name" label="模板名称" min-width="200" show-overflow-tooltip />
        <el-table-column prop="content" label="模板内容" min-width="320" show-overflow-tooltip />
        <el-table-column prop="creator" label="创建人" width="100" />
        <el-table-column prop="createdAt" label="创建时间" width="160" />
        <el-table-column prop="updater" label="最后更新人" width="110" />
        <el-table-column prop="updatedAt" 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>

    <!-- 添加/编辑弹窗 -->
    <el-dialog
      :title="dialog.mode === 'create' ? '新建短信模板' : '编辑短信模板'"
      v-model="dialog.visible"
      width="600px"
      :close-on-click-modal="false"
      @closed="resetForm"
    >
      <el-form
        ref="form"
        :model="form"
        :rules="rules"
        label-width="100px"
      >
        <el-form-item label="模板名称" prop="name">
          <el-input
            v-model="form.name"
            maxlength="40"
            show-word-limit
            placeholder="请输入模板名称"
          />
        </el-form-item>
        <el-form-item label="模板内容" prop="content">
          <el-input
            v-model="form.content"
            type="textarea"
            :rows="6"
            maxlength="500"
            show-word-limit
            placeholder="请输入模板内容，支持下方占位符"
          />
          <div class="placeholder-tip">
            <div class="placeholder-tip__title">占位符说明：</div>
            <div class="placeholder-tip__item">
              <span class="placeholder-tip__label">商品名称：</span>
              <code>${productName}</code>
            </div>
            <div class="placeholder-tip__item">
              <span class="placeholder-tip__label">结束日期：</span>
              <code>${expireDate}</code>
            </div>
            <div class="placeholder-tip__item">
              <span class="placeholder-tip__label">卡号：</span>
              <code>${exchangeNum}</code>
            </div>
            <div class="placeholder-tip__item">
              <span class="placeholder-tip__label">卡密：</span>
              <code>${exchangePwd}</code>
            </div>
            <div class="placeholder-tip__item">
              <span class="placeholder-tip__label">券码使用路径：</span>
              <code>${qrCodeDownPaths}</code>
            </div>
          </div>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialog.visible = false">取消</el-button>
        <el-button type="primary" @click="handleSave">保存</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { ElMessage, ElMessageBox } from 'element-plus'
import smsTemplateStore from '@/store/smsTemplateStore'

export default {
  name: 'SmsTemplateList',
  data() {
    return {
      searchForm: {
        name: '',
        id: ''
      },
      page: { current: 1, size: 10 },
      dialog: {
        visible: false,
        mode: 'create',
        editingId: ''
      },
      form: {
        name: '',
        content: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入模板名称', trigger: 'blur' },
          { max: 40, message: '不超过 40 字', trigger: 'blur' }
        ],
        content: [
          { required: true, message: '请输入模板内容', trigger: 'blur' },
          { max: 500, message: '不超过 500 字', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    filteredData() {
      return smsTemplateStore.query(this.searchForm)
    },
    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 = { name: '', id: '' }
      this.page.current = 1
    },
    handleCreate() {
      this.dialog.mode = 'create'
      this.dialog.editingId = ''
      this.form = { name: '', content: '' }
      this.dialog.visible = true
    },
    handleEdit(row) {
      this.dialog.mode = 'edit'
      this.dialog.editingId = row.id
      this.form = { name: row.name, content: row.content }
      this.dialog.visible = true
    },
    handleDelete(row) {
      ElMessageBox.confirm(`确定要删除模板「${row.name}」吗？删除后无法恢复`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        smsTemplateStore.remove(row.id)
        ElMessage.success('删除成功')
      }).catch(() => {})
    },
    handleSave() {
      this.$refs.form.validate(valid => {
        if (!valid) return
        if (this.dialog.mode === 'create') {
          smsTemplateStore.create({ name: this.form.name, content: this.form.content })
          ElMessage.success('新建成功')
        } else {
          smsTemplateStore.update(this.dialog.editingId, { name: this.form.name, content: this.form.content })
          ElMessage.success('保存成功')
        }
        this.dialog.visible = false
      })
    },
    resetForm() {
      if (this.$refs.form) this.$refs.form.clearValidate()
      this.form = { name: '', content: '' }
      this.dialog.editingId = ''
    }
  }
}
</script>

<style scoped>
.sms-template-list { 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; }
.action-row { margin-top: 12px; }

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

.placeholder-tip {
  margin-top: 10px;
  padding: 12px 14px;
  background: #f5f7fa;
  border: 1px dashed #dcdfe6;
  border-radius: 4px;
  font-size: 12px;
  color: #606266;
  line-height: 1.8;
}
.placeholder-tip__title {
  font-weight: 500;
  color: #303133;
  margin-bottom: 4px;
}
.placeholder-tip__item { display: flex; align-items: center; gap: 4px; }
.placeholder-tip__label { color: #606266; }
.placeholder-tip code {
  background: #fff;
  padding: 1px 6px;
  border: 1px solid #ebeef5;
  border-radius: 3px;
  color: #409EFF;
  font-family: Menlo, Consolas, monospace;
}
</style>
