ads_web/src/views/adManage/sb/campaigns/CreateCampaigns/component/FocusCreativity.vue

<template>
  <div class="customize-container">
    <el-card body-style="padding: 20px 80px 0 80px;">
      <div style="font-weight: 700; padding-bottom: 18px">
        <span style="color: #306cd7; font-size: 26px">|</span>
        <span style="font-size: 18px; padding-left: 5px">创意</span>
      </div>
      <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        :rules="rules"
        label-width="120px"
        class="demo-ruleForm"
        size="default"
        label-position="top"
        status-icon>
        <el-form-item label="广告名称" prop="name">
          <el-input v-model="ruleForm.name" style="width: 50%" />
        </el-form-item>
        <div style="display: flex; border: 1px solid #dddfe6; padding: 0 0 0 5px; margin-bottom: 20px" v-loading="createLoading">
          <div style="width: 50%; padding-left: 5px; border-right: 1px solid #dddfe6">
            <el-scrollbar height="700px">
              <el-collapse v-model="activeNames" @change="handleChange" style="border-top: none; border-bottom: none">
                <el-collapse-item name="1" style="padding-right: 10px">
                  <template #title> <span style="color: #e47470; margin-right: 4px">*</span>品牌名称和徽标</template>
                  <el-form-item prop="brandName">
                    <el-input v-model="ruleForm.brandName" placeholder="请输入品牌名称" style="padding: 0 0 5px 0"></el-input>
                  </el-form-item>

                  <el-upload
                    v-model:file-list="fileList"
                    :on-change="changeFile"
                    v-loading="upLoading"
                    action="#"
                    accept=".png, .jpg"
                    :limit="1"
                    list-type="picture-card"
                    :auto-upload="false">
                    <el-icon><Plus /></el-icon>
                    <template #file="{ file }">
                      <div>
                        <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
                        <span class="el-upload-list__item-actions">
                          <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                            <el-icon><zoom-in /></el-icon>
                          </span>
                          <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
                            <el-icon><Delete /></el-icon>
                          </span>
                        </span>
                      </div>
                    </template>
                    <template #tip>
                      <div style="margin-top: 10px">
                        <div style="display: flex; align-items: center; justify-content: space-between">
                          <span style="line-height: 17px; font-weight: 600; color: #1e2128">徽标规格</span>
                          <el-button type="primary" :icon="Picture" @click="openDialog" disabled="true">从素材库中选择</el-button>
                        </div>
                        <div class="introduce-item">1、图片大小: 400x400 像素或更大</div>
                        <div class="introduce-item">2、文件大小: 1MB 或更小</div>
                        <div class="introduce-item">3、文件格式: PNG 或 JPG</div>
                        <div class="introduce-item">
                          4、内容: 徽标必须填满图片或置于白色或透明背景上详细了解我们的徽标要求
                          <span style="margin-left: 25px; position: relative">
                            <el-icon size="14" style="position: absolute; left: -14px; top: 1px"><Link /></el-icon>
                            <el-link
                              type="primary"
                              :underline="false"
                              href="https://advertising.amazon.com/resources/ad-policy/sponsored-ads-policies#brandlogo"
                              target="_blank"
                              >查看要求</el-link
                            >
                          </span>
                        </div>
                      </div>
                    </template>
                  </el-upload>
                  <!-- 预览弹窗 -->
                  <el-dialog v-model="dialogVisible">
                    <img w-full :src="dialogImageUrl" alt="Preview Image" />
                  </el-dialog>
                </el-collapse-item>

                <el-collapse-item name="commodity" v-loading="commodityLoading" style="padding-right: 10px">
                  <template #title>编辑品牌旗舰店页面</template>
                  <div v-for="(storePage, index) in topStorePages" :key="index" style="margin-bottom: 10px; width: 85%">
                    <el-card shadow="hover" body-style="padding: 10px;">
                      <div style="margin-right: 8px; line-height: normal; display: flex; align-items: center">
                        <el-image class="img-box" :src="storePage.storePageLink" />
                        <div style="margin-left: 15px">
                          <span><span style="color: #6d7784">当前名称：</span>{{ storePage.storePageName }}</span>
                          <div style="margin-bottom: 5px"><span style="color: #6d7784">ASIN: </span>{{ storePage.asin }}</div>
                          <el-input v-model="storePage.inputName" style="width: 300px" placeholder="修改品牌页面名称"></el-input>
                        </div>
                        <div class="card-operation">
                          <el-button link type="primary" @click="changePicture(storePage.storePageUrl, index)" style="margin-bottom: 10px"
                            >更换图片</el-button
                          >
                          <el-button link type="primary" @click="changePage(storePage.storePageUrl, index)">更换页面</el-button>
                        </div>
                      </div>
                    </el-card>
                  </div>
                </el-collapse-item>
                <el-dialog v-model="commodityDialog" title="更换图片" width="50%">
                  <el-radio-group
                    v-loading="dialogLoading3"
                    v-model="selectedCommodity"
                    style="display: flex; flex-direction: column; align-content: flex-start; align-items: flex-start">
                    <div v-for="(item, index) in stock" :key="index">
                      <el-radio :label="item.asin" style="height: 80px; border-bottom: 1px solid #ccc">
                        <div style="padding: 10px; display: flex; align-items: center">
                          <div style="margin-right: 8px; line-height: normal">
                            <el-image class="img-box" :src="item.image_link" />
                          </div>
                          <div style="position: relative">
                            <el-tooltip class="box-item" effect="dark" :content="item.title" placement="top">
                              <div class="double-line">{{ item.title }}</div>
                            </el-tooltip>
                            <span>
                              <span style="color: #6d7784">ASIN: </span>
                              <span class="data-color" style="margin-right: 8px">{{ item.asin }}</span>
                            </span>
                          </div>
                        </div>
                      </el-radio>
                    </div>
                  </el-radio-group>
                  <div style="margin-top: 20px; display: flex; justify-content: center">
                    <el-button type="primary" :disabled="!selectedCommodity" @click="handleSelectedStore">确定</el-button>
                  </div>
                </el-dialog>
                <el-dialog v-model="pageDialog" title="更换页面" width="50%">
                  <el-radio-group v-loading="pageDialogLoading" v-model="selectedCommodity" @change="handlePageChange" class="radio-group-item">
                    <div v-for="(item, index) in storePageData.storePageInfo" :key="index" style="width: 100%">
                      <el-radio
                        :label="item.storePageId"
                        class="radio-item"
                        :disabled="topStorePages.some((storePage) => storePage.storePageName === item.storePageName)">
                        <div class="radio-item-content">
                          <div style="position: relative">
                            <el-tooltip class="box-item" effect="dark" :content="item.storePageName" placement="top">
                              <div class="double-line">{{ item.storePageName }}</div>
                            </el-tooltip>
                          </div>
                        </div>
                      </el-radio>
                    </div>
                  </el-radio-group>
                  <!-- <div style="margin-top: 20px; display: flex; justify-content: center">
                    <el-button type="primary" :disabled="!selectedCommodity">确定</el-button>
                  </div> -->
                </el-dialog>

                <el-collapse-item name="4" style="padding-right: 10px">
                  <template #title> <span style="color: #e47470; margin-right: 4px">*</span>标题</template>
                  <el-form-item prop="title">
                    <el-input v-model="ruleForm.title" maxlength="50" placeholder="请输入标题" show-word-limit style="padding: 0 10px 0 0"></el-input>
                  </el-form-item>
                </el-collapse-item>
              </el-collapse>
            </el-scrollbar>
          </div>
          <div style="width: 50%; padding: 0 10px; position: relative">
            <el-button type="primary" plain @click="submitForm(ruleFormRef)" :disabled="!fileList.length" style="position: absolute; top: 92%; left: 46%"
              >保存</el-button
            >
          </div>
        </div>
      </el-form>
    </el-card>
    <el-dialog v-model="centerDialogVisible" title="从素材库中选择" width="65%">
      <el-input :prefix-icon="Search"></el-input>
      <div class="grid-container">
        <div
          class="grid-item"
          v-for="item in cards"
          :key="item.id"
          @click="selectCard(item)"
          :class="{ selected: isSelected(item.id), hover: hoverId === item.id }"
          @mouseover="hoverId = item.id"
          @mouseleave="hoverId = null">
          <el-card :body-style="{ padding: '0px' }">
            <el-image class="image" :src="item.imageUrl" fit="cover" />
            <div style="padding: 10px">
              <span>
                <el-tooltip placement="top" :content="item.title">
                  {{ item.title }}
                </el-tooltip>
              </span>
              <div class="bottom">
                <div class="bottom-item">{{ item.size }}KB</div>
                <div class="bottom-item">{{ item.width }} * {{ item.height }}</div>
                <div class="bottom-item">徽标</div>
              </div>
            </div>
          </el-card>
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="centerDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleConfirmSelection">确定</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- <el-dialog v-model="lifeStyleDialog" title="从素材库中选择" width="65%">
      <el-input :prefix-icon="Search"></el-input>
      <div class="grid-container">
        <div
          class="grid-item"
          v-for="item in lifeStyleCards"
          :key="item.id"
          @click="selectCard(item)"
          :class="{ selected: isSelected(item.id), hover: hoverId === item.id }"
          @mouseover="hoverId = item.id"
          @mouseleave="hoverId = null">
          <el-card :body-style="{ padding: '0px' }">
            <el-image class="image" :src="item.imageUrl" fit="cover" />
            <div style="padding: 10px">
              <span>
                <el-tooltip placement="top" :content="item.title">
                  {{ item.title }}
                </el-tooltip>
              </span>
              <div class="bottom">
                <div class="bottom-item">{{ item.size }}KB</div>
                <div class="bottom-item">{{ item.width }} * {{ item.height }}</div>
                <div class="bottom-item">徽标</div>
              </div>
            </div>
          </el-card>
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="centerDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="centerDialogVisible = false">确定</el-button>
        </span>
      </template>
    </el-dialog> -->
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, inject, Ref, watch, computed, onMounted, onUnmounted } from 'vue'
import type { FormInstance, FormRules, UploadProps, UploadUserFile } from 'element-plus'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Plus, Picture, Search, Delete, Download, ZoomIn } from '@element-plus/icons-vue'
import type { UploadFile } from 'element-plus'
import emitter from '/@/utils/emitter'
import {
  getAssets,
  getLifeStyleAssets,
  getPageAsins,
  getCommodityCard,
  getStoreurl,
  getDefaultSpotlightAsin,
  getSellerInStock,
  postStoreSpotlight,
  uploadFile,
  checkAsset,
} from '../api/index'
import { storeToRefs } from 'pinia'
import { useShopInfo } from '/@/stores/shopInfo'

const shopInfo = useShopInfo()
const { profile } = storeToRefs(shopInfo)

const createLoading = ref(false)
const ruleFormRef = ref<FormInstance>()

interface RuleForm {
  name: string
  brandName: string
  title: string
}
const ruleForm = reactive<RuleForm>({
  name: '视频 广告 - 1/15/2024 17:51:10.236',
  brandName: '',
  title: '',
})

const rules = reactive<FormRules<RuleForm>>({
  name: [{ required: true, message: '请输入广告名称', trigger: 'blur' }],
  brandName: [{ required: true, message: '请输入品牌名称', trigger: 'blur' }],
  title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
})

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log('submit!')
      createStoreSpotlight()
    } else {
      console.log('error submit!', fields)
    }
  })
}

const activeNames = ref(['1'])
const handleChange = (val: string[]) => {
  // console.log(val)
  if (val.includes('commodity')) {
    // getCommodityCardData()
  }
}

const imageUrl = ref('')

const handleAvatarSuccess: UploadProps['onSuccess'] = (response, uploadFile) => {
  imageUrl.value = URL.createObjectURL(uploadFile.raw!)
  console.log('success!')
}

const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
  if (rawFile.type !== 'image/jpeg') {
    ElMessage.error('Avatar picture must be JPG format!')
    return false
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('Avatar picture size can not exceed 2MB!')
    return false
  }
  return true
}

// 图片上传相关
const dialogImageUrl = ref('')
const dialogVisible = ref(false)
const disabled = ref(false)
const fileList = ref([])
const selectedId = ref(null)
const hoverId = ref(null)
const selectedCards = ref([])
const selectedImageUrl = ref('')
const centerDialogVisible = ref(false)
const cards = reactive([])

function selectCard(item) {
  if (isSelected(item.id)) {
    selectedCards.value = selectedCards.value.filter((card) => card.id !== item.id)
  } else {
    selectedCards.value.push(item)
  }
  selectedId.value = item.id
}

function handleConfirmSelection() {
  if (selectedCards.value.length > 0) {
    // 清空 fileList
    fileList.value.length = 0

    // 假设每次只选择一个图片
    selectedImageUrl.value = selectedCards.value[0].imageUrl

    // 创建一个新的 UploadFile 对象
    const newFile = {
      name: selectedCards.value[0].title, // 或者任何你希望用作文件名的字符串
      url: selectedImageUrl.value,
      // 根据需要添加更多属性
    }

    // 将新的文件对象添加到 fileList 中
    fileList.value.push(newFile)
  }

  // 清空选中卡片
  selectedCards.value = []
  // 关闭对话框
  centerDialogVisible.value = false
}

function isSelected(id) {
  return selectedId.value === id
}

async function getAssetsData() {
  const query = {
    profile_id: profile.value.profile_id,
    assetType: 'IMAGE',
    assetSubType: 'LOGO',
  }
  const response = await getAssets(query)
  console.log('🚀 ~ getAssetsData ~ response-->>', response)

  cards.splice(0, cards.length)

  response.data.forEach((asset) => {
    cards.push({
      id: asset.assetId,
      title: asset.name,
      imageUrl: asset.storageLocationUrls.defaultUrl,
      width: asset.fileMetadata.width,
      height: asset.fileMetadata.height,
      size: bytesToKB(asset.fileMetadata.sizeInBytes),
    })
  })
}

function bytesToKB(bytes) {
  return (bytes / 1024).toFixed(2) // 保留两位小数
}

function openDialog() {
  centerDialogVisible.value = true
  getAssetsData()
}

const lifeStyleDialog = ref(false)
const lifeStyleCards = reactive([])
async function getLifeStyleAssetsData() {
  try {
    const query = {
      profile_id: profile.value.profile_id,
      assetType: 'IMAGE',
      assetSubType: 'LIFESTYLE_IMAGE',
    }
    const response = await getLifeStyleAssets(query)
    console.log('🚀 ~ getLifeStyleAssetsData ~ response-->>', response)

    lifeStyleCards.splice(0, lifeStyleCards.length)

    response.data.forEach((asset) => {
      lifeStyleCards.push({
        id: asset.assetId,
        title: asset.name,
        imageUrl: asset.storageLocationUrls.defaultUrl,
        width: asset.fileMetadata.width,
        height: asset.fileMetadata.height,
        size: bytesToKB(asset.fileMetadata.sizeInBytes),
      })
    })
  } catch (error) {
    console.log('error:', error)
  }
}

// function openLifeStyleDialog() {
//   lifeStyleDialog.value = true
//   getLifeStyleAssetsData()
// }

// 获取商品数据
const topStorePages = ref([])
const commodityLoading = ref(false)
const dialogLoading3 = ref(false)
let subpageslist = []

async function getDefaultCommodityData() {
  try {
    commodityLoading.value = true
    const resp = await getDefaultSpotlightAsin({ profile_id: '3006125408623189' })
    if (resp.code === 2000) {
      topStorePages.value = resp.data.defaultlist.map((item) => ({
        storePageName: item.storePageName,
        storePageLink: item.image_link,
        storePageUrl: item.storePageUrl,
        asin: item.asin,
        inputName: item.storePageName, // 新增字段用于存储输入值
      }))
      subpageslist = topStorePages.value.map((item) => ({
      asin: item.asin,
      pageTitle: item.inputName,
      url: item.storePageUrl,
  }))
    }
  } catch (error) {
    console.error('Error in getDefaultCommodityData:', error)
  } finally {
    commodityLoading.value = false
  }
}

const asinList = ref([])
const stock = ref([])
const currentEditingIndex = ref(null)
const selectedCommodityData = ref(null)

async function changePicture(pageUrl, index) {
  commodityDialog.value = true
  dialogLoading3.value = true

  currentEditingIndex.value = index
  try {
    const query = {
      profile_id: profile.value.profile_id,
      pageurl: pageUrl,
    }
    const response = await getPageAsins(query)
    asinList.value = response.data.asinList
    getStock()
    dialogLoading3.value = false
  } catch (error) {
    console.log('error:', error)
  }
}

async function getStock() {
  try {
    const obj = {
      profile_id: profile.value.profile_id,
      asinlist: asinList.value,
    }
    const response = await getSellerInStock(obj)
    stock.value = response.data
  } catch (error) {
    console.error('Error in getStock:', error)
  }
}

function handleSelectedStore() {
  if (currentEditingIndex.value !== null) {
    selectedCommodityData.value = stock.value.find((item) => item.asin === selectedCommodity.value)
    if (selectedCommodityData.value) {
      // 更新图片链接和ASIN
      topStorePages.value[currentEditingIndex.value].storePageLink = selectedCommodityData.value.image_link
      topStorePages.value[currentEditingIndex.value].asin = selectedCommodityData.value.asin
      // 更新输入框的绑定值以便可以继续编辑名称
      topStorePages.value[currentEditingIndex.value].inputName = topStorePages.value[currentEditingIndex.value].inputName
      console.log(topStorePages.value)
    }
    // 重置当前编辑索引和选中的商品
    currentEditingIndex.value = null
    selectedCommodity.value = null
    commodityDialog.value = false
  }
}

// 更换页面功能
const pageDialog = ref(false)
const storePageData = ref({ storePageInfo: [] })
const pageDialogLoading = ref(false)
const selectedPageUrl = ref('')
const firstObj: any = ref({})
const pageAsinList = ref([])
const selectedPageName = ref('')

async function changePage(pageUrl, index) {
  pageDialog.value = true
  pageDialogLoading.value = true
  currentEditingIndex.value = index
  try {
    const response = await getStoreurl({ profile_id: profile.value.profile_id })
    storePageData.value = response.data
  } catch (error) {
    console.log('error:', error)
  } finally {
    pageDialogLoading.value = false
  }
}

async function getAsinList(pageurl) {
  try {
    const query = {
      profile_id: profile.value.profile_id,
      pageurl: pageurl,
    }
    const resp = await getPageAsins(query)
    pageAsinList.value = resp.data.asinList

    changeCardData()
  } catch (error) {
    console.log('error:', error)
  }
}

async function handlePageChange(selectedPageId) {
  const selectedPage = storePageData.value.storePageInfo.find((page) => page.storePageId === selectedPageId)
  if (selectedPage) {
    selectedPageUrl.value = selectedPage.storePageUrl
    selectedPageName.value = selectedPage.storePageName
    pageDialog.value = false
    await getAsinList(selectedPageUrl.value)
  } else {
    console.error('Selected page not found in storePageData')
  }
}

async function changeCardData() {
  try {
    const query = {
      profile_id: profile.value.profile_id,
      asinlist: pageAsinList.value,
    }
    const response = await getSellerInStock(query)
    if (response && response.data.length > 0) {
      // 将response的第一个元素赋值给firstObj
      firstObj.value = response.data[0]

      // 更新图片链接和ASIN
      topStorePages.value[currentEditingIndex.value].storePageLink = firstObj.value.image_link
      topStorePages.value[currentEditingIndex.value].asin = firstObj.value.asin
      topStorePages.value[currentEditingIndex.value].storePageName = selectedPageName.value
      topStorePages.value[currentEditingIndex.value].inputName = selectedPageName.value
      currentEditingIndex.value = null
    } else {
      console.error('No data')
    }
  } catch (error) {
    console.error('error:', error)
  }
}

// 创建创意
let brandName = ''
let brandEntityId = ''
const respAdGroupId = inject<Ref>('respAdGroupId')
let brandLogoCrop = {}

const upLoading = ref(false)
let respAssetId = ''

function handleRemove(file: UploadFile) {
  fileList.value = []
}

function handlePictureCardPreview(file: UploadFile) {
  dialogImageUrl.value = file.url!
  dialogVisible.value = true
}

function changeFile(file: UploadFile) {
  handleUpload(file)
}

async function handleUpload(file: UploadFile) {
  const formData = new FormData()
  formData.append('file', file.raw)
  formData.append('profile_id', profile.value.profile_id)
  formData.append('brandEntityId', brandEntityId)
  formData.append('assetType', 'IMAGE')
  formData.append('assetSubTypeList', JSON.stringify(['LOGO']))
  upLoading.value = true
  try {
    const response = await uploadFile(formData)
    const fileName = response.data.file_name
    const obj = {
      profile_id: profile.value.profile_id,
      file_name: fileName,
    }
    const resp = await checkAsset(obj)
    respAssetId = resp.data.assetId
    const { width, height } = resp.data.fileMetadata
    brandLogoCrop = {
      width,
      height,
      top: 0,
      left: 0,
    }

    if (resp.data.checkresult == 'success') {
      ElMessage({ message: '上传成功', type: 'success' })
    } else {
      ElMessage.error('上传失败')
    }
  } catch (error) {
    console.error('上传失败:', error)
  } finally {
    upLoading.value = false
  }
}

// TODO: url对应的是Home 暂时写死
async function createStoreSpotlight() {
  createLoading.value = true
  try {
    const query = {
      profile_id: profile.value.profile_id,
      url: 'https://www.amazon.com/stores/page/1D1DD2FD-CF54-4FE5-B1A0-9E01F12F8144',
      name: ruleForm.name,
      state: 'PAUSED',
      adGroupId: respAdGroupId.value,
      brandName: brandName,
      brandLogoAssetID: respAssetId,
      brandLogoCrop: brandLogoCrop,
      consentToTranslate: false,
      subpageslist: subpageslist,
      headline: ruleForm.title,
    }
    const response = await postStoreSpotlight(query)
    if (response.data.creative_state == 'success') {
      ElMessage({ message: '创建成功', type: 'success' })
    } else {
      ElMessage.error('上传失败')
    }
  } catch (error) {
    console.error('error:', error)
  } finally {
    createLoading.value = false
  }
}

watch(topStorePages, () => {
    subpageslist = topStorePages.value.map((item) => ({
    asin: item.asin,
    pageTitle: item.inputName,
    url: item.storePageUrl,
  }))
  console.log('subpageslist', subpageslist)
},{deep: true})

onMounted(() => {
  emitter.on('spotlight-shop', (newValue: any) => {
    brandName = newValue.brandRegistryName
    brandEntityId = newValue.brandEntityId
  })
})

// 接收数据端在组件卸载时解绑事件
onUnmounted(() => {
  emitter.off('spotlight-shop')
})

const focusShop = inject<Ref>('focusShop')

async function getCommodityCollapseData() {
  commodityLoading.value = true
  try {
    const query = {
      profile_id: profile.value.profile_id,
      pageurl: focusShop.value,
    }
    const response = await getPageAsins(query)
    asinList.value = response.data.asinList
    console.log('asinList', asinList.value)
  } catch (error) {
    console.log('error:', error)
  } finally {
    commodityLoading.value = false
  }
}

// let lastQueriedAsins = []
const commodityCard = ref([])
// async function getCommodityCardData() {
//   try {
//     commodityLoading.value = true
//     const topAsins = asinList.value.slice(0, 3)

//     const newAsins = topAsins.filter((asin) => !lastQueriedAsins.includes(asin))
//     if (newAsins.length === 0) {
//       commodityLoading.value = false
//       return // 如果没有新的 ASIN，直接返回
//     }

//     lastQueriedAsins = [...topAsins]

//     // 清空commodityCard，为新数据做准备
//     commodityCard.value = []

//     // 对每个新的 ASIN 发送请求
//     for (const asin of newAsins) {
//       const query = {
//         profile_id: profile.value.profile_id,
//         asin: asin,
//       }

//       try {
//         const response = await getCommodityCard(query)
//         commodityCard.value.push(response.data)
//         // console.log('Response for ASIN', asin, ':', response)
//       } catch (error) {
//         console.log('Error for ASIN', asin, ':', error)
//       }
//     }
//   } catch (error) {
//     console.log('Outer error:', error)
//   } finally {
//     commodityLoading.value = false
//   }
// }

// 更改商品功能
const commodityDialog = ref(false)
const selectedCommodity = ref()
const replaceableCommodity = ref([])

function openCommodityDialog(index) {
  currentEditingIndex.value = index
  commodityDialog.value = true
}

async function getAdditionalCommodityData() {
  try {
    dialogLoading3.value = true
    // 获取除前三个之外的所有 ASIN
    const additionalAsins = asinList.value.slice(3)

    // 清空 replaceableCommodity，为新数据做准备
    replaceableCommodity.value = []

    // 对每个额外的 ASIN 发送请求
    for (const asin of additionalAsins) {
      const query = {
        profile_id: profile.value.profile_id,
        asin: asin,
      }

      try {
        const response = await getCommodityCard(query)
        replaceableCommodity.value.push(response.data)
        console.log('🚀 ~ getAdditionalCommodityData ~ replaceableCommodity-->>', replaceableCommodity.value)
        // console.log('Response for additional ASIN', asin, ':', response)
      } catch (error) {
        console.log('Error for additional ASIN', asin, ':', error)
      }
    }
  } catch (error) {
    console.log('Outer error:', error)
  } finally {
    dialogLoading3.value = false
  }
}

const flattenedCommodityCard = computed(() => {
  return commodityCard.value.flat()
})

const flattenedReplaceableCommodity = computed(() => {
  return replaceableCommodity.value.flat()
})
// watch(focusShop.value,
//   async () => {
//     await getCommodityCollapseData()
//     getCommodityCardData()
//     getAdditionalCommodityData()
//   }
// )
onMounted(async () => {
  await getDefaultCommodityData()
  // await getCommodityCollapseData()
  // getCommodityCardData()
  // getAdditionalCommodityData()
})
</script>

<style scoped>
.customize-container {
  margin-top: 10px;
}
.upload-button-group {
  display: flex;
}
.introduce-item {
  line-height: 17px;
  font-size: 12px;
  color: #88909b;
}
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
::v-deep(.avatar-uploader .el-upload) {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

::v-deep(.avatar-uploader .el-upload:hover) {
  border-color: var(--el-color-primary);
}
::v-deep(.el-icon.avatar-uploader-icon) {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
::v-deep(.avatar-uploader .el-upload.el-upload--text) {
  width: 100%;
}
.grid-container {
  flex-wrap: wrap;
  display: flex;
  width: 100%;
  justify-content: left;
}
.grid-item {
  transition: outline, background-color 0.3s;
  box-sizing: border-box;
  border: 1px solid #ffffff00;
  cursor: pointer;
  width: calc(25% - 10px);
  margin: 10px 5px;
}
.grid-item span {
  display: block; /* 或者 inline-block */
  white-space: nowrap; /* 保持文本在一行 */
  overflow: hidden; /* 隐藏超出部分 */
  text-overflow: ellipsis; /* 超出部分显示省略号 */
  max-width: 100%; /* 限制最大宽度 */
  font-weight: 600;
  line-height: 22px;
}
.grid-item.hover,
.grid-item.selected {
  border: 1px solid #306cd8;
  border-radius: 4px;
}
.grid-item.selected > :first-child {
  background-color: #f5f7fe;
}
.image {
  width: 100%;
  height: 146.49px;
  padding: 10px;
}
.image > :first-child {
  border-radius: 10px;
}
.bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 5px;
}
.bottom-item {
  background-color: #f5f7fe;
  border-radius: 4px;
  padding: 0 3px;
}
.uploaded-image {
  width: 100%; /* 或根据需要调整 */
  height: auto; /* 保持图片的原始宽高比 */
  display: block;
  margin-bottom: 10px; /* 或根据需要调整 */
}
.upload-content {
  text-align: center;
  padding: 20px;
}
.el-carousel__item h3 {
  color: #edf5fe;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
  text-align: center;
}
::v-deep(button.el-carousel__button) {
  background-color: #3569d6;
}
.img-box {
  min-width: 60px;
  height: 60px;
  border: 1px solid rgb(194, 199, 207);
  border-radius: 4px;
}
.double-line {
  color: #1e2128;
  font-weight: 500;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  white-space: pre-wrap;
  word-break: break-word;
}
.card-operation {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  margin-left: 30px;
}
.radio-group-item {
  display: flex;
  flex-direction: column;
  align-content: flex-start;
  align-items: flex-start;
}
.radio-item {
  height: 80px;
  width: 100%;
  border-bottom: 1px solid #ccc;
}
.radio-item-content {
  padding: 10px;
  display: flex;
  align-items: center;
}
</style>