<template>
  <div class="phone-wrap">
    <div class="input-content">
      <div class="input-item">
        <input
          class="input-text"
          type="tel"
          placeholder="请输入手机号"
          value="{{mobile}}"
          style="placeholder-color: #CCC"
          onchange="updateMobile"
        />
      </div>
      <div class="input-item">
        <input
          class="input-text"
          type="number"
          maxlength="6"
          placeholder="请输入验证码"
          value="{{code}}"
          style="placeholder-color: #CCC"
          onchange="updateMessage"
        />
        <text class="send-msg" if="{{!hasSend}}" @click="sendMsg"
          >获取验证码</text
        >
        <text class="send-msg disabled" else>重新获取{{ duration }}</text>
      </div>
    </div>

    <div class="agreement">
      <image
        src="../../assets/imgs/un_checked.png"
        if="{{!checked}}"
        @click="changeStatus()"
      ></image>
      <image
        src="../../assets/imgs/is_checked.png"
        if="{{checked}}"
        @click="changeStatus()"
      ></image>
      <div class="agreement-text">
        <text @click="changeStatus()">我已阅读并同意</text>
        <text class="red" @click="pageChange('Agreement')">用户服务协议</text>
        <text class="red" @click="pageChange('Privacy')">用户隐私政策</text>
      </div>
    </div>
    <input
      type="button"
      value="登录绑定手机号"
      class="bind-button"
      @click="bindUser"
    />
  </div>
</template>
<script>
import it from '../../helper/interface.js'
import { sendCode, userBind } from '../../api/index'
import router from '@system.router'
import prompt from '@system.prompt'
import storage from '@system.storage'
import webview from '@system.webview'
export default {
  private: {
    hasSend: false,
    duration: 120,
    mobile: null,
    code: null,
    isOnBind: false,
    isOnsend: false,
    checked: false
  },
  onInit() {},
  async sendMsg() {
    if (this.isOnsend) {
      return false
    }
    this.isOnsend = true
    let result = it.validatePhone(this.mobile)
    if (result) {
      let res = await sendCode({ phone: this.mobile }).catch(err => {
        this.isOnsend = false
      })
      if (res) {
        this.isOnsend = false
        this.countDown()
      }
    } else {
      prompt.showToast({
        message: '手机号格式不正确'
      })
    }
  },
  updateMobile(e) {
    this.mobile = e.value
  },
  updateMessage(e) {
    this.code = e.value
  },
  changeStatus() {
    this.checked = !this.checked
  },
  //倒计时
  countDown() {
    this.hasSend = true
    let time = setInterval(() => {
      this.duration--
      if (this.duration < 1) {
        clearInterval(time)
        this.duration = 120
        this.hasSend = false
      }
    }, 1000)
  },
  pageChange(page) {
    if (page == 'Privacy') {
      webview.loadUrl({
        url:
          'https://zhuishuyun.oss-cn-hangzhou.aliyuncs.com/qapp/privacy/hait_privacy.htm',
        showloadingdialog: true
      })
    } else {
      router.push({
        uri: `/views/${page}`
      })
    }
  },
  //绑定用户
  async bindUser() {
    if (!this.checked) {
      return prompt.showToast({
        message: '请先阅读并同意用户服务协议和用户隐私协议'
      })
    }
    if (!this.mobile || !this.code) {
      prompt.showToast({
        message: '请输入手机号和验证码'
      })
      return false
    }
    if (!it.validatePhone(this.mobile)) {
      prompt.showToast({
        message: '手机号码格式不正确'
      })
      return false
    }
    if (this.isOnBind) {
      return false
    }
    this.isOnBind = true
    let params = {
      phone: this.mobile,
      code: this.code,
      version: '2.0'
    }

    let res = await userBind(params).catch(err => {
      this.isOnBind = false
    })
    if (res) {
      this.isOnBind = false
      await storage.set({ key: 'hasLogin', value: 'hasLogin' })
      await storage.set({ key: 'loginPhone', value: this.mobile })

      this.$app.setAppData('backfrom', 'phone')
      prompt.showToast({
        message: '登录成功！'
      })
      setTimeout(() => {
        router.back()
      }, 1500)
    }
  }
}
</script>
<style lang="less">
@import '../../assets/less/phone.less';
</style>
