<template>
  <view :class="pageClass">
    <!-- mode="aspectFit" -->
    <image class="bgImg" src="../../assets/img/homeImg.jpg" />
    <!-- 视频,已废弃 -->
    <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">
      <button
        v-if="!checkboxValue[0]"
        class="bottomBtn"
        type="default"
        id="getPhoneNumber"
        @click="toCreate"
      >
        开始制作我的数字写真
      </button>
      <button
        v-if="checkboxValue[0]"
        class="bottomBtn"
        open-type="getPhoneNumber"
        type="default"
        id="getPhoneNumber"
        @getphonenumber="toCreate"
      >
        开始制作我的数字写真
      </button>
      <!-- <view class="bottomBtn" @click="toCreate"> 开始制作我的数字写真 </view> -->
      <u-checkbox-group
        v-model="checkboxValue"
        placement="row"
        @change="changedCheckbox"
      >
        <u-checkbox
          labelColor="white"
          activeColor="red"
          v-for="(item, index) in checkboxList"
          :name="item.name"
          :key="index"
        >
        </u-checkbox>
        <text class="checkPro"
          >同意<text class="goPro" @click="goPro"
            >《智像相机用户使用协议》</text
          >
        </text>
      </u-checkbox-group>
    </view>
  </view>
</template>

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

const pageClass = computed(() => {
  if (userInfoModulesPinia.platForm == 1) {
    return "page pageH5";
  } else {
    return "page";
  }
});
//#region 勾选
const checkboxValue = ref([]);
const checkboxList = ref([
  {
    name: "同意智像相机用户使用协议",
  },
]);
function changedCheckbox(e) {
  console.log(e);
}

async function getphonenumber(e) {
  console.log(e);
  if (e.detail.errMsg.includes("ok")) {
    //用户授权了手机号
    const data = {
      appId: "wx75cf14e3a0d45821",
      openId: userInfoModulesPinia.openId,
      encryptedData: e.detail.encryptedData,
      iv: e.detail.iv,
    };
    try {
      const res2 = await loginPhoneApi(data);
      uni.showToast({
        icon: "none",
        title: "获取成功",
      });
      userInfoModulesPinia.token = res2.data.token;
      uni.switchTab({
        url: "/pages/uploadPhoto/uploadPhoto",
      });
    } catch (error) {
      uni.showToast({
        icon: "none",
        title: "获取失败",
      });
    }
  } else {
    uni.showToast({
      icon: "none",
      title: "获取手机号失败",
    });
    //code已过期 重新拿code再授权
  }
}

async function toCreate(e) {
  console.log();
  if (checkboxValue.value[0]) {
    // await handleLogin();
    await getphonenumber(e);
  } else {
    uni.showModal({
      title: "提示",
      content: "同意慧图相机用户使用协议？",
      success: function (res) {
        if (res.confirm) {
          checkboxValue.value = ["同意智像相机用户使用协议"];
          // handleLogin();
          getphonenumber(e);
        } else if (res.cancel) {
        }
      },
      fail: (err) => {},
    });
  }
}
const userInfo = ref(null);

async function handleLogin() {
  // uni.getUserInfo({});
  // getPhoneNumber
  // getUserProfile
  uni.getUserProfile({
    desc: "用于完善用户信息",
    success: async (res1) => {
      console.log(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: "用户拒绝获取",
      });
    },
  });
}

const goPro = () => {
  uni.navigateTo({
    url: "/pages/protocol/user",
  });
};
//#endregion ---------------------

//#region
onLoad((options) => {
  uni.hideHomeButton();
  // workId.value = options.id;
  if (options.type == "tokenFfalse") {
    uni.showToast({
      title: "登录失效,请重新登录",
      icon: "none",
    });
  }
});
//#endregion ---------------------------------

//#region

//#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;
    color: #fff;
    background-color: rgba(255, 79, 0, 1);
    font-size: 30rpx;
    font-weight: 900;
  }
  .checkPro {
    display: inline-block;
    height: 27rpx;
    line-height: 54rpx;
    .goPro {
      color: #ff4f00;
    }
  }
}
</style>
