<template>
  <view class="oneclick-container">
    <view class="top-controls">
      <view class="left-controls">
        <view class="back-btn" @click="onBack">
          <text class="icon-back">‹</text>
        </view>
      </view>
      <view class="center-title">
        <text class="title-text">视频生成</text>
      </view>
    </view>
    <!-- 参考图片模块 -->
   
      <view class="section-title-row">
        <text class="section-title">参考图片（一张图）</text>
      </view>
      <view class="tips">
        <text class="warning">特别提示：图片不可含人物，否则视频生成会失败</text>
      </view>

      <view class="upload-card" v-if="!refImage" @click="chooseImage">
        <text class="upload-plus">+</text>
        <text class="upload-text">添加参考</text>
      </view>
      <view class="upload-preview" v-else>
        <view class="image-container">
          <view class="image-loading" v-if="imageLoading">
            <view class="loading-spinner"></view>
            <text class="loading-text">图片加载中...</text>
          </view>
          <image 
            :src="refImage" 
            mode="aspectFit" 
            class="preview-image"
            @load="onImageLoad"
            @error="onImageError"
            :style="{ display: imageLoading ? 'none' : 'block' }"
          ></image>
          <view class="image-error" v-if="imageError" @click="retryLoadImage">
            <text class="error-text">图片加载中</text>
            <text class="error-retry">点击重试</text>
          </view>
        </view>
        <view class="preview-actions">
          <button class="btn-secondary" size="mini" @click="removeImage">移除</button>
          <button class="btn-secondary" size="mini" @click="chooseImage">更换</button>
        </view>
      </view>
    

    <!-- 文案模块 -->
  <view class="section-title-outer">
      <text class="section-title">创意描述（一句话）</text>
      <view class="desc-row">
        <view class="desc-input-wrapper">
          <textarea class="desc-input" :value="description" placeholder="请用一句话描述你要生成的视频内容" maxlength="800" @input="onDescInput"></textarea>
          
          <!-- 语音输入按钮 -->
          <view class="voice-btn" @click="startVoiceInput" v-if="!isRecording">
            <text class="iconfont icon-laba"></text>
          </view>
          <view class="voice-btn recording" @click="stopVoiceInput" v-else>
            <view class="recording-animation"></view>
            <text class="recording-time">{{ recordDuration }}s</text>
          </view>
        </view>
        
        <!-- 录音提示 -->
        <view class="recording-hint" v-if="isRecording">
          <text class="hint-icon">🎤</text>
          <text class="hint-text">正在录音，点击右下角完成</text>
        </view>
        
        <view class="desc-actions">
          <button class="btn-secondary" size="mini" @click="shuffleIdeas">换一组</button>
          <button class="btn-secondary" size="mini" @click="clearDescription">清空</button>
        </view>
      </view>

    </view>  

    <!-- 时长选择 -->
    <view class="section">
      <text class="section-title">时长选择</text>
      <view class="options-row">
        <view :class="['option-chip', selectedDuration === 10 ? 'active' : '']" @click="selectDuration" :data-value="10">10秒</view>
        <view :class="['option-chip', selectedDuration === 15 ? 'active' : '']" @click="selectDuration" :data-value="15">15秒</view>
        <view :class="['option-chip', selectedDuration === 25 ? 'active' : '']" @click="selectDuration" :data-value="25">25秒</view>
      </view>
    </view>

    <!-- 生成比例 -->
    <view class="section">
      <text class="section-title">生成比例</text>
      <view class="options-row">
        <view :class="['option-chip', selectedRatio === '9:16' ? 'active' : '']" @click="selectRatio" data-value="9:16">9:16（竖屏）</view>
        <view :class="['option-chip', selectedRatio === '16:9' ? 'active' : '']" @click="selectRatio" data-value="16:9">16:9（横屏）</view>
      </view>
    </view>

    <!-- AI生成内容标识 -->
    <view class="ai-notice">
      <text class="ai-notice-text">内容由AI生成，结果仅供参考</text>
    </view>

    <!-- 底部操作 -->
    <view class="footer">
      <button class="btn-outline" @click="viewHistory">历史创作</button>
      <button class="btn-primary" @click="onGenerate">立即生成（会员免费）</button>
    </view>
  </view>
</template>

<script>
import api from '@/api/models-api.js';
import { mapGetters } from 'vuex';

export default {
  computed: {
    ...mapGetters(['userInfo','uid'])
  },
  data() {
    return {
      statusBarHeight: 0,
      refImage: '',
      imageLoading: false,
      imageError: false,
      description: '描述你想要生成的内容，尽量说清楚人物、场景、动作等，比如：一个女孩坐在新装修的客厅沙发上',
      selectedDuration: 15,
      selectedRatio: '9:16',
      suggestions: [
        '女孩自然的姿势贴地快递飞行，飞向湖面',
        '黄昏城市街头，骑行穿梭灯影之间'
      ],
      // 语音输入
      isRecording: false,
      recorderManager: null,
      recordDuration: 0,
      recordTimer: null,
      sourceArticleId: ''
    };
  },
  onLoad(options) {
    console.log('一键创作页面加载', options);
    
    // 检查用户是否登录
    if (!this.uid) {
      uni.showToast({
        title: '请先登录',
        icon: 'none',
        duration: 2000
      });
      setTimeout(() => {
        uni.navigateTo({
          url: '/pages/users/wechat_login/index'
        });
      }, 1500);
      return;
    }
    
    this.computeStatusBarHeight();
    if (options && options.description && options.from === 'video') {
      const description = decodeURIComponent(options.description);
      this.description = description;
      console.log('从视频页面接收到描述内容:', description);
    }
    if (options && options.description && options.from === 'image') {
      const description = decodeURIComponent(options.description);
      this.description = description;
    }
    if (options && options.articleId) {
      this.sourceArticleId = options.articleId;
    }
    
    // 初始化录音管理器
    this.initRecorder();
  },
  onShow() {
    // 检查用户是否登录
    if (!this.uid) {
      uni.showToast({
        title: '请先登录',
        icon: 'none',
        duration: 2000
      });
      setTimeout(() => {
        uni.navigateTo({
          url: '/pages/users/wechat_login/index'
        });
      }, 1500);
      return;
    }
    
    if (!this.statusBarHeight || this.statusBarHeight <= 0) {
      this.computeStatusBarHeight();
    }
  },
  
  onUnload() {
    // 清理录音计时器
    this.stopRecordTimer();
    
    // 如果正在录音，停止录音
    if (this.isRecording && this.recorderManager) {
      this.recorderManager.stop();
    }
  },
  methods: {
    computeStatusBarHeight() {
      const sys = uni.getSystemInfoSync() || {};
      const sbh = sys.statusBarHeight;
      const safeTop = sys.safeArea && typeof sys.safeArea.top === 'number' ? sys.safeArea.top : 0;
      const isIOS = (sys.platform === 'ios') || /iphone|ipad|ipod/i.test(String(sys.model || ''));
      const fallback = isIOS ? 44 : 24;
      this.statusBarHeight = (sbh && sbh > 0) ? sbh : (safeTop && safeTop > 0 ? safeTop : fallback);
      this.statusBarHeight += 30;
    },
    onBack() {
      uni.navigateBack();
    },
    // 初始化录音管理器
    initRecorder() {
      // #ifdef MP-WEIXIN || APP-PLUS
      this.recorderManager = uni.getRecorderManager();
      
      // 录音开始事件
      this.recorderManager.onStart(() => {
        console.log('录音开始');
        this.recordDuration = 0;
        this.startRecordTimer();
      });
      
      // 录音结束事件
      this.recorderManager.onStop((res) => {
        console.log('录音结束', res);
        this.stopRecordTimer();
        
        if (res.duration < 1000) {
          uni.showToast({
            title: '录音时间太短',
            icon: 'none'
          });
          return;
        }
        
        // 处理录音结果
        this.handleRecordResult(res);
      });
      
      // 录音错误事件
      this.recorderManager.onError((err) => {
        console.error('录音错误:', err);
        this.isRecording = false;
        this.stopRecordTimer();
        uni.showToast({
          title: '录音失败，请重试',
          icon: 'none'
        });
      });
      // #endif
      
      // #ifdef H5
      // H5 环境提示
      console.log('H5环境暂不支持录音功能');
      // #endif
    },
    
    // 开始录音计时
    startRecordTimer() {
      this.recordTimer = setInterval(() => {
        this.recordDuration++;
        if (this.recordDuration >= 60) {
          // 录音超过60秒自动停止
          this.stopVoiceInput();
        }
      }, 1000);
    },
    
    // 停止录音计时
    stopRecordTimer() {
      if (this.recordTimer) {
        clearInterval(this.recordTimer);
        this.recordTimer = null;
      }
      this.recordDuration = 0;
    },
    
    // 开始语音输入
    startVoiceInput() {
      // #ifdef H5
      uni.showModal({
        title: '提示',
        content: 'H5环境暂不支持语音输入，请使用小程序或APP',
        showCancel: false
      });
      return;
      // #endif
      
      // #ifdef MP-WEIXIN || APP-PLUS
      if (!this.recorderManager) {
        uni.showToast({
          title: '录音功能初始化失败',
          icon: 'none'
        });
        return;
      }
      
      // 检查录音权限
      uni.authorize({
        scope: 'scope.record',
        success: () => {
          this.startRecording();
        },
        fail: () => {
          uni.showModal({
            title: '需要录音权限',
            content: '请在设置中开启录音权限',
            confirmText: '去设置',
            success: (res) => {
              if (res.confirm) {
                uni.openSetting();
              }
            }
          });
        }
      });
      // #endif
    },
    
    // 开始录音
    startRecording() {
      this.isRecording = true;
      
      uni.showToast({
        title: '开始录音',
        icon: 'none',
        duration: 1000
      });
      
      // 开始录音
      this.recorderManager.start({
        duration: 60000, // 最长录音60秒
        sampleRate: 16000,
        numberOfChannels: 1,
        encodeBitRate: 96000,
        format: 'mp3'
      });
    },
    
    // 停止语音输入
    stopVoiceInput() {
      if (!this.isRecording) {
        return;
      }
      
      this.isRecording = false;
      
      // #ifdef MP-WEIXIN || APP-PLUS
      if (this.recorderManager) {
        this.recorderManager.stop();
      }
      // #endif
      
      uni.showToast({
        title: '正在识别...',
        icon: 'loading',
        duration: 2000
      });
    },
    
    // 处理录音结果
    async handleRecordResult(res) {
      console.log('录音文件路径:', res.tempFilePath);
      console.log('录音时长:', res.duration, 'ms');
      
      try {
        // 这里可以调用语音识别API
        // 示例：将录音文件上传到服务器进行识别
        const recognizedText = await this.recognizeSpeech(res.tempFilePath);
        
        if (recognizedText) {
          // 将识别结果添加到描述中
          if (this.description) {
            this.description = recognizedText;
          } else {
            this.description = recognizedText;
          }
          
          uni.showToast({
            title: '识别成功',
            icon: 'success',
            duration: 1500
          });
        }
      } catch (error) {
        console.error('语音识别失败:', error);
        uni.showToast({
          title: '识别失败，请重试',
          icon: 'none',
          duration: 2000
        });
      }
    },
    
    // 语音识别（对接腾讯云语音识别服务）
    async recognizeSpeech(audioPath) {
      try {
        // 1. 上传录音文件到服务器
        console.log('开始上传录音文件:', audioPath);
        const uploadRes = await api.uploadFile(audioPath, {
          model: 'audio',
          pid: '8'
        });
        
        if (!uploadRes || uploadRes.code !== 200) {
          throw new Error('录音文件上传失败');
        }
        
        const audioUrl = uploadRes.data.fullUrl;
        console.log('录音文件上传成功，URL:', audioUrl);
        
        // 2. 创建语音识别任务
        console.log('创建语音识别任务...');
        const createTaskRes = await api.createAsrTask({
          url: audioUrl,
          engineModelType: '16k_zh',
          channelNum: 1,
          resTextFormat: 0,
          sourceType: 0
        });
        
        if (!createTaskRes || createTaskRes.code !== 200) {
          throw new Error('创建识别任务失败');
        }
        
        const taskId = createTaskRes.data.taskId;
        console.log('识别任务创建成功，任务ID:', taskId);
        
        // 3. 轮询查询识别结果
        const result = await this.pollAsrResult(taskId);
        
        // 4. 解析识别文本
        const text = this.parseAsrResult(result);
        
        if (!text) {
          throw new Error('识别结果为空');
        }
        
        console.log('语音识别成功，结果:', text);
        return text;
        
      } catch (error) {
        console.error('语音识别失败:', error);
        throw error;
      }
    },
    
    // 轮询查询ASR识别结果
    async pollAsrResult(taskId, maxAttempts = 30, interval = 2000) {
      let attempts = 0;
      
      while (attempts < maxAttempts) {
        attempts++;
        console.log(`查询识别状态，第${attempts}次尝试...`);
        
        try {
          const statusRes = await api.queryAsrStatus(taskId);
          
          if (!statusRes || statusRes.code !== 200) {
            throw new Error('查询识别状态失败');
          }
          
          const status = statusRes.data.status;
          const statusStr = statusRes.data.statusStr;
          
          console.log(`任务状态: ${statusStr} (${status})`);
          
          // status: 0-等待处理, 1-处理中, 2-识别成功, 3-识别失败
          if (status === 2) {
            // 识别成功
            console.log('识别成功！');
            return statusRes.data;
          } else if (status === 3) {
            // 识别失败
            throw new Error(statusRes.data.errorMsg || '识别失败');
          }
          
          // 等待一段时间后继续查询
          await new Promise(resolve => setTimeout(resolve, interval));
          
        } catch (error) {
          console.error('查询识别状态出错:', error);
          
          // 如果不是最后一次尝试，继续重试
          if (attempts < maxAttempts) {
            await new Promise(resolve => setTimeout(resolve, interval));
            continue;
          }
          
          throw error;
        }
      }
      
      throw new Error('识别超时，请重试');
    },
    
    // 解析ASR识别结果文本
    parseAsrResult(data) {
      if (!data || !data.result) {
        return '';
      }
      
      let text = data.result;
      
      // 去除时间戳标记，例如：[0:0.000,0:11.580]
      text = text.replace(/\[\d+:\d+\.\d+,\d+:\d+\.\d+\]\s*/g, '');
      
      // 去除多余的空格和换行
      text = text.replace(/\n+/g, ' ').trim();
      
      // 去除多余的空格
      text = text.replace(/\s+/g, ' ');
      
      return text;
    },
    
    async chooseImage() {
      try {
        const res = await new Promise((resolve, reject) => {
          uni.chooseImage({
            count: 1,
            sizeType: ['compressed'],
            sourceType: ['album', 'camera'],
            success: resolve,
            fail: reject
          });
        });

        uni.showLoading({ 
          title: '正在上传图片...', 
          mask: true 
        });

        const uploadResult = await api.uploadFile(res.tempFilePaths[0], {
          model: 'user',
          pid: '7'
        });

        uni.hideLoading();

        if (uploadResult && uploadResult.code === 200) {
          this.imageLoading = true;
          this.imageError = false;
          this.refImage = uploadResult.data.fullUrl;
          
          uni.showToast({
            title: '图片上传成功',
            icon: 'success',
            duration: 2000
          });
          
          console.log('图片上传成功:', uploadResult.data);
        } else {
          this.imageError = true;
          throw new Error(uploadResult?.message || '上传失败');
        }

      } catch (error) {
        uni.hideLoading();
        console.error('图片选择或上传失败:', error);
        
        let errorMsg = '图片上传失败';
        if (error.errMsg && error.errMsg.includes('cancel')) {
          return;
        } else if (error.message) {
          errorMsg = error.message;
        }
        
        uni.showToast({
          title: errorMsg,
          icon: 'none',
          duration: 3000
        });
      }
    },
    removeImage() {
      this.refImage = '';
      this.imageLoading = false;
      this.imageError = false;
    },
    onImageLoad() {
      this.imageLoading = false;
      this.imageError = false;
    },
    onImageError() {
      this.imageLoading = false;
      this.imageError = true;
    },
    retryLoadImage() {
      if (this.refImage) {
        this.imageLoading = true;
        this.imageError = false;
        // 强制重新加载图片
        const originalSrc = this.refImage;
        this.refImage = '';
        this.$nextTick(() => {
          this.refImage = originalSrc + '?t=' + Date.now();
        });
      }
    },
    onDescInput(e) {
      this.description = e.detail.value;
    },
    applySuggestion(e) {
      const text = e.currentTarget.dataset.text;
      this.description = text;
    },
    shuffleIdeas() {
      const pools = [
        ['现代简约风格客厅，白色墙面，灰色沙发，落地窗，极简设计', '北欧风格卧室，浅色木质家具，温馨舒适，自然光线'],
        ['中式风格书房，红木家具，传统装饰，典雅大气', '欧式风格餐厅，华丽吊灯，精致餐具，浪漫氛围'],
        ['日式风格茶室，榻榻米，简约禅意，自然材质', '工业风格loft，裸露砖墙，金属元素，现代感强'],
        ['美式风格客厅，暖色调，舒适沙发，壁炉装饰', '地中海风格阳台，蓝白色调，拱形门窗，清新自然'],
        ['新中式风格卧室，现代与传统结合，水墨画装饰', '轻奢风格客厅，金色点缀，大理石地面，高端质感']
      ];
      const idx = Math.floor(Math.random() * pools.length);
      const newSuggestions = pools[idx];
      
      const randomSuggestion = newSuggestions[Math.floor(Math.random() * newSuggestions.length)];
      
      this.suggestions = newSuggestions;
      this.description = randomSuggestion;
    },
    clearDescription() {
      this.description = '';
    },
    selectDuration(e) {
      const value = Number(e.currentTarget.dataset.value);
      this.selectedDuration = value;
    },
    selectRatio(e) {
      const value = e.currentTarget.dataset.value;
      this.selectedRatio = value;
    },
    viewHistory() {
      uni.navigateTo({
        url: '/pages/ai-generate/history'
      });
    },
    onShowExample() {
      uni.showToast({ title: '展示示例', icon: 'none' });
    },
    async onGenerate() {

      uni.showLoading({ title: '正在创建视频任务...', mask: true });

      try {
        // 获取用户信息
        const userInfo = this.userInfo || {};
        const avatar = userInfo.avatar || '';
        const nickname = userInfo.nickname || '';
        const uid = this.uid || '';
        
        let response;

        if (this.refImage) {
          const imageToVideoParams = {
            imageUrl: this.refImage,
            prompt: this.description,
            aspect_ratio: this.selectedRatio === '9:16' ? 'portrait' : '16:9',
            n_frames: Math.ceil(this.selectedDuration / 3),
            size: 'standard',
            remove_watermark: true,
            avatar: avatar,
            nickname: nickname,
            uid:this.uid,
          };
          
          console.log('调用图生视频任务接口，参数:', imageToVideoParams);
          response = await api.createImageToVideoTask(imageToVideoParams);
        } else {
          const params = {
            prompt: this.description,
            aspect_ratio: this.selectedRatio === '9:16' ? 'portrait' : '16:9',
            n_frames: Math.ceil(this.selectedDuration / 3),
            size: 'standard',
            remove_watermark: true,
            avatar: avatar,
            nickname: nickname,
            uid:this.uid,
          };

          console.log('调用文生视频任务接口，参数:', params);
          response = await api.createTextToVideoTask(params);
        }
        
        console.log('创建任务响应:', response);

        uni.hideLoading();

        if (response && response.code === 200) {
          uni.showToast({ 
            title: '任务创建成功', 
            icon: 'success',
            duration: 2000
          });
          
          const taskType = this.refImage ? 'image-to-video' : 'text-to-video';
          const q = `type=${taskType}&desc=${encodeURIComponent(this.description)}&duration=${this.selectedDuration}&ratio=${encodeURIComponent(this.selectedRatio)}&taskId=${response.data?.task_id || ''}&refImage=${encodeURIComponent(this.refImage || '')}`;
          
          setTimeout(() => {
            uni.navigateTo({ url: `/pages/ai-generate/history` });
          }, 1000);
          
        } else {
          const errorMsg = response?.message || '任务创建失败，请重试';
          uni.showToast({ 
            title: errorMsg, 
            icon: 'none',
            duration: 3000
          });
        }

      } catch (error) {
        uni.hideLoading();
        console.error('创建视频任务失败:', error);
        
        let errorMsg = '网络连接失败，请检查网络后重试';
        if (error.message && error.message.includes('请求失败')) {
          errorMsg = '服务器响应异常，请稍后重试';
        } else if (error.message) {
          errorMsg = error.message;
        }
        
        uni.showToast({ 
          title: errorMsg, 
          icon: 'none',
          duration: 3000
        });
      }
    },
    onShareAppMessage() {
      return {
        title: '一键创作 - 人人都是大导演',
        path: '/pages/ai-generate/oneclick'
      };
    },
    onShareTimeline() {
      return {
        title: '一键创作 - 人人都是大导演'
      };
    },
    setData(data) {
      let that = this;
      Object.keys(data).forEach(key => {
        that[key] = data[key];
      });
    }
  }
};
</script>

<style>
/* 一键创作页面 - 科技感设计 */
.oneclick-container {
  background-color: black;
  min-height: 100vh;
  position: relative;
  padding: 190rpx 24rpx 120rpx 24rpx; /* 增加底部padding为固定按钮留出空间 */
  box-sizing: border-box;
  overflow: hidden;
}

.top-controls { position: fixed; margin-top: 48px; top: 0; left: 0; right: 0; height: 48px; display: flex; justify-content: space-between; align-items: flex-end; padding: 0 16px 16px; padding-top: env(safe-area-inset-top); background: linear-gradient(180deg, rgba(0,0,0,0.6) 0%, transparent 100%); z-index: 10; }
.left-controls { display: flex; align-items: center; }
.back-btn { height: 25px; display: flex; align-items: center; justify-content: center; margin-right: 12px; }
.icon-back { font-size: 34px; color: #ffffff; font-weight: normal; }
.center-title { flex: 1; display: flex; align-items: flex-end; justify-content: center; height: 48px; pointer-events: none; }
.title-text { font-size: 16px; margin-right: 60px; font-weight: 600; color: #ffffff; }

/* 科技感背景粒子效果 */
.oneclick-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 20% 30%, rgba(66, 202, 77, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(42, 165, 58, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 40% 80%, rgba(66, 202, 77, 0.08) 0%, transparent 50%);
  animation: techFloat 8s ease-in-out infinite;
  pointer-events: none;
}

@keyframes techFloat {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  33% { transform: translateY(-10px) rotate(1deg); }
  66% { transform: translateY(5px) rotate(-1deg); }
}

/* AI生成内容标识 */
.ai-notice {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16rpx;
  padding: 16rpx 32rpx;
  margin: 0rpx 1rpx 70rpx 1rpx;
  background: rgba(66, 202, 77, 0.1);
  border: 2rpx solid rgba(66, 202, 77, 0.3);
  border-radius: 24rpx;
  backdrop-filter: blur(20px);
  position: relative;
  z-index: 2;
  box-shadow: 0 4rpx 12rpx rgba(66, 202, 77, 0.15);
}

.ai-notice-icon {
  font-size: 32rpx;
}

.ai-notice-text {
  font-size: 24rpx;
  color: #42ca4d;
  line-height: 1.4;
  text-shadow: 0 0 8rpx rgba(66, 202, 77, 0.3);
}

.page-header {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 32rpx;
  position: relative;
  z-index: 2;
}

.page-title {
  color: #ffffff;
  font-size: 40rpx;
  font-weight: 700;
  text-shadow: 0 0 20rpx rgba(66, 202, 77, 0.5);
  letter-spacing: 2rpx;
}

/* 科技感玻璃态卡片 */
.section {
  background: rgba(0, 0, 0, 0.552);
  backdrop-filter: blur(20px);
  border: 1rpx solid rgba(66, 202, 77, 0.2);
  border-radius: 32rpx;
  padding: 32rpx;
  margin-bottom: 32rpx;
  box-shadow: 
    0 8rpx 32rpx rgba(0, 0, 0, 0.3),
    inset 0 1rpx 0 rgba(255, 255, 255, 0.1);
  position: relative;
  overflow: hidden;
}

/* 卡片内发光边框效果 */
.section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 32rpx;
  padding: 2rpx;
  background: linear-gradient(135deg, rgba(66, 202, 77, 0.3), transparent, rgba(42, 165, 58, 0.2));
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

.section-title-outer {
  margin: 36rpx 0;
}

.section-title-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 16rpx;
}

.section-title {
  color: #ffffff;
  font-size: 32rpx;
  font-weight: 600;
  text-shadow: 0 0 10rpx rgba(66, 202, 77, 0.3);
}

.section-link {
  color: #42ca4d;
  font-size: 24rpx;
  opacity: 0.9;
  text-decoration: none;
}

.tips {
  margin-top: 12rpx;
  color: rgba(255, 255, 255, 0.7);
  font-size: 24rpx;
  line-height: 1.5;
}

.tips .warning {
  display: block;
  margin-top: 8rpx;
  color: #ff6b6b;
  text-shadow: 0 0 8rpx rgba(255, 107, 107, 0.3);
}

/* 科技感上传区域 */
.upload-card {
  margin-top: 20rpx;
  border: 2rpx dashed rgba(66, 202, 77, 0.6);
  border-radius: 24rpx;
  height: 400rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.85);
  background: linear-gradient(160deg, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.2));
  backdrop-filter: blur(10px);
  position: relative;
  transition: all 0.3s ease;
  box-shadow: 0 0 28rpx rgba(66, 202, 77, 0.22), inset 0 0 10rpx rgba(66, 202, 77, 0.1);
  overflow: hidden;
  animation: pulseGlow 3s ease-in-out infinite;
}

.upload-card:active {
  transform: scale(0.98);
  border-color: rgba(66, 202, 77, 0.8);
  background: rgba(66, 202, 77, 0.2);
  box-shadow: 0 0 30rpx rgba(66, 202, 77, 0.38);
}

/* 光晕与扫光效果 */
.upload-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 24rpx;
  pointer-events: none;
  background:
    radial-gradient(60% 80% at 15% 15%, rgba(66, 202, 77, 0.12), transparent 60%),
    radial-gradient(60% 80% at 85% 85%, rgba(42, 165, 58, 0.08), transparent 60%);
}

.upload-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: -120%;
  width: 120%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
  transform: skewX(12deg);
  animation: sweep 4s linear infinite;
}

@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 24rpx rgba(66, 202, 77, 0.18), inset 0 0 8rpx rgba(66, 202, 77, 0.08); }
  50% { box-shadow: 0 0 32rpx rgba(66, 202, 77, 0.28), inset 0 0 12rpx rgba(66, 202, 77, 0.12); }
}

@keyframes sweep {
  0% { left: -120%; }
  100% { left: 120%; }
}

.upload-plus {
  font-size: 72rpx;
  line-height: 1;
  color: #42ca4d;
  text-shadow: 0 0 26rpx rgba(66, 202, 77, 0.55);
  letter-spacing: 2rpx;
}

.upload-text {
  margin-top: 12rpx;
  font-size: 28rpx;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  opacity: 0.95;
}

.upload-preview {
  margin-top: 20rpx;
  position: relative;
  background: rgba(0, 0, 0, 0.25);
  border: 1rpx solid rgba(66, 202, 77, 0.2);
  border-radius: 24rpx;
  padding: 12rpx;
  box-shadow: 0 6rpx 18rpx rgba(66, 202, 77, 0.2);
}

/* 图片容器 - 确保等比例缩放和居中显示 */
.image-container {
  width: 100%;
  aspect-ratio: 16/9; /* 使用aspect-ratio确保固定宽高比 */
  min-height: 200rpx;
  max-height: 400rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 18rpx;
  border: 2rpx solid rgba(66, 202, 77, 0.35);
  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.32), 0 0 18rpx rgba(66, 202, 77, 0.22);
  overflow: hidden;
  position: relative;
}

/* 图片预加载和性能优化 */
.preview-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  border-radius: 16rpx;
  transition: all 0.3s ease;
  /* 确保图片在容器中居中 */
  display: block;
  margin: auto;
  /* 性能优化 */
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  /* 防止图片模糊 */
  image-rendering: -webkit-optimize-contrast;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  /* GPU加速 */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  /* 图片预加载优化 */
  loading: lazy;
  /* 防止图片拖拽 */
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;
  /* 防止图片选择 */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  /* 图片缓存优化 */
  image-orientation: from-image;
}

/* 图片加载状态指示器 */
.image-loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.loading-spinner {
  width: 40rpx;
  height: 40rpx;
  border: 4rpx solid rgba(66, 202, 77, 0.3);
  border-top: 4rpx solid #42ca4d;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 16rpx;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loading-text {
  color: #42ca4d;
  font-size: 24rpx;
  text-align: center;
}

/* 图片加载错误状态 */
.image-error {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 10;
  cursor: pointer;
  padding: 20rpx;
  border-radius: 12rpx;
  background: rgba(0, 0, 0, 0.8);
  transition: all 0.3s ease;
}

.image-error:hover {
  background: rgba(0, 0, 0, 0.9);
  transform: translate(-50%, -50%) scale(1.05);
}

.error-icon {
  font-size: 48rpx;
  margin-bottom: 12rpx;
}

.error-text {
  color: #ff6b6b;
  font-size: 24rpx;
  text-align: center;
  margin-bottom: 8rpx;
}

.error-retry {
  color: #42ca4d;
  font-size: 20rpx;
  text-align: center;
  opacity: 0.8;
}

/* 响应式设计优化 */
@media screen and (max-width: 750rpx) {
  .image-container {
    aspect-ratio: 4/3;
    min-height: 180rpx;
    max-height: 320rpx;
  }
}

@media screen and (max-width: 600rpx) {
  .image-container {
    aspect-ratio: 1/1;
    min-height: 160rpx;
    max-height: 280rpx;
  }
}

@media screen and (max-width: 480rpx) {
  .image-container {
    aspect-ratio: 1/1;
    min-height: 140rpx;
    max-height: 240rpx;
  }
  
  .loading-spinner {
    width: 32rpx;
    height: 32rpx;
    border-width: 3rpx;
  }
  
  .loading-text {
    font-size: 20rpx;
  }
  
  .error-icon {
    font-size: 40rpx;
  }
  
  .error-text {
    font-size: 20rpx;
  }
  
  .error-retry {
    font-size: 18rpx;
  }
}

/* 高分辨率屏幕优化 */
@media screen and (-webkit-min-device-pixel-ratio: 2) {
  .preview-image {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
  }
}

/* 横屏适配 */
@media screen and (orientation: landscape) {
  .image-container {
    aspect-ratio: 16/9;
    min-height: 160rpx;
    max-height: 280rpx;
  }
}

.preview-actions {
  margin-top: 16rpx;
  display: flex;
  gap: 16rpx;
}

.desc-row {
  margin-top: 16rpx;
}

/* 输入框包装器 */
.desc-input-wrapper {
  position: relative;
  background: rgba(0, 0, 0, 0.7);
  border-radius: 24rpx;
  border: 2rpx solid rgba(66, 202, 77, 0.6);
  box-shadow: 0 0 25rpx rgba(66, 202, 77, 0.4);
  backdrop-filter: blur(15px);
  min-height: 240rpx;
}

/* 科技感输入框 */
.desc-input {
  width: 100%;
  min-height: 240rpx;
  background: transparent;
  color: #ffffff;
  border-radius: 24rpx;
  padding: 24rpx 88rpx 24rpx 24rpx; /* 右侧留出语音按钮空间 */
  box-sizing: border-box;
  border: none;
  font-size: 30rpx;
  line-height: 1.8;
  resize: none;
}

.desc-input-wrapper:focus-within {
  border-color: rgba(66, 202, 77, 0.8);
  box-shadow: 0 0 30rpx rgba(66, 202, 77, 0.5);
}

/* 语音输入按钮 */
.voice-btn {
  position: absolute;
  bottom: 16rpx;
  right: 16rpx;
  width: 80rpx;
  height: 80rpx;
  background: linear-gradient(135deg, #42ca4d 0%, #38b045 100%);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4rpx 12rpx rgba(66, 202, 77, 0.4);
  transition: all 0.3s ease;
  z-index: 10;
}

.voice-btn .iconfont {
  font-size: 48rpx;
  color: #ffffff;
}

.voice-btn.recording {
  background: #ff6b6b;
  width: 102rpx;
  height: 102rpx;
  box-shadow: 0 4rpx 16rpx rgba(255, 107, 107, 0.5);
}

.voice-btn.recording .recording-animation {
  width: 40rpx;
  height: 40rpx;
  background: #ffffff;
  border-radius: 50%;
  animation: pulse 1s infinite;
  margin-bottom: 4rpx;
}

.voice-btn.recording .recording-time {
  font-size: 20rpx;
  color: #ffffff;
  font-weight: 500;
}

/* 录音提示 */
.recording-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16rpx;
  margin-top: 24rpx;
  padding: 16rpx 32rpx;
  background: rgba(255, 107, 107, 0.1);
  border-radius: 40rpx;
  border: 1px solid rgba(255, 107, 107, 0.3);
  animation: blink 1.5s infinite;
}

.recording-hint .hint-icon {
  font-size: 32rpx;
}

.recording-hint .hint-text {
  font-size: 26rpx;
  color: #ff6b6b;
}

/* 动画 */
@keyframes pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(0.8);
    opacity: 0.6;
  }
}

@keyframes blink {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.desc-actions {
  margin-top: 20rpx; /* 增加间距 */
  display: flex;
  gap: 20rpx; /* 增加按钮间距 */
  justify-content: flex-start; /* 左对齐 */
}

.suggest-list {
  margin-top: 24rpx; /* 增加顶部间距 */
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx; /* 增加间距 */
}

/* 科技感建议标签 */
.suggest-item {
  background: rgba(66, 202, 77, 0.15); /* 增加背景透明度 */
  color: rgba(255, 255, 255, 0.95); /* 增加文字透明度 */
  border: 2rpx solid rgba(66, 202, 77, 0.4); /* 加粗边框并增加透明度 */
  border-radius: 999rpx;
  padding: 18rpx 28rpx; /* 增加内边距 */
  font-size: 26rpx; /* 增大字体 */
  transition: all 0.3s ease;
  backdrop-filter: blur(12px);
  box-shadow: 0 2rpx 12rpx rgba(66, 202, 77, 0.1); /* 添加阴影 */
}

.suggest-item:active {
  background: rgba(66, 202, 77, 0.25); /* 增加激活状态背景 */
  transform: scale(0.96); /* 稍微调整缩放 */
  box-shadow: 0 0 20rpx rgba(66, 202, 77, 0.4); /* 增强阴影效果 */
  border-color: rgba(66, 202, 77, 0.6); /* 增强边框颜色 */
}

.options-row {
  margin-top: 20rpx;
  display: flex;
  gap: 16rpx;
}

/* 科技感选项芯片 */
.option-chip {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.9);
  border: 1rpx solid rgba(66, 202, 77, 0.2);
  border-radius: 999rpx;
  padding: 16rpx 28rpx;
  font-size: 26rpx;
  font-weight: 500;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
  position: relative;
}

.option-chip.active {
  background: linear-gradient(135deg, #42ca4d 0%, #2aa53a 100%);
  color: white;
  border-color: transparent;
  box-shadow: 
    0 0 20rpx rgba(66, 202, 77, 0.4),
    0 4rpx 15rpx rgba(42, 165, 58, 0.3);
  transform: translateY(-2rpx);
}

/* 科技感底部操作区 */
.footer {
  position: fixed; /* 改为fixed固定定位 */
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.8); /* 添加半透明背景 */
  backdrop-filter: blur(20px);
  padding: 24rpx;
  display: flex;
  gap: 20rpx;
  z-index: 1000; /* 确保在最上层 */
  border-top: 1rpx solid rgba(66, 202, 77, 0.2); /* 添加顶部边框 */
}

/* 科技感主按钮 */
.btn-primary {
  flex: 2; /* 设置主按钮占更多空间 */
  background: linear-gradient(135deg, #42ca4d 0%, #2aa53a 100%);
  color: #fff;
  border: none;
  border-radius: 39rpx;
  padding: 24rpx 32rpx;
  font-size: 30rpx;
  font-weight: 600;
  box-shadow: 
    0 8rpx 24rpx rgba(66, 202, 77, 0.4),
    0 0 20rpx rgba(42, 165, 58, 0.3);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.btn-primary::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s ease;
}

.btn-primary:active::before {
  left: 100%;
}

.btn-primary:active {
  transform: scale(0.98);
  box-shadow: 
    0 4rpx 16rpx rgba(66, 202, 77, 0.5),
    0 0 15rpx rgba(42, 165, 58, 0.4);
}

/* 科技感次要按钮 */
.btn-outline {
  flex: 1;
  background: rgba(255, 255, 255, 0.05);
  color: #ffffff;
  border: 2rpx solid rgba(66, 202, 77, 0.4);
  border-radius: 39rpx;
  padding: 24rpx 32rpx;
  font-size: 30rpx;
  font-weight: 500;
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
}

.btn-outline:active {
  background: rgba(66, 202, 77, 0.1);
  border-color: rgba(66, 202, 77, 0.6);
  transform: scale(0.98);
}

.btn-secondary {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.9);
  border: 1rpx solid rgba(66, 202, 77, 0.2);
  border-radius: 999rpx;
  padding: 10rpx 24rpx;
  font-size: 20rpx;
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
}

.btn-secondary:active {
  background: rgba(66, 202, 77, 0.1);
  transform: scale(0.95);
}
</style>