
<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">
            {{ toValueWithout("订单编号") }}
          </div>
          <div class="order-type-item-title">
            {{ orderStat.order_no }}
          </div>
        </div>
        <div class="order-type-item" v-if="prodId">
          <div class="order-type-item-title">
            {{ toValueWithout("产品类型") }}
          </div>
          <div class="order-type-item-title" v-if="typeId == 1">
            {{ toValueWithout("立体徽章") }}
          </div>
          <div class="order-type-item-title" v-if="typeId == 2">
            {{ toValueWithout("浮雕相框") }}
          </div>
          <div class="order-type-item-title" v-if="typeId == 3">
            {{ toValueWithout("3D冰箱贴") }}
          </div>
          <div class="order-type-item-title" v-if="typeId == 4">
            {{ toValueWithout("3D卡通手办") }}
          </div>
        </div>
      </div>
      <div class="size-title">
        {{ toValueWithout("剩余兑换数量") }}
      </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">
            （{{ toValueWithout("剩余兑换") }}：{{ item.remaining }}）
          </div>
        </div>
      </div>
    </div>
    <div class="badge-info" v-if="trialCode == false">
      <div class="badge-item" @click="goToRecord">
        <div class="badge-title">
          {{ toValueWithout("设计图集") }}
        </div>
        <div class="badge-count">
          {{ orderStat.create_count || 0 }}{{ toValueWithout("张") }}
        </div>
      </div>
      <div class="badge-item" @click="goToMyOrder">
        <div class="badge-title">
          {{ toValueWithout("我的订单") }}
        </div>
        <div class="badge-count">
          {{ orderStat.order_count || 0 }}{{ toValueWithout("笔") }}
        </div>
      </div>
    </div>
    <div class="badge-phone" v-if="trialCode == true">
      <van-field
        :label="toValueWithout('手机号码')"
        type="number"
        v-model="mobile"
        :placeholder="toValueWithout('请输入手机号')"
        required
        maxlength="11"
        :rules="[{ required: true, message: toValueWithout('请输入手机号') }]"
        @blur="onBlur"
        @confirm="onBlur"
      />
      <p style="font-size: 12px; color: #000; margin-left: 16px;">{{ toValueWithout("注：需要先输入手机号才可体验徽章设计") }}</p>
      <div class="style-box">
        <div class="style-box-item">
          <div class="style-item-title" :class="{ styleActive: prodId == 7 || prodId == 1 }" @click="styleChange(7)">
            {{ prop == '3D真人肖像' ? toValueWithout('3D真人肖像') : toValueWithout('人物立体徽章') }} 
          </div>
          <div class="style-item-title" :class="{ styleActive: prodId == 8 || prodId == 2 }" @click="styleChange(8)">
            {{ toValueWithout("宠物立体徽章") }}
          </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">
            {{ toValueWithout("上传正面照片") }}
          </div>
          <div class="step-desc">
            {{ toValueWithout("1张五官清晰的正面照片") }}
          </div>
        </div>
      </div>
      <div class="step-item">
        <div class="step-num">
          2
        </div>
        <div class="step-content">
          <div class="step-title">
            {{ toValueWithout("确认下单") }}
          </div>
          <div class="step-desc">
            {{ toValueWithout("选择一个你喜欢的设计") }}
          </div>
        </div>
      </div>
    </div>
    <div class="tag-change-box" v-if="trialCode == false">
      <div class="tag-change-item">
        <div class="tag-change-item-title" :class="{ tagActive: prodId == 7 || prodId == 1 }" @click="prodChange(7)">
          {{ toValueWithout("人物主体") }}
        </div>
        <div class="tag-change-item-title" :class="{ tagActive: prodId == 8 || prodId == 19 }" @click="prodChange(8)">
          {{ toValueWithout("宠物主体") }}
        </div>
      </div>
      <div style="font-size: 12px; color: #888; text-align: center;">{{ toValueWithout("不同主体的照片检测标准不同") }}</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;">{{ toValueWithout("照片示例") }}</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">{{ toValueWithout("图片上传指南") }}</span>
        </div>
        <div class="photo-upload-area">
          <div class="photo-upload-plus">
            +
          </div>
          <div class="photo-upload-text">
            {{ toValueWithout("点击上传照片") }}
          </div>
          <div class="photo-upload-tip">
            *{{ toValueWithout("上传照片时建议勾选[原图]") }}
          </div>
        </div>
        <div class="photo-upload-footer">
          {{ toValueWithout("请确定您对上传的照片拥有合法使用权利或已取得他人合法授权，且同意本平台分析图片信息以提供生成服务") }}
        </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 v-if="typeId == 4 && kindList.length > 0">
      <div style="font-size: 16px; color: #222; font-weight: bold; margin-top: 16px;padding: 0 16px;">{{ toValueWithout("风格类型") }}</div>
      <div class="kind-box">
        <div class="kind-box-item" v-for="item in kindList" :key="item.id" :class="{ styleActive: kindId == item.id }">
          <div class="kind-item-title" @click="kindChange(item.id)">
            {{ toValueWithout(item.name) }}
          </div>
        </div>
      </div>
    </div>
    <div v-if="typeId == 4 && prodId == 19">
      <div style="font-size: 16px; color: #222; font-weight: bold; margin-top: 16px;padding: 0 16px;">{{ toValueWithout("多视角参考图") }}</div>
      <div style="font-size: 12px; color: #aaa; margin-top: 8px;padding: 0 16px;">{{ toValueWithout("AI建模具有随机性，上传参考图有助于更好的还原主体特征") }}</div>
      <div class="photo-upload-box-refer">
        <van-uploader v-model="referPicture" multiple :max-count="3" :max-size="10 * 1024 * 1024" @oversize="onOversize" :deletable="true" :show-preview="true" :before-read="beforeRead" upload-icon="plus" />
      </div>
    </div>
    <div v-if="typeId != 4">
      <div style="font-size: 12px; color: red; margin-top: 16px; text-align: center;" v-if="prodId == 7 || prodId == 1">{{ toValueWithout("温馨提示：请上传只有") }}{{ prop == '3D真人肖像' ? '1' : '1-3' }}{{ toValueWithout("人的照片") }}</div>
      <div style="font-size: 12px; color: red; margin-top: 16px; text-align: center;" v-if="prodId == 8 || prodId == 2">{{ toValueWithout("温馨提示：请上传只有") }}1-3{{ toValueWithout("只宠物的照片") }}</div>
    </div>
    <div style="height: 120px;"></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">{{ toValueWithout("剩余") }}{{ orderStat.remain_count || 0 }}{{ toValueWithout("次") }}</span>
        <span v-if="trialCode == true" class="design-remaining">{{ toValueWithout("体验1次") }}</span>
      </div>
      <button class="design-btn" @click="goToPreview">
        <span>{{ toValueWithout("开始设计") }}</span>
        <img class="design-arrow" src="@/assets/badge/arrow.png" alt="">
      </button>
    </div>
  </div>

  <van-action-sheet v-model:show="imgShow" :title="toValueWithout('图片上传指南')" :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;">
            {{ toValueWithout("多主体") }}
          </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;">
            {{ toValueWithout("光线昏暗") }}
          </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;">
            {{ toValueWithout("后侧面及背影") }}
          </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;">
            {{ toValueWithout("照片模糊") }}
          </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;">
            {{ toValueWithout("照片留白过少") }}
          </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">
          {{ toValueWithout("我已了解") }}
        </button>
      </div>
    </div>
  </van-action-sheet>
</template>
<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 type { UploaderFileListItem } from 'vant'
import * as badgeApi from '@/api/badge'
import { useTranslation } from "i18next-vue";
import * as i18n from '@/lang/utils'
import { toValueWithout } from '@/lang/utils'

import { localStorage } from '@/utils/local-storage'
import CryptoJS from 'crypto-js'

// 初始化翻译功能
const { t } = useTranslation();
i18n.set(t);

const show = ref(false)
const imgShow = ref(false)

const referPicture = ref<UploaderFileListItem[]>([])

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

onMounted(() => {
  watch(
    () => prodId.value,
    () => {
      getSundryList()
    }
  )
})

// 判断是否是APP
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 = true
    options.value.ceilbutton = true
  }
}
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 typeId = ref(0)
const getOrderStat = () => {
  badgeApi.getOrderStat({}).then((res: any) => {
    orderStat.value = res
    if (res.type_id == 4) {
      prodId.value = res.prod_id == 1 ? 1 : 19
      getKindList()
    } else {
      prodId.value = res.type_id == 3 ? 8 : res.prod_id
    }
    prop.value = res.prop
    typeId.value = res.type_id
    getSundryList()
  })
}

const kindList = ref([])
const getKindList = () => {
  badgeApi.getKindList({
    support_subject: prodId.value == 19 ? 2 : 1,
    type_id: 4
  }).then((res: any) => {
    kindList.value = res.list
    kindId.value = res.list && res.list[0]?.id
    console.log('kindList', kindList.value)
  })
}

const prodChange = (id: number) => {
  console.log('prodChange', id)
  if (typeId.value == 3 && id == 7) {
    showToast(toValueWithout('人物3D冰箱贴暂未开放'))
    return 
  }
  if (typeId.value == 4) {
    if(prodId.value == 19) {
      showToast(toValueWithout('该订单属于宠物卡通手办'))
      return 
    }
    if(prodId.value == 1) {
      showToast(toValueWithout('该订单属于人物卡通手办'))
      return 
    }
  }
  prodId.value = typeId.value == 4 ? id == 8 ? 19 : 1 : id == 7 ? 7 : 8
  picture.value = null
  kindId.value = 0
}

const kindId = ref(0)
const kindChange = (id: number) => {
  kindId.value = id
  console.log('kindChange', id)
}

const isLoading = ref(false)

// 生成图片
function goToPreview() {
  if (isLoading.value) {
    return
  }
  console.log('goToPreview')
  if (!imgurl.value) {
    showToast(toValueWithout('请先上传照片'))
    return
  }
  if (orderStat.value.remain_count <= 0) {
    showToast(toValueWithout('剩余次数不足'))
    return
  }
  isLoading.value = true
  if (trialCode.value) {
    trialPhone()
  } else {
    getPid()
  }
}

// 一次性体验链接
const trialPhone = async () => {
  if (!mobile.value) {
    showToast(toValueWithout('请输入手机号'));
    return;
  }
  const mobileReg = /^1[3-9]\d{9}$/;
  if (!mobileReg.test(mobile.value)) {
    showToast(toValueWithout('请输入正确的手机号'));
    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 < 300 || imageHeight.value < 300) {
      showToast(toValueWithout('请上传尺寸大于300*300像素的照片'))
      imgurl.value = null
      picture.value = null
      return false;
    }
    const blob = base64ToBlob(data);
    if (blob.size > 1024 * 1024 * 10) {
      showToast(toValueWithout('照片大小不能超过10M'))
      imgurl.value = null
      picture.value = null
      return false;
    }
    imgurl.value = blob;
    if (prodId.value == 7 || prodId.value == 1) {
      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 < 300 || imageHeight.value < 300) {
      showToast(toValueWithout('请上传尺寸大于300*300像素的照片'))
      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: prodId.value
      }).then((res: any) => {
        console.log('faceCheck', res)
        showSuccessToast({
          message: toValueWithout('人脸检测成功'),
          duration: 2000,
        })
      }).catch((err) => {
        console.log('faceCheck', err)
        showFailToast({
          message: err.message || toValueWithout('人脸检测失败'),
          icon: 'none',
          duration: 2000,
        })
        imgurl.value = null
        picture.value = null
      }).finally(() => {
        setTimeout(() => {
          closeToast()
        }, 2000);
      })
    }
  } catch (err) {
    closeToast()
    showFailToast({
      message: err.message || toValueWithout('上传失败'),
      icon: 'none',
      duration: 2000,
    })
  }
}

const onOversize = (file: any) => {
  if (file.size > 10 * 1024 * 1024) {
    showToast(toValueWithout('照片大小不能超过10M'))
    return false
  }
  return true
}

const beforeRead = (file: any) => {
  const MIN_WIDTH = 300
  const MIN_HEIGHT = 300
  const MAX_SIZE = 10 * 1024 * 1024

  const toPreviewAndCheck = (input: any): Promise<UploaderFileListItem> => {
    return new Promise((resolve, reject) => {
      const raw: File = input.file || input
      if (raw.size > MAX_SIZE) {
        showToast(toValueWithout('照片大小不能超过10M'))
        reject(false)
        return
      }
      const objectUrl = URL.createObjectURL(raw)
      const img = new Image()
      img.src = objectUrl
      img.onload = () => {
        const width = img.naturalWidth
        const height = img.naturalHeight
        imageWidth.value = width
        imageHeight.value = height
        URL.revokeObjectURL(objectUrl)
        if (width < MIN_WIDTH || height < MIN_HEIGHT) {
          showToast(toValueWithout(`请上传尺寸大于${MIN_WIDTH}×${MIN_HEIGHT}像素的照片`))
          reject(false)
          return
        }
        const reader = new FileReader()
        reader.onload = (e) => {
          const url = e.target?.result as string
          // 设置回显，不手动 push，交由 v-model 维护
          const out: any = input
          out.url = url
          resolve(out)
        }
        reader.onerror = () => {
          showToast(toValueWithout('图片读取失败'))
          reject(false)
        }
        reader.readAsDataURL(raw)
      }
      img.onerror = () => {
        showToast(toValueWithout('图片加载失败'))
        URL.revokeObjectURL(objectUrl)
        reject(false)
      }
    })
  }

  if (Array.isArray(file)) {
    return Promise.allSettled(file.map(toPreviewAndCheck)).then((results) => {
      const passed = results
        .filter(r => r.status === 'fulfilled')
        .map((r: any) => r.value)
      if (passed.length === 0) return Promise.reject(false)
      return passed
    })
  }
  return toPreviewAndCheck(file)
}



// 获取Pid
const pid = ref('')
const getPid = async () => {
  showLoadingToast({
    message: toValueWithout('上传中...'),
    forbidClick: true,
    loadingType: 'spinner',
    duration: 0,
  })
  const params = {
    prod_id: prodId.value,
    extend_value: -1,
    type_id: typeId.value
  }
  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)
      if (typeId.value == 4 && prodId.value == 19 && referPicture.value.length > 0) {
        const multiUrlTasks = referPicture.value.map((item) => {
          return badgeApi.getMultiUrl({
            pid: pid.value,
          }).then((res: any) => {
            console.log('multiUrl', res)
            return sendToOss(item.file, res.multi_url)
          })
        })
        await Promise.all(multiUrlTasks)
      }
    } catch (err) {
      closeToast()
      console.error('上传失败:', err)
      showFailToast({
        message: toValueWithout('上传失败'),
        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 | Blob | File, 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,
        type_id: typeId.value,
        kind_id: kindId.value
      }
      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,
    type_id: typeId.value,
    kind_id: kindId.value
  }
    badgeApi.createLog(params).then((res: any) => {
    console.log('createLog', res)
    closeToast()
    showSuccessToast({
      message: toValueWithout('照片上传成功'),
      duration: 2000,
    })
    setTimeout(() => {
      closeToast()
      router.push({
        path: '/badge/preview',
        query: {
          pid: pid.value,
          group: 1,
          prod_id: prodId.value,
          type_id: typeId.value,
          kind_id: kindId.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 || prodId.value == 1 ? '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(toValueWithout('请输入手机号'));
    return;
  }
  const mobileReg = /^1[3-9]\d{9}$/;
  if (!mobileReg.test(mobile.value)) {
    showToast(toValueWithout('请输入正确的手机号'));
    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>

<style lang="scss" scoped>
.photo-upload-page {
  height: auto;
  overflow-y: scroll!important;
}
.badge-size {
  padding: 16px;
  .size-title {
    font-size: 14px;
    color: #000;
  }
  .size-options {
    .size-item {
    margin-top: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
      .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: 0;
}
.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: 0px;
  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;
}
.tag-change-box {
  margin: 0 auto;
}
.tag-change-item {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  padding: 10px 0;
}
.tag-change-item-title {
  font-size: 14px;
  color: #333;
  background: #E5E5E5;
  width: 120px;
  height: 32px;
  text-align: center;
  line-height: 32px;
}
.tag-change-item-title:first-child {
  border-top-left-radius: 16px;
  border-bottom-left-radius: 16px;
}
.tag-change-item-title:last-child {
  border-top-right-radius: 16px;
  border-bottom-right-radius: 16px;
}
.tag-change-item-title.tagActive {
  background: #50CF54;
  color: #fff;
}
.kind-box {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  padding: 16px 36px;
}
.kind-box-item {
  margin-right: 10px;
  padding: 6px 10px;
  background: #f5f5f5;
  border-radius: 8px;
  color: #333;
}
.kind-item-title {
  font-size: 14px;
}
.kind-box-item.styleActive {
  background: #50CF54;
  color: #fff;
}
.photo-upload-box-refer {
  margin: 16px;
}
</style>
