<template>
  <div class="sms-goods-page">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-info">
        <div class="header-icon">
          <svg viewBox="0 0 24 24" width="28" height="28" fill="none" stroke="#e6a23c" stroke-width="1.8">
            <path d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/>
          </svg>
        </div>
        <div>
          <h2 class="header-title">短信额度商品管理</h2>
          <p class="header-desc">
            管理短信平台的额度商品配置
            <template v-if="filterServiceName">
              — 当前筛选：<el-tag size="small" type="warning">{{ filterServiceName }}</el-tag>
            </template>
          </p>
        </div>
      </div>
      <div class="header-actions">
        <el-button @click="router.push('/sms/service')">
          <el-icon><Back /></el-icon> 返回服务列表
        </el-button>
        <el-button type="primary" @click="handleAdd">
          <el-icon><Plus /></el-icon> 新增商品
        </el-button>
      </div>
    </div>

    <!-- 筛选栏 -->
    <div class="filter-bar">
      <el-select
        v-model="queryParams.service_id"
        placeholder="筛选主控服务"
        clearable
        style="width: 220px"
        @change="handleSearch"
      >
        <el-option v-for="s in serviceOptions" :key="s.id" :label="s.name" :value="s.id" />
      </el-select>
      <el-input
        v-model="queryParams.key"
        placeholder="搜索商品名称"
        clearable
        style="width: 240px"
        @keyup.enter="handleSearch"
        @clear="handleSearch"
      >
        <template #prefix><el-icon><Search /></el-icon></template>
      </el-input>
      <el-button type="primary" @click="handleSearch">搜索</el-button>
      <el-button @click="handleReset">重置</el-button>
    </div>

    <!-- 数据表格 -->
    <el-table :data="tableData" v-loading="loading" stripe border style="width: 100%">
      <el-table-column prop="id" label="ID" width="70" align="center" />
      <el-table-column label="关联服务" min-width="140">
        <template #default="{ row }">
          <el-button link type="primary" size="small" @click="goToService(row.serviceId)">
            {{ resolveServiceName(row.serviceId) }}
          </el-button>
        </template>
      </el-table-column>
      <el-table-column label="关联商品" min-width="150">
        <template #default="{ row }">
          <span class="goods-name">{{ row.good?.name || `商品#${row.goodId}` }}</span>
        </template>
      </el-table-column>
      <el-table-column label="额度类型" width="120" align="center">
        <template #default="{ row }">
          <el-tag :type="quotaTypeTag(row.quotaType).type" effect="dark" size="small">
            {{ quotaTypeTag(row.quotaType).label }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="有效期/周期配置" min-width="200">
        <template #default="{ row }">
          <template v-if="row.quotaType === 2">
            <span class="config-label">有效期模式：</span>
            <el-tag size="small" type="info">{{ row.expireMode === 'fixed' ? '固定' : '用户选择' }}</el-tag>
          </template>
          <template v-else-if="row.quotaType === 3">
            <span class="config-label">周期模式：</span>
            <el-tag size="small" type="info">{{ row.cycleMode === 'fixed' ? '固定' : '用户选择' }}</el-tag>
            <template v-if="row.cycleMode === 'fixed'">
              <span class="config-detail">每{{ row.cycleValue || 1 }}{{ cycleUnitLabel(row.cycleUnit) }}</span>
            </template>
          </template>
          <span v-else class="config-detail">永久有效</span>
        </template>
      </el-table-column>
      <el-table-column prop="note" label="备注" min-width="150" show-overflow-tooltip>
        <template #default="{ row }">
          <span class="note-text">{{ row.note || '-' }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="CreatedAt" label="创建时间" width="170" align="center">
        <template #default="{ row }">{{ formatTime(row.CreatedAt) }}</template>
      </el-table-column>
      <el-table-column label="操作" width="160" align="center" fixed="right">
        <template #default="{ row }">
          <el-button link type="primary" size="small" @click="handleEdit(row)">编辑</el-button>
          <el-popconfirm title="确认删除该商品绑定？" @confirm="handleDelete(row)">
            <template #reference>
              <el-button link type="danger" size="small">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="pagination-wrap">
      <el-pagination
        v-model:current-page="queryParams.page"
        v-model:page-size="queryParams.count"
        :total="total"
        :page-sizes="[10, 20, 50]"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="fetchList"
        @current-change="fetchList"
      />
    </div>

    <!-- 新增弹窗 -->
    <el-dialog
      v-model="addDialogVisible"
      title="新增短信额度商品"
      width="680px"
      destroy-on-close
    >
      <el-form ref="addFormRef" :model="addForm" :rules="addRules" label-width="130px">
        <el-divider content-position="left">基本信息</el-divider>
        <el-form-item label="关联主控服务" prop="service_id">
          <el-select v-model="addForm.service_id" placeholder="选择短信主控服务" style="width: 100%">
            <el-option v-for="s in serviceOptions" :key="s.id" :label="s.name" :value="s.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="商品分组" prop="good_group_id">
          <el-tree-select
            v-model="addForm.good_group_id"
            :data="groupTreeData"
            :props="groupTreeProps"
            lazy
            :load="loadGroupChildren"
            node-key="id"
            placeholder="选择商品分组"
            clearable
            check-strictly
            :render-after-expand="false"
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item label="商品名称" prop="name">
          <el-input v-model="addForm.name" placeholder="如：短信1000条包" />
        </el-form-item>
        <el-form-item label="商品介绍">
          <el-input v-model="addForm.content" type="textarea" :rows="2" placeholder="商品介绍（可选，系统自动追加配额说明）" />
        </el-form-item>
        <el-form-item label="管理备注">
          <el-input v-model="addForm.note" placeholder="管理备注（可选）" />
        </el-form-item>

        <el-divider content-position="left">额度配置</el-divider>
        <el-form-item label="额度类型" prop="quota_type">
          <div class="quota-type-cards">
            <div
              v-for="qt in quotaTypes"
              :key="qt.value"
              class="qt-card"
              :class="{ active: addForm.quota_type === qt.value }"
              @click="addForm.quota_type = qt.value"
            >
              <div class="qt-icon" v-html="qt.icon"></div>
              <div class="qt-label">{{ qt.label }}</div>
              <div class="qt-desc">{{ qt.desc }}</div>
            </div>
          </div>
        </el-form-item>

        <el-form-item label="额度数量模式" prop="quota_value_type">
          <el-radio-group v-model="addForm.quota_value_type">
            <el-radio value="number">数值范围（用户输入数值）</el-radio>
            <el-radio value="select">固定选项（用户选择档位）</el-radio>
          </el-radio-group>
        </el-form-item>

        <template v-if="addForm.quota_value_type === 'number'">
          <el-form-item label="最小值">
            <el-input-number v-model="addForm.quota_min" :min="1" :step="100" />
          </el-form-item>
          <el-form-item label="最大值">
            <el-input-number v-model="addForm.quota_max" :min="1" :step="100" />
          </el-form-item>
          <el-form-item label="步长">
            <el-input-number v-model="addForm.quota_step" :min="1" :step="10" />
          </el-form-item>
          <el-form-item label="单条价格" prop="quota_unit_price">
            <el-input-number v-model="addForm.quota_unit_price" :min="0" :step="0.01" :precision="2" controls-position="right" />
            <span class="opt-unit">元/条</span>
          </el-form-item>
        </template>
        <template v-else>
          <el-form-item label="额度选项">
            <div class="dynamic-options">
              <div v-for="(item, idx) in addForm.quota_options_list" :key="idx" class="option-row">
                <el-input-number v-model="item.value" :min="1" placeholder="数量" controls-position="right" class="opt-value" />
                <el-input v-model="item.label" placeholder="显示名称" class="opt-label" />
                <el-input-number v-model="item.price" :min="0" :step="0.01" :precision="2" placeholder="价格" controls-position="right" class="opt-price" />
                <span class="opt-unit">元</span>
                <el-button link type="danger" @click="addForm.quota_options_list.splice(idx, 1)" :disabled="addForm.quota_options_list.length <= 1">
                  <el-icon><Delete /></el-icon>
                </el-button>
              </div>
              <el-button size="small" @click="addForm.quota_options_list.push({ value: null, label: '', price: null })">
                <el-icon><Plus /></el-icon> 添加选项
              </el-button>
            </div>
          </el-form-item>
        </template>

        <!-- 短期额度配置 -->
        <template v-if="addForm.quota_type === 2">
          <el-divider content-position="left">有效期配置</el-divider>
          <el-form-item label="有效期模式" prop="expire_mode">
            <el-radio-group v-model="addForm.expire_mode">
              <el-radio value="fixed">固定天数（管理员指定）</el-radio>
              <el-radio value="select">用户选择</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item v-if="addForm.expire_mode === 'fixed'" label="有效天数">
            <el-input-number v-model="addForm.expire_fixed" :min="1" />
            <span style="margin-left: 8px; color: #909399">天</span>
          </el-form-item>
          <el-form-item v-if="addForm.expire_mode === 'select'" label="有效期选项">
            <div class="dynamic-options">
              <div v-for="(item, idx) in addForm.expire_options_list" :key="idx" class="option-row">
                <el-input-number v-model="item.value" :min="1" placeholder="天数" controls-position="right" class="opt-value" />
                <span class="opt-unit">天</span>
                <el-input v-model="item.label" placeholder="显示名称" class="opt-label" />
                <el-button link type="danger" @click="addForm.expire_options_list.splice(idx, 1)" :disabled="addForm.expire_options_list.length <= 1">
                  <el-icon><Delete /></el-icon>
                </el-button>
              </div>
              <el-button size="small" @click="addForm.expire_options_list.push({ value: null, label: '' })">
                <el-icon><Plus /></el-icon> 添加选项
              </el-button>
            </div>
          </el-form-item>
        </template>

        <!-- 周期额度配置 -->
        <template v-if="addForm.quota_type === 3">
          <el-divider content-position="left">周期配置</el-divider>
          <el-form-item label="周期单位模式" prop="cycle_mode">
            <el-radio-group v-model="addForm.cycle_mode">
              <el-radio value="fixed">固定单位（管理员指定）</el-radio>
              <el-radio value="select">用户选择</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item v-if="addForm.cycle_mode === 'fixed'" label="周期单位">
            <el-select v-model="addForm.cycle_unit" style="width: 160px">
              <el-option label="天" value="day" />
              <el-option label="周" value="week" />
              <el-option label="月" value="month" />
              <el-option label="年" value="year" />
            </el-select>
          </el-form-item>
          <el-form-item v-if="addForm.cycle_mode === 'select'" label="周期选项">
            <div class="dynamic-options">
              <div v-for="(item, idx) in addForm.cycle_options_list" :key="idx" class="option-row">
                <el-select v-model="item.value" placeholder="周期单位" class="opt-cycle-unit">
                  <el-option label="天" value="day" />
                  <el-option label="周" value="week" />
                  <el-option label="月" value="month" />
                  <el-option label="年" value="year" />
                </el-select>
                <el-input v-model="item.label" placeholder="显示名称" class="opt-label" />
                <el-button link type="danger" @click="addForm.cycle_options_list.splice(idx, 1)" :disabled="addForm.cycle_options_list.length <= 1">
                  <el-icon><Delete /></el-icon>
                </el-button>
              </div>
              <el-button size="small" @click="addForm.cycle_options_list.push({ value: '', label: '' })">
                <el-icon><Plus /></el-icon> 添加选项
              </el-button>
            </div>
          </el-form-item>
          <el-form-item label="周期数值" prop="cycle_value">
            <el-input-number v-model="addForm.cycle_value" :min="1" />
          </el-form-item>
        </template>
      </el-form>
      <template #footer>
        <el-button @click="addDialogVisible = false">取消</el-button>
        <el-button type="primary" :loading="submitting" @click="handleSubmitAdd">确定</el-button>
      </template>
    </el-dialog>

    <!-- 编辑弹窗（仅可修改 SmsGoods 自身字段） -->
    <el-dialog
      v-model="editDialogVisible"
      title="编辑短信额度商品"
      width="580px"
      destroy-on-close
    >
      <el-form ref="editFormRef" :model="editForm" label-width="130px">
        <el-form-item label="管理备注">
          <el-input v-model="editForm.note" placeholder="管理备注" />
        </el-form-item>
        <el-form-item label="额度类型">
          <div class="quota-type-cards small">
            <div
              v-for="qt in quotaTypes"
              :key="qt.value"
              class="qt-card"
              :class="{ active: editForm.quota_type === qt.value }"
              @click="editForm.quota_type = qt.value"
            >
              <div class="qt-icon" v-html="qt.icon"></div>
              <div class="qt-label">{{ qt.label }}</div>
            </div>
          </div>
        </el-form-item>

        <template v-if="editForm.quota_type === 2">
          <el-form-item label="有效期模式">
            <el-radio-group v-model="editForm.expire_mode">
              <el-radio value="fixed">固定天数</el-radio>
              <el-radio value="select">用户选择</el-radio>
            </el-radio-group>
          </el-form-item>
        </template>
        <template v-if="editForm.quota_type === 3">
          <el-form-item label="周期单位模式">
            <el-radio-group v-model="editForm.cycle_mode">
              <el-radio value="fixed">固定单位</el-radio>
              <el-radio value="select">用户选择</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item v-if="editForm.cycle_mode === 'fixed'" label="周期单位">
            <el-select v-model="editForm.cycle_unit" style="width: 160px">
              <el-option label="天" value="day" />
              <el-option label="周" value="week" />
              <el-option label="月" value="month" />
              <el-option label="年" value="year" />
            </el-select>
          </el-form-item>
          <el-form-item label="周期数值">
            <el-input-number v-model="editForm.cycle_value" :min="1" />
          </el-form-item>
        </template>
      </el-form>
      <template #footer>
        <el-button @click="editDialogVisible = false">取消</el-button>
        <el-button type="primary" :loading="submitting" @click="handleSubmitEdit">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'
import { Plus, Search, Back, Delete } from '@element-plus/icons-vue'
import {
  getSmsServiceList,
  getSmsGoodsList,
  createSmsGoods,
  updateSmsGoods,
  deleteSmsGoods
} from '@/api/admin/smsService.js'
import { getProductGroupList } from '@/api/admin/product'

const router = useRouter()
const route = useRoute()

const loading = ref(false)
const submitting = ref(false)
const tableData = ref([])
const total = ref(0)
const serviceOptions = ref([])
const serviceMap = ref({})
const addDialogVisible = ref(false)
const editDialogVisible = ref(false)
const addFormRef = ref(null)
const editFormRef = ref(null)

const groupTreeData = ref([])
const groupTreeProps = { label: 'name', children: 'children', isLeaf: (data) => !data.existSub }
const filterServiceName = computed(() => route.query.service_name || '')

const queryParams = reactive({
  page: 1,
  count: 10,
  service_id: route.query.service_id ? parseInt(route.query.service_id) : undefined,
  key: ''
})

const quotaTypes = [
  {
    value: 1, label: '长期',
    desc: '永久有效，一次购买持续可用',
    icon: '<svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>'
  },
  {
    value: 2, label: '短期',
    desc: '限时有效，到期后额度失效',
    icon: '<svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>'
  },
  {
    value: 3, label: '周期',
    desc: '按周期自动重置额度',
    icon: '<svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="23 4 23 10 17 10"/><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"/></svg>'
  }
]

const defaultAddForm = () => ({
  service_id: queryParams.service_id || null,
  good_group_id: null,
  name: '',
  content: '',
  note: '',
  quota_type: 1,
  quota_value_type: 'number',
  quota_options_list: [{ value: null, label: '', price: null }],
  quota_min: 100,
  quota_max: 100000,
  quota_step: 100,
  quota_unit_price: 0.05,
  expire_mode: 'fixed',
  expire_fixed: 30,
  expire_options_list: [{ value: null, label: '' }],
  cycle_mode: 'fixed',
  cycle_unit: 'month',
  cycle_value: 1,
  cycle_options_list: [{ value: '', label: '' }]
})

const serializeOptions = (list, withPrice = false) => {
  return list
    .filter(item => item.value !== null && item.value !== '' && item.label)
    .map(item => withPrice ? `${item.value}:${item.label}:${item.price ?? 0}` : `${item.value}:${item.label}`)
    .join(',')
}

const addForm = ref(defaultAddForm())

const editForm = ref({
  id: null,
  note: '',
  quota_type: 1,
  expire_mode: '',
  cycle_mode: '',
  cycle_unit: '',
  cycle_value: 1
})

const addRules = {
  service_id: [{ required: true, message: '请选择主控服务', trigger: 'change' }],
  name: [{ required: true, message: '请输入商品名称', trigger: 'blur' }],
  quota_type: [{ required: true, message: '请选择额度类型', trigger: 'change' }]
}

const formatTime = (t) => {
  if (!t) return '-'
  return new Date(t).toLocaleString('zh-CN', { hour12: false })
}

const quotaTypeTag = (type) => {
  const map = { 1: { label: '长期', type: 'success' }, 2: { label: '短期', type: 'warning' }, 3: { label: '周期', type: '' } }
  return map[type] || { label: '未知', type: 'info' }
}

const cycleUnitLabel = (unit) => {
  const map = { day: '天', week: '周', month: '月', year: '年' }
  return map[unit] || unit
}

const resolveServiceName = (id) => {
  return serviceMap.value[id] || `服务#${id}`
}

const goToService = (serviceId) => {
  router.push({ path: '/sms/service' })
}

const loadGroupOptions = async () => {
  try {
    const res = await getProductGroupList({ level: 1, count: 199 })
    if (res.data.code === 200) {
      groupTreeData.value = (res.data.data?.data || res.data.data || []).map(item => ({
        ...item,
        existSub: !!item.existSub
      }))
    }
  } catch (e) {
    console.error(e)
  }
}

const loadGroupChildren = async (node, resolve) => {
  if (node.level === 0) return resolve(groupTreeData.value)
  try {
    const res = await getProductGroupList({ parent_id: node.data.id, level: node.data.level + 1, count: 199 })
    if (res.data.code === 200) {
      const children = (res.data.data?.data || res.data.data || []).map(item => ({
        ...item,
        existSub: !!item.existSub
      }))
      resolve(children)
    } else {
      resolve([])
    }
  } catch (e) {
    resolve([])
  }
}

const loadServiceOptions = async () => {
  try {
    const res = await getSmsServiceList({ page: 1, count: 199 })
    const body = res.data
    if (body.code === 200) {
      const list = body.data?.data || body.data || []
      serviceOptions.value = Array.isArray(list) ? list : []
      const map = {}
      serviceOptions.value.forEach(s => { map[s.id] = s.name })
      serviceMap.value = map
    }
  } catch (e) {
    console.error(e)
  }
}

const fetchList = async () => {
  loading.value = true
  try {
    const params = { ...queryParams }
    if (!params.service_id) delete params.service_id
    const res = await getSmsGoodsList(params)
    const body = res.data
    if (body.code === 200) {
      const d = body.data?.data || body.data || []
      tableData.value = Array.isArray(d) ? d : []
      total.value = body.data?.all_count || 0
    }
  } catch (e) {
    console.error(e)
  } finally {
    loading.value = false
  }
}

const handleSearch = () => {
  queryParams.page = 1
  fetchList()
}

const handleReset = () => {
  queryParams.key = ''
  queryParams.service_id = undefined
  queryParams.page = 1
  fetchList()
}

const handleAdd = () => {
  addForm.value = defaultAddForm()
  addDialogVisible.value = true
}

const handleSubmitAdd = async () => {
  await addFormRef.value?.validate()
  submitting.value = true
  try {
    const params = new URLSearchParams()
    params.append('service_id', addForm.value.service_id)
    if (addForm.value.good_group_id) params.append('good_group_id', addForm.value.good_group_id)
    params.append('name', addForm.value.name)
    if (addForm.value.content) params.append('content', addForm.value.content)
    if (addForm.value.note) params.append('note', addForm.value.note)
    params.append('quota_type', addForm.value.quota_type)
    params.append('quota_value_type', addForm.value.quota_value_type)

    if (addForm.value.quota_value_type === 'number') {
      params.append('quota_min', addForm.value.quota_min)
      params.append('quota_max', addForm.value.quota_max)
      params.append('quota_step', addForm.value.quota_step)
      params.append('quota_unit_price', addForm.value.quota_unit_price)
    } else {
      params.append('quota_options', serializeOptions(addForm.value.quota_options_list, true))
    }

    if (addForm.value.quota_type === 2) {
      params.append('expire_mode', addForm.value.expire_mode)
      if (addForm.value.expire_mode === 'fixed') {
        params.append('expire_fixed', addForm.value.expire_fixed)
      } else {
        params.append('expire_options', serializeOptions(addForm.value.expire_options_list))
      }
    }

    if (addForm.value.quota_type === 3) {
      params.append('cycle_mode', addForm.value.cycle_mode)
      params.append('cycle_value', addForm.value.cycle_value)
      if (addForm.value.cycle_mode === 'fixed') {
        params.append('cycle_unit', addForm.value.cycle_unit)
      } else {
        params.append('cycle_options', serializeOptions(addForm.value.cycle_options_list))
      }
    }

    const res = await createSmsGoods(params)
    if (res.data.code === 200) {
      ElMessage.success('创建成功')
      addDialogVisible.value = false
      fetchList()
    } else {
      ElMessage.error(res.data.message || '创建失败')
    }
  } catch (e) {
    ElMessage.error('创建失败')
  } finally {
    submitting.value = false
  }
}

const handleEdit = (row) => {
  editForm.value = {
    id: row.id,
    note: row.note || '',
    quota_type: row.quotaType,
    expire_mode: row.expireMode || 'fixed',
    cycle_mode: row.cycleMode || 'fixed',
    cycle_unit: row.cycleUnit || 'month',
    cycle_value: row.cycleValue || 1
  }
  editDialogVisible.value = true
}

const handleSubmitEdit = async () => {
  submitting.value = true
  try {
    const params = new URLSearchParams()
    params.append('id', editForm.value.id)
    if (editForm.value.note) params.append('note', editForm.value.note)
    params.append('quota_type', editForm.value.quota_type)

    if (editForm.value.quota_type === 2) {
      params.append('expire_mode', editForm.value.expire_mode)
    }
    if (editForm.value.quota_type === 3) {
      params.append('cycle_mode', editForm.value.cycle_mode)
      params.append('cycle_value', editForm.value.cycle_value)
      if (editForm.value.cycle_mode === 'fixed') {
        params.append('cycle_unit', editForm.value.cycle_unit)
      }
    }

    const res = await updateSmsGoods(params)
    if (res.data.code === 200) {
      ElMessage.success('更新成功')
      editDialogVisible.value = false
      fetchList()
    } else {
      ElMessage.error(res.data.message || '更新失败')
    }
  } catch (e) {
    ElMessage.error('更新失败')
  } finally {
    submitting.value = false
  }
}

const handleDelete = async (row) => {
  try {
    const params = new URLSearchParams()
    params.append('id', row.id)
    const res = await deleteSmsGoods(params)
    if (res.data.code === 200) {
      ElMessage.success('删除成功')
      fetchList()
    } else {
      ElMessage.error(res.data.message || '删除失败')
    }
  } catch (e) {
    ElMessage.error('删除失败')
  }
}

onMounted(async () => {
  await Promise.all([loadServiceOptions(), loadGroupOptions()])
  fetchList()
})
</script>

<style scoped>
.sms-goods-page {
  padding: 20px;
}

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  padding: 20px 24px;
  background: linear-gradient(135deg, #fef9f0 0%, #fdf2e4 100%);
  border-radius: 12px;
  border: 1px solid #f0dfc8;
}

.header-info {
  display: flex;
  align-items: center;
  gap: 14px;
}

.header-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(230, 162, 60, 0.15);
}

.header-title {
  font-size: 18px;
  font-weight: 600;
  color: #303133;
  margin: 0 0 4px;
}

.header-desc {
  font-size: 13px;
  color: #909399;
  margin: 0;
}

.header-actions {
  display: flex;
  gap: 10px;
}

.filter-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  padding: 14px 16px;
  background: #fafbfc;
  border-radius: 8px;
  border: 1px solid #ebeef5;
}

.goods-name {
  font-weight: 500;
  color: #303133;
}

.config-label {
  color: #909399;
  font-size: 12px;
  margin-right: 4px;
}

.config-detail {
  color: #606266;
  font-size: 13px;
  margin-left: 6px;
}

.note-text {
  color: #909399;
  font-size: 13px;
}

.pagination-wrap {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
}

/* 额度类型卡片 */
.quota-type-cards {
  display: flex;
  gap: 12px;
}

.quota-type-cards.small .qt-card {
  padding: 10px 16px;
}

.qt-card {
  flex: 1;
  padding: 16px;
  border: 2px solid #ebeef5;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
  background: #fafbfc;
}

.qt-card:hover {
  border-color: #c0c4cc;
  background: #fff;
}

.qt-card.active {
  border-color: #409eff;
  background: #f0f7ff;
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.15);
}

.qt-icon {
  display: flex;
  justify-content: center;
  margin-bottom: 8px;
  color: #909399;
}

.qt-card.active .qt-icon {
  color: #409eff;
}

.qt-label {
  font-size: 14px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 4px;
}

.qt-desc {
  font-size: 12px;
  color: #909399;
  line-height: 1.4;
}

.form-hint {
  font-size: 12px;
  color: #c0c4cc;
  margin-top: 4px;
}

/* 动态选项列表 */
.dynamic-options {
  width: 100%;
}

.option-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.option-row:last-of-type {
  margin-bottom: 10px;
}

.opt-value {
  width: 140px;
  flex-shrink: 0;
}

.opt-unit {
  font-size: 13px;
  color: #909399;
  flex-shrink: 0;
}

.opt-label {
  flex: 1;
  min-width: 0;
}

.opt-price {
  width: 120px;
  flex-shrink: 0;
}

.opt-cycle-unit {
  width: 120px;
  flex-shrink: 0;
}
</style>
