<template>
  <view class="flex flex-col w-full min-h-full">
    <view class="flex-1 translate-center w-full ">
      <!-- <view class="flex items-center justify-center py-100rpx">
        <image class="borderTop w-164rpx h-164rpx m-auto" src="/static/images/logs/logs.png" mode="aspectFill"></image>
      </view> -->

      <view class="px-45rpx ">
           <!-- #ifndef MP-WEIXIN -->
        <u-form :model="form" ref="uForm" :error-type="['toast']">
          <u-form-item prop="phone">
            <view class="flex items-center w-full">
              <view class="w-60rpx flex items-center">
                <image class="w-48rpx h-48rpx" src="/static/images/user/phone-icon.png" mode="scaleToFill" />
              </view>
              <!-- <u-input :adjustPosition="false" type="number" :clearable="false" v-model="form.phone" class="w-full" placeholder="请填写手机号" /> -->
              <input placeholder-class="text-hex-C0C4CC" class="w-full h-full" v-model="form.phone" placeholder="请填写手机号" />
            </view>
          </u-form-item>
          <u-form-item prop="password" class="mt-30rpx">
            <view class="flex items-center w-full">
              <view class="w-60rpx flex items-center">
                <image class="w-48rpx h-48rpx" src="/static/images/user/pwd-icon.png" mode="scaleToFill" />
              </view>
              <!-- <u-input :adjustPosition="false" type="password" :clearable="false" v-model="form.password" class="w-full" placeholder="请输入密码" /> -->
              <input placeholder-class="text-hex-C0C4CC" class="w-full h-full" v-model="form.password" type="password" placeholder="请输入密码" />
            </view>
          </u-form-item>
        </u-form>

        <view class="flex justify-between mt-45rpx">
          <text class="text-md" @tap="$u.route('/pageA/reset_password/login', { type: 0 })">忘记密码？</text>
          <text class="text-md text-primary" @tap="$u.route('/pages/register/index')">注册</text>
        </view>
        <!-- #endif -->
        <view class="mt-90rpx">
          <!-- #ifdef MP-WEIXIN -->
         <!-- <view class="login-btn" @tap="wxMpLogin"> 登录 </view> -->
          <!-- #endif -->
          <!-- #ifndef MP-WEIXIN -->
          <view class="login-btn" @tap="onSubmit"> 登录 </view>
          <!-- #endif -->
        </view>
        <!-- #ifdef MP-WEIXIN -->
        <button
          hover-class="none"
          class="cu-btn  bg-primary text-center h-80rpx rounded-full leading-80rpx text-white text-lg mt-40rpx"
          open-type="getPhoneNumber"
          @getphonenumber="getPhoneNumber"
        >
          微信一键登录
        </button>
        <!-- #endif -->
      </view>
    </view>
    <!-- #ifndef MP-WEIXIN -->
   <!-- <view class="py-60rpx flex items-center flex-col justify-center text-txGray">
      <view>子春生电子商务有限公司版权所有</view>
      <view @tap="$u.route('/pages/web_view/index', { url: 'https://beian.miit.gov.cn' })">渝ICP备2021010072号-2</view>
    </view> -->
    <!-- #endif -->
  </view>
</template>
<script>
// import { getWxCode } from '@/utils/login';
import { wxMnpLogin,getWxCode } from '@/utils/login'
import { mapMutations } from 'vuex';
export default {
  data() {
    return {
      check: false,
      code:'',
      redirec:null,
      form: {
        phone: '',
        password: '',
      },
      rules: {
        phone: [
          {
            required: true,
            message: '请输入手机号',
            trigger: 'change',
          },
        ],
        password: [
          {
            required: true,
            message: '请输入密码',
            trigger: 'change',
          },
        ],
      },
      type: 'login',
    };
  },
  onReady() {
    // this.$refs.uForm.setRules(this.rules);
  },
 async onLoad({ type, phone,redirec}) {
    this.redirec = redirec
    this.form.phone = phone ?? '';
    /* #ifdef MP-WEIXIN */
    this.code = await getWxCode();
    /* #endif */
    if (type) {
      this.type = type;
    }
  },
  methods: {
    ...mapMutations({
      LOGIN: 'user/LOGIN',
    }),

    //微信快捷登录
    async getPhoneNumber(e) {
      const { code } = e.detail;
      if(!code) return
      const invite_code = uni.getStorageSync('INVITE_CODE');
      if(!this.$store.getters.token){
         await wxMnpLogin(invite_code)
      }
      const params = {}
      if(!!invite_code) params.inviter_code = invite_code
      console.log(params.inviter_code);
      const resData = await this.$api.post('/v1/wechat-mini/bind-phone', {
        code:code,
        ...params
      });
      await this.LOGIN(resData.token);
      if(!!this.redirec) this.$u.route({
        type:'redirectTo',
        url:decodeURIComponent(this.redirec)
      })
      else uni.navigateBack({
        delta: 1,
      });
    },
    //微信账户密码登录
    async wxMpLogin(){
      this.$refs.uForm.validate(async (valid) => {
        if (valid) {
          const invite_code = uni.getStorageSync('INVITE_CODE');
          const params = {}
          const code = await getWxCode();
          if(!!invite_code) params.inviter_code = invite_code
          try{
            const resData = await this.$api.post('/v1/socialite/code-bind-user/wechat-mini',{
              code,
              ...this.form,
              ...params,
              type:'default'
            })
            this.LOGIN(resData.token);
            uni.navigateBack({
              delta: 1,
            });
          }catch(err){
            console.log(err);
          }
        }
      })
    },

    async onSubmit() {
      this.$refs.uForm.validate(async (valid) => {
        if (valid) {
          // if (!this.check) return this.$u.toast("请勾选协议")
          try {
            let resDate = await this.$store.dispatch('user/login', {
              form: this.form,
              switchAllaccounts: this.type == 'added',
            });
            if (resDate) {
              // let res = await this.$store.dispatch('user/getUserInfo', resDate)
              if (this.type == 'added') {
                // res.token = resDate
                // this.$store.commit('user/SET_ACCOUNTS', res)
                this.type = 'login';
              }
            }
            this.$refs.uForm.resetFields();
            // this.$u.toast("登录成功")
            // setTimeout(()=>{},1000)
            uni.navigateBack({
              delta: 1,
            });
          } catch (error) {
            // console.log(error);
          }
        }
      });
    },
  },
};
</script>
<style>
page {
  background: #fff;
  height: 100%;
}
.borderTop {
  border-top-left-radius: 15rpx;
  border-top-right-radius: 15rpx;
}
</style>
