<template>
  <view class="content">
    <view class="header">
      <image src="https://oss-bq.ahduima.com/%E5%B0%8F%E7%A8%8B%E5%BA%8F/%E5%9B%BE%E7%89%87/%E9%87%91%E6%AD%A6%E8%81%94_20230831123333.png" mode="widthFix"></image>
      <view class="mt21 fs16 cor-333 fwb text-center">欢迎使用金武联驾考！</view>
    </view>

    <view class="list">
      <view class="list-call">
        <u-input class="sl-input" border="none" v-model="login.phone" type="number" maxlength="11"
          placeholder="输入手机号" />
      </view>
      <view class="list-call">
        <u-input class="sl-input" v-model="login.code" type="text" maxlength="6" border="none" placeholder="输入验证码">
          <template #suffix>
            <text class="fs14 mr10" style="color: #05C341;" @tap="getCode">{{ countDown == 0 ? '获取验证码' : countDown }}</text>
          </template>
        </u-input>
      </view>
    </view>

    <view class="button-login" @tap="bindLogin()">
      <text>登录</text>
    </view>

  </view>
</template>

<script>
import {
  isPhone
} from '@/jtools/utils/validate.js'
import {
  getCode,
  login
} from '@/jtools/api/login'
import useUserStore from '@/jtools/store/user'
import storage from '@/jtools/storage';
export default {
  data() {
    return {
      login: {
        phone: '',
        code: ''
      },
      countDown: 0,
      js: undefined
    };
  },
  onShow() {
    if (useUserStore().isLogin) {
      this.toHome()
    }
  },
  methods: {
    getCode() {
      if (isPhone(this.login.phone) && this.countDown == 0) {
        getCode({
          phone: this.login.phone
        }).then(resp => {
          // if (resp.code == '0000') {
          uni.showToast({
            title: '发送成功!',
            icon: 'none'
          })
          this.countDown = 60
          this.js = setInterval(() => {
            this.countDown--;
            if (this.countDown == 0) {
              this.clear()
            }
          }, 1000)
          // }
        })
      }
    },
    clear() {
      clearInterval(js)
      this.js = null
      this.countDown = 0
    },
    bindLogin() {
      if (isPhone(this.login.phone) && this.login.code) {
        let params = { ...this.login }
        if (storage.get('companyId')) {
          params.id = storage.get('companyId')
        }
        useUserStore().login(params).then(resp => {
          if (resp.userId) {
            useUserStore().getUserInfo()
            useUserStore().searchUserVip()
            this.toHome()
          }
        })
      }
    },
    toHome() {
      uni.switchTab({
        url: '/pages/index/index'
      })
    }
  }
}
</script>

<style>
page {
  background-color: #fff;
}

.content {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.header {
  margin-top: 166rpx;
  margin-left: auto;
  margin-right: auto;
  letter-spacing: 10rpx;
}

.header image {
  width: 383rpx;
}

.list {
  display: flex;
  flex-direction: column;
  padding-top: 120rpx;
  padding-left: 90rpx;
  padding-right: 90rpx;
}

.list-call {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  height: 100rpx;
  color: #333333;
  border-bottom: 0.5px solid #e2e2e2;
}



.list-call .sl-input {
  flex: 1;
  text-align: left;
  font-size: 32rpx;
  margin-left: 16rpx;
}

.button-login {
  color: #FFFFFF;
  font-size: 34rpx;
  width: 560rpx;
  height: 100rpx;
  background: linear-gradient(90deg, #11DF20 0%, #00B74F 100%);
  border-radius: 50rpx;
  line-height: 100rpx;
  text-align: center;
  margin-top: 100rpx;
  margin-left: auto;
  margin-right: auto;
}
</style>