<template>
  <div>
    <list-layout>
      <!-- 搜索区域 -->
      <template #search>
        <mobile-search-form
          :model="queryParams"
          @search="handleQuery"
          @reset="resetQuery"
        >
          <template #form="{ expanded }">
            <el-form 
              :model="queryParams" 
              :inline="true"
              label-width="100px"
            >
              <el-form-item label="礼金Key">
                <el-input v-model="queryParams.giftCouponKey" placeholder="礼金批次ID" clearable size="small" @keyup.enter.native="handleQuery" />
              </el-form-item>
              <el-form-item label="商品SKU">
                <el-input v-model="queryParams.skuId" placeholder="商品SKU ID" clearable size="small" @keyup.enter.native="handleQuery" />
              </el-form-item>
              <el-form-item label="商品名称">
                <el-input v-model="queryParams.skuName" placeholder="商品名称" clearable size="small" @keyup.enter.native="handleQuery" />
              </el-form-item>
              <el-form-item label="类型">
                <el-select v-model="queryParams.owner" placeholder="请选择" clearable size="small">
                  <el-option label="自营" value="g" />
                  <el-option label="POP" value="pop" />
                </el-select>
              </el-form-item>
              <el-form-item label="过期状态">
                <el-select v-model="queryParams.isExpired" placeholder="请选择" clearable size="small">
                  <el-option label="未过期" :value="0" />
                  <el-option label="已过期" :value="1" />
                </el-select>
              </el-form-item>
              <el-form-item label="创建时间">
                <el-date-picker
                  v-model="dateRange"
                  type="daterange"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  value-format="yyyy-MM-dd"
                  size="small"
                  range-separator="至"
                  @change="handleDateRangeChange"
                />
              </el-form-item>
              <!-- 桌面端搜索按钮 -->
              <el-form-item v-if="!expanded">
                <el-button type="primary" size="small" icon="el-icon-search" @click="handleQuery">搜索</el-button>
                <el-button size="small" icon="el-icon-refresh" @click="resetQuery">重置</el-button>
                <el-button type="success" size="small" icon="el-icon-plus" @click="handleCreate">创建礼金</el-button>
                <el-button type="warning" size="small" icon="el-icon-download" @click="handleExport" v-hasPermi="['system:giftcoupon:export']">导出</el-button>
              </el-form-item>
            </el-form>
          </template>
        </mobile-search-form>
        
        <!-- 操作按钮区域（移动端单独显示） -->
        <div class="action-buttons-section mobile-only">
          <mobile-button-group
            :buttons="actionButtons"
            :primary-count="2"
          />
        </div>
        
        <!-- 桌面端按钮组 -->
        <div class="desktop-action-buttons desktop-only">
          <el-button type="success" size="small" icon="el-icon-plus" @click="handleCreate">创建礼金</el-button>
          <el-button type="warning" size="small" icon="el-icon-download" @click="handleExport" v-hasPermi="['system:giftcoupon:export']">导出</el-button>
        </div>
      </template>

      <!-- 统计信息卡片 -->
      <template #statistics>
        <el-row :gutter="20" style="margin-bottom: 20px;">
          <el-col :span="8">
            <el-card shadow="hover">
              <div style="text-align: center;">
                <div style="font-size: 24px; font-weight: bold; color: #409EFF;">{{ statistics.totalCount || 0 }}</div>
                <div style="color: #909399; margin-top: 8px;">礼金批次总数</div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card shadow="hover">
              <div style="text-align: center;">
                <div style="font-size: 24px; font-weight: bold; color: #67C23A;">{{ statistics.totalUseCount || 0 }}</div>
                <div style="color: #909399; margin-top: 8px;">总使用次数</div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card shadow="hover">
              <div style="text-align: center;">
                <div style="font-size: 24px; font-weight: bold; color: #E6A23C;">¥{{ formatMoney(statistics.totalOcsAmount || 0) }}</div>
                <div style="color: #909399; margin-top: 8px;">总分摊金额</div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </template>

      <!-- 表格区域 -->
      <template #table>
        <el-table :data="list" v-loading="loading" border stripe :default-sort="{prop: 'createTime', order: 'descending'}">
          <el-table-column label="礼金Key" prop="giftCouponKey" width="180" sortable>
            <template slot-scope="scope">
              <div>
                <span style="margin-right: 8px;">{{ scope.row.giftCouponKey }}</span>
                <el-button
                  type="text"
                  size="mini"
                  icon="el-icon-copy-document"
                  @click="copyToClipboard(scope.row.giftCouponKey)"
                  title="复制礼金Key"
                >
                  复制
                </el-button>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="商品SKU" prop="skuId" width="120" />
          <el-table-column label="商品名称" prop="skuName" min-width="200" show-overflow-tooltip />
          <el-table-column label="类型" prop="owner" width="80">
            <template slot-scope="scope">
              <el-tag :type="scope.row.owner === 'g' ? 'success' : 'warning'">
                {{ scope.row.owner === 'g' ? '自营' : 'POP' }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="使用次数" prop="useCount" width="100" sortable />
          <el-table-column label="总分摊金额" prop="totalOcsAmount" width="120" sortable>
            <template slot-scope="scope">
              ¥{{ formatMoney(scope.row.totalOcsAmount || 0) }}
            </template>
          </el-table-column>
          <el-table-column label="创建时间" prop="createTime" width="160" sortable>
            <template slot-scope="scope">{{ parseTime(scope.row.createTime) }}</template>
          </el-table-column>
          <el-table-column label="过期时间" prop="expireTime" width="160">
            <template slot-scope="scope">
              <span v-if="scope.row.expireTime">{{ parseTime(scope.row.expireTime) }}</span>
              <span v-else>-</span>
            </template>
          </el-table-column>
          <el-table-column label="过期状态" prop="isExpired" width="100">
            <template slot-scope="scope">
              <el-tag :type="scope.row.isExpired === 1 ? 'danger' : 'success'">
                {{ scope.row.isExpired === 1 ? '已过期' : '未过期' }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" fixed="right" width="120">
            <template slot-scope="scope">
              <el-button type="text" size="mini" @click="handleDetail(scope.row)">
                详情
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>

      <!-- 分页区域 -->
      <template #pagination>
        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </template>
    </list-layout>

    <!-- 创建礼金对话框 -->
    <el-dialog title="创建礼金" :visible.sync="createDialogVisible" width="500px" append-to-body>
      <el-form :model="createForm" :rules="createRules" ref="createForm" label-width="120px">
        <el-form-item label="商品链接/SKU" prop="materialUrl">
          <el-input 
            v-model="createForm.materialUrl" 
            placeholder="请输入商品链接或SKU ID，必须先点击查询按钮获取商品信息"
            @keyup.enter.native="queryProductInfo"
          >
            <el-button slot="append" icon="el-icon-search" @click="queryProductInfo" :loading="queryLoading">查询</el-button>
          </el-input>
          <div style="color: #E6A23C; font-size: 12px; margin-top: 5px;">
            <i class="el-icon-warning"></i> 
            <strong>重要：</strong>请先点击"查询"按钮获取商品信息（特别是SKU ID），然后再创建礼金。直接使用短链可能创建失败。
          </div>
        </el-form-item>
        <el-form-item label="商品名称" prop="skuName">
          <el-input v-model="createForm.skuName" placeholder="查询商品信息后自动填充" :disabled="true" />
        </el-form-item>
        <el-form-item label="商品类型" prop="owner">
          <el-input :value="createForm.owner === 'g' ? '自营' : (createForm.owner === 'pop' ? 'POP' : '未查询')" disabled>
            <template slot="prepend">
              <i :class="createForm.owner === 'g' ? 'el-icon-success' : (createForm.owner === 'pop' ? 'el-icon-warning' : 'el-icon-question')" 
                 :style="{color: createForm.owner === 'g' ? '#67C23A' : (createForm.owner === 'pop' ? '#409EFF' : '#909399')}"></i>
            </template>
          </el-input>
          <div style="color: #909399; font-size: 12px; margin-top: 5px;">查询商品信息后自动识别（自营/POP）</div>
        </el-form-item>
        <el-form-item label="礼金金额(元)" prop="amount">
          <el-input-number v-model="createForm.amount" :min="1" :max="50" :precision="2" :step="0.01" style="width: 100%" />
          <div style="color: #909399; font-size: 12px; margin-top: 5px;">范围：1-50元（参考JD项目要求）</div>
        </el-form-item>
        <el-form-item label="礼金数量" prop="quantity">
          <el-input-number v-model="createForm.quantity" :min="1" :max="100" style="width: 100%" />
          <div style="color: #909399; font-size: 12px; margin-top: 5px;">范围：1-100</div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="createDialogVisible = false">取 消</el-button>
        <el-button type="primary" :loading="createLoading" @click="submitCreate">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 详情对话框 -->
    <el-dialog title="礼金详情" :visible.sync="detailVisible" width="1000px" append-to-body>
      <div v-if="detailData && detailData.giftCoupon">
        <el-tabs v-model="activeDetailTab">
          <el-tab-pane label="基本信息" name="info">
            <el-descriptions :column="2" border style="margin-top: 20px;">
              <el-descriptions-item label="礼金Key" :span="2">
                <span style="margin-right: 10px;">{{ detailData.giftCoupon.giftCouponKey }}</span>
                <el-button type="text" size="mini" icon="el-icon-copy-document" @click="copyToClipboard(detailData.giftCoupon.giftCouponKey)">复制</el-button>
              </el-descriptions-item>
              <el-descriptions-item label="商品SKU">{{ detailData.giftCoupon.skuId }}</el-descriptions-item>
              <el-descriptions-item label="商品名称" :span="2">{{ detailData.giftCoupon.skuName }}</el-descriptions-item>
              <el-descriptions-item label="类型">
                <el-tag :type="detailData.giftCoupon.owner === 'g' ? 'success' : 'warning'">
                  {{ detailData.giftCoupon.owner === 'g' ? '自营' : 'POP' }}
                </el-tag>
              </el-descriptions-item>
              <el-descriptions-item label="使用次数">{{ detailData.giftCoupon.useCount }}</el-descriptions-item>
              <el-descriptions-item label="总分摊金额">¥{{ formatMoney(detailData.giftCoupon.totalOcsAmount || 0) }}</el-descriptions-item>
              <el-descriptions-item label="创建时间">{{ parseTime(detailData.giftCoupon.createTime) }}</el-descriptions-item>
              <el-descriptions-item label="过期时间">
                <span v-if="detailData.giftCoupon.expireTime">{{ parseTime(detailData.giftCoupon.expireTime) }}</span>
                <span v-else>-</span>
              </el-descriptions-item>
              <el-descriptions-item label="过期状态" :span="2">
                <el-tag :type="detailData.giftCoupon.isExpired === 1 ? 'danger' : 'success'">
                  {{ detailData.giftCoupon.isExpired === 1 ? '已过期' : '未过期' }}
                </el-tag>
              </el-descriptions-item>
            </el-descriptions>
          </el-tab-pane>
          <el-tab-pane label="关联订单" name="orders">
            <el-table :data="detailData.orders || []" border style="margin-top: 20px;" max-height="400">
              <el-table-column label="订单号" prop="orderId" width="200" />
              <el-table-column label="商品名称" prop="skuName" min-width="200" show-overflow-tooltip />
              <el-table-column label="商品SKU" prop="skuId" width="120" />
              <el-table-column label="订单金额" prop="price" width="100">
                <template slot-scope="scope">¥{{ formatMoney(scope.row.price || 0) }}</template>
              </el-table-column>
              <el-table-column label="礼金分摊" prop="giftCouponOcsAmount" width="100">
                <template slot-scope="scope">¥{{ formatMoney(scope.row.giftCouponOcsAmount || 0) }}</template>
              </el-table-column>
              <el-table-column label="下单时间" prop="orderTime" width="160">
                <template slot-scope="scope">{{ parseTime(scope.row.orderTime) }}</template>
              </el-table-column>
              <el-table-column label="短链" width="200">
                <template slot-scope="scope">
                  <div v-if="scope.row.positionId">
                    <a :href="getShortUrl(scope.row.positionId)" target="_blank" style="margin-right: 8px;">查看短链</a>
                    <el-button type="text" size="mini" icon="el-icon-copy-document" @click="copyToClipboard(getShortUrl(scope.row.positionId))">复制</el-button>
                  </div>
                  <span v-else>-</span>
                </template>
              </el-table-column>
            </el-table>
            <div v-if="!detailData.orders || detailData.orders.length === 0" style="text-align: center; padding: 40px; color: #909399;">
              暂无关联订单
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="detailVisible = false">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listGiftCoupons, getGiftCoupon, getGiftCouponStatistics, exportGiftCoupons } from '@/api/system/giftcoupon'
import { createGiftCoupon, transferWithGift, generatePromotionContent } from '@/api/system/jdorder'
import { mapGetters } from 'vuex'
import ListLayout from '@/components/ListLayout'
import MobileSearchForm from '@/components/MobileSearchForm'
import MobileButtonGroup from '@/components/MobileButtonGroup'
import { parseTime } from '@/utils/ruoyi'

export default {
  name: 'GiftCoupon',
  components: {
    ListLayout,
    MobileSearchForm,
    MobileButtonGroup
  },
  data() {
    return {
      loading: false,
      list: [],
      total: 0,
      dateRange: [],
      queryParams: {
        pageNum: 1,
        pageSize: 50,
        giftCouponKey: undefined,
        skuId: undefined,
        skuName: undefined,
        owner: undefined,
        isExpired: undefined,
        beginTime: null,
        endTime: null
      },
      statistics: {
        totalCount: 0,
        totalUseCount: 0,
        totalOcsAmount: 0
      },
      detailVisible: false,
      detailData: null,
      activeDetailTab: 'info',
      createDialogVisible: false,
      createLoading: false,
      createForm: {
        materialUrl: '',
        skuName: '',
        owner: 'g',
        amount: 5,  // 默认5元
        quantity: 10,  // 默认10
        queryResult: null  // 保存查询到的商品信息，包含materialUrl等
      },
      queryLoading: false,  // 查询商品信息加载状态
      createRules: {
        materialUrl: [{ required: true, message: '请输入商品链接或SKU', trigger: 'blur' }],
        amount: [{ required: true, message: '请输入礼金金额', trigger: 'blur' }],
        quantity: [{ required: true, message: '请输入礼金数量', trigger: 'blur' }]
      }
    }
  },
  created() {
    this.getList()
    this.loadStatistics()
  },
  methods: {
    /** 查询列表 */
    getList() {
      this.loading = true
      listGiftCoupons(this.queryParams).then(res => {
        this.list = (res.rows || res.data || [])
        this.total = res.total || 0
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    /** 加载统计信息 */
    loadStatistics() {
      const params = { ...this.queryParams }
      // 统计信息不需要分页参数
      delete params.pageNum
      delete params.pageSize
      getGiftCouponStatistics(params).then(res => {
        if (res.code === 200 && res.data) {
          this.statistics = {
            totalCount: res.data.useCount || 0,
            totalUseCount: res.data.useCount || 0,
            totalOcsAmount: res.data.totalOcsAmount || 0
          }
        }
      })
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
      this.loadStatistics()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = []
      this.queryParams = {
        pageNum: 1,
        pageSize: 50,
        giftCouponKey: undefined,
        skuId: undefined,
        skuName: undefined,
        owner: undefined,
        isExpired: undefined,
        beginTime: null,
        endTime: null
      }
      this.handleQuery()
    },
    /** 处理日期范围变化 */
    handleDateRangeChange(val) {
      if (val && val.length === 2) {
        this.queryParams.beginTime = val[0]
        this.queryParams.endTime = val[1]
      } else {
        this.queryParams.beginTime = null
        this.queryParams.endTime = null
      }
    },
    /** 导出按钮操作 */
    handleExport() {
      const params = { ...this.queryParams }
      this.$modal.confirm('是否确认导出所有礼金数据项？').then(() => {
        this.exportLoading = true
        return exportGiftCoupons(params)
      }).then(response => {
        this.$download.excel(response, '礼金数据.xlsx')
        this.exportLoading = false
      }).catch(() => {
        this.exportLoading = false
      })
    },
    /** 创建礼金 */
    handleCreate() {
      this.createForm = {
        materialUrl: '',
        skuName: '',
        owner: 'g',
        amount: 5,  // 默认5元
        quantity: 10,  // 默认10
        queryResult: null  // 查询结果
      }
      this.createDialogVisible = true
    },
    /** 查询商品信息（参考xbmessage中的流程） */
    async queryProductInfo() {
      const materialUrl = this.createForm.materialUrl.trim()
      if (!materialUrl) {
        this.$modal.msgWarning('请输入商品链接或SKU ID')
        return
      }
      
      this.queryLoading = true
      try {
        // 调用转链接口查询商品信息
        const res = await generatePromotionContent({ promotionContent: materialUrl })
        console.log('查询商品信息返回：', res)
        
        if (res && res.code === 200) {
          let productInfo = null
          // 解析返回结果（参考xbmessage中的处理）
          try {
            // 优先使用data，如果没有则使用msg（根据实际返回格式）
            let resultStr = res.data || res.msg
            
            // 如果是字符串，需要解析
            let parsed = null
            if (typeof resultStr === 'string') {
              parsed = JSON.parse(resultStr)
            } else {
              parsed = resultStr
            }
            
            console.log('解析后的数据：', parsed)
            
            // 提取第一个商品信息（支持多种返回格式）
            if (Array.isArray(parsed) && parsed.length > 0) {
              // 格式1：直接是数组
              productInfo = parsed[0]
            } else if (parsed && typeof parsed === 'object') {
              // 格式2：对象中包含list数组
              if (parsed.list && Array.isArray(parsed.list) && parsed.list.length > 0) {
                productInfo = parsed.list[0]
              } 
              // 格式3：对象中包含data数组
              else if (parsed.data && Array.isArray(parsed.data) && parsed.data.length > 0) {
                productInfo = parsed.data[0]
              }
              // 格式4：对象本身包含商品信息
              else if (parsed.materialUrl || parsed.owner || parsed.skuName) {
                productInfo = parsed
              }
            }
            
            console.log('提取的商品信息：', productInfo)
            
            if (productInfo) {
              // 保存完整的查询结果
              this.createForm.queryResult = productInfo
              
              // 自动填充商品信息
              this.createForm.skuName = productInfo.skuName || productInfo.title || productInfo.productName || productInfo.cleanSkuName || ''
              // owner字段：'p'表示POP，'g'表示自营，其他默认'g'
              const ownerValue = productInfo.owner || (productInfo.popId ? 'pop' : 'g') || 'g'
              this.createForm.owner = ownerValue === 'p' ? 'pop' : (ownerValue === 'pop' ? 'pop' : 'g')
              
              // 保存查询到的materialUrl、skuId或spuid，用于后续创建礼金
              // 注意：spuid是SPU ID（商品ID），skuId是SKU ID（库存单位ID），不是同一个东西
              if (productInfo.materialUrl) {
                // 保存materialUrl到查询结果中，创建礼金时使用
                console.log('查询到的materialUrl：', productInfo.materialUrl)
              }
              if (productInfo.skuId || productInfo.skuid) {
                // 保存skuId（SKU ID），用于创建礼金
                const skuIdValue = productInfo.skuId || productInfo.skuid
                console.log('查询到的skuId（SKU ID）：', skuIdValue)
              }
              if (productInfo.spuid) {
                // spuid是SPU ID（商品ID），不是SKU ID
                console.log('查询到的spuid（SPU ID，不是SKU ID）：', productInfo.spuid)
              }
              
              this.$modal.msgSuccess('商品信息查询成功：' + (this.createForm.owner === 'g' ? '自营' : 'POP'))
            } else {
              console.warn('未找到商品信息，完整返回：', parsed)
              this.$modal.msgWarning('未找到商品信息，请检查链接是否正确')
            }
          } catch (e) {
            console.error('解析商品信息失败', e, '原始数据：', res)
            this.$modal.msgWarning('返回数据格式异常：' + e.message + '，请手动填写商品信息')
          }
        } else {
          this.$modal.msgError('查询商品信息失败：' + (res.msg || '未知错误'))
        }
      } catch (e) {
        console.error('查询商品信息异常', e)
        this.$modal.msgError('查询失败：' + (e.message || '未知错误'))
      } finally {
        this.queryLoading = false
      }
    },
    /** 从链接中提取SKU ID */
    extractSkuIdFromUrl(url) {
      if (!url) return null
      // 如果是纯数字，直接返回
      if (/^\d+$/.test(url.trim())) {
        return url.trim()
      }
      // 从URL中提取SKU ID
      // 京东链接格式：https://item.jd.com/100012043978.html 或 jd.com/123456.html
      const skuMatch = url.match(/(?:item\.jd\.com|jd\.com)\/(\d+)/i)
      if (skuMatch && skuMatch[1]) {
        return skuMatch[1]
      }
      // 如果包含skuId参数
      const paramMatch = url.match(/[?&]skuId=(\d+)/i)
      if (paramMatch && paramMatch[1]) {
        return paramMatch[1]
      }
      // 无法提取，返回原链接（让后端处理）
      return url.trim()
    },
    /** 提交创建礼金 */
    async submitCreate() {
      this.$refs.createForm.validate(async (valid) => {
        if (!valid) return
        
        // 金额校验：1-50元（参考JD项目中的isValidAmount方法）
        if (!this.createForm.amount || this.createForm.amount < 1 || this.createForm.amount > 50) {
          this.$modal.msgError('礼金金额必须在1-50元之间')
          return
        }
        if (!this.createForm.quantity || this.createForm.quantity < 1 || this.createForm.quantity > 100) {
          this.$modal.msgError('礼金数量必须在1-100之间')
          return
        }
        
        // 提取SKU ID或使用materialUrl
        const materialUrl = this.createForm.materialUrl.trim()
        if (!materialUrl) {
          this.$modal.msgError('请输入商品链接或SKU ID')
          return
        }
        
        const skuId = this.extractSkuIdFromUrl(materialUrl)
        const isUrl = skuId !== materialUrl
        
        this.createLoading = true
        try {
          // 构建请求参数（参考JD项目的参数格式）
          const params = {
            amount: this.createForm.amount,
            quantity: this.createForm.quantity,
            owner: this.createForm.owner || 'g',
            skuName: this.createForm.skuName || ''
          }
          
          // 根据提取结果设置skuId或materialUrl
          // 参考京东API文档：skuMaterialId支持SKU ID、商品落地页地址（如https://item.jd.com/11144230.html）或materialUrl
          // 优先使用查询商品信息时获取的数据
          if (this.createForm.queryResult) {
            // 如果查询过商品信息，根据商品类型选择优先使用materialUrl或spuid
            const queryResult = this.createForm.queryResult
            const isPop = this.createForm.owner === 'pop'
            
            // POP商品：优先使用materialUrl（jingfen链接），如果没有则使用SKU ID或落地页地址
            // 自营商品：优先使用skuId（SKU ID），如果没有则使用materialUrl
            // 注意：spuid是SPU ID（商品ID），skuId是SKU ID（库存单位ID），创建礼金应该用skuId而不是spuid
            if (isPop) {
              // POP商品：优先使用materialUrl
              if (queryResult.materialUrl) {
                params.materialUrl = queryResult.materialUrl
                console.log('POP商品，使用查询到的materialUrl（jingfen链接）：', queryResult.materialUrl)
              } else if ((queryResult.skuId || queryResult.skuid) && /^\d+$/.test(String(queryResult.skuId || queryResult.skuid))) {
                // 如果没有materialUrl，使用SKU ID（京东API支持）
                const skuIdValue = queryResult.skuId || queryResult.skuid
                params.skuId = String(skuIdValue)
                console.log('POP商品，materialUrl不可用，使用查询到的skuId（SKU ID）：', skuIdValue)
              } else {
                // 降级：从用户输入的URL中提取SKU ID或使用完整URL
                if (isUrl && skuId && /^\d+$/.test(skuId)) {
                  // 可以使用SKU ID
                  params.skuId = skuId
                  console.log('POP商品，使用从URL提取的SKU ID：', skuId)
                } else if (isUrl && materialUrl.includes('item.jd.com')) {
                  // 商品落地页地址（https://item.jd.com/11144230.html）也可以
                  params.materialUrl = materialUrl
                  console.log('POP商品，使用商品落地页地址：', materialUrl)
                } else if (isUrl) {
                  params.materialUrl = materialUrl
                  console.log('POP商品，使用用户输入的URL：', materialUrl)
                } else if (/^\d+$/.test(skuId)) {
                  params.skuId = skuId
                  console.log('POP商品，使用纯数字SKU ID：', skuId)
                }
              }
            } else {
              // 自营商品：优先使用skuId（SKU ID），注意不是spuid
              const skuIdValue = queryResult.skuId || queryResult.skuid
              if (skuIdValue && /^\d+$/.test(String(skuIdValue))) {
                params.skuId = String(skuIdValue)
                console.log('自营商品，使用查询到的skuId（SKU ID）：', skuIdValue)
              } else if (queryResult.materialUrl) {
                // 如果没有spuid，使用materialUrl
                params.materialUrl = queryResult.materialUrl
                console.log('自营商品，spuid不可用，使用materialUrl：', queryResult.materialUrl)
              } else {
                // 降级：从用户输入的URL中提取SKU ID
                if (isUrl && skuId && /^\d+$/.test(skuId)) {
                  params.skuId = skuId
                  console.log('自营商品，使用从URL提取的SKU ID：', skuId)
                } else if (isUrl) {
                  params.materialUrl = materialUrl
                  console.log('自营商品，使用用户输入的URL：', materialUrl)
                } else if (/^\d+$/.test(skuId)) {
                  params.skuId = skuId
                  console.log('自营商品，使用纯数字SKU ID：', skuId)
                }
              }
            }
          } else {
            // 没有查询过商品信息，使用用户输入的
            if (isUrl && skuId && /^\d+$/.test(skuId)) {
              // 如果从URL中提取到了纯数字SKU ID，优先使用skuId
              params.skuId = skuId
              console.log('使用从URL提取的SKU ID：', skuId)
            } else if (isUrl) {
              // 如果提取不到纯数字SKU ID，使用原始URL作为materialUrl
              // 注意：短链（u.jd.com）可能无法用于创建礼金
              params.materialUrl = materialUrl
              console.log('使用用户输入的URL（可能是短链，可能不工作）：', materialUrl)
            } else if (/^\d+$/.test(skuId)) {
              // 纯数字，作为SKU ID
              params.skuId = skuId
              console.log('使用纯数字SKU ID：', skuId)
            } else {
              // 其他情况，作为materialUrl
              params.materialUrl = materialUrl
              console.log('使用其他格式的URL：', materialUrl)
            }
          }
          
          // 确保必须有skuId或materialUrl之一
          if (!params.skuId && !params.materialUrl) {
            this.$modal.msgError('无法确定商品标识，请先查询商品信息或输入有效的SKU ID')
            this.createLoading = false
            return
          }
          
          // 如果使用的是短链（u.jd.com），提示必须查询
          if (params.materialUrl && params.materialUrl.includes('u.jd.com')) {
            this.$modal.msgError('不能直接使用短链创建礼金！请先点击"查询"按钮获取商品信息（SKU ID或jingfen链接），然后再创建。')
            this.createLoading = false
            return
          }
          
          // 如果没有查询过，且使用的是普通链接而不是SKU ID，也提示
          if (!this.createForm.queryResult && params.materialUrl && !params.skuId) {
            const confirmMsg = '检测到您未查询商品信息。建议先点击"查询"按钮获取准确的商品信息（SKU ID），这样可以提高创建成功率。是否继续使用当前链接创建？'
            try {
              await this.$confirm(confirmMsg, '提示', {
                confirmButtonText: '继续创建',
                cancelButtonText: '取消',
                type: 'warning'
              })
            } catch {
              this.createLoading = false
              return
            }
          }
          
          // 调用创建礼金接口
          console.log('创建礼金请求参数：', params)
          const res = await createGiftCoupon(params)
          console.log('创建礼金返回结果：', res)
          
          // 检查返回结果
          if (!res) {
            this.$modal.msgError('接口返回为空，请检查网络连接')
            return
          }
          
          // 判断成功条件：code === 200 且 giftCouponKey 不为null
          // 注意：即使code是200，如果giftCouponKey为null，也应该视为失败
          const hasGiftKey = res.data && 
            (res.data.giftCouponKey !== null && res.data.giftCouponKey !== undefined && res.data.giftCouponKey !== '') ||
            (res.data.giftKey !== null && res.data.giftKey !== undefined && res.data.giftKey !== '')
          
          const isSuccess = res.code === 200 && hasGiftKey
          
          if (isSuccess) {
            // 解析返回的giftCouponKey（参考xbmessage中的处理方式）
            let giftKey = null
            
            // 先打印data的详细信息
            console.log('返回的data类型：', typeof res.data, 'data内容：', res.data)
            
            if (typeof res.data === 'string') {
              // 如果是字符串，尝试解析
              try {
                const parsed = JSON.parse(res.data)
                console.log('data字符串解析后：', parsed)
                giftKey = parsed.giftCouponKey || parsed.giftKey
              } catch (e) {
                // 如果解析失败，可能就是字符串本身
                giftKey = res.data
              }
            } else if (res.data && typeof res.data === 'object') {
              // 尝试多种可能的字段名（优先顺序很重要）
              // 1. 直接获取 giftCouponKey（但如果是null则不使用）
              if (res.data.giftCouponKey !== null && res.data.giftCouponKey !== undefined && res.data.giftCouponKey !== '') {
                giftKey = res.data.giftCouponKey
              }
              // 2. 获取 giftKey（但如果是null则不使用）
              else if (res.data.giftKey !== null && res.data.giftKey !== undefined && res.data.giftKey !== '') {
                giftKey = res.data.giftKey
              }
              // 3. 如果data里面还有data对象（嵌套情况）
              else if (res.data.data && typeof res.data.data === 'object') {
                if (res.data.data.giftCouponKey !== null && res.data.data.giftCouponKey !== undefined && res.data.data.giftCouponKey !== '') {
                  giftKey = res.data.data.giftCouponKey
                } else if (res.data.data.giftKey !== null && res.data.data.giftKey !== undefined && res.data.data.giftKey !== '') {
                  giftKey = res.data.data.giftKey
                }
              }
              // 4. 如果data是数组，取第一个
              else if (Array.isArray(res.data) && res.data.length > 0) {
                const first = res.data[0]
                if (first.giftCouponKey !== null && first.giftCouponKey !== undefined && first.giftCouponKey !== '') {
                  giftKey = first.giftCouponKey
                } else if (first.giftKey !== null && first.giftKey !== undefined && first.giftKey !== '') {
                  giftKey = first.giftKey
                }
              }
            }
            
            console.log('解析到的礼金Key：', giftKey, '完整data结构：', JSON.stringify(res.data, null, 2))
            
            // 如果giftCouponKey是null，说明创建可能失败了
            if (res.data && res.data.giftCouponKey === null) {
              console.error('礼金Key为null，创建可能失败。完整返回：', JSON.stringify(res, null, 2))
            }
            
            if (giftKey) {
              // 可选：自动生成短链（参考JD项目的完整流程）
              try {
                const transferParams = {}
                // 优先使用SKU ID作为materialUrl
                if (skuId && isUrl) {
                  transferParams.materialUrl = skuId
                } else {
                  transferParams.materialUrl = materialUrl
                }
                transferParams.giftCouponKey = giftKey
                
                console.log('转链请求参数：', transferParams)
                const tf = await transferWithGift(transferParams)
                console.log('转链返回结果：', tf)
                
                if (tf && tf.code === 200) {
                  let shortUrl = ''
                  if (typeof tf.data === 'string') {
                    shortUrl = tf.data
                  } else if (tf.data && tf.data.shortURL) {
                    shortUrl = tf.data.shortURL
                  } else if (tf.data && typeof tf.data === 'object') {
                    // 尝试其他可能的字段
                    shortUrl = tf.data.url || tf.data.link || ''
                  }
                  
                  if (shortUrl) {
                    this.$modal.msgSuccess('礼金创建成功！短链：' + shortUrl)
                    // 复制短链到剪贴板
                    this.copyToClipboard(shortUrl)
                  } else {
                    this.$modal.msgSuccess('礼金创建成功！礼金Key：' + giftKey)
                  }
                } else {
                  this.$modal.msgSuccess('礼金创建成功！礼金Key：' + giftKey)
                }
              } catch (e) {
                console.error('生成短链失败', e)
                this.$modal.msgSuccess('礼金创建成功！礼金Key：' + giftKey + '（短链生成失败）')
              }
            } else {
              // 没有礼金Key，但接口返回成功
              console.warn('未找到礼金Key，完整返回：', res)
              console.warn('data的完整内容：', JSON.stringify(res.data, null, 2))
              
              // 检查是否是null的情况
              if (res.data && res.data.giftCouponKey === null) {
                this.$modal.msgError('礼金创建失败：返回的礼金Key为null。可能是商品链接不正确、商品不支持创建礼金，或内部服务异常。请检查商品链接或稍后重试。')
              } else {
                // 其他情况
                this.$modal.msgWarning('礼金创建完成，但未在返回数据中找到礼金Key。请查看控制台日志或联系技术支持。')
              }
              
              // 即使失败也刷新列表（可能之前创建的会显示）
              setTimeout(() => {
                this.getList()
                this.loadStatistics()
              }, 500)
              return  // 不关闭对话框，让用户知道出问题了
            }
            
            // 关闭对话框并刷新
            this.createDialogVisible = false
            // 延迟刷新，确保用户能看到提示
            setTimeout(() => {
              this.getList()
              this.loadStatistics()
            }, 500)
          } else {
            // 错误处理 - 更详细的错误信息
            console.error('创建礼金失败，返回：', res)
            let errorMsg = '创建失败'
            
            // 优先显示后端返回的错误信息
            if (res.msg) {
              errorMsg = res.msg
            } else if (res.data && res.data.msg) {
              errorMsg = res.data.msg
            } 
            // 如果是code:200但giftCouponKey为null的情况
            else if (res.code === 200 && res.data && (res.data.giftCouponKey === null || res.data.giftCouponKey === undefined)) {
              // 优先使用后端返回的错误信息
              if (res.data.msg) {
                errorMsg = res.data.msg
              } else {
                errorMsg = '礼金创建失败：返回的礼金Key为null。可能的原因：\n1. 商品不支持创建礼金\n2. 商品类型（自营/POP）判断错误（当前为：' + this.createForm.owner + '）\n3. 京东API调用失败\n4. 商品已下架或不存在\n5. SKU ID或商品链接不正确\n\n请检查：\n- 商品链接是否正确\n- 商品类型是否匹配（查询到的owner是否正确）\n- 查看JD项目日志获取详细错误信息\n- 尝试重新查询商品信息'
              }
            }
            // 其他错误情况
            else if (res.message) {
              errorMsg = res.message
            } else if (typeof res === 'string') {
              errorMsg = res
            }
            
            this.$modal.msgError('创建失败：' + errorMsg)
          }
        } catch (e) {
          console.error('创建礼金异常', e)
          let errorMsg = '未知错误'
          if (e.response && e.response.data) {
            errorMsg = e.response.data.msg || e.response.data.message || JSON.stringify(e.response.data)
          } else if (e.message) {
            errorMsg = e.message
          }
          this.$modal.msgError('创建失败：' + errorMsg)
        } finally {
          this.createLoading = false
        }
      })
    },
    /** 查看详情 */
    async handleDetail(row) {
      this.activeDetailTab = 'info'
      this.detailVisible = true
      try {
        const res = await getGiftCoupon(row.giftCouponKey)
        if (res && res.code === 200) {
          if (res.data.giftCoupon) {
            this.detailData = res.data
          } else {
            // 兼容直接返回GiftCoupon对象的情况
            this.detailData = {
              giftCoupon: res.data,
              orders: []
            }
          }
        } else {
          this.$modal.msgError('获取详情失败')
          this.detailVisible = false
        }
      } catch (e) {
        this.$modal.msgError('获取详情失败')
        this.detailVisible = false
      }
    },
    /** 生成短链URL */
    getShortUrl(positionId) {
      // 根据positionId生成短链，这里需要根据实际情况调整
      if (!positionId) return ''
      return `https://u.jd.com/${positionId}`
    },
    /** 复制到剪贴板 */
    copyToClipboard(text) {
      if (navigator.clipboard && navigator.clipboard.writeText) {
        navigator.clipboard.writeText(text).then(() => {
          this.$modal.msgSuccess('复制成功')
        }).catch(() => {
          this.fallbackCopyToClipboard(text)
        })
      } else {
        this.fallbackCopyToClipboard(text)
      }
    },
    /** 降级复制方法 */
    fallbackCopyToClipboard(text) {
      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.$modal.msgSuccess('复制成功')
      } catch (err) {
        this.$modal.msgError('复制失败')
      }
      document.body.removeChild(textArea)
    },
    /** 格式化金额 */
    formatMoney(amount) {
      if (!amount) return '0.00'
      return Number(amount).toFixed(2)
    },
    /** 格式化时间 */
    parseTime
  }
}
</script>

<style scoped>
/* 操作按钮区域 */
.action-buttons-section {
  margin-top: 12px;
  margin-bottom: 12px;
}

/* 移动端和桌面端按钮组显示控制 */
@media (max-width: 768px) {
  .desktop-only {
    display: none !important;
  }
  
  .action-buttons-section.mobile-only {
    display: block;
  }
}

@media (min-width: 769px) {
  .mobile-only {
    display: none !important;
  }
  
  .desktop-action-buttons.desktop-only {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
  }
}

.desktop-action-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}
.el-card {
  cursor: pointer;
}
</style>

