<script setup>
import { ref } from "vue";
import { onShow } from "@dcloudio/uni-app";
import Avatar from "@/components/Avatar.vue";
import SButton from "@/components/SButton.vue";

import { wxLogin } from "@/util";
import {
  getMyDevicesAPI,
  loginAPI,
  getHomeData,
  getPhoneNumberAPI,
} from "@/apis";
import useStore from "@/store";
const store = useStore();
const { updateUser, updateDevice } = store;
const props = defineProps({
  noBg: {
    type: Boolean,
    default: false,
  },
  onClose: {
    type: Function,
    default: () => {},
  },
});
const agree = ref(false);
const phone = ref("");
const avatarUrl = ref("");
const nickName = ref("");
const loading = ref(false);
const handleAgree = () => {
  agree.value = !agree.value;
};

async function getphonenumber(e) {
  if (e.detail.code) {
    const wxResult = await wxLogin();
    const result = await getPhoneNumberAPI({
      ...e.detail,
      code: wxResult.code,
    });
    if (result.phone) phone.value = result.phone;
  }
}

function onChooseAvatar(e) {
  avatarUrl.value = e.detail.avatarUrl;
}

function onNicknameChange(e) {
  nickName.value = e.detail.value;
}

const handleLogin = async () => {
  if (loading.value) return;
  if (!phone.value) {
    return uni.showToast({
      title: "请获取手机号",
      icon: "none",
    });
  }
  if (!avatarUrl.value) {
    return uni.showToast({
      title: "请选择头像",
      icon: "none",
    });
  }
  if (!nickName.value) {
    return uni.showToast({
      title: "请输入昵称",
      icon: "none",
    });
  }
  if (!agree.value) {
    return uni.showToast({
      title: "请先同意协议",
      icon: "none",
    });
  }
  loading.value = true;
  const wxResult = await wxLogin();
  const fileManager = uni.getFileSystemManager();
  const avatarBase64 = fileManager.readFileSync(avatarUrl.value, "base64");
  const base64Url = `data:image/png;base64,${avatarBase64}`;
  const result = await loginAPI(
    phone.value,
    nickName.value,
    base64Url,
    wxResult.code
  );
  const data = await getHomeData();
  if (data.user) updateUser(data.user);
  const devices = await getMyDevicesAPI();
  if (devices.bindings && devices.bindings.length) {
    updateDevice(devices.bindings[0].deviceId, devices.bindings[0].deviceName);
  }
  loading.value = false;
  props.onClose();
};

const openServiceLink = () => {
  uni.navigateTo({
    url:
      "/pages/webview?url=" +
      encodeURIComponent(
        "https://static.shelingxingqiu.com/shootServiceAgreement.html"
      ),
  });
};

const openPrivacyLink = () => {
  uni.navigateTo({
    url:
      "/pages/webview?url=" +
      encodeURIComponent(
        "https://static.shelingxingqiu.com/shootPrivacyPolicy.html"
      ),
  });
};

onShow(() => {
  loading.value = false;
});
</script>

<template>
  <view class="container" :style="{ background: noBg ? '#fff' : 'none' }">
    <view class="avatar" :style="{ borderColor: noBg ? '#E3E3E3' : '#fff3' }">
      <text :style="{ color: noBg ? '#666' : '#fff' }">手机:</text>
      <button
        :open-type="!phone ? 'getPhoneNumber' : ''"
        @getphonenumber="getphonenumber"
        class="login-btn"
        hover-class="none"
      >
        <text v-if="phone" :style="{ color: noBg ? '#333' : '#fff' }">{{
          phone
        }}</text>
        <text v-else :style="{ color: noBg ? '#666' : '#fff9' }">点击获取</text>
        <image src="../static/enter.png" mode="widthFix" />
      </button>
    </view>
    <view class="avatar" :style="{ borderColor: noBg ? '#E3E3E3' : '#fff3' }">
      <text :style="{ color: noBg ? '#666' : '#fff' }">头像:</text>
      <button
        open-type="chooseAvatar"
        @chooseavatar="onChooseAvatar"
        class="login-btn"
        hover-class="none"
      >
        <Avatar v-if="avatarUrl" :src="avatarUrl" :size="30" />
        <text v-else :style="{ color: noBg ? '#666' : '#fff9' }">点击获取</text>
        <image src="../static/enter.png" mode="widthFix" />
      </button>
    </view>
    <view class="nickname" :style="{ borderColor: noBg ? '#E3E3E3' : '#fff3' }">
      <text :style="{ color: noBg ? '#666' : '#fff' }">昵称:</text>
      <input
        type="nickname"
        placeholder="请输入昵称"
        :placeholder-style="`color: ${noBg ? '#666' : '#fff9'} `"
        @change="onNicknameChange"
        @blur="onNicknameBlur"
        :style="{ color: noBg ? '#333' : '#fff' }"
      />
    </view>
    <SButton :rounded="20" width="80vw" :onClick="handleLogin">
      <block v-if="!loading">
        <image
          :src="`../static/wechat-icon${noBg ? '' : '-black'}.png`"
          mode="widthFix"
          class="wechat-icon"
        />
        <text :style="{ color: '#000' }">登录/注册</text>
      </block>
      <block v-else>
        <image
          src="../static/btn-loading.png"
          mode="widthFix"
          class="loading"
        />
      </block>
    </SButton>
    <view class="protocol" @click="handleAgree">
      <view v-if="!agree" :style="{ borderColor: noBg ? '#E3E3E3' : '#fff' }" />
      <image v-if="agree" src="../static/checked.png" mode="widthFix" />
      <view>
        <text>已同意并阅读</text>
        <view
          @click.stop="openServiceLink"
          :style="{ color: noBg ? '#333' : '#ffffff99' }"
          >《用户协议》</view
        >
        <text>及</text>
        <view
          @click.stop="openPrivacyLink"
          :style="{ color: noBg ? '#333' : '#ffffff99' }"
          >《隐私协议》</view
        >
        <text>内容</text>
      </view>
    </view>
  </view>
</template>

<style scoped>
.container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-top-left-radius: 24rpx;
  border-top-right-radius: 24rpx;
}
.avatar,
.nickname {
  width: 80%;
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  border-bottom: 1rpx solid #ffffff1a;
}
.avatar {
  margin: 0;
}
.avatar > text,
.nickname > text {
  width: 20%;
  font-size: 14px;
  line-height: 120rpx;
}
.avatar > button > text {
  color: #fff9;
  font-size: 14px;
}
.nickname > input {
  flex: 1;
  font-size: 14px;
  line-height: 120rpx;
}
.wechat-icon {
  width: 24px;
  height: 24px;
  margin-right: 20px;
}
.protocol {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 22rpx;
  margin: 30rpx 0;
  color: #8a8a8a;
}
.protocol > image {
  width: 16px;
  height: 16px;
  margin-right: 10px;
}
.protocol > view:first-child {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  margin-right: 10px;
  border: 1px solid #fff;
}
.protocol > view:last-child {
  display: flex;
  align-items: center;
}
.login-btn {
  line-height: 55px;
  width: 80%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.login-btn > image {
  width: 28rpx;
  height: 28rpx;
}
.loading {
  width: 25px;
  height: 25px;
  background-blend-mode: darken;
  animation: rotate 1s linear infinite;
}
</style>
