<template>
  <div class="social-media-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span class="card-title">
          <i class="el-icon-star-on"></i>
          小红书/抖音内容生成工具
        </span>
        <el-button 
          style="float: right; padding: 3px 0" 
          type="text" 
          @click="showHelp = !showHelp">
          {{ showHelp ? '隐藏帮助' : '显示帮助' }}
        </el-button>
      </div>

      <!-- 帮助说明 -->
      <el-collapse-transition>
        <div v-show="showHelp" class="help-section">
          <el-alert
            title="使用说明"
            type="info"
            :closable="false"
            show-icon>
            <div slot="default">
              <p><strong>功能说明：</strong></p>
              <ul>
                <li>一键生成小红书/抖音推广内容（关键词、文案、营销图片）</li>
                <li>AI智能提取商品关键词</li>
                <li>AI生成多种风格的推广文案</li>
                <li>自动合成营销对比图片（1080x1080）</li>
                <li>支持快捷复制图片和文案</li>
              </ul>
              <p><strong>使用步骤：</strong></p>
              <ol>
                <li>输入商品信息（图片URL、名称、价格）</li>
                <li>选择文案风格（小红书/抖音/通用）</li>
                <li>点击"一键生成"或分步生成</li>
                <li>在结果区域复制图片和文案</li>
              </ol>
            </div>
          </el-alert>
        </div>
      </el-collapse-transition>

      <!-- 商品信息输入区域 -->
      <div class="input-section">
        <el-form :model="form" label-width="120px" class="main-form">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="商品主图URL" required>
                <el-input
                  v-model="form.productImageUrl"
                  placeholder="请输入商品主图URL"
                  clearable>
                  <el-button slot="append" @click="handlePreviewImage(form.productImageUrl)" :disabled="!form.productImageUrl">
                    预览
                  </el-button>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="商品名称" required>
                <el-input
                  v-model="form.productName"
                  placeholder="请输入完整商品名称"
                  clearable>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="官网价">
                <el-input-number
                  v-model="form.originalPrice"
                  :min="0"
                  :precision="2"
                  :step="1"
                  placeholder="官网原价"
                  style="width: 100%">
                </el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="到手价" required>
                <el-input-number
                  v-model="form.finalPrice"
                  :min="0"
                  :precision="2"
                  :step="1"
                  placeholder="到手价"
                  style="width: 100%">
                </el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="文案风格">
                <el-select v-model="form.style" placeholder="选择风格" style="width: 100%">
                  <el-option label="小红书风格" value="xhs">
                    <span style="float: left">小红书风格</span>
                    <span style="float: right; color: #8492a6; font-size: 13px">真实、种草</span>
                  </el-option>
                  <el-option label="抖音风格" value="douyin">
                    <span style="float: left">抖音风格</span>
                    <span style="float: right; color: #8492a6; font-size: 13px">直接、有冲击力</span>
                  </el-option>
                  <el-option label="通用风格" value="both">
                    <span style="float: left">通用风格</span>
                    <span style="float: right; color: #8492a6; font-size: 13px">适合多平台</span>
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-form-item>
            <el-button 
              type="primary" 
              icon="el-icon-magic-stick"
              size="medium"
              @click="handleGenerateComplete"
              :loading="generating">
              一键生成全部
            </el-button>
            <el-button 
              type="success"
              icon="el-icon-search"
              @click="handleExtractKeywords"
              :loading="extractingKeywords">
              提取关键词
            </el-button>
            <el-button 
              type="warning"
              icon="el-icon-edit"
              @click="handleGenerateContent"
              :loading="generatingContent">
              生成文案
            </el-button>
            <el-button 
              icon="el-icon-refresh-left"
              @click="handleReset">
              重置
            </el-button>
            <el-button 
              type="info"
              icon="el-icon-connection"
              @click="showParseDialog = true">
              从解析接口导入
            </el-button>
          </el-form-item>
        </el-form>
      </div>

      <!-- 关键词展示区域 -->
      <div v-if="result.keywords && result.keywords.length > 0" class="keywords-section">
        <el-divider content-position="left">
          <span style="font-size: 16px; font-weight: bold;">
            <i class="el-icon-collection-tag"></i>
            提取的关键词
          </span>
        </el-divider>
        <div class="keywords-display">
          <el-tag
            v-for="(keyword, index) in result.keywords"
            :key="index"
            type="primary"
            effect="dark"
            size="medium"
            style="margin: 5px; cursor: pointer;"
            @click="handleCopyText(keyword)">
            {{ keyword }}
            <i class="el-icon-document-copy" style="margin-left: 5px;"></i>
          </el-tag>
          <el-button
            type="text"
            icon="el-icon-document-copy"
            @click="handleCopyText(result.keywordsText)"
            style="margin-left: 10px;">
            复制全部关键词
          </el-button>
        </div>
      </div>

      <!-- 文案展示区域 -->
      <div v-if="result.content" class="content-section">
        <el-divider content-position="left">
          <span style="font-size: 16px; font-weight: bold;">
            <i class="el-icon-edit-outline"></i>
            生成的文案
          </span>
          <el-button
            type="text"
            icon="el-icon-document-copy"
            @click="handleCopyText(result.content)"
            style="float: right; margin-top: -5px;">
            复制文案
          </el-button>
        </el-divider>
        <div class="content-display">
          <el-input
            v-model="result.content"
            type="textarea"
            :rows="8"
            readonly
            class="content-textarea">
          </el-input>
          <div class="content-actions">
            <el-button
              size="small"
              icon="el-icon-document-copy"
              @click="handleCopyText(result.content)">
              复制文案
            </el-button>
            <el-button
              size="small"
              icon="el-icon-refresh"
              @click="handleRegenerateContent">
              重新生成
            </el-button>
          </div>
        </div>
      </div>

      <!-- 图片展示区域 -->
      <div v-if="result.imageBase64" class="image-section">
        <el-divider content-position="left">
          <span style="font-size: 16px; font-weight: bold;">
            <i class="el-icon-picture"></i>
            生成的营销图片
          </span>
        </el-divider>
        <div class="image-display">
          <div class="image-wrapper">
            <img 
              :src="result.imageBase64" 
              alt="营销图片"
              class="result-image"
              @click="handlePreviewLargeImage(result.imageBase64)">
            <div class="image-overlay">
              <el-button-group>
                <el-button 
                  type="primary" 
                  size="small"
                  icon="el-icon-download"
                  @click="handleDownloadImage(result.imageBase64, `营销图片_${form.productName || '商品'}_${Date.now()}.jpg`)">
                  下载
                </el-button>
                <el-button 
                  type="success" 
                  size="small"
                  icon="el-icon-document-copy"
                  @click="handleCopyImage(result.imageBase64)">
                  复制图片
                </el-button>
                <el-button 
                  type="info" 
                  size="small"
                  icon="el-icon-zoom-in"
                  @click="handlePreviewLargeImage(result.imageBase64)">
                  查看大图
                </el-button>
              </el-button-group>
            </div>
          </div>
        </div>
      </div>

      <!-- 快捷操作区域 -->
      <div v-if="result.content || result.imageBase64" class="quick-actions-section">
        <el-divider content-position="left">
          <span style="font-size: 16px; font-weight: bold;">
            <i class="el-icon-s-operation"></i>
            快捷操作
          </span>
        </el-divider>
        <div class="quick-actions">
          <el-button
            type="primary"
            icon="el-icon-document-copy"
            @click="handleCopyAll">
            复制全部（文案+图片链接）
          </el-button>
          <el-button
            type="success"
            icon="el-icon-download"
            @click="handleDownloadAll">
            下载图片
          </el-button>
          <el-button
            icon="el-icon-delete"
            @click="handleClearResult">
            清空结果
          </el-button>
        </div>
      </div>
    </el-card>

    <!-- 大图预览对话框 -->
    <el-dialog
      title="图片预览"
      :visible.sync="previewDialogVisible"
      width="80%"
      :before-close="handleClosePreview">
      <div class="large-preview">
        <img 
          :src="previewLargeImageUrl" 
          alt="预览"
          style="max-width: 100%; height: auto;">
      </div>
    </el-dialog>

    <!-- 从解析接口导入对话框 -->
    <el-dialog
      title="从解析接口导入"
      :visible.sync="showParseDialog"
      width="70%"
      :close-on-click-modal="false">
      <div>
        <el-alert
          title="输入格式：每行一个商品，格式为：京东短链接 + Tab/空格 + 到手价"
          type="info"
          :closable="false"
          style="margin-bottom: 20px;">
          <div slot="default">
            <p>示例：</p>
            <pre style="background: #f5f7fa; padding: 10px; border-radius: 4px; margin-top: 10px;">https://u.jd.com/W17zHk2	199
https://u.jd.com/W17zcSF	349</pre>
          </div>
        </el-alert>
        
        <el-input
          v-model="parseText"
          type="textarea"
          :rows="10"
          placeholder="请输入商品链接和价格，每行一个..."
          style="margin-bottom: 20px;">
        </el-input>
        
        <div slot="footer" class="dialog-footer">
          <el-button @click="showParseDialog = false">取消</el-button>
          <el-button 
            type="primary" 
            @click="handleCallParse"
            :loading="parsing">
            解析
          </el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { extractKeywords, generateContent, generateComplete } from '@/api/jarvis/socialMedia'
import { parseLineReport } from '@/api/jarvis/batchPublish'

export default {
  name: 'SocialMedia',
  data() {
    return {
      showHelp: false,
      
      // 表单数据
      form: {
        productImageUrl: '',
        productName: '',
        originalPrice: null,
        finalPrice: null,
        style: 'xhs'
      },
      
      // 结果数据
      result: {
        keywords: [],
        keywordsText: '',
        content: '',
        imageBase64: ''
      },
      
      // 加载状态
      generating: false,
      extractingKeywords: false,
      generatingContent: false,
      parsing: false,
      
      // 预览对话框
      previewDialogVisible: false,
      previewLargeImageUrl: '',
      
      // 解析对话框
      showParseDialog: false,
      parseText: ''
    }
  },
  mounted() {
    // 尝试从localStorage加载上次的数据
    this.loadFromStorage()
  },
  methods: {
    /** 一键生成全部 */
    async handleGenerateComplete() {
      // 验证表单
      if (!this.form.productName) {
        this.$message.warning('请输入商品名称')
        return
      }
      if (this.form.finalPrice === null || this.form.finalPrice <= 0) {
        this.$message.warning('请输入有效的到手价')
        return
      }
      
      this.generating = true
      try {
        const res = await generateComplete({
          productImageUrl: this.form.productImageUrl || undefined,
          productName: this.form.productName,
          originalPrice: this.form.originalPrice || undefined,
          finalPrice: this.form.finalPrice,
          style: this.form.style
        })
        
        if (res.code === 200 && res.data) {
          const data = res.data
          
          if (data.success) {
            this.result = {
              keywords: data.keywords || [],
              keywordsText: data.keywordsText || '',
              content: data.content || '',
              imageBase64: data.imageBase64 || ''
            }
            
            // 保存到localStorage
            this.saveToStorage()
            
            this.$message.success('生成成功！')
            
            // 滚动到结果区域
            this.$nextTick(() => {
              if (this.result.keywords && this.result.keywords.length > 0) {
                const keywordsSection = document.querySelector('.keywords-section')
                if (keywordsSection) {
                  keywordsSection.scrollIntoView({ behavior: 'smooth', block: 'start' })
                }
              }
            })
          } else {
            this.$message.error(data.error || '生成失败')
          }
        } else {
          this.$message.error(res.msg || '生成失败')
        }
      } catch (error) {
        console.error('生成失败', error)
        this.$message.error('生成失败：' + (error.message || '未知错误'))
      } finally {
        this.generating = false
      }
    },
    
    /** 提取关键词 */
    async handleExtractKeywords() {
      if (!this.form.productName) {
        this.$message.warning('请输入商品名称')
        return
      }
      
      this.extractingKeywords = true
      try {
        const res = await extractKeywords({
          productName: this.form.productName
        })
        
        if (res.code === 200 && res.data) {
          const data = res.data
          if (data.success) {
            this.result.keywords = data.keywords || []
            this.result.keywordsText = data.keywordsText || ''
            this.$message.success('关键词提取成功！')
          } else {
            this.$message.warning(data.error || '提取失败，已使用降级方案')
          }
        } else {
          this.$message.error(res.msg || '提取失败')
        }
      } catch (error) {
        console.error('提取关键词失败', error)
        this.$message.error('提取失败：' + (error.message || '未知错误'))
      } finally {
        this.extractingKeywords = false
      }
    },
    
    /** 生成文案 */
    async handleGenerateContent() {
      if (!this.form.productName) {
        this.$message.warning('请输入商品名称')
        return
      }
      
      this.generatingContent = true
      try {
        const res = await generateContent({
          productName: this.form.productName,
          originalPrice: this.form.originalPrice || undefined,
          finalPrice: this.form.finalPrice || undefined,
          keywords: this.result.keywordsText || undefined,
          style: this.form.style
        })
        
        if (res.code === 200 && res.data) {
          const data = res.data
          if (data.success) {
            this.result.content = data.content || ''
            this.$message.success('文案生成成功！')
          } else {
            this.$message.error(data.error || '生成失败')
          }
        } else {
          this.$message.error(res.msg || '生成失败')
        }
      } catch (error) {
        console.error('生成文案失败', error)
        this.$message.error('生成失败：' + (error.message || '未知错误'))
      } finally {
        this.generatingContent = false
      }
    },
    
    /** 重新生成文案 */
    async handleRegenerateContent() {
      await this.handleGenerateContent()
    },
    
    /** 复制文本 */
    handleCopyText(text) {
      if (!text) {
        this.$message.warning('没有可复制的内容')
        return
      }
      
      // 创建临时文本域
      const textarea = document.createElement('textarea')
      textarea.value = text
      textarea.style.position = 'fixed'
      textarea.style.opacity = '0'
      document.body.appendChild(textarea)
      textarea.select()
      
      try {
        document.execCommand('copy')
        this.$message.success('复制成功！')
      } catch (error) {
        // 降级方案
        textarea.select()
        try {
          document.execCommand('copy')
          this.$message.success('复制成功！')
        } catch (e) {
          this.$message.error('复制失败，请手动复制')
        }
      }
      
      document.body.removeChild(textarea)
    },
    
    /** 复制图片 */
    async handleCopyImage(base64) {
      try {
        const base64Data = base64.split(',')[1] || base64
        const byteCharacters = atob(base64Data)
        const byteNumbers = new Array(byteCharacters.length)
        for (let i = 0; i < byteCharacters.length; i++) {
          byteNumbers[i] = byteCharacters.charCodeAt(i)
        }
        const byteArray = new Uint8Array(byteNumbers)
        const blob = new Blob([byteArray], { type: 'image/jpeg' })
        
        if (navigator.clipboard && navigator.clipboard.write) {
          await navigator.clipboard.write([
            new ClipboardItem({ 'image/jpeg': blob })
          ])
          this.$message.success('图片已复制到剪贴板')
        } else {
          this.$message.info('浏览器不支持直接复制图片，请使用下载功能')
        }
      } catch (error) {
        console.error('复制失败', error)
        this.$message.error('复制失败')
      }
    },
    
    /** 下载图片 */
    handleDownloadImage(base64, filename) {
      try {
        const base64Data = base64.split(',')[1] || base64
        const byteCharacters = atob(base64Data)
        const byteNumbers = new Array(byteCharacters.length)
        for (let i = 0; i < byteCharacters.length; i++) {
          byteNumbers[i] = byteCharacters.charCodeAt(i)
        }
        const byteArray = new Uint8Array(byteNumbers)
        const blob = new Blob([byteArray], { type: 'image/jpeg' })
        
        const url = URL.createObjectURL(blob)
        const link = document.createElement('a')
        link.href = url
        link.download = filename
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
        URL.revokeObjectURL(url)
        
        this.$message.success('下载成功')
      } catch (error) {
        console.error('下载失败', error)
        this.$message.error('下载失败')
      }
    },
    
    /** 复制全部 */
    handleCopyAll() {
      let allText = ''
      
      if (this.result.keywordsText) {
        allText += '关键词：' + this.result.keywordsText + '\n\n'
      }
      
      if (this.result.content) {
        allText += this.result.content + '\n\n'
      }
      
      if (this.result.imageBase64) {
        allText += '[营销图片已生成，请查看图片]'
      }
      
      if (allText) {
        this.handleCopyText(allText)
      } else {
        this.$message.warning('没有可复制的内容')
      }
    },
    
    /** 下载全部 */
    handleDownloadAll() {
      if (this.result.imageBase64) {
        this.handleDownloadImage(
          this.result.imageBase64,
          `营销图片_${this.form.productName || '商品'}_${Date.now()}.jpg`
        )
      } else {
        this.$message.warning('没有可下载的图片')
      }
    },
    
    /** 清空结果 */
    handleClearResult() {
      this.$confirm('确定要清空所有结果吗？', '提示', {
        type: 'warning'
      }).then(() => {
        this.result = {
          keywords: [],
          keywordsText: '',
          content: '',
          imageBase64: ''
        }
        this.$message.success('已清空')
      }).catch(() => {})
    },
    
    /** 预览图片 */
    handlePreviewImage(url) {
      if (!url) return
      this.previewLargeImageUrl = url
      this.previewDialogVisible = true
    },
    
    /** 预览大图 */
    handlePreviewLargeImage(base64) {
      this.previewLargeImageUrl = base64
      this.previewDialogVisible = true
    },
    
    /** 关闭预览 */
    handleClosePreview() {
      this.previewDialogVisible = false
      this.previewLargeImageUrl = ''
    },
    
    /** 重置表单 */
    handleReset() {
      this.form = {
        productImageUrl: '',
        productName: '',
        originalPrice: null,
        finalPrice: null,
        style: 'xhs'
      }
      this.result = {
        keywords: [],
        keywordsText: '',
        content: '',
        imageBase64: ''
      }
    },
    
    /** 调用解析接口 */
    async handleCallParse() {
      if (!this.parseText || !this.parseText.trim()) {
        this.$message.warning('请输入要解析的内容')
        return
      }
      
      this.parsing = true
      try {
        const res = await parseLineReport({
          message: this.parseText.trim()
        })
        
        if (res.code === 200 && res.data && Array.isArray(res.data) && res.data.length > 0) {
          // 导入第一个商品
          const item = res.data[0]
          this.form = {
            productImageUrl: item.productImage || '',
            productName: item.productName || '',
            originalPrice: item.price || null,
            finalPrice: null // 需要手动输入
          }
          
          // 尝试从输入文本中提取价格
          const lines = this.parseText.trim().split('\n')
          lines.forEach(line => {
            const parts = line.trim().split(/\s+/)
            if (parts.length >= 2 && parts[0].includes(item._raw?.originalUrl || '')) {
              const price = parseFloat(parts[1])
              if (!isNaN(price)) {
                this.form.finalPrice = price
              }
            }
          })
          
          this.$message.success('导入成功！请检查信息后生成内容')
          this.showParseDialog = false
        } else {
          this.$message.error(res.msg || '解析失败')
        }
      } catch (error) {
        console.error('调用解析接口失败', error)
        this.$message.error('解析失败：' + (error.message || '未知错误'))
      } finally {
        this.parsing = false
      }
    },
    
    /** 保存到localStorage */
    saveToStorage() {
      try {
        localStorage.setItem('socialMediaForm', JSON.stringify(this.form))
        localStorage.setItem('socialMediaResult', JSON.stringify(this.result))
      } catch (error) {
        console.error('保存失败', error)
      }
    },
    
    /** 从localStorage加载 */
    loadFromStorage() {
      try {
        const formStr = localStorage.getItem('socialMediaForm')
        const resultStr = localStorage.getItem('socialMediaResult')
        
        if (formStr) {
          this.form = { ...this.form, ...JSON.parse(formStr) }
        }
        if (resultStr) {
          this.result = { ...this.result, ...JSON.parse(resultStr) }
        }
      } catch (error) {
        console.error('加载失败', error)
      }
    }
  }
}
</script>

<style scoped>
.social-media-container {
  padding: 20px;
}

.card-title {
  font-size: 18px;
  font-weight: bold;
}

.help-section {
  margin-bottom: 20px;
}

.help-section ul,
.help-section ol {
  margin: 10px 0;
  padding-left: 20px;
}

.help-section li {
  margin: 5px 0;
}

.input-section {
  margin-top: 20px;
}

.main-form {
  max-width: 100%;
}

.keywords-section,
.content-section,
.image-section,
.quick-actions-section {
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid #EBEEF5;
}

.keywords-display {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 15px;
  background: #f5f7fa;
  border-radius: 4px;
}

.content-display {
  position: relative;
}

.content-textarea {
  font-size: 14px;
  line-height: 1.6;
}

.content-actions {
  margin-top: 10px;
  text-align: right;
}

.image-display {
  display: flex;
  justify-content: center;
  padding: 20px;
  background: #f5f7fa;
  border-radius: 4px;
}

.image-wrapper {
  position: relative;
  max-width: 500px;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.result-image {
  width: 100%;
  height: auto;
  display: block;
  cursor: pointer;
  transition: transform 0.3s;
}

.result-image:hover {
  transform: scale(1.02);
}

.image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s;
}

.image-wrapper:hover .image-overlay {
  opacity: 1;
}

.quick-actions {
  text-align: center;
  padding: 20px;
}

.quick-actions .el-button {
  margin: 0 10px;
}

.large-preview {
  text-align: center;
  max-height: 70vh;
  overflow: auto;
}

.dialog-footer {
  text-align: right;
  margin-top: 20px;
}
</style>

