<template>
  <div class="vip-code-management">
    <!-- 页面标题 -->
    <div class="page-header">
      <div class="header-content">
        <h1>会员码管理</h1>
        <p>管理系统会员码的生成和分配</p>
      </div>
    </div>

    <!-- 统计卡片 -->
    <div class="stats-cards">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-card class="stat-card">
            <div class="stat-content">
              <div class="stat-icon">
                <el-icon><Key /></el-icon>
              </div>
              <div class="stat-info">
                <div class="stat-number">{{ stats.totalCodes }}</div>
                <div class="stat-label">总会员码数</div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card class="stat-card">
            <div class="stat-content">
              <div class="stat-icon available">
                <el-icon><Check /></el-icon>
              </div>
              <div class="stat-info">
                <div class="stat-number">{{ stats.availableCodes }}</div>
                <div class="stat-label">可用会员码</div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card class="stat-card">
            <div class="stat-content">
              <div class="stat-icon used">
                <el-icon><User /></el-icon>
              </div>
              <div class="stat-info">
                <div class="stat-number">{{ stats.usedCodes }}</div>
                <div class="stat-label">已使用会员码</div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 功能区域 -->
    <div class="function-area">
      <el-row :gutter="20">
        <!-- 批量生成会员码 -->
        <el-col :span="12">
          <el-card class="function-card">
            <template #header>
              <div class="card-header">
                <el-icon><Plus /></el-icon>
                <span>批量生成会员码</span>
              </div>
            </template>
            
            <el-form :model="generateForm" :rules="generateRules" ref="generateFormRef" label-width="100px">
              <el-form-item label="生成数量" prop="numCodes">
                <el-input-number
                  v-model="generateForm.numCodes"
                  :min="1"
                  :max="1000"
                  placeholder="请输入生成数量"
                  style="width: 100%"
                />
              </el-form-item>
              
              <el-form-item label="有效期" prop="vipExpireTime">
                <el-input-number
                  v-model="generateForm.vipExpireTime"
                  :min="1"
                  :max="120"
                  placeholder="请输入有效期（月）"
                  style="width: 100%"
                />
              </el-form-item>
              
              <el-form-item>
                <el-button
                  type="primary"
                  :loading="generateLoading"
                  @click="showGenerateDialog"
                  style="width: 100%"
                >
                  {{ generateLoading ? '生成中...' : '批量生成' }}
                </el-button>
              </el-form-item>
            </el-form>
          </el-card>
        </el-col>

        <!-- 获取可用会员码 -->
        <el-col :span="12">
          <el-card class="function-card">
            <template #header>
              <div class="card-header">
                <el-icon><Search /></el-icon>
                <span>获取可用会员码</span>
              </div>
            </template>
            
            <el-form :model="getCodeForm" :rules="getCodeRules" ref="getCodeFormRef" label-width="100px">
              <el-form-item label="有效期" prop="vipExpireTime">
                <el-input-number
                  v-model="getCodeForm.vipExpireTime"
                  :min="1"
                  :max="120"
                  placeholder="请输入有效期（月）"
                  style="width: 100%"
                />
              </el-form-item>
              
              <el-form-item>
                <el-button
                  type="success"
                  :loading="getCodeLoading"
                  @click="showGetCodeDialog"
                  style="width: 100%"
                >
                  {{ getCodeLoading ? '获取中...' : '获取会员码' }}
                </el-button>
              </el-form-item>
            </el-form>

            <!-- 显示获取到的会员码 -->
            <div v-if="availableCode" class="code-display">
              <el-alert
                title="获取成功"
                type="success"
                :closable="false"
                show-icon
              >
                <template #default>
                  <div class="code-content">
                    <span class="code-label">会员码：</span>
                    <span class="code-value">{{ availableCode }}</span>
                    <el-button
                      type="primary"
                      size="small"
                      @click="copyCode(availableCode)"
                      style="margin-left: 10px"
                    >
                      复制
                    </el-button>
                  </div>
                </template>
              </el-alert>
            </div>
            <div v-else-if="getCodeError" class="code-error">
              <el-alert
                :title="getCodeError"
                type="error"
                :closable="false"
                show-icon
              />
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 会员码列表 -->
    <el-card class="list-card">
      <template #header>
        <div class="card-header">
          <el-icon><List /></el-icon>
          <span>会员码列表</span>
          <div class="header-actions">
            <el-button type="success" @click="exportToExcel">
              <el-icon><Download /></el-icon>
              导出
            </el-button>
            <el-button type="primary" @click="refreshList">
              <el-icon><Refresh /></el-icon>
              刷新
            </el-button>
          </div>
        </div>
      </template>

      <!-- 搜索和筛选 -->
      <div class="search-bar">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-input
              v-model="searchForm.keyword"
              placeholder="搜索会员码"
              clearable
              @input="handleSearch"
            >
              <template #prefix>
                <el-icon><Search /></el-icon>
              </template>
            </el-input>
          </el-col>
          <el-col :span="4">
            <div class="custom-select-wrapper search-select">
              <select 
                v-model="searchForm.status" 
                class="custom-select"
                @change="handleSearch"
              >
                <option value="">全部状态</option>
                <option value="0">可用</option>
                <option value="1">已使用</option>
              </select>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="custom-select-wrapper search-select">
              <select 
                v-model="searchForm.expireTime" 
                class="custom-select"
                @change="handleSearch"
              >
                <option value="">全部有效期</option>
                <option value="1">1个月</option>
                <option value="2">2个月</option>
                <option value="3">3个月</option>
                <option value="4">4个月</option>
                <option value="5">5个月</option>
                <option value="6">6个月</option>
                <option value="7">7个月</option>
                <option value="8">8个月</option>
                <option value="9">9个月</option>
                <option value="10">10个月</option>
                <option value="11">11个月</option>
                <option value="12">12个月</option>
                <option value="13">12个月以上</option>
              </select>
            </div>
          </el-col>
        </el-row>
      </div>

      <!-- 数据表格 -->
      <el-table
        :data="codeList"
        v-loading="tableLoading"
        stripe
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column prop="vipNumber" label="VIP编号" width="100">
          <template #default="{ row }">
            {{ row.vipNumber || 1 }}
          </template>
        </el-table-column>
        <el-table-column prop="code" label="会员码" width="200">
          <template #default="{ row }">
            <div class="code-container">
            <span class="code-text">{{ row.code }}</span>
              <el-button 
                v-if="row.isUse === 0"
                type="text" 
                size="small" 
                @click.stop="copyCode(row.code)"
                class="copy-button"
                :class="{ 'is-clicked': row.isCopying }"
                @mousedown="row.isCopying = true"
                @mouseup="setTimeout(() => row.isCopying = false, 300)"
              >
                <el-icon><CopyDocument /></el-icon>
              </el-button>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="vipExpireTime" label="有效期" width="100">
          <template #default="{ row }">
            <el-tag :type="row.vipExpireTime === 1 ? 'warning' : 'success'">
              {{ row.vipExpireTime }}个月
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="isUse" label="状态" width="100">
          <template #default="{ row }">
            <el-tag :type="row.isUse === 0 ? 'success' : 'info'">
              {{ row.isUse === 0 ? '可用' : '已使用' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createdUserName" label="创建人" width="120">
          <template #default="{ row }">
            {{ row.createdUserName || '-' }}
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="180">
          <template #default="{ row }">
            {{ formatDate(row.createTime) }}
          </template>
        </el-table-column>
        <el-table-column prop="usedUserName" label="使用人id" width="120">
          <template #default="{ row }">
            {{ row.usedUserName || '-' }}
          </template>
        </el-table-column>
        <el-table-column prop="useTime" label="使用时间" width="180">
          <template #default="{ row }">
            {{ row.updateTime ? formatDate(row.updateTime) : '-' }}
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination-wrapper">
        <el-pagination
          v-model:current-page="pagination.current"
          v-model:page-size="pagination.size"
          :page-sizes="[10, 20, 50, 100]"
          :total="pagination.total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>

    <!-- 批量生成会员码弹窗 -->
    <el-dialog
      v-model="generateDialogVisible"
      title="确认批量生成"
      width="400px"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      center
      top="360px"
    >
      <div style="text-align:center;">
        <span>确认批量生成会员码吗？</span>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancelDialog">取消</el-button>
          <el-button type="primary" :loading="confirmActionLoading" @click="confirmGenerateVipCodes">确定</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 获取可用会员码弹窗 -->
    <el-dialog
      v-model="getCodeDialogVisible"
      title="确认获取会员码"
      width="400px"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      center
      top="360px"
    >
      <div style="text-align:center;">
        <span>确认获取可用会员码吗？</span>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancelDialog">取消</el-button>
          <el-button type="primary" :loading="confirmActionLoading" @click="confirmGetAvailableCode">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { ref, reactive, computed, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  Key,
  Check,
  User,
  Plus,
  Search,
  List,
  Refresh,
  Download,
  CopyDocument
} from '@element-plus/icons-vue'
import { lotteryApi } from '../../api/index.js'
import { userStore } from '../../store/user.js'

export default {
  name: 'VipCodeManagement',
  components: {
    Key,
    Check,
    User,
    Plus,
    Search,
    List,
    Refresh,
    Download,
    CopyDocument
  },
  setup() {
    // 统计数据
    const stats = reactive({
      totalCodes: 0,
      availableCodes: 0,
      usedCodes: 0
    })

    // 生成表单
    const generateFormRef = ref()
    const generateForm = reactive({
      numCodes: 10,
      vipExpireTime: 1  // 设置默认值为1个月
    })
    const generateLoading = ref(false)

    const generateRules = {
      numCodes: [
        { required: true, message: '请输入生成数量', trigger: 'blur' },
        { type: 'number', min: 1, max: 1000, message: '数量必须在1-1000之间', trigger: 'blur' }
      ],
      vipExpireTime: [
        { required: true, message: '请选择有效期', trigger: 'change' }
      ]
    }

    // 获取表单
    const getCodeFormRef = ref()
    const getCodeForm = reactive({
      vipExpireTime: 1  // 设置默认值为1个月
    })
    const getCodeLoading = ref(false)
    const availableCode = ref('')
    const getCodeError = ref('')

    const getCodeRules = {
      vipExpireTime: [
        { required: true, message: '请选择有效期', trigger: 'change' }
      ]
    }

    // 搜索表单
    const searchForm = reactive({
      keyword: '',
      status: '',
      expireTime: ''  // 设置默认值为全部有效期
    })

    // 有效期选项
    const expireTimeOptions = [
      { label: '1个月', value: 1 },
      { label: '12个月', value: 12 }
    ]

    // 表格数据
    const codeList = ref([])
    const tableLoading = ref(false)
    const selectedCodes = ref([])

    // 分页
    const pagination = reactive({
      current: 1,
      size: 20,
      total: 0
    })

    // 批量生成会员码弹窗
    const generateDialogVisible = ref(false)
    // 获取可用会员码弹窗
    const getCodeDialogVisible = ref(false)
    // 标记是否正在生成或获取
    const confirmActionLoading = ref(false)

    // 触发批量生成弹窗
    const showGenerateDialog = () => {
      generateDialogVisible.value = true
    }
    // 触发获取会员码弹窗
    const showGetCodeDialog = () => {
      getCodeDialogVisible.value = true
    }
    // 确认批量生成
    const confirmGenerateVipCodes = async () => {
      confirmActionLoading.value = true
      await generateVipCodes()
      confirmActionLoading.value = false
      generateDialogVisible.value = false
    }
    // 确认获取会员码
    const confirmGetAvailableCode = async () => {
      confirmActionLoading.value = true
      await getAvailableCode()
      confirmActionLoading.value = false
      getCodeDialogVisible.value = false
    }
    // 取消弹窗
    const cancelDialog = () => {
      generateDialogVisible.value = false
      getCodeDialogVisible.value = false
    }

    // 初始化数据
    onMounted(() => {
      // 检查管理员登录状态
      if (!userStore.isAdminLoggedIn()) {
        ElMessage.error('请先登录后台管理系统')
        window.location.href = '/cpzsadmin/login'
        return
      }
      
      // 初始化表单默认值
      generateForm.vipExpireTime = 1
      getCodeForm.vipExpireTime = 1
      searchForm.expireTime = ''  // 搜索筛选默认显示全部有效期
      
      loadStats()
      loadCodeList()
    })

    // 加载统计数据
    const loadStats = async () => {
      try {
        console.log('开始加载会员码统计数据...')
        const response = await lotteryApi.getVipCodeCount()
        console.log('会员码统计数据响应:', response)
        
        if (response && response.success) {
          console.log('会员码统计数据:', response.data)
          stats.totalCodes = response.data.totalCount || 0
          stats.availableCodes = response.data.availableCount || 0
          stats.usedCodes = response.data.usedCount || 0
          console.log('设置后的stats对象:', stats)
        } else {
          console.error('获取统计数据失败:', response?.message)
          
          // 如果是未登录或权限错误，可能需要重新登录
          if (response?.code === 40100 || response?.code === 40101) {
            window.location.href = '/cpzsadmin/login'
          }
        }
      } catch (error) {
        console.error('加载统计数据失败:', error)
        
        // 如果是401错误，可能是登录态过期
        if (error.response && error.response.status === 401) {
          window.location.href = '/cpzsadmin/login'
        }
      }
    }

    // 批量生成会员码
    const generateVipCodes = async () => {
      try {
        await generateFormRef.value.validate()
        generateLoading.value = true

        const response = await lotteryApi.generateVipCodes(
          generateForm.numCodes,
          generateForm.vipExpireTime
        )

        if (response && response.success) {
          ElMessage({
            type: 'success',
            message: `成功生成 ${response.data} 个会员码`
          })
          
          // 重置表单
          generateForm.numCodes = 10
          generateForm.vipExpireTime = 1 // 保持默认值为1个月
          
          // 刷新数据
          loadStats()
          loadCodeList()
        } else {
          // 处理API错误响应
          ElMessage({
            type: 'error',
            message: response?.message || '生成会员码失败'
          })
          
          // 如果是未登录或权限错误，可能需要重新登录
          if (response?.code === 40100 || response?.code === 40101) {
            window.location.href = '/cpzsadmin/login'
          }
        }
      } catch (error) {
        console.error('生成会员码失败:', error)
        ElMessage({
          type: 'error',
          message: error?.response?.data?.message || '生成失败，请重试'
        })
        
        // 如果是401错误，可能是登录态过期
        if (error.response && error.response.status === 401) {
          window.location.href = '/cpzsadmin/login'
        }
      } finally {
        generateLoading.value = false
      }
    }

    // 获取可用会员码
    const getAvailableCode = async () => {
      try {
        await getCodeFormRef.value.validate()
        getCodeLoading.value = true

        const response = await lotteryApi.getAvailableVipCode(getCodeForm.vipExpireTime)

        if (response && response.success && response.data) {
          availableCode.value = response.data
          getCodeError.value = ''
          ElMessage({
            type: 'success',
            message: '获取会员码成功'
          })
        } else {
          availableCode.value = ''
          getCodeError.value = response?.message || '暂无可用会员码，请先生成'
          ElMessage({
            type: 'warning',
            message: response?.message || '暂无可用会员码，请先生成'
          })
          
          // 如果是未登录或权限错误，可能需要重新登录
          if (response?.code === 40100 || response?.code === 40101) {
            window.location.href = '/cpzsadmin/login'
          }
        }
      } catch (error) {
        console.error('获取会员码失败:', error)
        availableCode.value = ''
        getCodeError.value = error?.response?.data?.message || '获取失败，请重试'
        ElMessage({
          type: 'error',
          message: error?.response?.data?.message || '获取失败，请重试'
        })
        
        // 如果是401错误，可能是登录态过期
        if (error.response && error.response.status === 401) {
          window.location.href = '/cpzsadmin/login'
        }
      } finally {
        getCodeLoading.value = false
      }
    }

    // 复制会员码
    const copyCode = async (code) => {
      const codeToCopy = typeof code === 'string' ? code : code.code
      try {
        await navigator.clipboard.writeText(codeToCopy)
        ElMessage({
          type: 'success',
          message: '会员码已复制到剪贴板',
          duration: 2000,
          showClose: true,
          offset: 80
        })
      } catch (error) {
        console.error('复制失败:', error)
        // 兜底方案
        const textArea = document.createElement('textarea')
        textArea.value = codeToCopy
        document.body.appendChild(textArea)
        textArea.select()
        document.execCommand('copy')
        document.body.removeChild(textArea)
        ElMessage({
          type: 'success',
          message: '会员码已复制到剪贴板',
          duration: 2000,
          showClose: true,
          offset: 80
        })
      }
    }

    // 加载会员码列表
    const loadCodeList = async () => {
      try {
        tableLoading.value = true
        const params = {
          page: pagination.current,
          size: pagination.size,
          ...searchForm
        }

        const response = await lotteryApi.getVipCodeList(params)
        if (response && response.success) {
          // 处理API返回的数据
          codeList.value = response.data.records || []
          pagination.total = response.data.total || 0
        } else {
          // 处理API错误响应
          ElMessage({
            type: 'error',
            message: response?.message || '获取会员码列表失败'
          })
          
          // 如果是未登录或权限错误，可能需要重新登录
          if (response?.code === 40100 || response?.code === 40101) {
            window.location.href = '/cpzsadmin/login'
          }
        }
      } catch (error) {
        console.error('加载会员码列表失败:', error)
        ElMessage({
          type: 'error',
          message: '加载数据失败，请重试'
        })
        
        // 如果是401错误，可能是登录态过期
        if (error.response && error.response.status === 401) {
          window.location.href = '/cpzsadmin/login'
        }
      } finally {
        tableLoading.value = false
      }
    }

    // 搜索处理
    const handleSearch = () => {
      pagination.current = 1
      loadCodeList()
    }

    // 分页处理
    const handleSizeChange = (size) => {
      pagination.size = size
      pagination.current = 1
      loadCodeList()
    }

    const handleCurrentChange = (current) => {
      pagination.current = current
      loadCodeList()
    }

    // 选择处理
    const handleSelectionChange = (selection) => {
      selectedCodes.value = selection
    }

    // 刷新列表
    const refreshList = () => {
      loadStats()
      loadCodeList()
    }

    // 格式化日期
    const formatDate = (dateStr) => {
      if (!dateStr) return '-'
      const date = new Date(dateStr)
      return date.toLocaleString('zh-CN')
    }

    // 导出到Excel
    const exportToExcel = async () => {
      try {
        tableLoading.value = true
        
        // 获取所有数据（不分页）
        const params = {
          page: 1,
          size: 10000, // 获取所有数据
          ...searchForm
        }

        const response = await lotteryApi.getVipCodeList(params)
        
        if (response && response.success) {
          const allData = response.data.records || []
          
          if (allData.length === 0) {
            ElMessage.warning('没有数据可以导出')
            return
          }

          // 准备CSV数据
          const headers = ['VIP编号', '会员码', '有效期', '状态', '创建人', '创建时间', '使用人ID', '使用时间']
          const csvContent = [
            headers.join(','),
            ...allData.map(row => [
              row.vipNumber || 1,
              row.code,
              `${row.vipExpireTime}个月`,
              row.isUse === 0 ? '可用' : '已使用',
              row.createdUserName || '-',
              formatDate(row.createTime),
              row.usedUserName || '-',
              row.updateTime ? formatDate(row.updateTime) : '-'
            ].join(','))
          ].join('\n')

          // 添加BOM以支持中文
          const BOM = '\uFEFF'
          const blob = new Blob([BOM + csvContent], { type: 'text/csv;charset=utf-8;' })
          
          // 创建下载链接
          const link = document.createElement('a')
          const url = URL.createObjectURL(blob)
          link.setAttribute('href', url)
          link.setAttribute('download', `会员码列表_${new Date().toLocaleDateString('zh-CN').replace(/\//g, '-')}.csv`)
          link.style.visibility = 'hidden'
          document.body.appendChild(link)
          link.click()
          document.body.removeChild(link)
          
          ElMessage.success(`成功导出 ${allData.length} 条数据`)
        } else {
          ElMessage.error(response?.message || '导出失败')
        }
      } catch (error) {
        console.error('导出失败:', error)
        ElMessage.error('导出失败，请重试')
      } finally {
        tableLoading.value = false
      }
    }

    // 验证表单
    const validateGenerateForm = () => {
      generateFormRef.value?.validateField('vipExpireTime')
    }

    const validateGetCodeForm = () => {
      getCodeFormRef.value?.validateField('vipExpireTime')
    }

    return {
      stats,
      generateFormRef,
      generateForm,
      generateRules,
      generateLoading,
      getCodeFormRef,
      getCodeForm,
      getCodeRules,
      getCodeLoading,
      availableCode,
      getCodeError,
      searchForm,
      expireTimeOptions,
      codeList,
      tableLoading,
      selectedCodes,
      pagination,
      generateVipCodes,
      getAvailableCode,
      copyCode,
      handleSearch,
      handleSizeChange,
      handleCurrentChange,
      handleSelectionChange,
      refreshList,
      formatDate,
      validateGenerateForm,
      validateGetCodeForm,
      generateDialogVisible,
      showGenerateDialog,
      getCodeDialogVisible,
      showGetCodeDialog,
      confirmActionLoading,
      confirmGenerateVipCodes,
      confirmGetAvailableCode,
      cancelDialog,
      exportToExcel
    }
  }
}
</script>

<style scoped>
.vip-code-management {
  padding: 20px;
}

/* 页面标题 */
.page-header {
  margin-bottom: 24px;
  background: linear-gradient(135deg, #3a7bd5, #00d2ff);
  padding: 30px;
  border-radius: 8px;
  color: white;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 1;
}

.header-content h1 {
  font-size: 28px;
  font-weight: 600;
  color: white;
  margin-bottom: 8px;
  text-align: center;
}

.header-content p {
  color: rgba(255, 255, 255, 0.9);
  font-size: 16px;
  margin: 0;
  text-align: center;
}

/* 统计卡片 */
.stats-cards {
  margin-bottom: 24px;
}

.stat-card {
  border: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.stat-content {
  display: flex;
  align-items: center;
  gap: 16px;
}

.stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  font-size: 24px;
}

.stat-icon.available {
  background: linear-gradient(135deg, #28a745, #20c997);
}

.stat-icon.used {
  background: linear-gradient(135deg, #17a2b8, #6f42c1);
}

.stat-icon.expired {
  background: linear-gradient(135deg, #dc3545, #fd7e14);
}

.stat-info {
  flex: 1;
}

.stat-number {
  font-size: 24px;
  font-weight: 600;
  color: #333;
  line-height: 1;
}

.stat-label {
  font-size: 14px;
  color: #666;
  margin-top: 4px;
}

/* 功能区域 */
.function-area {
  margin-bottom: 24px;
}

.function-card {
  border: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: #333;
}

.card-header .el-icon {
  font-size: 18px;
  color: #409EFF;
}

/* 会员码显示 */
.code-display {
  margin-top: 16px;
}

.code-error {
  margin-top: 16px;
}

.code-content {
  display: flex;
  align-items: center;
  gap: 8px;
}

.code-label {
  font-weight: 600;
  color: #333;
}

.code-value {
  font-family: 'Courier New', monospace;
  font-size: 16px;
  font-weight: bold;
  color: #28a745;
  letter-spacing: 2px;
}

/* 列表卡片 */
.list-card {
  border: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.header-actions {
  margin-left: auto;
  display: flex;
  gap: 8px;
}

/* 搜索栏 */
.search-bar {
  margin-bottom: 16px;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 8px;
}

/* 表格样式 */
.code-text {
  font-family: 'Courier New', monospace;
  font-weight: 600;
  color: #409EFF;
  letter-spacing: 1px;
}

/* 分页 */
.pagination-wrapper {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

/* 确保下拉菜单可以正常显示 */
:deep(.el-select__popper) {
  z-index: 3000 !important;
}

:deep(.el-select) {
  width: 100%;
}

:deep(.el-select .el-input) {
  width: 100%;
}

:deep(.el-popper) {
  z-index: 3000 !important;
}

/* 确保卡片不会覆盖下拉菜单 */
.function-card, .list-card, .search-card {
  position: relative;
  z-index: 1;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .vip-code-management {
    padding: 15px;
  }

  .stats-cards .el-col {
    margin-bottom: 16px;
  }

  .function-area .el-col {
    margin-bottom: 16px;
  }

  .search-bar .el-col {
    margin-bottom: 12px;
  }

  .header-actions {
    flex-direction: column;
    gap: 4px;
  }
}

/* 自定义下拉框样式 */
.custom-select-wrapper {
  position: relative;
  width: 100%;
}

.custom-select {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  background-color: white;
  font-size: 14px;
  color: #606266;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23606266'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 16px;
  cursor: pointer;
  transition: all 0.3s;
}

.custom-select:hover {
  border-color: #c0c4cc;
}

.custom-select:focus {
  outline: none;
  border-color: #409eff;
}

.search-select {
  margin-bottom: 16px;
}

.code-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.copy-button {
  margin-left: 8px;
  color: #409EFF;
  transition: transform 0.2s, color 0.2s;
}

.copy-button:hover {
  color: #66b1ff;
}

.copy-button.is-clicked {
  transform: scale(1.2);
  color: #67c23a; /* 成功色调 */
}
</style> 