<template>
  <zj-page-layout bgColor="#ffffff">
    <view class="all-container">
      <view class="input">
        <u-input clearable border='bottom' placeholder="请输入手机号" v-model="phone">
          <view class="" style="" slot='prefix'>
            <text class="iconfont icon-shouji"></text>
          </view>
        </u-input>
      </view>
      <view class="input">
        <u-input clearable border='bottom' placeholder="请输入验证码" v-model="code">
          <view class="" style="" slot='prefix'>
            <text class="iconfont icon-yanzhengma"></text>
          </view>
          <view class="" slot='suffix' @click="getCode">
            <text class="text">{{countDown?countDown+'S':'获取验证码'}}</text>
          </view>
        </u-input>
      </view>

      <u-button type="primary" text="确定" :disabled="!phone || !code" @click="submitForm"></u-button>

    	<zjDialogVerification ref="verification" :isShow="isShowCodeDialog" :top="codeObj.yHeight" :bgImg="codeObj.bigImage"
    	  :maskImg="codeObj.smallImage" :isSuccess="codeObj.isSuccess" :isFail="codeObj.isFail"
    	  @close="isShowCodeDialog = false" @refresh="refresh" @finish="finish">
    	</zjDialogVerification>
    </view>
  </zj-page-layout>

</template>

<script>
  import zjDialogVerification from "@/components/zj-dialog/zj-dialog-verification.vue";

	export default {
    components: {
      zjDialogVerification
    },

		data() {
			return {
				phone: '',
				code: '',
				getCodeText: '获取验证码',
				countDown: 0,
				timer: null,

				isShowCodeDialog: false,
				codeObj: {
					bigImage: '',
					smallImage: '',
					key: '',
					yHeight: '',
					isSuccess: false,
					isFail: false,
				}
			}
		},
		onLoad() {

		},
		methods: {
			// 获取验证码
			getCode() {
				if(!this.phone) {
					this.$toast('请先填写手机号码');
					return false;
				}
				if(this.countDown != 0) {
					this.$toast('请勿频繁获取验证码');
					return false;
				}
				if(!(/^1[3456789]\d{9}$/.test(this.phone))) {
					this.$toast('请填写正确的手机号码');
					return false;
				}

				// this.init();
				this.isShowCodeDialog = true;
				this.$refs.verification.refresh();

			},

			// 提交表单
			submitForm() {
				if(!this.phone) {
					this.$toast('请先填写手机号码');
					return false;
				}
				if(!(/^1[3456789]\d{9}$/.test(this.phone))) {
					this.$toast('请填写正确的手机号码');
					return false;
				}
				if(!this.code) {
					this.$toast('请先填写验证码');
					return false;
				}

				this.$api.post('/user/phone/bind', {
          phone: this.phone,
          code: this.code
				}).then(res => {
					this.$successToast('申请成功');
					setTimeout(() => {
						this.$navToPage({
							delta: 1
						}, 'navigateBack')
					}, 1000)
				})

			},

			// 获取图片验证码
			init(){
				this.$api.get('/common/getVerifi')
        .then(res => {
					this.codeObj = res.data;
				})
			},

			// 刷新验证码
			refresh(){
				this.init()
			},

			// 验证结束
			finish(value){
				console.log(value);
				this.$api.post('/user/sms/send', {
          phone: this.phone,
          key: this.codeObj.key,
          vrifyCode: Math.round(value)
				}).then(res => {
          this.countDown = 60;
					this.codeObj.isSuccess = true;
					this.codeObj.isFail = false;
					setTimeout(() => {
						this.isShowCodeDialog = false;
						this.$toast('短信发送成功');
					}, 1500)
					this.countDown--;
					this.timer = setInterval(() => {
						this.countDown--;
						if (this.countDown == 0) {
							this.getCodeText = '重新获取';
							clearInterval(this.timer)
						}
					}, 1000)
				}).catch(res => {
					this.codeObj.isSuccess = false;
					this.codeObj.isFail = true;
					setTimeout(() => {
						this.$refs.verification.refresh();
					}, 1500)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
  .all-container {
    padding: 0 30rpx;
    .input {
      margin-top: 30rpx;
      ::v-deep .u-input {
        .iconfont {
          font-size: 36rpx;
          color: $theme-color;
          font-weight: 600;
          margin-right: 12rpx;
        }
        .text {
          color: $theme-color;
        }
      }
    }
    ::v-deep .u-button {
      margin-top: 60rpx;
    }
  }
</style>
