<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 { localStorage } from '@/utils/local-storage'
import CryptoJS from 'crypto-js'

const show = ref(false)
const imgShow = ref(false)
const router = useRouter()
const option = ref({
  canScale: true,
  autoCropWidth: 1024,
  autoCropHeight: 1024,
  ceilbutton: false,
  infoTrue: true,
  fixed: false,
  fixedNumber: [3, 4],
  fixedBox: false,
  canMoveBox: true,
  enlarge: 6
})
const options = ref({
  autoCropWidth: 1000,
  autoCropHeight: 1000,
  ceilbutton: false,
  info: true
})

const openApp = () => {
  const ua = navigator.userAgent;
  const isIOS = /iPhone|iPad|iPod/i.test(ua);
  const isAndroid = /Android/i.test(ua);

  if (isIOS) {
    option.value.ceilbutton = true
    options.value.ceilbutton = true
  } else if (isAndroid) {
    option.value.ceilbutton = false
    options.value.ceilbutton = false
  } else {
    option.value.ceilbutton = false
    options.value.ceilbutton = false
  }
}
const imgurl = ref('')
const imgBgUrl = ref('')
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 prodId = ref(7)
const prop = ref('')
const getOrderStat = () => {
  badgeApi.getOrderStat({}).then((res: any) => {
    orderStat.value = res
    prodId.value = res.prod_id
    prop.value = res.prop
    getSundryList()
  })
}

const isLoading = ref(false)

function goToPreview() {
  if (isLoading.value) {
    return
  }
  console.log('goToPreview')
  if (!imgurl.value) {
    showToast('请先上传照片')
    return
  }
  if (orderStat.value.remain_count <= 0) {
    showToast('剩余次数不足')
    return
  }
  isLoading.value = true
  if (trialCode.value) {
    trialPhone()
  } else {
    getPid()
  }
}
const trialPhone = async () => {
  if (!mobile.value) {
    showToast('请输入手机号');
    return;
  }
  const mobileReg = /^1[3-9]\d{9}$/;
  if (!mobileReg.test(mobile.value)) {
    showToast('请输入正确的手机号');
    return;
  }
  await badgeApi.trialPhone({
    phone: mobile.value
  }).then((res: any) => {
    const timestamp = Date.now()
    const payload = JSON.stringify({ userId: res, timestamp })
    userId.value = Encrypt(payload)
    localStorage.set('userId', userId.value)
    getPid()
  }).catch((err) => {
    showToast({
      message: err.message,
      duration: 2000,
    })
    isLoading.value = false
  }).finally(() => {
    isLoading.value = false
  }) 
}
const picture = ref(null)

let imgPromise = null;

const imageWidth = ref(0);
const imageHeight = ref(0);
function getbase64Data(data) {
  console.log('getbase64Data', data)
  picture.value = data;

  const img = new Image();
  img.src = data;
  img.onload = () => {
    imageWidth.value = img.naturalWidth;
    imageHeight.value = img.naturalHeight;
    if (imageWidth.value < 500 || imageHeight.value < 500) {
      showToast('请上传尺寸大于500*500像素的照片')
      imgurl.value = null
      picture.value = null
      return false;
    }
    const blob = base64ToBlob(data);
    if (blob.size > 1024 * 1024 * 10) {
      showToast('照片大小不能超过10M')
      imgurl.value = null
      picture.value = null
      return false;
    }
    imgurl.value = blob;
    if (prodId.value == 7) {
      getUploadUrl()
    }
  }
}

function base64ToBlob(base64) {
    var arr = base64.split(','),
        mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]),
        n = bstr.length,
        u8arr = new Uint8Array(n);
    while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
    }
    return new Blob([u8arr], {
        type: mime
    });
}

function imgorigoinf(data) {
  const img = new Image();
  const objectUrl = URL.createObjectURL(data); // 创建文件对象的URL
  img.src = objectUrl;
  img.onload = () => {
    imageWidth.value = img.naturalWidth;
    imageHeight.value = img.naturalHeight;
    if (imageWidth.value < 500 || imageHeight.value < 500) {
      showToast('请上传尺寸大于500*500像素的照片')
      setTimeout(() => {
        const btn = document.querySelector('.btn')
        if (btn) {
          btn.click()
        }
      }, 1500);
      imgurl.value = null
      picture.value = null
      return
    }
    console.log('imageWidth', imageWidth.value, 'imageHeight', imageHeight.value)
  }
}

const getUploadUrl = () => {
  badgeApi.getUploadUrl({}).then((res: any) => {
    if (res) {
      sendFaceToOss(imgurl.value, res.upload_url, res.path)
    }
  })
}

const sendFaceToOss = async (src: string, url: string, path: string) => {
  try {
    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 (response.status == 200) {
      badgeApi.faceCheck({
        path: path,
        prop: prop.value,
        prod_id: 7
      }).then((res: any) => {
        console.log('faceCheck', res)
        showSuccessToast({
          message: '人脸检测成功',
          duration: 2000,
        })
      }).catch((err) => {
        console.log('faceCheck', err)
        showFailToast({
          message: err.message || '人脸检测失败',
          icon: 'none',
          duration: 2000,
        })
        imgurl.value = null
        picture.value = null
      }).finally(() => {
        setTimeout(() => {
          closeToast()
        }, 2000);
      })
    }
  } catch (err) {
    closeToast()
    showFailToast({
      message: err.message || '上传失败',
      icon: 'none',
      duration: 2000,
    })
  }
}



// 获取Pid
const pid = ref('')
const getPid = async () => {
  showLoadingToast({
    message: '上传中...',
    forbidClick: true,
    loadingType: 'spinner',
    duration: 0,
  })
  const params = {
    prod_id: prodId.value,
    extend_value: -1,
  }
  try {
    const res = await badgeApi.getPid(params) as any
    console.log('getPid', res)
    isLoading.value = false
    pid.value = res.pid
    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,
      })
      isLoading.value = false
      return
    }
  } 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) {
      isAnotherAPICalled.value = true
      const params = {
        pid: pid.value,
        group: 1,
        prod_id: prodId.value,
        extend_value: -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,
    prod_id: prodId.value
  }
  badgeApi.createLog(params).then((res: any) => {
    console.log('createLog', res)
    closeToast()
    showSuccessToast({
      message: '照片上传成功',
      duration: 2000,
    })
    setTimeout(() => {
      closeToast()
      router.push({
        path: '/badge/preview',
        query: {
          pid: pid.value,
          group: 1,
          prod_id: prodId.value
        },
      })
    }, 1000);
  }).catch((err) => {
    console.log('getGenImages', err)
    showFailToast({
      message: err.message,
      duration: 2000,
    })
  }).finally(() => {
    closeToast()
  })
}

const sundryList = ref([])
const getSundryList = () => {
  badgeApi.getSundryList({
    page: 1,
    size: 6,
    group: prodId.value == 7 ? 'gp' : 'pet',
  }).then((res: any) => {
    const data = res || []
    sundryList.value = data.list
  }).catch((err) => {
    showToast({
      message: err.message,
      duration: 2000,
    })
  }).finally(() => {
    
  })
}

const trialCode = ref(false)
const trialCodeValue = ref('')
const getTrialCode = () => {
  const value = localStorage.get('trialCode')
  if (value) {
    trialCode.value = true
    trialCodeValue.value = value
  } else {
    getOrderStat()
    getSizeList()
  }
}
const mobile = ref('')
const userId = ref('')
const onBlur = async () => {
  console.log(mobile.value);
  if (!mobile.value) {
    showToast('请输入手机号');
    return;
  }
  const mobileReg = /^1[3-9]\d{9}$/;
  if (!mobileReg.test(mobile.value)) {
    showToast('请输入正确的手机号');
    return;
  }
}
const styleChange = (id: number) => {
  prodId.value = id
  getSundryList()
}
const key = CryptoJS.enc.Utf8.parse("123abcdefpua2025");
const iv = CryptoJS.enc.Utf8.parse('DYgjCEIMVrj2W9xN');
function Encrypt(word: string): string {  
   let srcs = CryptoJS.enc.Utf8.parse(word);
   let encrypted = CryptoJS.AES.encrypt(srcs, key, {
    iv: iv, mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.Pkcs7 });
   return encrypted.ciphertext.toString();
}
function handleBeforeUnload(_event: BeforeUnloadEvent) {
  localStorage.remove('code')
  localStorage.remove('trialCode')
  localStorage.remove('userId')
}
onMounted(() => {
  getSundryList()
  openApp()
  getTrialCode()
  window.addEventListener('beforeunload', handleBeforeUnload);
})
</script>

<template>
  <div class="photo-upload-page">
    <div class="badge-size" v-if="trialCode == false">
      <div class="order-type">
        <div class="order-type-item">
          <div class="order-type-item-title" v-if="orderStat.order_no">
            订单编号
          </div>
          <div class="order-type-item-title">
            {{ orderStat.order_no }}
          </div>
        </div>
        <div class="order-type-item" v-if="orderStat.prod_id">
          <div class="order-type-item-title">
            产品类型
          </div>
          <div class="order-type-item-title">
            {{ orderStat.prod_id == 7 ? '人物立体徽章' : '宠物立体徽章'}}
          </div>
        </div>
      </div>
      <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>
    </div>
    <div class="badge-info" v-if="trialCode == false">
      <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 class="badge-phone" v-if="trialCode == true">
      <van-field
        label="手机号码"
        type="number"
        v-model="mobile"
        placeholder="请输入手机号"
        required
        maxlength="11"
        :rules="[{ required: true, message: '请输入手机号' }]"
        @blur="onBlur"
        @confirm="onBlur"
      />
      <p style="font-size: 12px; color: #000; margin-left: 16px;">注：需要先输入手机号才可体验徽章设计</p>
      <div class="style-box">
        <div class="style-box-item">
          <div class="style-item-title" :class="{ styleActive: prodId == 7 }" @click="styleChange(7)">
            {{ prop == '3D真人肖像' ? '3D真人肖像' : '人物立体徽章' }} 
          </div>
          <div class="style-item-title" :class="{ styleActive: prodId == 8 }" @click="styleChange(8)">
            宠物立体徽章
          </div>
        </div>
      </div>
    </div>
    <div style="height: 8px;background: #F2F2F2;"></div>
    <div class="step-container" v-if="trialCode == false">
      <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="step-line" v-if="prop == '3D真人肖像'">
      <div class="step-line-item">
        <div class="step-line-item-title">
          <span style="display: flex; align-items: center;justify-content: center;">
            <span style="height: 1px; background: #ccc;width: 50px;"></span>
            <span style="margin: 0 8px; color: #888;">照片示例</span>
            <span style="height: 1px; background: #ccc;width: 50px;"></span>
          </span>
        </div>
        <div class="step-line-item-desc" style="display: flex; align-items: center;justify-content: space-around;padding: 16px 16px 0 16px;">
          <div class="step-line-item-desc-item">
            <img src="@/assets/badge/1.png" style="width: 20vw;height: 20vw;border-radius: 8px;" alt="">
          </div>
          <div class="step-line-item-desc-item">
            <img src="@/assets/badge/2.png" style="width: 20vw;height: 20vw;border-radius: 8px;" alt="">
          </div>
          <div class="step-line-item-desc-item">
            <img src="@/assets/badge/3.png" style="width: 20vw;height: 20vw;border-radius: 8px;" alt="">
          </div>  
          <div class="step-line-item-desc-item">
            <img src="@/assets/badge/4.png" style="width: 20vw;height: 20vw;border-radius: 8px;" alt="">
          </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" @imgorigoinf="imgorigoinf" ></h5-cropper>
      </div>
    </div>
    <div style="font-size: 12px; color: red; margin-top: 16px; text-align: center;" v-if="prodId == 7">温馨提示：请上传只有{{ prop == '3D真人肖像' ? '1' : '1-3' }}人的照片</div>
    <div style="font-size: 12px; color: red; margin-top: 16px; text-align: center;" v-if="prodId == 8">温馨提示：请上传只有1-3只宠物的照片</div>
    <div style="height: 90px;"></div>
    <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 v-if="trialCode == false" class="design-remaining">剩余{{ orderStat.remain_count || 0 }}次</span>
        <span v-if="trialCode == true" class="design-remaining">体验1次</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="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;
  text-align: center;
}
.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 {
  max-width: 80vw;
  max-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: 120px;
  width: 80%;
  left: 50%;
  transform: translateX(-50%);
}
@media screen and (max-width: 767px) {
  _::-webkit-full-page-media,
  _:future,
  :root .btndiv {
    padding-bottom: 120px;
  }
}
.order-type-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  border-radius: 12px;
  margin-bottom: 12px;
  font-size: 14px;
}
.style-box {
  padding: 0 16px;
}
.style-box-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 12px;
  font-size: 14px;
  margin-bottom: 12px;
}
.style-item-title {
  width: 48%;
  text-align: center;
  padding: 10px 0;
  border-radius: 12px;
  color: #333;
  font-size: 14px;
  background: #f5f5f5;
}
.style-item-title.styleActive {
  background: #50cf54;
  color: #fff;
}
</style>
