<template>
  <view class="statbar">
    <view class="status_bar"></view>
  </view>

  <view class="u-p-l-50 u-p-r-50 u-p-t-30">
    <view class="mt-5 mb-10 text-4xl text-center">登录</view>

    <u-form :model="form" ref="phoneLoginForm" :error-type="['message']">
      <u-form-item label="手机号码" prop="phone" label-width="160">
        <u-input placeholder="请输入手机号" v-model="form.phone" type="number"></u-input>
      </u-form-item>

      <u-form-item label="图形验证码" prop="verificationCodeValue" label-width="160">
        <u-input placeholder="请输入计算结果" v-model="form.verificationCodeValue" type="number"></u-input>
        <image slot="right" :src="renderData.imageBase64" mode="aspectFit" class="code-image" @click="getImageCode"></image>
      </u-form-item>

      <u-form-item label="验证码" prop="smsCode" label-width="160">
        <u-input @focus="mixinInit.hasvalue(form, renderData)" placeholder="请输入验证码" v-model="form.smsCode" type="text"></u-input>
        <!-- <u-button slot="right" type="primary" size="mini" v-show="mixinInit.dataObj.showPaste" @click="mixinInit.setCode" class="u-m-r-20">粘贴</u-button> -->
        <u-button slot="right" size="mini" v-if="mixinInit.dataObj.showInterval">{{ mixinInit.dataObj.interval }}</u-button>
      </u-form-item>

      <!-- <view class="flex flex-nowrap">
        <view class="flex-sub"></view>
        <view class="u-m-t-30 u-font-12 text-gray-400" @click="openPage('/pages/user/forgetPassword')">忘记密码</view>
      </view> -->
    </u-form>

    <view class="u-m-t-50">
      <u-button @click="submitLogin" type="primary">立即登录</u-button>
    </view>

    <!-- <view class="flex justify-between">
      <view class="u-m-t-30" style="color: #2885ED;" @click="openPage('/pages/user/rigister')">新用户注册</view>
      <view class="u-m-t-30" style="color: #2885ED;" @click="openPage('/pages/user/accountLogin')">用户名登录</view>
    </view> -->

    <!-- <view style="margin-top: 200rpx; text-align: center; color: #999999;font-size: 35rpx;">
      快速登录
    </view>
    <view style="text-align: center; margin-top: 20rpx;" @click="mixinInit.handleWxLogin">
      <image src="../../static/weixinIcon.png" mode="" style="width: 85rpx;height: 85rpx;"></image>
    </view> -->
  </view>
</template>

<script setup>
  import { ref, computed, reactive } from 'vue';
  import { useStore } from 'vuex';
  import { onReady } from '@dcloudio/uni-app';
  import userMixin from '@/hooks/user/userMixin'

  const store = useStore();
  const mixinInit = userMixin();
  const phoneLoginForm = ref(null);

  const form = reactive({
    phone: '',
    verificationCodeValue: '', // 图形验证码值
    smsCode: ''
  });
  const renderData = reactive({
    verificationCodeId: '', // 图形验证码id
    imageBase64: '' // 图形验证码图片
  })

  onReady(() => {
    phoneLoginForm.value.setRules(mixinInit.rules);
  });

  getImageCode(); // 获取图形验证码

  // 表单验证
  const submitLogin = () => {
    phoneLoginForm.value.validate(valid => {
      if (valid) {
        login()
      }
    });
  }

  /**
   * 登录
   */
  async function login() {
    uni.$ui.showLoading();
    try {
      // #ifdef H5
      const client = 0;
      // #endif
      // #ifdef APP-PLUS
      const client = 1;
      // #endif

      const params = reactive({
        client: client,
        data: {
          identifier: form.phone,
          credential: form.smsCode,
        },
        type: 1,
      });

      let res = await uni.$u.api.signin(params);
      store.commit('user/setToken', res.token);
      store.commit('user/setUser', res);
      uni.$storage.setStorageSync('anyringToken', res.token || '');
      uni.$storage.setStorageSync('user', JSON.stringify(res) || '');
      store.dispatch('socket/initSocket');

      uni.$ui.hideLoading();

      uni.navigateTo({
        url: '/pages/index/index'
      });
    } catch (error) {
      uni.$ui.hideLoading();
      uni.$ui.showToast(error.msg);
    }
  }

  // 获取图形验证码
  async function getImageCode() {
    uni.$ui.showLoading();
    try {
      const data = await uni.$u.api.getImageCode();
      renderData.imageBase64 = data.imageBase64 || '';
      renderData.verificationCodeId = data.verificationCodeId || '';
      uni.$ui.hideLoading();
    } catch (error) {
      uni.$ui.hideLoading();
      uni.$ui.showToast(error);
    }
  }

  // 页面跳转
  function openPage(url) {
    uni.navigateTo({
      url: url
    })
  }
</script>

<style lang="scss" scoped>
  .code-image {
    width: 200rpx;
    height: 70rpx;
  }
</style>
