<template>
  <view class="page">
    <image class="bgImg" src="../../assets/img/homeImg.png" mode="aspectFit" />
    <!-- 视频,已废弃 -->
    <view v-show="false" class="videoBox">
      <!-- <video
        src="https://video.metavatar.cc/sv/d51a6f6-187fa2dff79/d51a6f6-187fa2dff79.mp4"
        autoplay
        muted
        loop
        :controls="false"
      /> -->
      <!-- <video
        src="https://wenlian.wenzhou.gov.cn//upload/video/2021-01-14%E3%80%8A%E7%93%AF%E8%B6%8A%E4%B9%8B%E5%8D%8E%E3%80%8B%E6%B8%A0%E5%B7%9D%EF%BC%9A%E8%B5%B0%E7%AC%94%E5%86%99%E4%BA%BA%E7%94%9F.mp4"
        autoplay
        loop
        :controls="false"
      /> -->
    </view>
    <view class="bottomBox">
      <view class="bottomBtn" @click="toCreate"> 开始制作我的数字分身 </view>
      <u-checkbox-group v-model="checkboxValue1" placement="row">
        <u-checkbox
          labelColor="white"
          activeColor="red"
          v-for="(item, index) in checkboxList1"
          :key="index"
          :label="item.name"
          :name="item.name"
        >
        </u-checkbox>
      </u-checkbox-group>
    </view>
  </view>
</template>

<script setup>
//#region 导入
import { ref, reactive } from "vue";
import { voiceTotalApi, loginPhoneApi } from "../../api/login.js";
import { userInfoModules } from "@/store/modules/userInfo";
//#endregion
const userInfoModulesPinia = userInfoModules();

//#region 勾选
const checkboxValue1 = ref([]);
const checkboxList1 = ref([
  {
    name: "同意智像相机用户使用协议",
    disabled: false,
  },
]);
async function toCreate() {
  if (checkboxValue1.value[0]) {
    await handleLogin();
  } else {
    uni.showModal({
      title: "提示",
      content: "同意慧图相机用户使用协议？",
      success: function (res) {
        if (res.confirm) {
          checkboxList1.value[0].disabled = true;
          handleLogin();
        } else if (res.cancel) {
        }
      },
    });
  }
}
const userInfo = ref(null);
async function handleLogin() {
  // uni.getUserInfo({});
  uni.getUserProfile({
    desc: "用于完善用户信息",
    success: async (res1) => {
      userInfo.value = res1.userInfo;
      userInfoModulesPinia.userInfo = res1.userInfo;
      console.log(userInfoModulesPinia.openId, "拿出openid");

      const data = {
        appId: "wx75cf14e3a0d45821",
        openId: userInfoModulesPinia.openId,
        encryptedData: res1.encryptedData,
        iv: res1.iv,
      };
      try {
        const res2 = await loginPhoneApi(data);
        uni.showToast({
          icon: "none",
          title: "获取成功",
        });
      } catch (error) {
        uni.showToast({
          icon: "none",
          title: "获取失败",
        });
      }
    },
    fail: (err) => {
      console.log(err);
      uni.showToast({
        icon: "none",
        title: "用户拒绝获取",
      });
    },
  });
}
//#endregion ---------------------

voiceTotalApi();
</script>

<style lang="scss">
.page {
  position: relative;
  padding: 0;
  min-height: 100vh;
}
.bgImg {
  width: 750rpx;
  height: 100vh;
}
.videoBox {
  width: 750rpx;
  height: 1120rpx;
  // aspect-ratio: 9/12;
  video {
    width: 100%;
    height: 100%;
    // aspect-ratio: 9/12;
  }
}
.bottomBox {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 345rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.8);
  color: #fff !important;
  .bottomBtn {
    margin-top: 55rpx;
    margin-bottom: 65rpx;
    width: 520rpx;
    height: 100rpx;
    border-radius: 50rpx;
    line-height: 100rpx;
    text-align: center;
    background-color: rgba(255, 79, 0, 1);
    font-size: 30rpx;
    font-weight: 900;
  }
}
</style>
