<template>
  <view class="pretty-number-center" :class="$store.state.AppStyle">
    <!-- 顶部导航栏 -->
    <view class="nav-bar" :style="[{height: CustomBar + 'px'}]">
      <view class="nav-content" :style="{'height': CustomBar + 'px','padding-top': StatusBar + 'px'}">
        <view class="nav-back" @tap="back">
          <text class="cuIcon-back"></text>
        </view>
        <text class="nav-title">靓号中心</text>
      </view>
    </view>

    <!-- 主内容区 -->
    <scroll-view class="main-content" 
                 :style="[{paddingTop: (NavBar + 10) + 'px'}]"
                 scroll-y>
      <view class="content-wrapper" v-if="pageReady">
        <!-- 当前靓号卡片 -->
        <view class="number-card" v-if="currentNumber">
          <view class="card-header">
            <text class="section-title">我的靓号</text>
            <view :class="['number-status', currentNumber.status === 'cooldown' ? 'cancelled' : 'active']">
              {{ currentNumber.status === 'cooldown' ? '已注销' : '使用中' }}
            </view>
          </view>
          
          <view class="number-display">
            <text class="number">{{ currentNumber.number }}</text>
            <view class="number-meta">
              <text class="meta-item">申请时间：{{ currentNumber.created_at }}</text>
              <text v-if="currentNumber.status === 'cooldown'" class="meta-item">
                注销时间：{{ currentNumber.deleted_at }}
              </text>
            </view>
          </view>

          <!-- 使用中状态 -->
          <block v-if="currentNumber.status !== 'cooldown'">
            <button class="action-button cancel" 
                    @tap="cancelNumber" 
                    :disabled="canceling">
              {{ canceling ? '注销中...' : '注销靓号' }}
            </button>
            <text class="warning-text">注销后需等待30天冷却期才能再次申请</text>
          </block>

          <!-- 冷却期显示部分 -->
          <view class="cooldown-section" v-if="currentNumber && currentNumber.status === 'cooldown'">
            <view class="cooldown-header">
              <text class="cooldown-title">靓号冷却中</text>
              <text class="cooldown-days">{{ currentNumber.remaining_days }}天</text>
            </view>
            
            <view class="cooldown-card">
              <view class="number-display">{{ currentNumber.number }}</view>
              <view class="cooldown-info">
                <text class="info-label">注销时间</text>
                <text class="info-value">{{ formatDate(currentNumber.deleted_at) }}</text>
              </view>
              <view class="cooldown-info">
                <text class="info-label">冷却结束</text>
                <text class="info-value">{{ formatDate(currentNumber.cooldown_end) }}</text>
              </view>
              
              <view class="progress-container">
                <view class="progress-track">
                  <view class="progress-fill" :style="{ width: currentNumber.cooldown_progress + '%' }"></view>
                </view>
                <view class="progress-labels">
                  <text class="progress-start">已冷却</text>
                  <text class="progress-percent">{{ Math.round(currentNumber.cooldown_progress) }}%</text>
                  <text class="progress-end">剩余{{ currentNumber.remaining_days }}天</text>
                </view>
              </view>
            </view>
            
            <view class="cooldown-message">
              <text class="message-icon">i</text>
              <text class="message-text">冷却期结束后，您可以重新申请靓号</text>
            </view>
          </view>
        </view>

        <!-- 申请靓号表单 -->
        <view v-if="canApplyNewNumber" class="apply-card">
          <text class="section-title">申请靓号</text>
          
          <view class="input-group">
            <input class="number-input"
                   v-model="number"
                   placeholder="请输入数字/字母靓号"
                   :maxlength="10"
                   :disabled="applying"/>
            <text class="input-hint">支持数字和字母组合</text>
          </view>

          <view class="rules-list">
            <view class="rule-item">
              <text class="rule-icon">•</text>
              <text class="rule-text">长度要求：{{ config && config.min_length || 9 }}-{{ config && config.max_length || 10 }}位</text>
            </view>
            <view class="rule-item">
              <text class="rule-icon">•</text>
              <text class="rule-text">免费版不支持连续3位及以上相同字符</text>
            </view>
            <view class="rule-item">
              <text class="rule-icon">•</text>
              <text class="rule-text">注销后需等待30天冷却期</text>
            </view>
          </view>

          <button class="action-button apply"
                  @tap="applyNumber"
                  :disabled="!number || applying || requestThrottled">
            {{ applying ? '申请中...' : (requestThrottled ? '请稍后再试' : '立即申请') }}
          </button>
        </view>
      </view>

      <!-- 加载状态 -->
      <view class="loading-state" v-else>
        <u-loading mode="circle" size="36"></u-loading>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      StatusBar: this.StatusBar,
      CustomBar: this.CustomBar,
      NavBar: this.StatusBar + this.CustomBar,
      AppStyle: this.$store.state.AppStyle,
      pageReady: false,
      token: '',
      number: '',
      currentNumber: null,
      applying: false,
      canceling: false,
      config: null,
      cooldownDays: 30, // 默认冷却期为30天
      lastRequestTime: 0, // 上次请求时间
      requestThrottled: false, // 请求节流标志
      requestCooldown: 2000, // 请求冷却时间（毫秒）
      isLoggedIn: false,
      isLoading: false,
      applySuccess: false, // 新增：标记申请是否成功
      autoRefreshTimer: null, // 新增：自动刷新计时器
      hasCooldown: false,
      canceledNumber: '',
      canceledAt: null,
      remainingDays: 0,
      cooldownProgressValue: 0  // 改名为 cooldownProgressValue
    }
  },

  computed: {
    cooldownDaysLeft() {
      if (!this.currentNumber || this.currentNumber.status === 1) {
        return 0;
      }
      
      // 使用cooldown_end字段计算剩余天数
      if (this.currentNumber.cooldown_end) {
        const cooldownEnd = new Date(this.currentNumber.cooldown_end).getTime();
        const now = Date.now();
        
        // 如果冷却期已过，返回0
        if (now >= cooldownEnd) {
          return 0;
        }
        
        const diffTime = cooldownEnd - now;
        const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
        return diffDays;
      }
      
      // 兼容旧版本，使用deleted_at计算
      if (this.currentNumber.deleted_at) {
        return this.calculateCooldownDays(this.currentNumber.deleted_at);
      }
      
      return 0;
    },
    
    cooldownProgress() {  // 保留计算属性名称
      if (!this.currentNumber || this.currentNumber.status === 1) {
        return 0;
      }
      
      // 使用cooldown_end字段计算进度
      if (this.currentNumber.cooldown_end && this.currentNumber.deleted_at) {
        const cooldownEnd = new Date(this.currentNumber.cooldown_end).getTime();
        const deletedAt = new Date(this.currentNumber.deleted_at).getTime();
        const now = Date.now();
        
        const totalTime = cooldownEnd - deletedAt;
        const elapsedTime = now - deletedAt;
        
        if (totalTime <= 0) return 100;
        
        const progress = (elapsedTime / totalTime) * 100;
        return Math.min(Math.max(progress, 0), 100);
      }
      
      return 0;
    },
    
    canApplyNewNumber() {
      return !this.currentNumber || 
             (this.currentNumber.status === 'cooldown' && 
              this.currentNumber.remaining_days === 0);
    }
  },

  async mounted() {
    try {
      // 从本地存储获取用户token
      await this.getUserTokenFromStorage();
      
      // 如果已登录，获取靓号信息
      if (this.isLoggedIn) {
        await this.getCurrentNumber();
      }
    } finally {
      this.pageReady = true;
    }
  },

  beforeDestroy() {
    // 组件销毁前清除计时器
    if (this.autoRefreshTimer) {
      clearTimeout(this.autoRefreshTimer);
    }
  },

  created() {
    this.getConfig()
    this.checkCooldown()
  },

  methods: {
    // 返回上一页
    back() {
      uni.navigateBack();
    },

    // 从本地存储获取用户token
    async getUserTokenFromStorage() {
      try {
        // #ifdef H5
        if(localStorage.getItem('userinfo')){
          const userInfo = JSON.parse(localStorage.getItem('userinfo'));
          this.token = userInfo.token;
          this.isLoggedIn = true;
        }
        // #endif
        
        // #ifdef APP-PLUS || MP
        const userInfo = uni.getStorageSync('userinfo');
        if(userInfo) {
          const parsedUserInfo = typeof userInfo === 'string' ? JSON.parse(userInfo) : userInfo;
          this.token = parsedUserInfo.token;
          this.isLoggedIn = true;
        }
        // #endif
        
        ////console.log('从本地存储获取用户token成功');
      } catch (error) {
        ////console.error('从本地存储获取用户token失败:', error);
        this.isLoggedIn = false;
      }
    },
    
    // 请求节流检查
    checkThrottle() {
      const now = Date.now();
      if (now - this.lastRequestTime < this.requestCooldown) {
        this.requestThrottled = true;
        setTimeout(() => {
          this.requestThrottled = false;
        }, this.requestCooldown - (now - this.lastRequestTime));
        return false;
      }
      this.lastRequestTime = now;
      return true;
    },
    
    // 获取当前靓号信息
    async getCurrentNumber() {
      try {
        this.isLoading = true;
        
        // 添加强制刷新参数
        const forceRefresh = this.applySuccess ? 1 : 0;
        
        const [err, res] = await uni.request({
          url: this.$API.PluginLoad('xqy_pretty_number'),
          method: 'POST',
          data: {
            plugin: 'xqy_pretty_number',
            action: 'get_current_number',
            token: this.token,
            force_refresh: forceRefresh
          },
          header: {
            'content-type': 'application/x-www-form-urlencoded'
          }
        });
        
        if (!err && res.data.code === 200) {
          this.currentNumber = res.data.data;
          
          // 如果刚刚成功申请了靓号，重置标记
          if (this.applySuccess) {
            this.applySuccess = false;
          }
        } else {
          this.currentNumber = null;
        }
      } catch (error) {
        console.error('获取靓号信息失败:', error);
        this.currentNumber = null;
      } finally {
        this.isLoading = false;
      }
    },
    
    // 获取配置
    async getConfig() {
      if (this.requestThrottled) {
        //console.log('请求过于频繁，已被节流');
        return false;
      }

      try {
        const [err, res] = await uni.request({
          url: this.$API.PluginLoad('xqy_pretty_number'),
          method: 'POST',
          data: {
            plugin: 'xqy_pretty_number',
            action: 'pretty_number_settings',
            op: 'get',
            token: this.token
          },
          header: {
            'content-type': 'application/x-www-form-urlencoded'
          }
        });

        if (!err && res.data.code === 200) {
          this.config = {
            min_length: res.data.data.normal_min_length || 9,
            max_length: res.data.data.normal_max_length || 10,
            allow_numbers: true,
            allow_letters: true,
            allow_mixed: true
          };
          //console.log('获取到的配置:', this.config);
          return true;
        } 
        
        if (res && res.data.code === 429) {
          this.requestThrottled = true;
          setTimeout(() => {
            this.requestThrottled = false;
          }, this.requestCooldown);
          //console.error('获取配置失败: 请求过于频繁');
        }
        
        // 设置默认配置
        this.config = {
          min_length: 9,
          max_length: 10,
          allow_numbers: true,
          allow_letters: true,
          allow_mixed: true
        };
        return false;
      } catch (error) {
        //console.error('获取配置失败:', error);
        // 设置默认配置
        this.config = {
          min_length: 9,
          max_length: 10,
          allow_numbers: true,
          allow_letters: true,
          allow_mixed: true
        };
        return false;
      }
    },

    // 验证靓号格式
    async validateNumber() {
      //console.log('开始验证靓号格式:', this.number);
      if (!this.number) {
        //console.log('靓号为空');
        uni.showToast({
          title: '请输入靓号',
          icon: 'none'
        });
        return false;
      }

      // 检查字符类型
      if (!(/^[a-zA-Z0-9]+$/.test(this.number))) {
        uni.showToast({
          title: '靓号只能包含数字和字母',
          icon: 'none'
        });
        return false;
      }

      // 检查连续字符
      if (/(.)\1{2,}/.test(this.number)) {
        //console.log('包含连续3位及以上相同字符');
        uni.showToast({
          title: '免费版不支持连续3位及以上相同字符',
          icon: 'none'
        });
        return false;
      }

      // 确保配置已加载
      if (!this.config) {
        const configLoaded = await this.getConfig();
        if (!configLoaded) {
          uni.showToast({
            title: '获取配置失败，请稍后重试',
            icon: 'none'
          });
          return false;
        }
      }

      // 检查长度
      const length = this.number.length;
      const minLength = this.config.min_length;
      const maxLength = this.config.max_length;
      
      //console.log('靓号长度:', length);
      //console.log('长度限制:', minLength, '-', maxLength);

      if (length < minLength || length > maxLength) {
        //console.log('靓号长度不符合要求');
        uni.showToast({
          title: `靓号长度必须在${minLength}-${maxLength}位之间`,
          icon: 'none'
        });
        return false;
      }

      //console.log('靓号格式验证通过');
      return true;
    },

    // 申请靓号
    async applyNumber() {
      if (this.applying || !this.number) return;
      
      try {
        this.applying = true;
        
        const [err, res] = await uni.request({
          url: this.$API.PluginLoad('xqy_pretty_number'),
          method: 'POST',
          data: {
            plugin: 'xqy_pretty_number',
            action: 'apply_pretty_number',
            token: this.token,
            number: this.number
          },
          header: {
            'content-type': 'application/x-www-form-urlencoded'
          }
        });
        
        if (!err && res.data.code === 200) {
          uni.showToast({
            title: '申请成功',
            icon: 'success'
          });
          
          this.number = '';
          this.applySuccess = true; // 标记申请成功
          
          // 强制刷新数据
          await this.getCurrentNumber();
        } else {
          uni.showToast({
            title: res.data.msg || '申请失败',
            icon: 'none'
          });
        }
      } catch (error) {
        console.error('申请靓号失败:', error);
        uni.showToast({
          title: '申请失败，请重试',
          icon: 'none'
        });
      } finally {
        this.applying = false;
      }
    },
    
    // 开始自动刷新
    startAutoRefresh() {
      // 清除可能存在的计时器
      if (this.autoRefreshTimer) {
        clearTimeout(this.autoRefreshTimer);
      }
      
      // 设置自动刷新计时器，每1秒刷新一次，最多刷新5次
      let refreshCount = 0;
      const maxRefreshes = 5;
      
      const doRefresh = async () => {
        refreshCount++;
        //console.log(`自动刷新数据 (${refreshCount}/${maxRefreshes})...`);
        
        await this.getCurrentNumber();
        
        // 如果已经获取到靓号数据或达到最大刷新次数，停止刷新
        if (this.currentNumber || refreshCount >= maxRefreshes) {
          //console.log('自动刷新完成');
          clearTimeout(this.autoRefreshTimer);
          this.autoRefreshTimer = null;
          
          // 如果仍未获取到数据，提示用户
          if (!this.currentNumber && refreshCount >= maxRefreshes) {
            uni.showToast({
              title: '靓号申请成功，请稍后查看',
              icon: 'none',
              duration: 2000
            });
          }
        } else {
          // 继续刷新
          this.autoRefreshTimer = setTimeout(doRefresh, 1000);
        }
      };
      
      // 开始第一次刷新
      this.autoRefreshTimer = setTimeout(doRefresh, 500);
    },
    
    // 注销靓号
    async cancelNumber() {
      if (this.canceling) return;
      
      try {
        this.canceling = true;
        
        const [err, res] = await uni.request({
          url: this.$API.PluginLoad('xqy_pretty_number'),
          method: 'POST',
          data: {
            plugin: 'xqy_pretty_number',
            action: 'cancel_pretty_number',
            token: this.token
          },
          header: {
            'content-type': 'application/x-www-form-urlencoded'
          }
        });
        
        if (!err && res.data.code === 200) {
          uni.showToast({
            title: '注销成功',
            icon: 'success'
          });
          
          // 强制刷新数据
          await this.getCurrentNumber();
        } else {
          uni.showToast({
            title: res.data.msg || '注销失败',
            icon: 'none'
          });
        }
      } catch (error) {
        console.error('注销靓号失败:', error);
        uni.showToast({
          title: '注销失败，请重试',
          icon: 'none'
        });
      } finally {
        this.canceling = false;
      }
    },
    
    // 显示成功动画
    showSuccessAnimation() {
      // 可以在这里添加一些视觉效果，比如闪烁、高亮等
      // 这里使用简单的toast提示
      uni.showToast({
        title: '靓号设置成功！',
        icon: 'success',
        duration: 2000
      });
      
      // 也可以添加一些DOM动画，例如：
      // 1. 获取靓号元素
      // 2. 添加一个CSS类来触发动画
      // 3. 动画结束后移除该类
      
      // 示例：如果有一个靓号卡片元素，可以添加高亮动画
      setTimeout(() => {
        const numberCard = document.querySelector('.number-card');
        if (numberCard) {
          numberCard.classList.add('highlight-animation');
          setTimeout(() => {
            numberCard.classList.remove('highlight-animation');
          }, 2000);
        }
      }, 500);
    },
    
    // 检查冷却期 - 简洁实现
    checkCooldown() {
      const token = uni.getStorageSync('token') || ''
      
      uni.request({
        url: this.$API.PluginLoad('xqy_pretty_number'),
        method: 'POST',
        data: {
          plugin: 'xqy_pretty_number',
          action: 'get_cooldown_info',
          token: token
        },
        header: {
          'content-type': 'application/x-www-form-urlencoded'
        },
        success: (res) => {
          if (res.data && res.data.code === 200 && res.data.data) {
            const cooldownInfo = res.data.data
            this.hasCooldown = true
            this.canceledNumber = cooldownInfo.number
            this.canceledAt = new Date(cooldownInfo.deleted_at)
            this.cooldownDays = cooldownInfo.cooldown_days || 30
            
            // 计算剩余天数和进度
            this.calculateCooldown()
          } else {
            this.hasCooldown = false
          }
        }
      })
    },
    
    // 计算冷却期剩余天数和进度
    calculateCooldown() {
      if (!this.canceledAt) return
      
      const now = new Date()
      const canceledTime = this.canceledAt.getTime()
      const cooldownDays = 30 // 免费版固定30天
      const cooldownEndTime = canceledTime + (cooldownDays * 24 * 60 * 60 * 1000)
      const remainingTime = cooldownEndTime - now.getTime()
      
      // 计算剩余天数（向上取整，确保显示整数天）
      this.remainingDays = Math.ceil(remainingTime / (24 * 60 * 60 * 1000))
      
      // 如果冷却期已结束
      if (this.remainingDays <= 0) {
        this.hasCooldown = false
        this.remainingDays = 0
        this.cooldownProgressValue = 100
        return
      }
      
      // 计算进度百分比（已经过去的时间占总冷却期的百分比）
      const elapsedTime = now.getTime() - canceledTime
      const totalCooldownTime = cooldownDays * 24 * 60 * 60 * 1000
      this.cooldownProgressValue = Math.min(100, (elapsedTime / totalCooldownTime) * 100)
    },

    // 格式化日期
    formatDate(dateString) {
      if (!dateString) return '';
      const date = new Date(dateString);
      return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
    }
  }
}
</script>

<style lang="scss">
.pretty-number-center {
  min-height: 100vh;
  background-color: #f8f9fa;
  
  .nav-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(10px);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    
    .nav-content {
      display: flex;
      align-items: center;
      padding: 0 16px;
      
      .nav-back {
        padding: 8px;
        margin-left: -8px;
        border-radius: 50%;
        
        &:active {
          background-color: rgba(0, 0, 0, 0.05);
        }
      }
      
      .nav-title {
        flex: 1;
        text-align: center;
        font-size: 17px;
        font-weight: 600;
        color: #000;
        margin-right: 32px;
      }
    }
  }

  .main-content {
    height: calc(100vh - 44px);
    
    .content-wrapper {
      padding: 16px;
    }
  }

  .number-card, .apply-card {
    background: #fff;
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
    }
  }

  .section-title {
    font-size: 20px;
    font-weight: 600;
    color: #000;
  }

  .number-status {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    
    &.active {
      background: #e8f5e9;
      color: #2e7d32;
    }
    
    &.cancelled {
      background: #f5f5f5;
      color: #757575;
    }
  }

  .number-display {
    margin: 24px 0;
    
    .number {
      font-size: 36px;
      font-weight: 700;
      letter-spacing: 1px;
      color: #000;
      display: block;
      margin-bottom: 12px;
    }
    
    .number-meta {
      .meta-item {
        display: block;
        font-size: 14px;
        color: #757575;
        margin-bottom: 4px;
      }
    }
  }

  .cooldown-section {
    margin-top: 24px;
    
    .cooldown-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16px;
      
      .cooldown-title {
        font-size: 18px;
        font-weight: 600;
        color: #333;
      }
      
      .cooldown-days {
        font-size: 18px;
        font-weight: 600;
        color: #ff6b6b;
        background: rgba(255, 107, 107, 0.1);
        padding: 4px 12px;
        border-radius: 16px;
      }
    }
    
    .cooldown-card {
      background: #fff;
      border-radius: 16px;
      padding: 24px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
      margin-bottom: 16px;
      
      .number-display {
        font-size: 32px;
        font-weight: 700;
        color: #333;
        text-align: center;
        margin-bottom: 20px;
        letter-spacing: 1px;
      }
      
      .cooldown-info {
        display: flex;
        justify-content: space-between;
        margin-bottom: 12px;
        
        .info-label {
          color: #666;
          font-size: 14px;
        }
        
        .info-value {
          color: #333;
          font-size: 14px;
          font-weight: 500;
        }
      }
      
      .progress-container {
        margin-top: 24px;
        
        .progress-track {
          height: 8px;
          background: #f1f3f5;
          border-radius: 4px;
          overflow: hidden;
          
          .progress-fill {
            height: 100%;
            background: linear-gradient(90deg, #4facfe, #00f2fe);
            border-radius: 4px;
            transition: width 0.5s ease;
          }
        }
        
        .progress-labels {
          display: flex;
          justify-content: space-between;
          margin-top: 8px;
          
          .progress-start {
            font-size: 12px;
            color: #666;
          }
          
          .progress-percent {
            font-size: 14px;
            font-weight: 600;
            color: #4facfe;
          }
          
          .progress-end {
            font-size: 12px;
            color: #666;
          }
        }
      }
    }
    
    .cooldown-message {
      display: flex;
      align-items: center;
      background: rgba(79, 172, 254, 0.1);
      padding: 12px 16px;
      border-radius: 12px;
      
      .message-icon {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: #4facfe;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        font-weight: bold;
        margin-right: 12px;
      }
      
      .message-text {
        font-size: 14px;
        color: #4facfe;
      }
    }
  }

  .input-group {
    margin: 24px 0;
    
    .number-input {
      width: 100%;
      height: 48px;
      background: #f5f5f5;
      border-radius: 12px;
      padding: 0 16px;
      font-size: 16px;
      color: #000;
      border: 2px solid transparent;
      transition: all 0.2s ease;
      
      &:focus {
        background: #fff;
        border-color: #1a73e8;
      }
    }
    
    .input-hint {
      font-size: 13px;
      color: #757575;
      margin-top: 8px;
      display: block;
    }
  }

  .rules-list {
    margin-bottom: 24px;
    
    .rule-item {
      display: flex;
      align-items: center;
      margin-bottom: 8px;
      
      .rule-icon {
        color: #757575;
        margin-right: 8px;
      }
      
      .rule-text {
        font-size: 14px;
        color: #424242;
      }
    }
  }

  .action-button {
    width: 100%;
    height: 48px;
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 500;
    transition: all 0.2s ease;
    
    &.apply {
      background: #1a73e8;
      color: #fff;
      
      &:active {
        background: #1557b0;
      }
      
      &:disabled {
        background: #c2c8d0;
      }
    }
    
    &.cancel {
      background: #f5f5f5;
      color: #d32f2f;
      
      &:active {
        background: #eeeeee;
      }
      
      &:disabled {
        color: #bdbdbd;
      }
    }
  }

  .warning-text {
    font-size: 13px;
    color: #d32f2f;
    text-align: center;
    margin-top: 12px;
    display: block;
  }

  .loading-state {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

// 添加高亮动画样式
@keyframes highlight {
  0% { box-shadow: 0 0 0 rgba(26, 115, 232, 0); }
  50% { box-shadow: 0 0 20px rgba(26, 115, 232, 0.8); }
  100% { box-shadow: 0 0 0 rgba(26, 115, 232, 0); }
}

.highlight-animation {
  animation: highlight 2s ease-in-out;
}
</style>

