<template>
  <div class="inout-wrap">
    <div class="title">无牌车{{ toFlag =='0' ? '入场' : '出场' }}结算</div>
    <div :class="tipsClass" class="tips-text" >{{ tipsText }}</div>
    <div class="inout-fix" />
    <input v-show="inputType" ref="phoneVal" type="text" placeholder="请输入手机号" maxlength="11">
    <input v-show="!inputType" ref="carVal" type="text" placeholder="请输入车牌号" maxlength="8">
    <div class="toggle-btn" @click="togglebtn">
      <img src="../assets/toggle-btn.png">
      {{ toggleText }}
    </div>
    <div class="commit-btn" @click="commitsure">确定</div>
  </div>
</template>

<script>
import { mapActions } from 'vuex'

export default {
  name: 'InOut',
  props: ['toFlag'],
  data() {
    return {
      tipsText: '请输入手机号',
      toggleText: '切换车牌',
      inputType: true,
      tipsClass: ''
    }
  },
  methods: {
    ...mapActions([
      'handleShow', 'handleHide', 'handlePayFlag'
    ]),
    togglebtn() {
      this.tipsClass = ''
      this.inputType = !this.inputType
      // this.toggleText=this.toggleText === '切换车牌' ? '切换手机' : '切换车牌'
      if (this.toggleText === '切换车牌') {
        this.toggleText = '切换手机'
        this.tipsText = '请输入车牌号'
      } else {
        this.toggleText = '切换车牌'
        this.tipsText = '请输入手机号'
      }
    },
    commitsure() { // 确定事件
      console.log(this.toFlag) // 如果为1 就需要去支付
      if (this.inputType) {
        const phonetext = this.$refs.phoneVal.value.trim()
        const phoneReg = /(^1[3|4|5|7|8]\d{9}$)|(^09\d{8}$)/
        if (phonetext) {
          if (phoneReg.test(phonetext)) {
            // ajax
            this.handleShow()
            // 模拟成功
            setTimeout(() => {
              this.handleHide()
              this.tipsText = '绑定成功'
              this.tipsClass = 'successClass'
              if (this.toFlag === 1) {
                this.handlePayFlag()
              }
            }, 2000)
          } else {
            this.tipsText = '请输入正确手机号'
            this.tipsClass = 'errorClass'
            return
          }
        } else {
          this.tipsText = '请输入手机号'
          this.tipsClass = ''
          return
        }
      } else {
        const cartext = this.$refs.carVal.value.trim()
        const carReg = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-HJ-NP-Z0-9]{4}[A-HJ-NP-Z0-9挂学警港澳]{1}$/
        const carnewreg = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}(([0-9]{5}[DF]$)|([DF][A-HJ-NP-Z0-9][0-9]{4}$))/;
        if (cartext) {
          if (cartext.length === 7) { // 正常车牌
            if (carReg.test(cartext)) {
              // ajax
              this.handleShow()
              // 模拟成功
              setTimeout(() => {
                this.handleHide()
                this.tipsText = '绑定成功'
                this.tipsClass = 'successClass'
              }, 2000)
            } else {
              this.tipsText = '请输入正确车牌号'
              this.tipsClass = 'errorClass'
              return
            }
          } else if (cartext.length === 8) { // 新能源
            if (carnewreg.test(cartext)) {
              // ajax
              this.handleShow()
              // 模拟成功
              setTimeout(() => {
                this.handleHide()
                this.tipsText = '绑定成功'
                this.tipsClass = 'successClass'
              }, 2000)
            } else {
              this.tipsText = '请输入正确车牌号'
              this.tipsClass = 'errorClass'
              return
            }
          } else {
            this.tipsText = '请输入正确车牌号'
            this.tipsClass = 'errorClass'
            return
          }
        } else {
          this.tipsText = '请输入车牌号'
          this.tipsClass = ''
          return
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  $corlorwhit: #fff;
  .inout-wrap {
    width: 100%;
    height: 100%;
    background: url("../assets/inout-bg.png") repeat-x;
    position: relative;
    text-align: center;
    .title {
      height: 42px;
      line-height: 42px;
      background-color: rgba(255, 255, 255, .9);
      font-size: 17px;
      color: #4A4A4A;
      font-weight: 500;
    }
    .tips-text {
      margin-top: 44px;
      margin-bottom: 10px;
      font-size: 17px;
      color: $corlorwhit;
    }
    .normalClass {
      color: $corlorwhit;
    }
    .successClass {
      color: #0f0;
    }
    .errorClass {
      color: #f00;
    }
    input{
      border: 0;
      outline: 0;
      width: 80%;
      height: 47px;
      line-height: 47px;
      padding-left: 20px;
      background-color: #fff;
      font-size: 18px;
      color: #4A4A4A;
      border-radius: 4px;
    }
    .toggle-btn {
      height: 17px;
      margin-top: 18px;
      text-align: center;
      cursor: pointer;
      color: $corlorwhit;
      img {
        width: 16px;
        height: 16px;
        vertical-align: top;
      }
    }
    .commit-btn {
      width: 80%;
      height: 42px;
      margin: 156px auto 0;
      line-height: 42px;
      border-radius: 21px;
      background: #fff;
      font-size: 18px;
      color: #75CBBE;
      cursor: pointer;
    }
    .inout-fix {
      width: 100%;
      height: 122px;
      position: absolute;
      bottom: 0;
      background: url("../assets/inout-fix.png") no-repeat;
      background-size: 100% 100%;
    }
  }
</style>
