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

const respAdGroupId = inject<Ref>('respAdGroupId')
const shopInfo = useShopInfo()
const { profile } = storeToRefs(shopInfo)

const ruleFormRef = ref<FormInstance>()

interface RuleForm {
  name: string
  brandName: string
  title: string
}
const ruleForm = reactive<RuleForm>({
  name: '',
  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!')
      createCreativity()
    } else {
      console.log('error submit!', fields)
    }
  })
}

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

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

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 upLoading = ref(false)
function handleRemove(file: UploadFile) {
  fileList.value = []
}

function handleCustomRemove(file: UploadFile) {
  customFileList.value = []
}

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

function customPictureCardPreview(file: UploadFile) {
  dialogImageUrl.value = file.url!
  customDialogVisible.value = true
}

// 自定义文件上传
const customFileList = ref([])
const customUpLoading = ref(false)
let customImageAssetId = ''

function changeCustomFile(file: UploadFile) {
  handleCustomUpload(file)
}

async function handleCustomUpload(file: UploadFile) {
  const formData = new FormData()
  formData.append('file', file.raw)
  formData.append('profile_id', profile.value.profile_id)
  formData.append('brandEntityId', brandEntityId.value)
  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)
    customImageAssetId = resp.data.assetId
    const { width, height } = resp.data.fileMetadata
    customImageCrop = {
      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
  }
}

const createLoading = ref(false)
const casins = ref('')
let brandLogoCrop = {}
let customImageCrop = {}
let url = ''
let brandName = ''
let brandLogoAssetID = ''

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.value)
  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)
    brandLogoAssetID = 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
  }
}

async function createCreativity() {
  createLoading.value = true
  try {
    const obj = {
      profile_id: profile.value.profile_id,
      casins: casins.value,
      lasins: [],
      url: url,
      name: ruleForm.name,
      state: 'PAUSED',
      adGroupId: respAdGroupId.value,
      brandName: brandName,
      brandLogoCrop: brandLogoCrop,
      brandLogoAssetID: brandLogoAssetID,
      customImageCrop: customImageCrop,
      customImageAssetId: customImageAssetId,
      headline: ruleForm.title,
    }
    const response = await postProductset(obj)
    if (response.data.creative_state == 'success') {
      ElMessage({ message: '创建成功', type: 'success' })
    } else {
      ElMessage.error('上传失败')
    }
  } catch (error) {
    console.error('error:', error)
  } finally {
    createLoading.value = false
  }
}

// 选择卡片功能
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.value.push(newFile) // 将新的文件对象添加到 fileList 中
  }

  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)
  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 pageOptionsValue = inject<Ref>('pageOptionsValue')
const asinList = ref([])
const commodityLoading = ref(false)

async function getCommodityCollapseData() {
  commodityLoading.value = true
  try {
    const query = {
      profile_id: profile.value.profile_id,
      pageurl: pageOptionsValue.value,
    }
    const response = await getPageAsins(query)
    asinList.value = response.data.asinList
  } 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([])
const dialogLoading3 = ref(false)
let currentEditingIndex = ref(null)

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
  }
}

function handleSelectedCommodity() {
  if (currentEditingIndex.value !== null && selectedCommodity.value) {
    const selectedCommodityData = flattenedReplaceableCommodity.value.find((item) => item.asin === selectedCommodity.value)
    if (selectedCommodityData) {
      commodityCard.value[currentEditingIndex.value] = selectedCommodityData
    }
    commodityDialog.value = false
    console.log('commodityCard', commodityCard.value)
    currentEditingIndex.value = null
    selectedCommodity.value = null
  }
}

watch(
  () => pageOptionsValue.value,
  async () => {
    await getCommodityCollapseData()
    getCommodityCardData()
    getAdditionalCommodityData()
  }
)

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

const flattenedReplaceableCommodity = computed(() => {
  return replaceableCommodity.value.flat()
})

watch(
  flattenedCommodityCard,
  (newValue: any) => {
    casins.value = newValue.map((item) => item.asin)
  },
  { deep: true }
)

const brandEntityId = ref('')

onMounted(() => {
  emitter.on('send-brandEntityId', (value: any) => {
    brandEntityId.value = value.brandEntityId[0].brandEntityId
  })
  emitter.on('page', (value: any) => {
    url = value
  })
  emitter.on('video-shop', (value: any) => {
    brandName = value.brandRegistryName
  })
})

// 接收数据端在组建卸载时解绑事件
onUnmounted(() => {
  emitter.off('send-brandEntityId')
  emitter.off('page')
})
</script>

<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"
                    :on-remove="handleRemove"
                    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">从素材库中选择</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="2" style="padding-right: 10px">
                  <template #title>自定义图片(可选)</template>
                  <el-upload
                    v-model:file-list="customFileList"
                    :on-change="changeCustomFile"
                    :on-remove="handleCustomRemove"
                    v-loading="customUpLoading"
                    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="customPictureCardPreview(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="openLifeStyleDialog">从素材库中选择</el-button>
                        </div>
                        <div class="introduce-item">1、图片大小: 1200 x 628 像素或更大</div>
                        <div class="introduce-item">2、文件大小: 5MB 或更小</div>
                        <div class="introduce-item">3、文件格式: PNG 或 JPG</div>
                        <div class="introduce-item">4、内容: 图片中未添加文本、图形或徽标</div>
                      </div>
                    </template>
                  </el-upload>
                  <!-- 预览弹窗 -->
                  <el-dialog v-model="customDialogVisible">
                    <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> <span style="color: #e47470; margin-right: 4px">*</span>商品</template>
                  <div v-for="(item, index) in flattenedCommodityCard" :key="index" style="margin: 0 0 5px 0">
                    <el-card shadow="hover" body-style="padding: 10px; display: flex;">
                      <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>
                        <el-button
                          type="primary"
                          size="small"
                          link
                          @click="() => openCommodityDialog(index)"
                          style="position: absolute; bottom: 2px; right: 0">
                          更换商品
                        </el-button>
                      </div>
                    </el-card>
                  </div>
                </el-collapse-item>
                <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>
    <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 flattenedReplaceableCommodity" :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="handleSelectedCommodity">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<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 {
  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;
}
</style>
