<!--登录页面-->
<script>

import ApiConstant from "@/common/ApiConstant";
import Request from '@/common/request'
import StaticConstant from "@/common/StaticConstant";
import commonTool from "../../common/js/commonTool";
import {stringIsNotEmpty} from "../../common/util";

let request = new Request()
export default {
  name: "home",
  components: {},
  computed: {
    StaticConstant() {
      return StaticConstant
    }
  },
  data() {
    return {
      checkFlag: false,
      showType: 1,
      formData: {
        userName: '',
        password: '',
        password2:''
      },
      isTick: true,
      showFlag:false
    }
  },
  onReady() {
  },
  onShow(){
    // #ifdef MP-TOUTIAO
    this.dyLogin()
    // #endif
    // #ifdef MP-WEIXIN
    this.showFlag =true
    // #endif
  },
  methods: {
    //其他设备下线提示
    otherSystemMessage(r){
      if (r.result.loginState && r.result.loginState === 'more') {
          uni.showToast({
            title: '其他设备已下线，请稍等',
            icon: 'none'
          })
      }
    },
    //刷新到首页
    reloadHome(){
      setTimeout(function () {
        wx.reLaunch({
          url: '/pages/zyb/home',
        })
      }, 500)
    },
    //抖音登录
    dyLogin(){
      //今日头条用户信息授权
      let that = this
      uni.login({
        provider: 'toutiao',
        success: function(loginRes) {
          console.log(loginRes);
          request.post(ApiConstant.User.dyLogin, {
            code: loginRes.code,
            anonymousCode: loginRes.anonymousCode,
          }).then(r => {
            console.log('请求登录', r)
            if (r.success) {
              console.log(r)
              that.otherSystemMessage(r)
              //token
              uni.setStorageSync('token', r.result.token)
              //用户信息
              if (r.result.userInfo) {
                uni.setStorageSync('userInfo', r.result.userInfo)
              }
              //vip信息
              commonTool.checkVipInfo(r.result.vipInfo)
              //重新打开首页
              that.reloadHome()
            } else {
              uni.showToast({
                title: r.message,
                icon: 'none'
              })
            }
          }).catch(err => {
          }).finally(() => {
          });
        }
      });
    },
    getPhoneNumber(e) {
      console.log(e.detail.errMsg);
      console.log(e.detail.iv);
      console.log(e.detail.encryptedData);
      if (!this.checkFlag) {
        uni.showToast({
          title: '请阅读后同意《艺体志愿宝用户协议》',
          icon: 'none'
        })
        return
      }
      var sessionKey = ''
      if (e && e.detail && e.detail.code) {
        //选择授权
        uni.login({
          success: (res) => {
            console.log('获取code', res)
            if (res.code) {
              let code = res.code
              request.post(ApiConstant.User.wxLogin, {
                code: code,
                encryptedData: e.detail.encryptedData,
                iv: e.detail.iv
              }).then(r => {
                console.log('请求登录', r)
                if (r.success) {
                  console.log(r)
                  this.otherSystemMessage(r)
                  //token
                  uni.setStorageSync('token', r.result.token)
                  //用户信息
                  if (r.result.userInfo) {
                    uni.setStorageSync('userInfo', r.result.userInfo)
                  }

                  //vip信息
                  commonTool.checkVipInfo(r.result.vipInfo)
                  //重新打开首页
                  this.reloadHome()
                } else {
                  uni.showToast({
                    title: '微信授权登录失败',
                    icon: 'none'
                  })
                }
              }).catch(err => {
              }).finally(() => {
              });
            } else {
              uni.showModal({
                title: '未获取到code'
              })
            }
          }
        });
      } else {
        uni.showToast({
          title: '授权失败,请同意授权',
          icon: 'none'
        })
        return
      }
      console.log(e)
    },
    //密码登录
    pwdLogin() {
      if (!stringIsNotEmpty(this.formData.userName)) {
        uni.showToast({
          title: '请输入用户名',
          icon: 'none'
        })
        return
      }
      if (!stringIsNotEmpty(this.formData.password)) {
        uni.showToast({
          title: '请输入密码',
          icon: 'none'
        })
        return
      }

      request.post(ApiConstant.User.login, {
        username: this.formData.userName,
        password: this.formData.password
      }).then(r => {
        if (r.success) {
          console.log(r)
          this.otherSystemMessage(r)
          //token
          uni.setStorageSync('token', r.result.token)
          //用户信息
          if (r.result.userInfo) {
            uni.setStorageSync('userInfo', r.result.userInfo)
          }
          //vip信息
          commonTool.checkVipInfo(r.result.vipInfo)
          //重新打开首页
          this.reloadHome()
        } else {
          uni.showToast({
            title: r.message,
            icon: 'none'
          })
        }
      }).catch(err => {
      }).finally(() => {
      });

    },
    register(){
      if (!stringIsNotEmpty(this.formData.userName)) {
        uni.showToast({
          title: '请输入手机号码',
          icon: 'none'
        })
        return
      }
      let phoneNumberPattern = /^1[3-9]\d{9}$/;
      let isValidPhoneNumber = phoneNumberPattern.test(this.formData.userName);
      if (!isValidPhoneNumber) {
        uni.showToast({
          title: '手机号码格式不正确',
          icon: 'none'
        })
        return
      }
      if (!stringIsNotEmpty(this.formData.password)) {
        uni.showToast({
          title: '请输入密码',
          icon: 'none'
        })
        return
      }
      if (this.formData.password!==this.formData.password2) {
        uni.showToast({
          title: '两次密码不一致',
          icon: 'none'
        })
        return
      }
      request.post(ApiConstant.User.register, {
        username: this.formData.userName,
        password: this.formData.password
      }).then(r => {
        if (r.success) {
          console.log(r)
          setTimeout(function () {
            uni.showToast({
              title: '注册成功',
              icon: 'none'
            })
          }, 100)
          //token
          uni.setStorageSync('token', r.result.token)
          //用户信息
          if (r.result.userInfo) {
            uni.setStorageSync('userInfo', r.result.userInfo)
          }
          //vip信息
          commonTool.checkVipInfo(r.result.vipInfo)
          //重新打开首页
          this.reloadHome()

        } else {
          uni.showToast({
            title: r.message,
            icon: 'none'
          })
        }
      }).catch(err => {
      }).finally(() => {
      });
    },
    //显示密码输入框
    showPwdInput() {
    },
    gotoMianze() {
      uni.navigateTo({
        url: '/pages/zyb/other/disclaimer'
      })
    },
    gotoXieyi() {
      uni.navigateTo({
        url: '/pages/zyb/other/userAgreement'
      })

    },
    checkboxChange(r) {
      console.log(r)
      if (r.detail.value && r.detail.value.length > 0) {
        this.checkFlag = true
      } else {
        this.checkFlag = false
      }
    }
  },
  onload() {
  }
}
</script>

<template>
  <view class="header" style="border-top:3rpx solid #f6f6f6"></view>
  <view class="content" v-if="showFlag">
    <view class="textcenter">
      <view class="flex">
        <view class="title">
          {{ StaticConstant.systemName }}
        </view>

      </view>
    </view>
    <view class="textcenter">
      <text class="low-title">
        <!--        全国<text style="font-size: 35rpx">600</text>万+考生的选择-->
        艺术生 更轻松的报志愿
      </text>
    </view>

    <view style="margin-top: 200rpx" v-if="showType===1">
      <button class='login-but' v-if="!checkFlag" @click="getPhoneNumber">
        /*#ifdef MP-TOUTIAO*/
        抖音一键登录
        /*#endif*/
        /*#ifdef MP-WEIXIN*/
        手机号快捷登录
        /*#endif*/
      </button>
      /*#ifdef MP-TOUTIAO*/
      <button class='login-but' v-if="checkFlag" @click="dyLogin">
        抖音一键登录
      </button>
      /*#endif*/
      /*#ifdef MP-WEIXIN*/
      <button class='login-but' v-if="checkFlag" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
        手机号快捷登录
      </button>
      /*#endif*/
      <button class='login-pwd-but margin-top-20' @click="showType=2">
        账号密码登录
      </button>
    </view>
    <view style="margin-top: 180rpx" class="uni-padding-wrap border-top" v-if="showType===2">
      <view class="forms">
        <view class="form-item">
          <view class="form-item-view form-input">
            <input class="uni-input" type="text"
                   v-model="formData.userName"
                   name="contactPersonPhone"
                   :placeholder="'请输入用户名或手机号'"/>
          </view>
        </view>
        <view class="form-item">
          <view class="form-item-view form-input">
            <input class="uni-input" type="password" password="true"
                   v-model="formData.password"
                   name="password"
                   :placeholder="'请输入密码'"/>
          </view>
        </view>
        <view class="form-item">
          <button class='login-but margin-top-20' :disabled="!checkFlag" :class="checkFlag?'':'login-but-disabled'"
                  @click="pwdLogin">
            登录
          </button>
        </view>
      </view>
      <view>
        <text @click="showType=1" class="redOrange">快捷登录</text>
      </view>
    </view>
    <!--注册-->
    <view style="margin-top: 180rpx" class="uni-padding-wrap border-top" v-if="showType===3">
      <view class="forms">
        <view class="form-item">
          <view class="form-item-view form-input">
            <input class="uni-input" type="text"
                   v-model="formData.userName"
                   name="contactPersonPhone"
                   :placeholder="'请输入手机号'"/>
          </view>
        </view>
        <view class="form-item">
          <view class="form-item-view form-input">
            <input class="uni-input" type="password" password="true"
                   v-model="formData.password"
                   name="password"
                   :placeholder="'请输入密码'"/>
          </view>
        </view>
        <view class="form-item">
          <view class="form-item-view form-input">
            <input class="uni-input" type="password" password="true"
                   v-model="formData.password2"
                   name="password2"
                   :placeholder="'请再次输入密码'"/>
          </view>
        </view>
      </view>
      <view>
        <text @click="showType=1" class="redOrange">快捷登录</text>
      </view>
    </view>
    <view class="uni-flex flex" style="margin-top: 100rpx">
      <checkbox-group @change="checkboxChange">
        <label>
          <checkbox value="cb"/>
          登录代表{{ StaticConstant.systemName }}
          <text style="color: #4975fd" @click="gotoXieyi">艺体志愿宝用户协议、</text>
          <text style="color: #4975fd" @click="gotoMianze">免责声明、</text>
          ，
          并授权使用您的{{ StaticConstant.systemName }}账号信息（如昵称、头像）以便您统一管理
        </label>
      </checkbox-group>
    </view>
  </view>

</template>

<style scoped lang="scss">
.content {
  margin-top: 200rpx;
  padding: 30rpx;
}

.container {
  height: 100%;
}

.uni-form-item .title {
  padding: 20rpx 0;
}

/*表单 start*/
.form-item {
  display: flex;
  align-items: center;
  margin: 30rpx 0;
}

.form-item-label {
  width: 20%;
}

.form-item-view {
  width: 100%;
  min-height: 80rpx;
}

.form-input {
  border: 1rpx solid #e6e6e6;
}

.uni-input {
  border: none;
}

.textcenter {
  text-align: center;
  margin: 30rpx 0;
}

/*标题*/
.title {
  font-family: "Bookshelf Symbol 7";
  margin: 0 auto;
  //color:white;
  font-size: 90rpx;
  font-weight: 600;
}

/*小标题*/
.low-title {
  font-size: 40rpx;
}

.login-pwd-but {
  color: #222222;
  width: 500rpx;
  background: #eeeeee;
  //background-color: ;
  border-radius: 10rpx;
  font-weight: 550;
}

///登录按钮
.login-but {
  color: white;
  width: 500rpx;
  //background: linear-gradient(rgba(52, 145, 212, 0.83), #3658d0);
  background: linear-gradient(#f96543, #f96543);
  //background-color: ;
  border-radius: 10rpx;
  font-weight: 550;
}

.login-but-disabled {
  background: #eeeeee;
}
</style>
