<template>
  <view class="design-container">
    <!-- 顶部导航 -->
    <view class="nav-bar">
      <view class="nav-left" @click="goBack">
        <text class="iconfont icon-fanhui"></text>
      </view>
      <view class="nav-title">
        <text>一键设计</text>
      </view>
      <view class="nav-right" @click="goToHistory">
        <text class="iconfont icon-lishi"></text>
      </view>
    </view>
    
    <scroll-view scroll-y class="main-content" :style="{ height: scrollViewHeight }">
      
      <!-- 上传空间图片 -->
      <view class="section upload-section">
        <view class="section-header">
          <view class="header-left">
            <text class="section-title">上传空间图片</text>
          </view>
        </view>
        
        <view class="upload-area" @click="chooseImage" v-if="!uploadedImage">
          <view class="upload-box">
            <view class="camera-icon-box">
              <text class="iconfont icon-xiangji"></text>
            </view>
            <text class="upload-hint">点击上传或拖拽图片到此处</text>
            <text class="upload-sub-hint">支持 JPG、PNG 格式</text>
          </view>
        </view>
        
        <view class="preview-area" v-else>
          <image :src="uploadedImage" mode="aspectFill" class="preview-image"></image>
          <view class="re-upload-btn" @click="chooseImage">
            <text class="iconfont icon-huan"></text>
            <text>重新上传</text>
          </view>
        </view>
      </view>
      
      <!-- 装修需求描述 -->
      <view class="section prompt-section">
        <view class="section-header">
          <view class="header-left">
            <text class="section-title">一句话描述设计需求</text>
          </view>
        </view>
        
        <view class="input-box">
          <textarea 
            v-model="promptText" 
            class="prompt-input" 
            placeholder="请描述希望生成的画面，例如：卧室,现代,双人床..."
            placeholder-class="placeholder-text"
            :maxlength="200"
            :auto-height="true"
          ></textarea>
          
          <view class="voice-btn" @click="isRecording ? stopVoiceInput() : startVoiceInput()" :class="{ recording: isRecording }">
            <text class="iconfont icon-laba" v-if="!isRecording"></text>
            <view class="recording-content" v-else>
              <view class="recording-wave">
                <view class="bar bar1"></view>
                <view class="bar bar2"></view>
                <view class="bar bar3"></view>
              </view>
              <text class="recording-time">{{ recordDuration }}s</text>
            </view>
          </view>
        </view>
      </view>
      
      <!-- 风格参考图 -->
      <view class="section style-section">
        <view class="section-header">
          <view class="header-left">
            <view class="green-bar"></view>
            <text class="section-title">风格参考</text>
          </view>
          <view class="header-right" @click="viewMoreStyles">
            <text class="more-text">更多案例库</text>
          </view>
        </view>
        
        <scroll-view scroll-x class="style-scroll" :show-scrollbar="false">
          <view class="style-list">
            <!-- 不使用选项 -->
            <view 
              class="style-item" 
              :class="{ active: selectedStyle === 'none' }"
              @click="selectStyle('none')"
            >
              <view class="style-img-box none-style">
                 <view class="check-circle" v-if="selectedStyle === 'none'">
                   <text class="iconfont icon-gou"></text>
                 </view>
              </view>
              <text class="style-name">不使用</text>
            </view>
            
            <!-- 预设风格 -->
            <view 
              class="style-item" 
              v-for="(style, index) in styles" 
              :key="index"
              :class="{ active: selectedStyle === style.id }"
              @click="selectStyle(style.id)"
            >
              <view class="style-img-box">
                <image :src="style.image" mode="aspectFill" class="style-img"></image>
                <view class="check-circle" v-if="selectedStyle === style.id">
                  <text class="iconfont icon-gou"></text>
                </view>
              </view>
              <text class="style-name">{{ style.name }}</text>
            </view>
            
            <!-- 自定义上传 -->
             <view class="style-item" @click="uploadCustomStyle">
              <view class="style-img-box custom-style">
                 <text class="iconfont icon-shangchuan"></text>
              </view>
              <text class="style-name">自定义上传</text>
            </view>
          </view>
        </scroll-view>
      </view>
      
      <!-- 生成模式 -->
      <view class="section mode-section">
        <view class="section-header">
          <view class="header-left">
             <view class="green-bar"></view>
            <text class="section-title">生成模式</text>
          </view>
        </view>
        
        <view class="mode-options">
          <view 
            class="mode-btn" 
            :class="{ active: generateMode === 'try' }"
            @click="selectMode('try')"
          >
            <view class="check-icon" v-if="generateMode === 'try'">
              <text class="iconfont icon-gou"></text>
            </view>
            <view class="radio-circle" v-else></view>
            <text class="mode-text">标准</text>
          </view>
          
          <view 
            class="mode-btn" 
            :class="{ active: generateMode === 'inspiration' }"
            @click="selectMode('inspiration')"
          >
            <view class="check-icon" v-if="generateMode === 'inspiration'">
              <text class="iconfont icon-gou"></text>
            </view>
             <view class="radio-circle" v-else></view>
            <text class="mode-text">创意</text>
          </view>
        </view>
      </view>
      
      <view class="bottom-placeholder" style="height: 120px;"></view>
    </scroll-view>
    
    <!-- 底部按钮 -->
    <view class="footer-bar">
      <button class="submit-btn" @click="handleGenerate">
        <text class="btn-icon">✨</text>
        <text class="btn-text">开始生成</text>
      </button>
    </view>
    
    <!-- 自定义加载提示 -->
    <view class="custom-loading-mask" v-if="showCustomLoading">
      <view class="custom-loading-box">
        <view class="loading-spinner">
          <view class="spinner-circle"></view>
        </view>
        <text class="loading-text">{{ loadingText }}</text>
        <text class="countdown-text" v-if="countdownSeconds > 0">预计还需 {{ countdownSeconds }} 秒</text>
      </view>
    </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,
      scrollViewHeight: '100vh',
      
      uploadedImage: '',
      promptText: '',
      isRecording: false,
      
      selectedStyle: 'none',
      styles: [
        { id: 'cream', name: '奶油风', image: 'https://uthink2025.oss-cn-shanghai.aliyuncs.com//crmebimage/public/content/2025/07/29/368cb3967d2542479bfeaae31d663093zahdxpvd4z.jpg', prompt: '奶油风格装修，温馨舒适的居住空间，柔和的米白色调为主，搭配浅色木质家具，简约优雅的设计，温暖的光线氛围' },
        { id: 'nordic', name: '北欧风', image: 'https://uthink2025.oss-cn-shanghai.aliyuncs.com//crmebimage/public/content/2025/07/29/368cb3967d2542479bfeaae31d663093zahdxpvd4z.jpg', prompt: '北欧风格装修，简约自然的设计理念，浅色木质地板和家具，白色墙面，清新明亮的空间，绿植装饰，舒适宜居' },
        { id: 'modern', name: '现代简约', image: 'https://uthink2025.oss-cn-shanghai.aliyuncs.com//crmebimage/public/content/2025/07/29/368cb3967d2542479bfeaae31d663093zahdxpvd4z.jpg', prompt: '现代简约风格装修，时尚前卫的设计，黑白灰色调为主，线条流畅简洁，金属元素点缀，宽敞明亮的空间布局' },
      ],
      
      generateMode: 'try', // 'try' or 'inspiration'
      
      // 录音相关
      recorderManager: null,
      recordTimer: null,
      recordDuration: 0,
      
      // 生成动态提示相关
      loadingTimer: null,
      loadingTextIndex: 0,
      showCustomLoading: false,
      loadingText: '正在分析图片...',
      countdownTimer: null,
      countdownSeconds: 20,
    };
  },
  
  onLoad(options) {
    // 检查用户是否登录
    if (!this.uid) {
      uni.showToast({
        title: '请先登录',
        icon: 'none',
        duration: 2000
      });
      setTimeout(() => {
        uni.navigateTo({
            url: '/pages/users/wechat_login/index'
        });
      }, 1500);
      return;
    }
    
    this.initPage();
    
    // 接收参数（支持从其他页面跳转过来时预填数据）
    if (options && options.beforeImage) {
      this.uploadedImage = decodeURIComponent(options.beforeImage);
    }
    
    if (options && options.promptText) {
      this.promptText = decodeURIComponent(options.promptText);
    }
    // 初始化录音管理器
    // #ifdef MP-WEIXIN || APP-PLUS
    this.initRecorder();
    // #endif
  },
  
  onShow() {
    // 检查用户是否登录
    if (!this.uid) {
      uni.showToast({
        title: '请先登录',
        icon: 'none',
        duration: 2000
      });
      setTimeout(() => {
        uni.navigateTo({
          url: '/pages/users/wechat_login/index'
        });
      }, 1500);
      return;
    }
  },
  
  onUnload() {
    // 清理录音相关资源
    if (this.recordTimer) {
      clearInterval(this.recordTimer);
      this.recordTimer = null;
    }
    // 清理生成动态提示定时器
    if (this.loadingTimer) {
      clearInterval(this.loadingTimer);
      this.loadingTimer = null;
    }
    if (this.countdownTimer) {
      clearInterval(this.countdownTimer);
      this.countdownTimer = null;
    }
    // #ifdef MP-WEIXIN || APP-PLUS
    if (this.recorderManager) {
      this.recorderManager.stop();
    }
    // #endif
  },
  
  methods: {
    initPage() {
      const systemInfo = uni.getSystemInfoSync();
      this.statusBarHeight = systemInfo.statusBarHeight || 0;
      
      const navHeight = 44;
      const footerHeight = 100; // 预留底部按钮区域
      this.scrollViewHeight = `calc(100vh - ${this.statusBarHeight + navHeight + footerHeight}px)`;
    },
    
    // 初始化录音管理器
    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.isRecording = false; // 重置录音状态
        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();
        
        // 如果错误是因为已经在录音或暂停，先停止再提示
        if (err.errMsg && (err.errMsg.includes('recording') || err.errMsg.includes('paused'))) {
          console.log('检测到录音状态冲突，停止录音管理器');
          try {
            this.recorderManager.stop();
          } catch (e) {
            console.error('停止录音失败:', e);
          }
          uni.showToast({
            title: '录音状态异常，已重置',
            icon: 'none',
            duration: 2000
          });
          return;
        }
        
        // 根据错误类型给出更详细的提示
        let errorMsg = '录音失败，请重试';
        if (err.errMsg) {
          if (err.errMsg.includes('permission') || err.errMsg.includes('权限')) {
            errorMsg = '录音权限被拒绝，请在设置中开启';
          } else if (err.errMsg.includes('busy') || err.errMsg.includes('忙碌')) {
            errorMsg = '录音功能正忙，请稍后再试';
          } else if (err.errMsg.includes('system') || err.errMsg.includes('系统')) {
            errorMsg = '系统录音功能异常';
          }
        }
        
        uni.showToast({
          title: errorMsg,
          icon: 'none',
          duration: 2000
        });
      });
      // #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;
    },
    
    goBack() {
      uni.navigateBack();
    },
    
    goToHistory() {
      uni.navigateTo({
        url: '/pages/ai-generate/history'
      });
    },
    
    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) {
          console.log('图片上传成功:', uploadResult.data);
          this.uploadedImage = uploadResult.data.fullUrl;
          
          uni.showToast({
            title: '上传成功',
            icon: 'success',
            duration: 1500
          });
        } else {
          throw new Error(uploadResult?.message || '上传失败');
        }
        
      } catch (error) {
        uni.hideLoading();
        console.error('图片选择或上传失败:', error);
        
        if (error.errMsg && error.errMsg.includes('cancel')) {
          // 用户取消选择，不显示错误提示
          return;
        }
        
        uni.showToast({
          title: error.message || '图片上传失败',
          icon: 'none',
          duration: 2000
        });
      }
    },
    
    // 开始语音输入
    startVoiceInput() {
      // #ifdef H5
      uni.showModal({
        title: '提示',
        content: 'H5环境暂不支持语音输入，请使用小程序或APP',
        showCancel: false
      });
      return;
      // #endif
      
      // #ifdef MP-WEIXIN || APP-PLUS
      if (!this.recorderManager) {
        console.error('录音管理器未初始化');
        // 尝试重新初始化
        this.initRecorder();
        if (!this.recorderManager) {
          uni.showToast({
            title: '录音功能初始化失败',
            icon: 'none',
            duration: 2000
          });
          return;
        }
      }
      
      // 先检查权限状态
      uni.getSetting({
        success: (res) => {
          const recordAuth = res.authSetting['scope.record'];
          
          if (recordAuth === true) {
            // 已有权限，直接开始录音
            console.log('已有录音权限，开始录音');
            this.startRecording();
          } else if (recordAuth === false) {
            // 用户已拒绝过权限，需要引导到设置页面
            uni.showModal({
              title: '需要录音权限',
              content: '请在设置中开启录音权限',
              confirmText: '去设置',
              success: (modalRes) => {
                if (modalRes.confirm) {
                  uni.openSetting({
                    success: (settingRes) => {
                      if (settingRes.authSetting['scope.record']) {
                        // 用户开启了权限，重新尝试录音
                        console.log('用户已开启录音权限，开始录音');
                        this.startRecording();
                      } else {
                        uni.showToast({
                          title: '需要开启录音权限',
                          icon: 'none'
                        });
                      }
                    }
                  });
                }
              }
            });
          } else {
            // 未请求过权限，请求权限
            uni.authorize({
              scope: 'scope.record',
              success: () => {
                console.log('录音权限获取成功');
                this.startRecording();
              },
              fail: (err) => {
                console.error('录音权限获取失败:', err);
                uni.showModal({
                  title: '需要录音权限',
                  content: '请在设置中开启录音权限',
                  confirmText: '去设置',
                  success: (modalRes) => {
                    if (modalRes.confirm) {
                      uni.openSetting({
                        success: (settingRes) => {
                          if (settingRes.authSetting['scope.record']) {
                            console.log('用户已开启录音权限，开始录音');
                            this.startRecording();
                          }
                        }
                      });
                    }
                  }
                });
              }
            });
          }
        },
        fail: (err) => {
          console.error('获取权限设置失败:', err);
          // 降级方案：直接尝试请求权限
          uni.authorize({
            scope: 'scope.record',
            success: () => {
              console.log('录音权限获取成功');
              this.startRecording();
            },
            fail: () => {
              uni.showModal({
                title: '需要录音权限',
                content: '请在设置中开启录音权限',
                confirmText: '去设置',
                success: (modalRes) => {
                  if (modalRes.confirm) {
                    uni.openSetting();
                  }
                }
              });
            }
          });
        }
      });
      // #endif
    },
    
    // 开始录音
    startRecording() {
      if (!this.recorderManager) {
        console.error('录音管理器不存在，无法开始录音');
        uni.showToast({
          title: '录音功能未初始化',
          icon: 'none'
        });
        return;
      }
      
      // 如果已经在录音，先停止再重新开始
      if (this.isRecording) {
        console.log('检测到正在录音，先停止再重新开始');
        this.stopVoiceInput();
        // 等待停止完成后再开始
        setTimeout(() => {
          this.startRecording();
        }, 300);
        return;
      }
      
      this.isRecording = true;
      
      uni.showToast({
        title: '开始录音',
        icon: 'none',
        duration: 1000
      });
      
      // #ifdef MP-WEIXIN || APP-PLUS
      try {
        // 开始录音 - 根据平台使用不同参数
        let recordOptions = {};
        
        // #ifdef MP-WEIXIN
        recordOptions = {
          duration: 60000, // 最长录音60秒
          sampleRate: 16000,
          numberOfChannels: 1,
          encodeBitRate: 96000,
          format: 'mp3'
        };
        // #endif
        
        this.recorderManager.start(recordOptions);
        console.log('录音开始命令已发送，参数:', recordOptions);
      } catch (error) {
        console.error('启动录音失败:', error);
        this.isRecording = false;
        
        // 如果错误是因为已经在录音，先停止再重试
        if (error.errMsg && error.errMsg.includes('recording')) {
          console.log('检测到录音状态冲突，先停止再重试');
          this.recorderManager.stop();
          setTimeout(() => {
            this.startRecording();
          }, 300);
        } else {
          uni.showToast({
            title: '启动录音失败，请重试',
            icon: 'none',
            duration: 2000
          });
        }
      }
      // #endif
    },
    
    // 停止语音输入
    stopVoiceInput() {
      if (!this.isRecording) {
        return;
      }
      
      this.isRecording = false;
      this.stopRecordTimer(); // 停止计时器
      
      // #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) {
          // 将识别结果添加到描述中
          this.promptText = 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;
    },
    
    viewMoreStyles() {
      uni.navigateTo({
        url: '/pages/ai-generate/inspiration'
      });
    },
    
    selectStyle(id) {
      this.selectedStyle = id;
      // 选择风格时，如果有对应的prompt，则赋值给promptText
      if (id !== 'none') {
        const selectedStyleObj = this.styles.find(s => s.id === id);
        if (selectedStyleObj && selectedStyleObj.prompt) {
          // 如果当前promptText为空或很短，则替换；否则追加
          if (!this.promptText || this.promptText.length < 10) {
            this.promptText = selectedStyleObj.prompt;
          } else {
            this.promptText = selectedStyleObj.prompt;
          }
        }
      }
    },
    
    uploadCustomStyle() {
      uni.chooseImage({
        count: 1,
        success: (res) => {
           uni.showToast({ title: '已选择自定义风格', icon: 'success' });
           // Logic to add custom style to list or set as active
        }
      });
    },
    
    selectMode(mode) {
      this.generateMode = mode;
    },
    
    async handleGenerate() {
      // 验证
      if (!this.uploadedImage) {
        uni.showToast({ 
          title: '请先上传空间图片', 
          icon: 'none' 
        });
        return;
      }
      
      if (!this.promptText.trim()) {
        uni.showToast({
          title: '请输入装修需求描述',
          icon: 'none'
        });
        return;
      }
      
      try {
        // 启动动态提示
        this.startDynamicLoading();
        
        // 准备参考图数组
        const referenceImages = [this.uploadedImage];
        
        // 如果选择了风格参考图，添加到参考图数组
        if (this.selectedStyle !== 'none') {
          const selectedStyleObj = this.styles.find(s => s.id === this.selectedStyle);
          if (selectedStyleObj && selectedStyleObj.image) {
            referenceImages.push(selectedStyleObj.image);
          }
        }
        
        // 获取用户信息
        const userInfo = this.userInfo || {};
        const avatar = userInfo.avatar || '';
        const nickname = userInfo.nickname || '';
        const uid = this.uid || '';
        const resolution = '2K';

        // 根据生成模式选择不同的API
        let response;
        if (this.generateMode === 'inspiration') {
          // 专业模式：调用 createImageEditTaskPro
          response = await api.createImageEditTaskPro({
            prompt: this.promptText,
            image_urls: referenceImages,
            output_format: 'png',
            aspect_ratio: '9:16',
            resolution: resolution,
            title: this.promptText,
            avatar: avatar,
            nickname: nickname,
            uid: uid
          });
        } else {
          // 普通模式：调用 createImageEditTask
          response = await api.createImageEditTask({
            prompt: this.promptText,
            image_urls: referenceImages,
            output_format: 'png',
            image_size: '9:16',
            // aspect_ratio: '9:16',
            // resolution: resolution,
            title: this.promptText,
            mode: this.generateMode,
            avatar: avatar,
            nickname: nickname,
            uid: uid
          });
        }
        
        console.log('图片编辑任务创建成功:', response);
        
        // 停止动态提示
        this.stopDynamicLoading();
        
        // 等待任务完成，轮询获取最新作品
        if (response && response.code === 200) {
          //
          if (response.data) {
            // 跳转到作品详情页
            uni.navigateTo({
              // url: `/pages/ai-generate/image?id=${response.data}`,
              url: `/pages/ai-generate/history`,
              success: () => {
                uni.showToast({
                  title: '生成成功',
                  icon: 'success'
                });
              }
            });
          } else {
            uni.showToast({
              title: '任务已提交，请稍后查看结果',
              icon: 'none',
              duration: 2000
            });
          }
        } else {
          throw new Error(response?.message || '任务创建失败');
        }
        
      } catch (error) {
        console.error('图片编辑任务创建失败:', error);
        this.stopDynamicLoading();
        uni.showToast({
          title: error.message || '生成失败，请重试',
          icon: 'none',
          duration: 2000
        });
      }
    },
    
    // 启动动态加载提示
    startDynamicLoading() {
      const loadingTexts = [
        '正在分析图片...',
        '正在生成设计方案...',
        '正在优化细节...',
        '努力加油中...',
        '即将完成...'
      ];
      
      this.loadingTextIndex = 0;
      this.loadingText = loadingTexts[0];
      this.countdownSeconds = 20; // 初始化倒计时20秒
      this.showCustomLoading = true;
      
      // 定时更新提示文本
      this.loadingTimer = setInterval(() => {
        this.loadingTextIndex = (this.loadingTextIndex + 1) % loadingTexts.length;
        this.loadingText = loadingTexts[this.loadingTextIndex];
      }, 1500); // 每1.5秒切换一次提示
      
      // 启动倒计时
      this.countdownTimer = setInterval(() => {
        if (this.countdownSeconds > 0) {
          this.countdownSeconds--;
        } else {
          // 倒计时结束，但可能还在加载中，不自动关闭
          clearInterval(this.countdownTimer);
          this.countdownTimer = null;
        }
      }, 1000); // 每秒更新一次倒计时
    },
    
    // 停止动态加载提示
    stopDynamicLoading() {
      if (this.loadingTimer) {
        clearInterval(this.loadingTimer);
        this.loadingTimer = null;
      }
      if (this.countdownTimer) {
        clearInterval(this.countdownTimer);
        this.countdownTimer = null;
      }
      this.loadingTextIndex = 0;
      this.countdownSeconds = 20;
      this.showCustomLoading = false;
      this.loadingText = '正在分析图片...';
    },
    
  }
};
</script>

<style lang="scss" scoped>
.design-container {
  width: 100%;
  height: 100vh;
  background: #ffffff;
  color: #333333;
  display: flex;
  flex-direction: column;
}

.nav-bar {
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 48px;
  
  .nav-left, .nav-right {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .nav-title {
    display: flex;
    align-items: center;
    font-size: 16px;
    font-weight: 500;
    gap: 6px;
    
    .title-icon {
      color: #42ca4d;
    }
  }
  
  .iconfont {
    color: #333333;
    font-size: 20px;
  }
}

.main-content {
  flex: 1;
  padding: 0 16px;
  box-sizing: border-box;
}

.section {
  margin-bottom: 24px;
  
  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    
    .header-left {
      display: flex;
      align-items: center;
      gap: 8px;
      
      .header-icon {
        font-size: 16px;
      }
      
      .green-bar {
        width: 4px;
        height: 14px;
        background: #42ca4d;
        border-radius: 2px;
      }
      
      .section-title {
        font-size: 15px;
        font-weight: 500;
        color: #333333;
      }
    }
    
    .header-right {
      .more-text {
        font-size: 12px;
        color: #42ca4d;
      }
    }
  }
}

// 上传区域
.upload-section {
  .upload-area {
    width: 100%;
    height: 200px;
    background: #f5f5f5;
    border: 1px dashed #ddd;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    
    .upload-box {
      display: flex;
      flex-direction: column;
      align-items: center;
      
      .camera-icon-box {
        width: 64px;
        height: 64px;
        border: 2px solid #42ca4d;
        border-radius: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 16px;
        
        .icon-xiangji {
          font-size: 32px;
          color: #42ca4d;
        }
      }
      
      .upload-hint {
        font-size: 14px;
        color: #666666;
        margin-bottom: 8px;
      }
      
      .upload-sub-hint {
        font-size: 12px;
        color: #999999;
      }
    }
  }
  
  .preview-area {
    width: 100%;
    height: 240px;
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    border: 1px solid #e0e0e0;
    
    .preview-image {
      width: 100%;
      height: 100%;
    }
    
    .re-upload-btn {
      position: absolute;
      bottom: 16px;
      right: 16px;
      background: rgba(255, 255, 255, 0.9);
      padding: 6px 12px;
      border-radius: 20px;
      display: flex;
      align-items: center;
      gap: 4px;
      backdrop-filter: blur(4px);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      
      text {
        font-size: 12px;
        color: #333;
      }
    }
  }
}

// 描述区域
.prompt-section {
  .input-box {
    background: #f5f5f5;
    border-radius: 16px;
    padding: 16px;
    position: relative;
    min-height: 100px;
    border: 1px solid #e0e0e0;
    
    .prompt-input {
      width: 100%;
      font-size: 14px;
      color: #333;
      line-height: 1.5;
      min-height: 60px;
    }
    
    .placeholder-text {
      color: #999;
    }
    
    .voice-btn {
      position: absolute;
      bottom: 12px;
      right: 12px;
      width: 36px;
      height: 36px;
      background: rgba(66, 202, 77, 0.2);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid #42ca4d;
      
      .icon-laba {
        color: #42ca4d;
        font-size: 18px;
      }
      
      &.recording {
        background: rgba(255, 107, 107, 0.2);
        border-color: #ff6b6b;
        width: auto;
        min-width: 36px;
        padding: 0 8px;
        
        .recording-content {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          gap: 2px;
          
          .recording-wave {
            display: flex;
            align-items: center;
            gap: 2px;
            height: 12px;
            
            .bar {
              width: 3px;
              background: #ff6b6b;
              border-radius: 2px;
              animation: wave 1s infinite;
              
              &.bar1 { height: 60%; animation-delay: 0s; }
              &.bar2 { height: 100%; animation-delay: 0.2s; }
              &.bar3 { height: 60%; animation-delay: 0.4s; }
            }
          }
          
          .recording-time {
            font-size: 10px;
            color: #ff6b6b;
            font-weight: 500;
            line-height: 1;
          }
        }
      }
    }
  }
}

@keyframes wave {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(0.5); }
}

// 风格选择
.style-section {
  .style-scroll {
    width: 100%;
    white-space: nowrap;
  }
  
  .style-list {
    display: flex;
    gap: 12px;
    padding-right: 16px;
  }
  
  .style-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    
      .style-img-box {
      width: 80px;
      height: 80px;
      border-radius: 12px;
      overflow: hidden;
      position: relative;
      border: 2px solid transparent;
      background: #f5f5f5;
      
      &.none-style {
         display: flex;
         align-items: center;
         justify-content: center;
         background: #f0f0f0;
      }
      
      &.custom-style {
         display: flex;
         align-items: center;
         justify-content: center;
         background: #f5f5f5;
         
         .icon-shangchuan {
           font-size: 24px;
           color: #999;
         }
      }
      
      .style-img {
        width: 100%;
        height: 100%;
      }
      
      .check-circle {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 24px;
        height: 24px;
        background: #42ca4d;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        
        .icon-gou {
          font-size: 14px;
          color: #fff;
        }
      }
    }
    
    &.active {
      .style-img-box {
        border-color: #42ca4d;
        background: rgba(66, 202, 77, 0.1);
      }
      
      .style-name {
        color: #42ca4d;
      }
    }
    
    .style-name {
      font-size: 12px;
      color: #666;
    }
  }
}

// 生成模式
.mode-section {
  .mode-options {
    display: flex;
    gap: 16px;
    
    .mode-btn {
      flex: 1;
      height: 50px;
      background: #f5f5f5;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      border: 1px solid #e0e0e0;
      
      .check-icon {
        width: 18px;
        height: 18px;
        background: #42ca4d;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        
        .icon-gou {
          font-size: 10px;
          color: #fff;
        }
      }
      
      .radio-circle {
        width: 16px;
        height: 16px;
        border-radius: 50%;
        border: 1px solid #999;
      }
      
      .mode-info {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        
        .mode-text {
          font-size: 14px;
          color: #666;
          line-height: 1.2;
        }
        
        .mode-desc {
          font-size: 10px;
          color: #999;
          margin-top: 2px;
        }
      }
      
      &.active {
        border-color: #42ca4d;
        background: rgba(66, 202, 77, 0.1);
        
        .mode-text {
          color: #42ca4d;
        }
        
        .mode-desc {
          color: rgba(66, 202, 77, 0.8);
        }
      }
    }
  }
}

.bottom-placeholder {
  height: 40px;
}

// 底部操作栏
.footer-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 12px 16px 30px;
  background: #ffffff;
  border-top: 1px solid #e0e0e0;
  z-index: 10;
  
  .submit-btn {
    width: 100%;
    height: 50px;
    background: #42ca4d;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: none;
    
    .btn-icon {
      font-size: 18px;
    }
    
    .btn-text {
      font-size: 16px;
      color: #fff;
      font-weight: 600;
    }
    
    &:active {
      opacity: 0.9;
    }
  }
}

// 自定义加载提示样式
.custom-loading-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.custom-loading-box {
  background: #ffffff;
  border-radius: 16px;
  padding: 40px 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 280px;
  max-width: 400px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.loading-spinner {
  width: 50px;
  height: 50px;
  margin-bottom: 20px;
  position: relative;
}

.spinner-circle {
  width: 100%;
  height: 100%;
  border: 4px solid #f0f0f0;
  border-top-color: #42ca4d;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

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

.custom-loading-box .loading-text {
  font-size: 16px;
  color: #333333;
  text-align: center;
  line-height: 1.5;
  margin-bottom: 8px;
}

.countdown-text {
  font-size: 14px;
  color: #666666;
  text-align: center;
  margin-top: 8px;
}
</style>

