<template>
  <view class="page">
    <!-- 毛玻璃 -->
    <view class="glass">
      <image src="../../assets/img/homeImg.jpg" mode="scaleToFill" />
    </view>
    <view class="showImgBox imgContenBox"
      ><image :src="styleData.coverImg"
    /></view>
    <text class="name">{{ styleData.title }}</text>
    <view class="orangeBtn" @click="createing(styleData.id)"
      >开始制作写真
      <view class="free">
        <text>耗金币{{ needCoin }}枚</text>
      </view>
    </view>
    <view class="balance"
      >金币余额:&nbsp;&nbsp;{{ userInfoModulesPinia.myGlod }}
      <image src="../../assets/icon/coin.png" mode="aspectFit" />
    </view>
  </view>
</template>

<script setup>
//#region 导入
import { ref, reactive } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import {
  findByIdApi,
  findImageApi,
  createPhotoApi,
} from "../../api/closeStyle";
import { findGlodApi } from "../../api/home";
import { userInfoModules } from "@/store/modules/userInfo";
const userInfoModulesPinia = userInfoModules();
//#endregion

//#region 初始化
const styleId = ref(null);
const styleData = ref({});
onLoad((options) => {
  styleId.value = options.id;
  getInfo();
  getMyCoin();
});
// 查询我的金币
async function getMyCoin() {
  const res4 = await findGlodApi();
  if (!res4.data) {
    userInfoModulesPinia.myGlod = 0;
  } else {
    userInfoModulesPinia.myGlod = res4.data.digitalAvatarResidueGlod
      ? res4.data.digitalAvatarResidueGlod
      : 0;
  }
}
const needCoin = ref(""); //模版消耗金币
async function getInfo() {
  try {
    const res = await findByIdApi(styleId.value);
    needCoin.value = res.data.salePrice;
    console.log(res);
    styleData.value = res.data;
  } catch (error) {
    uni.showToast({
      title: "获取数据失败，请重试",
      icon: "none",
    });
  }
}

//#endregion ---------------------

//#region 生成写真照片

async function createing(id) {
  if (needCoin.value > userInfoModulesPinia.myGlod) {
    uni.showToast({
      title: "金币不足,请充值",
      icon: "none",
    });
    return;
  }
  try {
    uni.showLoading({
      title: "生成中...",
      mask: true,
    });
    const res = await findImageApi();
    let myImg = res.data.image;
    const data = {
      digitalAvatarId: id,
      userImages: JSON.stringify([myImg]),
      title: styleData.value.title,
    };
    const res2 = await createPhotoApi(data);
    console.log(res2);
    uni.reLaunch({
      url: `/pages/createing/index?id=${res2.data.id}`,
    });
    uni.hideLoading();
  } catch (error) {
    console.log(error);
    uni.hideLoading();
    uni.showToast({
      title: "生成失败，请重试",
      icon: "none",
    });
  }
}
//#endregion ---------------------

//#region

//#endregion ---------------------
</script>

<style lang="scss">
.showImgBox {
  margin-top: 30rpx;
  width: 540rpx;
  height: 720rpx;
  // background-color: #ccc;
  border-radius: 30rpx;
  image {
    width: 100%;
    height: 100%;
    border-radius: 30rpx;
  }
}
.name {
  margin-top: 80rpx;
  margin-bottom: 110rpx;
  font-size: 44rpx;
  font-weight: 800;
}
.orangeBtn {
  position: relative;
  .free {
    position: absolute;
    top: -18rpx;
    right: -70rpx;
    width: 142rpx;
    height: 50rpx;
    background-color: #000;
    border-radius: 25rpx 25rpx 25rpx 0;
    font-size: 22rpx;
    font-weight: 900;
    line-height: 50rpx;
    text-align: center;
  }
}
.balance {
  display: inline-block;
  margin-top: 70rpx;
  font-size: 30rpx;
  font-weight: bold;
  line-height: 33rpx;
  image {
    display: inline-block;
    width: 33rpx;
    height: 33rpx;
    vertical-align: middle;
  }
}
</style>
