<template>
  <div class="contact-info">
    <!-- <div class="contact-title">
      <i/>联系信息
    </div> -->
    <!-- <van-cell-group> -->
    <ErrorWrap :error="error.phone !== ''" :error-message="error.phone">
      <van-field
        v-model="phone"
        placeholder="请输入"
        label="车主手机号"
        type="tel"
        clearable
        readonly
        input-align="right"
        required/>
    </ErrorWrap>
    <ErrorWrap :error="error.captcha !== ''" :error-message="error.captcha">
      <van-field
        v-model="captcha"
        placeholder="请输入"
        label="图形验证码"
        clearable
        input-align="right">
        <img slot="button" :src="codeImg" class="code-img" alt="验证码" @click="getNewGraphic">
      </van-field>
    </ErrorWrap>
    <ErrorWrap :error="error.sms !== ''" :error-message="error.sms">
      <van-field
        v-model="sms"
        placeholder="请输入"
        type="number"
        label="验证码"
        clearable
        input-align="right">
        <div slot="button" class="send-message">
          <span v-if="!countDown" @click="getMessage">获取验证码</span>
          <span v-else>{{ timeCount }}s</span>
        </div>
      </van-field>
    </ErrorWrap>
    <!-- </van-cell-group> -->
  </div>
</template>

<script>
import { getGraphic } from '@/api/loginToC'
import { unboundSms } from '@/api/bind'
import ErrorWrap from '@/components/ErrorWrap'
import { Toast } from 'vant'
export default {
  name: 'ContactInfo',
  components: {
    ErrorWrap
  },
  props: {
    info: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      phone: '',
      sms: '',
      captcha: '',
      error: {
        phone: '',
        captcha: '',
        sms: ''
      },
      timeCount: 60, // 短信倒计时
      countDown: false, // 是否倒计时
      codeImg: '', // 图形验证码图片
      requestId: '', // 图形验证码对应id
      validateList: { // 输入框验证规则
        'phone': [
          {
            validate: '',
            error: '手机号不能为空'
          },
          {
            validate: /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/,
            error: '手机号格式有误'
          }
        ],
        'captcha': [{
          validate: '',
          error: '验证码不能为空'
        }],
        'sms': [{
          validate: '',
          error: '验证码不能为空'
        }]
      }
    }
  },
  watch: {
    info(val) {
      this.phone = val.phone
    }
  },
  created() {
    // 获取图形验证码
    this.getNewGraphic()
  },
  methods: {
    // 获取图形验证码
    getNewGraphic() {
      getGraphic({
        platformSource: 'H5'
      }).then(res => {
        this.codeImg = res.captchaImg
        this.requestId = res.requestId
      })
    },
    // 获取短信验证码
    getMessage() {
      const flag = this.validateRule({
        'phone': this.validateList.phone,
        'captcha': this.validateList.captcha
      })
      if (flag) {
        // 调接口
        unboundSms({
          rnrId: this.info.rnrId,
          imgCaptcha: this.captcha,
          requestId: this.requestId
        }).then(res => {
          // 倒计时
          this.countsDown()
          Toast('验证码发送成功！')
        }).catch(() => {
          this.getNewGraphic()
        })
      }
    },
    // 倒计时
    countsDown() {
      this.countDown = true
      const timer = setInterval(() => {
        this.timeCount--
        if (this.timeCount < 0) {
          clearInterval(timer)
          this.timeCount = 60
          this.countDown = false
        }
      }, 1000)
    },
    // 父组件获取信息
    getContactInfo() {
      const flag = this.validateRule(this.validateList)
      if (flag) {
        return {
          smsCaptcha:	this.sms
        }
      } else {
        return false
      }
    },
    // 通用输入框验证
    validateRule(rule) {
      var flag = true
      Object.keys(rule).forEach(key => {
        var errorList = []
        rule[key].map(x => {
          if (x.validate === '') {
            if (this[key] === '') errorList.push(x.error)
          } else {
            if (!x.validate.test(this[key])) errorList.push(x.error)
          }
        })
        console.log(errorList, ' errorList')
        this.error[key] = errorList[0] ? errorList[0] : ''
        if (errorList.length > 0) flag = false
      })
      return flag
    }
  }
}
</script>

<style lang="scss">
.contact-info {
  opacity: 0.88;
  background: #FFFFFF;
  border-radius: 37px;
  padding-left: 33px;
  padding-right: 31px;
  .contact-title {
    display: flex;
    align-items: center;
    font-size: 32px;
    height: 40px;
    line-height: 40px;
    color: #242424;
    font-weight: 500;
    text-align: left;
    margin-left: 20px;
    font-weight: 800;
    i {
      display: inline-block;
      width: 40px;
      height: 40px;
      margin-right: 16px;
      background: url(../../../assets/icon/icon_phone.png) 0 0 no-repeat;
      background-size: 100% 100%;
    }
  }
  .van-field {
    border-radius: 134px;
    height: 134px;
    align-items: center;
    padding: 0;
    &.van-cell--required {
      padding-left: 30px;
    }
    .van-field__label {
      font-size: 32px;
      color: #242424;
    }
    input {
      font-size: 32px;
      color: #242424;
    }
  }
  .code-img {
    width: 180px;
    height: 80px;
  }
  .send-message {
    font-size: 32px;
    color: #0761F3;
    font-weight: 400;
  }

}
</style>
