<template>
  <view class="page-login">
    <view class="page-login__logo">
      <image src="/static/logo.png" mode="aspectFit"></image>
    </view>
    <view class="page-login__title">
      <view class="welcome">欢迎使用</view>
      <view class="title">则一飞牛货主</view>
    </view>
    <!-- #ifdef MP-WEIXIN -->
    <view class="page-login__content">
      <u-cell title="手机号">
        <template #value>
          <input maxlength="11" v-model="form.mobile" placeholder="请输入手机号" type="number" />
        </template>
      </u-cell>
    </view>
    <view class="page-login__button">
      <u-button shape="circle" type="primary" hover-class="active" :disabled="!isValidated" :loading="sendding" @click="sendCode">登录</u-button>
    </view>
    <!-- #endif -->
    <!-- #ifdef MP-DINGTALK -->
    <view class="page-login__dingtalk">
      <u-button type="primary" plain shape="circle" :loading="submitting" loading-text="登录中..." @click="handleDingTalkLogin">
        <u-icon :name="checked.includes('checked') ? 'lock-opened-fill' : 'lock-fill'" size="inherit" />
        <text>钉钉授权登录</text>
      </u-button>
    </view>
    <!-- #endif -->
    <!--    <view class="page-login__check">-->
    <!--      <u-checkbox-group v-model="checked" placement="column">-->
    <!--        <u-checkbox name="checked" />-->
    <!--      </u-checkbox-group>-->
    <!--      <text>勾选即代表您同意</text>-->
    <!--      <text class="link" @click="openPolicy">《用户协议》</text>-->
    <!--      <text>以及</text>-->
    <!--      <text class="link" @click="openPrivacy">《隐私政策》</text>-->
    <!--    </view>-->
    <!-- #ifdef MP-WEIXIN -->
    <view class="page-login__wechat">
      <u-button type="primary" plain shape="circle" open-type="getPhoneNumber" :loading="submitting" loading-text="登录中..." @getphonenumber="onGetPhoneNumber">
        <!-- <u-icon name="weixin-fill" size="inherit" /> -->
        <text>手机号快捷登录</text>
      </u-button>
    </view>
    <!-- #endif -->
  </view>
</template>

<script>
import { mapState } from 'vuex';
// #ifdef MP-DINGTALK
import { openAuthMiniApp, disposeAuthData } from 'dingtalk-design-libs/biz/openAuthMiniApp';
// #endif

export default {
  data() {
    return {
      form: {
        mobile: '',
        verificationCode: '',
      },
      code: '',
      sendding: false,
      submitting: false,
      checked: [],
    };
  },
  computed: {
    ...mapState({
      origin: state => state.origin,
    }),
    isValidated() {
      //校验手机号和位数
      let patt = /^[1][3-9][\d]{9}/;
      return patt.test(this.form.mobile);
    },
    isChecked() {
      return true; // this.checked.includes('checked');
    },
  },
  onLoad() {
    this.generateWeChatAuthCode();
  },
  onShow() {
    uni.hideHomeButton();
  },
  methods: {
    // 获取微信登录code
    generateWeChatAuthCode() {
      uni.login({
        provider: 'weixin',
        success: response => {
          const { code } = response;
          if (code) {
            this.code = code;
          } else {
            return uni.showToast({ icon: 'none', title: '授权失败' });
          }
        },
      });
    },
    // 用户协议
    openPolicy() {
      uni.$u.route({
        url: '/pages/common/webview',
        params: { url: 'https://zeyi-tms-product.oss-cn-hangzhou.aliyuncs.com/webview/consignor/consignor-policy.html' },
      });
    },
    // 隐私政策
    openPrivacy() {
      uni.$u.route({
        url: '/pages/common/webview',
        params: { url: 'https://zeyi-tms-product.oss-cn-hangzhou.aliyuncs.com/webview/consignor/consignor-privacy.html' },
      });
    },
    // 发送验证码并打开验证码页面
    sendCode() {
      // if (!this.isChecked) {
      //   return uni.showToast({ icon: 'none', title: '请您阅读并勾选《用户协议》和《隐私政策》' });
      // }
      if (!this.sendding) {
        this.sendding = true;
        uni.$u.api.login
          .send({ mobile: this.form.mobile, origin: this.origin })
          .then(() => {
            uni.$u.route({ url: '/pages/login/code', params: { mobile: this.form.mobile } });
          })
          .finally(() => {
            this.sendding = false;
          });
      }
    },
    // 获取当前登录用户手机号成功后自动登录
    onGetPhoneNumber(e) {
      if (!this.isChecked) {
        return uni.showToast({ icon: 'none', title: '请您阅读并勾选《用户协议》和《隐私政策》' });
      }
      if (!e.detail.code) {
        return;
      }
      console.info(e.detail);
      if (!this.submitting) {
        this.submitting = true;
        uni.$u.api.login
          .wxbind({ code: this.code, mobileCode: e.detail.code, encryptedData: e.detail.encryptedData, iv: e.detail.iv, origin: this.origin })
          .then(response => {
            const result = response.result || {};
            this.$store.commit('SET_AUTHED', result.hasBind);
            this.$store.commit('SET_USER_INFO', result);
            uni.showToast({ title: '登录成功', icon: 'none' });
            uni.$emit('refresh-permission');
            setTimeout(() => {
              uni.switchTab({ url: '/pages/order/index' });
            }, 1500);
          })
          .catch(() => {
            this.generateWeChatAuthCode();
          })
          .finally(() => {
            this.submitting = false;
          });
      }
    },
    // 处理钉钉授权登录
    handleDingTalkLogin() {
      // if (!this.isChecked) {
      //   return uni.showToast({ icon: 'none', title: '请您阅读并勾选《用户协议》和《隐私政策》' });
      // }
      // #ifdef MP-DINGTALK
      openAuthMiniApp({
        path: 'pages/home/home', //不要改,这里是小程序dingwlanwvdmrtjjwdmd下的一个页面地址
        panelHeight: 'percent50',
        extraData: {
          clientId: 'suiteyaqgg5vsf9ktnhec', // 应用ID(唯一标识)
          rpcScope: 'Contact.User.Read',
          fieldScope: 'Contact.User.mobile',
          type: 0,
          ext: JSON.stringify({}),
          from: '',
        },
      });
      // #endif
    },
  },
};
</script>

<style lang="scss">
.page-login {
  padding: $padding-md;
  font-size: $font-md;
  min-height: 100vh;
  background-color: #fff;
  box-sizing: border-box;
  &__logo {
    text-align: center;
    height: 240upx;
    image {
      height: 100%;
      width: 100%;
    }
  }
  &__title {
    margin-top: $padding-md;
    font-size: $font-lg * 1.2;
    padding: $padding-md;
    line-height: 2;
    text-align: center;
    color: $color-primary;
    .welcome {
      font-size: 40rpx;
    }
    .title {
      font-size: 70rpx;
    }
  }
  &__content {
    color: $color-minor;
    margin-top: $padding-md;
    .u-cell__body__content {
      flex: initial !important;
    }
    .u-cell__title {
      min-width: $padding-md * 5 !important;
    }
    .u-cell input {
      flex: auto;
    }
  }
  &__button {
    margin-top: $padding-md;
    button {
      border: 0;
      color: #fff;
      background-color: $color-primary;
      padding: $padding-md;
      line-height: 1.5;
      text-align: center;
      font-size: $font-md * 1.2;
      border-radius: $radius-lg * 2;
      &::after {
        border: 0;
      }
      &.active {
        background-color: darken($color-primary, 3%);
      }
    }
  }
  &__check {
    display: flex;
    align-items: center;
    margin-top: $padding-md;
    font-size: $font-sm;
    .link {
      color: $color-primary;
    }
  }
  &__wechat {
    color: $color-primary;
    margin-top: $padding-md * 3;
    .u-icon {
      margin-right: $padding-base;
      font-size: $font-lg * 1.5;
    }
    .u-button {
      border: none !important;
      font-size: $font-lg !important;
    }
  }
  &__dingtalk {
    margin-top: $padding-md * 3;
    margin-bottom: $padding-md * 3;
    .u-icon {
      margin-right: $padding-sm;
      font-size: $font-lg * 1.5;
      color: $color-primary;
    }
    .u-button {
      border: 1px solid $color-primary !important;
      font-size: $font-lg !important;
      background-color: $color-white;
    }
  }
}
</style>