<template>
  <view class="bg">
    <view class="box">
      <image
        v-if="status === 0"
        class="tc"
        @click="kk"
        src="https://pic.imgdb.cn/item/6697c82bd9c307b7e9843788.png" />
      <view
        class="tc text-[#F33D00] text-center textBg"
        v-else-if="status === 1">
        <view>恭喜获得游戏豆奖励</view>
        <view>{{ codeInfo.pulse }}</view>
      </view>
      <image
        class="tc"
        v-else
        src="https://pic.imgdb.cn/item/6697d32ed9c307b7e991c2c5.png"></image>
    </view>
    <view class="btn">
      <nut-button
        v-if="!isLogin"
        style="width: 100%; height: 100%; opacity: 0"
        type="primary"
        open-type="getPhoneNumber"
        @getphonenumber="getPhoneNumber"
        >手机号一键登录</nut-button
      >
      <nut-button
        v-else
        style="width: 100%; height: 100%; opacity: 0"
        type="primary"
        @click="ok"
        >领取</nut-button
      >
    </view>
    <view class="img"></view>
    <view class="img1"></view>
  </view>
</template>

<script setup lang="ts">
import Taro from '@tarojs/taro';
import { ref } from 'vue';
import { getPhone, login } from '@/api/user';
import { getQrCode, bindQrCode } from '@/api/code';
import './index.scss';

const status = ref(0);

const optData = ref<any>({});

const isLogin = ref(false);

const codeInfo = ref<any>({});

Taro.useLoad(opt => {
  optData.value = opt;
  const tk = Taro.getStorageSync('token');
  if (tk) {
    isLogin.value = true;
  }
  getInfo();
});

const getInfo = async () => {
  const res = await getQrCode({
    code: optData.value.qid,
  });
  codeInfo.value = res.data.data;
};

const kk = () => {
  if (codeInfo.value.pulse > 0) {
    status.value = 1;
  } else {
    status.value = 2;
  }
};

const ok = async () => {
  const res = await bindQrCode({
    qid: optData.value.qid,
  });
  Taro.showToast({
    title: res.msg,
    icon: 'none',
    mask: true,
  });

  setTimeout(() => {
    Taro.switchTab({
      url: '/pages/index/index',
    });
  }, 2000);
};

const userInfo = ref({
  phone: '',
});

const getPhoneNumber = async (e: any) => {
  Taro.showLoading({
    title: '授权手机号中',
    mask: true,
  });
  const { code } = e.detail;
  const res = await getPhone({
    code: code,
  });
  userInfo.value.phone = res.data.phone;
  if (!res.data.phone)
    return Taro.showToast({
      title: '手机号获取失败',
      icon: 'none',
    });
  Taro.login({
    success: async res => {
      Taro.setStorageSync('wx_code', res.code);
      const ress = await login({
        Code: Taro.getStorageSync('wx_code'),
        Phone: userInfo.value.phone,
        Referee: Taro.getStorageSync('bind_id'),
      });
      Taro.showToast({
        title: `${ress.msg},请再次领取`,
        icon: 'success',
      });
      Taro.setStorageSync('token', ress.data.token);
      Taro.removeStorageSync('wx_code');
      Taro.removeStorageSync('bind_id');
      isLogin.value = true;
    },
    complete: () => {
      Taro.hideLoading();
    },
  });
};
</script>

<style lang="scss"></style>
