<script setup lang="ts">
import { useRouter } from 'vue-router'
import H5Cropper  from 'vue-cropper-h5'
import "vue-cropper-h5/dist/style.css"
import { showLoadingToast, showToast, closeToast, showFailToast, showSuccessToast } from 'vant';
import * as badgeApi from '@/api/badge'
import { onMounted, ref } from 'vue';

const show = ref(false)
const imgShow = ref(false)
const router = useRouter()
const option = ref({
  autoCropWidth: 1000,
  autoCropHeight: 1000,
})
const options = ref({
  autoCropWidth: 1000,
  autoCropHeight: 1000,
})
const imgurl = ref('')
const imgBgUrl = ref('')
const isBgShow = ref(true)
const remaining = ref(0)
function goToRecord() {
  router.push('/badge/record')
}
function goToMyOrder() {
  router.push('/badge/myOrder')
}

const sizeList = ref([])
const getSizeList = () => {
  badgeApi.getOrderPrice({}).then((res: any) => {
    sizeList.value = res
  })
}

const orderStat = ref({})
const getOrderStat = () => {
  badgeApi.getOrderStat({}).then((res: any) => {
    orderStat.value = res
  })
}

const isLoading = ref(false)

function goToPreview() {
  if (isLoading.value) {
    return
  }
  console.log('goToPreview')
  if (!imgurl.value) {
    showToast('请先上传照片')
    return
  }
  if (isBgShow.value == false && !imgBgUrl.value) {
    showToast('请先上传背景照片')
    return
  }
  if (orderStat.remain_count <= 0) {
    showToast('剩余次数不足')
    return
  }
  if (checkId.value == 0) {
    showToast('请选择风格样式')
    return
  }
  isLoading.value = true
  getPid()
}
const picture = ref(null)
function getbase64Data(data) {
  picture.value = data;
}
function getBlob(data) {
  console.log('getBlob', data)
  if (data.size > 1024 * 1024 * 10) {
    showToast('照片大小不能超过10M')
    return
  }
  imgurl.value = data;
}
const pictureBg = ref(null)
function getBgbase64Data(data) {
  pictureBg.value = data;
}
function getBlobBg(data) {
  console.log('getBlobBg', data)
  if (data.size > 1024 * 1024 * 10) {
    showToast('照片大小不能超过10M')
    return
  }
  imgBgUrl.value = data;
}
const getRandomNumber = () => {
  return kindList.value.map(obj => obj.id)[Math.floor(Math.random() * kindList.value.length)];
}

// 获取Pid
const pid = ref('')
const kindId = ref(0)
const getPid = async () => {
  showLoadingToast({
    message: '上传中...',
    forbidClick: true,
    loadingType: 'spinner',
    duration: 0,
  })
  // kindId.value = checkId.value == 0 ? getRandomNumber() : checkId.value
  const params = {
    extend_value: isBgShow.value ? -1 : 0,
    kind_id: checkId.value,
  }
  try {
    const res = await badgeApi.getPid(params)
    console.log('getPid', res)
    isLoading.value = false
    pid.value = res.pid
    if (isBgShow.value) {
      try {
        const uploadTasks = [
          sendToOss(imgurl.value, res.url),
          sendToOss(imgurl.value, res.oss_url)
        ]
        await Promise.all(uploadTasks)
      } catch (err) {
        closeToast()
        console.error('上传失败:', err)
        showFailToast({
          message: '上传失败',
          duration: 2000,
        })
      }
    } else {
      try {
        const uploadTasks = [
          sendToOss(imgurl.value, res.url),
          sendToOss(imgurl.value, res.oss_url),
          sendToOss(imgBgUrl.value, res.extend_url),
          sendToOss(imgBgUrl.value, res.extend_bg_url)
        ]
        await Promise.all(uploadTasks)
      } catch (err) {
        closeToast()
        console.error('上传失败:', err)
        showFailToast({
          message: '上传失败',
          duration: 2000,
        })
      }
    }
  } catch (err) {
    isLoading.value = false
    closeToast()
    showToast({
      message: err.message,
      duration: 2000,
    })
    console.log(err)
  } finally {
    isLoading.value = false
  }
}
// 上传到OSS
const pendingUploads = ref(0)
const isAnotherAPICalled = ref(false)
const sendToOss = async (src: string, url: string) => {
  try {
    pendingUploads.value++
    const response = await fetch(url, {
      method: 'PUT',
      headers: {
        'Content-Type': 'image/jpeg'
      },
      body: src
    })

    if (!response.ok) {
      throw new Error('Upload failed')
    }

    console.log('图片上传成功--------', response)
    
    if (--pendingUploads.value === 0 && !isAnotherAPICalled.value) {
      const params = {
        pid: pid.value,
        kind_id: checkId.value,
        extend_value: isBgShow.value ? -1 : 0,
        group: 1,
      }
      badgeApi.putMOdeling(params).then((res: any) => {
        console.log('putModeling', res)
        createLog()
      }).catch((err) => {
        console.log('putModeling', err)
      }).finally(() => {
        closeToast()
      })
    }

  } catch (err) {
    closeToast()
    pendingUploads.value--
    showFailToast({
      message: err.message,
      duration: 2000,
    })
    console.log("uploadImage----err", err)
  }
}
const createLog = () => {
  const params = {
    pid: pid.value,
    group: 1,
    kind_id: checkId.value,
  }
  badgeApi.createLog(params).then((res: any) => {
    console.log('createLog', res)
    closeToast()
    showSuccessToast({
      message: '照片上传成功',
      duration: 2000,
    })
    setTimeout(() => {
      router.push({
        path: '/badge/preview',
        query: {
          pid: pid.value,
          group: 1,
        },
      })
    }, 1000);
  }).catch((err) => {
    console.log('getGenImages', err)
    showFailToast({
      message: err.message,
      duration: 2000,
    })
  }).finally(() => {
    closeToast()
  })
}


const kindList = ref([])
const checkId = ref(0)
const getKindList = () => {
  badgeApi.getKindList({
    page: 1,
    size: 20,
    scale: 20,
  }).then((res: any) => {
    const data = res || []
    kindList.value = data.list
  }).catch((err) => {
    showToast({
      message: err.message,
      duration: 2000,
    })
  }).finally((err) => {
    
  })
}
const sundryList = ref([])
const getSundryList = () => {
  badgeApi.getSundryList({
    page: 1,
    size: 6,
    group: 'gp',
  }).then((res: any) => {
    const data = res || []
    sundryList.value = data.list
  }).catch((err) => {
    showToast({
      message: err.message,
      duration: 2000,
    })
  }).finally((err) => {
    
  })
}
const caseList = ref([])
const getList = () => {
  badgeApi.getSundryList({
    page: 1,
    size: 5,
    group: 'case',
    ids: '6,7,8,9,19'
  }).then((res: any) => {
    const data = res || []
    caseList.value = data.list
  }).catch((err) => {
    showToast({
      message: err.message,
      duration: 2000,
    })
  }).finally((err) => {
    
  })
}
onMounted(() => {
  getKindList()
  getSundryList()
  getList()
  getOrderStat()
  getSizeList()
})
</script>

<template>
  <div class="photo-upload-page">
    <div class="badge-size">
      <div class="size-title">
        剩余兑换数量
      </div>
      <div class="size-options">
        <div class="size-item" v-for="item in sizeList" :key="item.id">
          <div class="size-text">
            {{ item.size }}
          </div>
          <div class="size-count">
            （剩余兑换：{{ item.remaining }}）
          </div>
        </div>
        <!-- <div class="size-item">
          <div class="size-text">
            5cm
          </div>
          <div class="size-count">
            （剩余兑换：2）
          </div>
        </div> -->
      </div>
    </div>
    <div class="badge-info">
      <div class="badge-item" @click="goToRecord">
        <div class="badge-title">
          设计图集
        </div>
        <div class="badge-count">
          {{ orderStat.create_count || 0 }}张
        </div>
      </div>
      <div class="badge-item" @click="goToMyOrder">
        <div class="badge-title">
          我的订单
        </div>
        <div class="badge-count">
          {{ orderStat.order_count || 0 }}笔
        </div>
      </div>
    </div>
    <div style="height: 8px;background: #F2F2F2;" />
    <div class="step-container">
      <div class="step-item active">
        <div class="step-num">
          1
        </div>
        <div class="step-content">
          <div class="step-title">
            上传正面照片
          </div>
          <div class="step-desc">
            1张五官清晰的正面照片
          </div>
        </div>
      </div>
      <div class="step-item">
        <div class="step-num">
          2
        </div>
        <div class="step-content">
          <div class="step-title">
            确认下单
          </div>
          <div class="step-desc">
            选择一个你喜欢的设计
          </div>
        </div>
      </div>
    </div>
    <div class="photo-upload-body">
      <div v-if="!picture" class="photo-upload-box">
        <div class="photo-upload-header" @click="imgShow = true">
          <van-icon name="question-o" size="16px" class="photo-upload-guide-icon" />
          <span class="photo-upload-guide-text">图片上传指南</span>
        </div>
        <div class="photo-upload-area">
          <div class="photo-upload-plus">
            +
          </div>
          <div class="photo-upload-text">
            点击上传照片
          </div>
          <div class="photo-upload-tip">
            *上传照片时建议勾选[原图]
          </div>
        </div>
        <div class="photo-upload-footer">
          请确定您对上传的照片拥有合法使用权利或已取得他人合法授权，且同意本平台分析图片信息以提供生成服务
        </div>
      </div>
      <img class="photo-upload-img" v-if="picture" :src="picture" alt="" srcset="">
      <div class="photo-upload-box-1">
        <h5-cropper :option="option" @getbase64Data="getbase64Data" @getFile="getFile" @getblob='getBlob' ></h5-cropper>
      </div>
    </div>
    <div style="font-size: 12px; color: red; margin-top: 16px; text-align: center;">温馨提示：请上传只有1-2人的照片</div>
    <div class="style-section">
      <div class="style-title">
        风格样式
      </div>
      <div class="style-list">
        <!-- <div class="style-item" @click="checkId = 0">
          <img class="style-img" src="@/assets/badge/suiji.png" alt="随机风格盲盒">
          <div class="style-label">
            随机风格盲盒
          </div>
          <span class="style-selected" v-if="checkId == 0" />
        </div> -->
        <div class="style-item" v-for="item in kindList" :key="item.id" @click="checkId = item.id">
          <img class="style-img" :src="item.path" :alt="item.name">
          <div class="style-label">
            {{ item.name }}
          </div>
          <span class="style-selected" v-if="item.id == checkId" />
        </div>
      </div>
    </div>
    <div class="bg-style-section">
      <div class="bg-style-header">
        <span class="bg-style-title">背景样式</span>
        <span class="bg-style-desc disabled" @click="show = true">
          <van-icon name="question-o" size="16px" />
          <span class="iconfont" style="margin-left:5px;font-size:14px;vertical-align:middle;">背景样式说明</span>
        </span>
      </div>
      <div class="bg-style-tabs">
        <button
          class="bg-style-tab" :class="isBgShow == true ? 'active' : ''"
          type="button" @click="isBgShow = true"
        >
          照片原图背景
        </button>
        <button
          class="bg-style-tab" :class="isBgShow == false ? 'active' : ''"
          type="button" @click="isBgShow = false"
        >
          补充背景照片
        </button>
      </div>
      <div v-if="isBgShow == true" class="bg-style-tip">
        选择该选项设计的徽章会根据上传的肖像照片背景进行生成效果
      </div>
      <div v-if="isBgShow == false" class="bg-style-tip">
        选择该选项需要额外上传一张照片作为背景
      </div>
    </div>
    <div class="bg-photo-upload-section" v-if="isBgShow == false">
      <div class="bg-photo-upload-header">
        <span>补充背景照片</span>
      </div>
      <div class="bg-photo-upload-area">
        <div v-if="!imgBgUrl" class="bg-photo-upload-label">
          <div class="bg-photo-upload-box">
            <div class="bg-photo-upload-plus">+</div>
            <div class="bg-photo-upload-text">上传照片</div>
          </div>
        </div>
        <img v-if="pictureBg" class="bg-photo-upload-img" :src="pictureBg" alt="">
        <div class="bg-photo-upload-label-1">
          <h5-cropper :option="options" @getbase64Data="getBgbase64Data" @getFile="getFile" @getblob='getBlobBg'></h5-cropper>
        </div>
      </div>
    </div>
    <div style="height: 90px;" />
    <div class="design-action-bar">
      <div class="design-left">
        <img class="design-leaf-icon" width="18" height="18" src="@/assets/badge/leaf.png" alt="">
        <span class="design-remaining">剩余{{ orderStat.remain_count || 0 }}次</span>
      </div>
      <button class="design-btn" @click="goToPreview">
        <span>开始设计</span>
        <img class="design-arrow" src="@/assets/badge/arrow.png" alt="">
      </button>
    </div>
  </div>
  <van-action-sheet v-model:show="show" title="背景样式说明" :close-on-click-overlay="true" closeable>
    <div style="padding: 24px 16px;">
      <div style="font-weight: bold; font-size: 15px; margin-bottom: 4px;">
        照片自有背景
      </div>
      <div style="font-size: 12px; color: #888; margin-bottom: 12px;">
        选择该选项设计的徽章会根据上传的人像照片背景进行生成效果
      </div>
      <div style="display: flex; align-items: center; justify-content: center; margin-bottom: 24px;">
        <img :src="caseList[2].path" style="width: 90px; height: 90px; border-radius: 12px; object-fit: cover; margin-right: 12px;">
        <span style="font-size: 24px; color: #bbb; margin-right: 12px;">
          <van-icon name="arrow" />
        </span>
        <img :src="caseList[3].path" style="width: 90px; height: 90px; border-radius: 12px; object-fit: cover;">
      </div>
      <div style="font-weight: bold; font-size: 15px; margin-bottom: 4px;">
        补充背景照片
      </div>
      <div style="font-size: 12px; color: #888; margin-bottom: 12px;">
        选择该选项需要额外上传一张照片作为背景
      </div>
      <div style="display: flex; align-items: center; justify-content: center; margin-bottom: 12px;">
        <img :src="caseList[0].path" style="width: 90px; height: 90px; border-radius: 12px; object-fit: cover; margin-right: 12px;">
        <span style="font-size: 24px; color: #bbb; margin-right: 12px;">
          <van-icon name="plus" />
        </span>
        <img :src="caseList[1].path" style="width: 90px; height: 90px; border-radius: 12px; object-fit: cover;">
      </div>
      <div style="font-size: 24px; color: #bbb;text-align: center;">
        <van-icon name="arrow-down" />
      </div>
      <div style="display: flex; align-items: center; justify-content: center; margin-top: 12px;">
        <img :src="caseList[4].path" style="width: 120px; height: 120px; border-radius: 16px; object-fit: cover;">
      </div>
      <div style="margin-top: 32px; text-align: center;">
        <button style="width: 90%; height: 44px; background: linear-gradient(90deg, #d6f5b7 0%, #50cf54 100%); border: none; border-radius: 22px; color: #222; font-size: 18px; font-weight: bold; cursor: pointer;" @click="show = false">
          我已了解
        </button>
      </div>
    </div>
  </van-action-sheet>

  <van-action-sheet v-model:show="imgShow" title="图片上传指南" :close-on-click-overlay="true" closeable>
    <div style="padding: 0 16px 24px 16px;">
      <div style="text-align: center;">
        <img :src="sundryList[0].path" alt="照片上传指南" style="width: 90vw; border-radius: 16px; margin-bottom: 16px;">
      </div>
      <div style="display: flex; justify-content: space-between; margin-bottom: 16px;">
        <div style="flex: 1; text-align: center;">
          <img :src="sundryList[1].path" alt="多主体" style="width: 25vw; height: 25vw; border-radius: 8px; object-fit: cover;">
          <div style="font-size: 13px; color: #888; margin-top: 4px;">
            多主体
          </div>
        </div>
        <div style="flex: 1; text-align: center;">
          <img :src="sundryList[2].path" alt="光线昏暗" style="width: 25vw; height: 25vw; border-radius: 8px; object-fit: cover;">
          <div style="font-size: 13px; color: #888; margin-top: 4px;">
            光线昏暗
          </div>
        </div>
        <div style="flex: 1; text-align: center;">
          <img :src="sundryList[3].path" alt="后侧面及背影" style="width: 25vw; height: 25vw; border-radius: 8px; object-fit: cover;">
          <div style="font-size: 13px; color: #888; margin-top: 4px;">
            后侧面及背影
          </div>
        </div>
      </div>
      <div style="display: flex; justify-content: space-around; margin-bottom: 24px;">
        <div style="flex: 1; text-align: center;">
          <img :src="sundryList[4].path" alt="照片模糊" style="width: 25vw; height: 25vw; border-radius: 8px; object-fit: cover;">
          <div style="font-size: 13px; color: #888; margin-top: 4px;">
            照片模糊
          </div>
        </div>
        <div style="flex: 1; text-align: center;">
          <img :src="sundryList[5].path" alt="照片留白过少" style="width: 25vw; height: 25vw; border-radius: 8px; object-fit: cover;">
          <div style="font-size: 13px; color: #888; margin-top: 4px;">
            照片留白过少
          </div>
        </div>
      </div>
      <div style="margin-top: 24px; text-align: center;">
        <button style="width: 90%; height: 44px; background: linear-gradient(90deg, #d6f5b7 0%, #50cf54 100%); border: none; border-radius: 22px; color: #222; font-size: 18px; font-weight: bold; cursor: pointer;" @click="imgShow = false">
          我已了解
        </button>
      </div>
    </div>
  </van-action-sheet>
</template>

<style scoped>
.photo-upload-page {
  height: auto;
  overflow-y: scroll!important;
}
.badge-size {
  padding: 16px;
  .size-title {
    font-size: 14px;
    color: #000;
  }
  .size-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
    .size-item:last-child {
      margin-left: 5px;
    }
    .size-item {
      flex: 1;
      .size-text {
        font-size: 14px;
        color: #333;
        text-align: center;
        padding: 4px 10px;
        background: #F0F2F5;
        border-radius: 4px;
        margin-right: 5px;
        display: inline-block;
      }
      .size-count {
        font-size: 12px;
        color: #999;
        display: inline-block;
      }
    }
  }
}
.badge-info {
  display: flex;
  justify-content: space-between;
  padding: 0 16px 16px 16px;
  .badge-item:first-child {
    background-image: url('@/assets/badge/sheji.png');
    background-size: cover;
    background-position: center;
    margin-right: 5px;
  }
  .badge-item:last-child {
    background-image: url('@/assets/badge/order.png');
    background-size: cover;
    background-position: center;
    margin-left: 5px;
  }
  .badge-item {
    padding: 18px 12px;
    flex: 1;
    text-align: left;
    cursor: pointer;
    height: 88px;
    .badge-title {
      font-size: 16px;
      color: #000;
      font-weight: bold;
    }
    .badge-count {
      font-size: 15px;
      color: #333;
      font-weight: bold;
      margin-top: 8px;
    }
  }
}
.step-container {
  display: flex;
  align-items: flex-start;
  padding: 16px 0 16px 16px;
}
.step-item {
  display: flex;
  align-items: center;
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.step-item.active {
  flex: 2;
  margin-left: 50px;
}
.step-num {
  font-size: 48px;
  line-height: 1;
  position: relative;
  margin-right: 8px;
  text-shadow: 0 2px 8px #e6f7e6;
  color: #CCCCCC;
}
.step-item.active .step-num {
  color: #fff;
  text-shadow:
    1px 1px 0 #000,
    -1px -1px 0 #000,
    -1px 1px 0 #000,
    1px -1px 0 #000,
    0 1px 0 #000,
    1px 0 0 #000,
    0 -1px 0 #000,
    -1px 0 0 #000;
}
.step-item.active .step-num::after {
  content: '';
  position: absolute;
  top: 20px;
  right: 0;
  width: 15px;
  height: 15px;
  background-color: #50cf54;
  opacity: 0.5;
  border-radius: 50%;
}
.step-content {
  display: flex;
  flex-direction: column;
}
.step-title {
  font-size: 16px;
  color: #808080;;
}
.step-desc {
  font-size: 12px;
  color: #808080;
  margin-top: 2px;
}

.photo-upload-body {
  position: relative;
  width: 80vw;
  height: 80vw;
  margin: 16px auto 0 auto;
}
.photo-upload-box {
  margin: 16px auto 0 auto;
  width: 80vw;
  height: 80vw;
  border-radius: 12px;
  background: #F0F2F5;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
}
.photo-upload-box-1 {
  width: 80vw;
  height: 70vw;
  border-radius: 12px;
  /* background: #F0F2F5; */
  background: rgba(0, 0, 0, 0);
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}
.photo-upload-img {
  width: 80vw;
  height: 80vw;
  border-radius: 12px;
}
.photo-upload-header {
  width: 100%;
  display: flex;
  align-items: center;
  padding: 12px 16px 0 12px;
  font-size: 14px;
  color: #888;
  justify-content: flex-end;
}
.photo-upload-guide-icon {
  font-size: 16px;
  margin-right: 4px;
}
.photo-upload-guide-text {
  font-size: 13px;
}
.photo-upload-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  user-select: none;
}
.photo-upload-plus {
  font-size: 48px;
  color: #c2c2c2;
  margin-bottom: 8px;
}
.photo-upload-text {
  font-size: 16px;
  color: #888;
  margin-bottom: 4px;
}
.photo-upload-tip {
  font-size: 12px;
  color: #b0b0b0;
}
.photo-upload-footer {
  position: absolute;
  bottom: 10px;
  left: 0;
  width: 100%;
  text-align: center;
  font-size: 12px;
  color: #b0b0b0;
  padding: 0 12px;
  line-height: 1.5;
}

.style-section {
  margin: 16px 0 0 0;
  padding: 0 16px;
}
.style-title {
  font-size: 16px;
  color: #222;
  font-weight: bold;
  margin-bottom: 12px;
}
.style-list {
  display: flex;
  gap: 10px;
  justify-content: flex-start;
  align-items: flex-start;
  overflow-x: scroll;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}
.style-list::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}
.style-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  position: relative;
  width: 25vw;
}
.style-img {
  width: 23vw;
  height: 23vw;
  border-radius: 8px;
  border: 2px solid transparent;
  object-fit: cover;
  transition: border 0.2s;
}
.style-item .style-selected {
  position: absolute;
  right: 4px;
  bottom: 30px;
  width: 20px;
  height: 20px;
  background: #50cf54;
  border-radius: 50%;
  border: 2px solid #fff;
  display: inline-block;
  box-shadow: 0 2px 8px rgba(80, 207, 84, 0.2);
}
.style-item .style-selected::after {
  content: '';
  display: block;
  width: 10px;
  height: 6px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  position: absolute;
  left: 4px;
  top: 5px;
  transform: rotate(-45deg);
}
.style-item .style-label {
  margin-top: 8px;
  font-size: 14px;
  color: #333;
  text-align: center;
  white-space: nowrap;
}
.style-item:hover .style-img,
.style-item .style-selected ~ .style-img {
  border: 2px solid #50cf54;
}

.bg-style-section {
  margin: 24px 0 0 0;
  padding: 0 16px;
}
.bg-style-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.bg-style-title {
  font-size: 16px;
  color: #000;
  font-weight: bold;
  margin-right: 8px;
}
.bg-style-desc {
  font-size: 13px;
  color: #808080;
  display: flex;
  align-items: center;
  cursor: not-allowed;
}
.bg-style-desc.disabled {
  opacity: 0.6;
}
.bg-style-tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 8px;
}
.bg-style-tab {
  padding: 6px 18px;
  border: none;
  border-radius: 18px;
  background: #f0f2f5;
  color: #333;
  font-size: 12px;
  cursor: pointer;
  outline: none;
  transition: background 0.2s, color 0.2s;
}
.bg-style-tab.active {
  background: #e6f7e6;
  color: #22c55e;
  font-weight: bold;
}
.bg-style-tab:disabled {
  background: #f0f2f5;
  color: #b0b0b0;
  cursor: not-allowed;
}
.bg-style-tip {
  font-size: 13px;
  color: #888;
  margin-top: 4px;
}
.bg-photo-upload-section {
  margin: 24px 0 0 0;
  padding: 0 16px;
}
.bg-photo-upload-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 16px;
  font-weight: bold;
  color: #222;
  margin-bottom: 12px;
}
.bg-photo-upload-area {
  display: flex;
  align-items: center;
  position: relative;
}
.bg-photo-upload-label {
  display: inline-block;
}
.bg-photo-upload-label-1 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 120px;
  height: 120px;
  background: none;
}
.bg-photo-upload-box {
  width: 120px;
  height: 120px;
  border: 2px dashed #b0b0b0;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: #fafafa;
  transition: border 0.2s;
}
.bg-photo-upload-img {
  width: 120px;
  height: 120px;
  border-radius: 12px;
}
.bg-photo-upload-plus {
  font-size: 32px;
  color: #b0b0b0;
  margin-bottom: 8px;
}
.bg-photo-upload-text {
  font-size: 16px;
  color: #888;
}

.design-action-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  background: #fff;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
}
.design-left {
  display: flex;
  align-items: center;
}
.design-leaf-icon {
  margin-right: 4px;
  vertical-align: middle;
}
.design-remaining {
  color: #222;
  font-size: 16px;
  font-weight: 500;
}
.design-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  outline: none;
  cursor: pointer;
  width: 50vw;
  height: 56px;
  border-radius: 28px;
  font-size: 20px;
  font-weight: bold;
  background: linear-gradient(90deg, #D1ED8E 0%, #55E668 100%);
  color: #222;
  box-shadow: 0 2px 8px rgba(80, 207, 84, 0.10);
  transition: background 0.2s;
}
.design-btn .design-arrow {
  margin-left: 20px;
  vertical-align: middle;
  position: absolute;
  right: 30px;
  transition: transform 0.2s;
  width: 18px;
  height: 12px;
}
.btndiv {
  position: fixed;
  bottom: 10vh;
  width: 80%;
  left: 50%;
  transform: translateX(-50%);
}
</style>
