<!--
  车牌号输入组件
  @author: 张文
  @date: 2022-06-06
-->
<template>
  <div>
    <ty-cell
      :style="{padding: num ? '1px' : ''}"
      :title="titleText"
      v-model="num"
      :is-edit="isEdit"
      :is-link="isEdit"
      @click="openPopup"
    >

      <template #value>

        <div
          style="justify-content: flex-end"
          class="ty-global-flex-between"
        >

          <!-- 车牌 -->
          <div
            v-if="num"
            :class="['ty-car-plate',...carPlate.class]"
          >{{ carPlate.plate }}</div>

        </div>

      </template>

    </ty-cell>

    <!-- 弹出框 -->
    <ty-popup
      :title="titleText"
      v-model="showPopup"
      height="370px"
    >
      <!-- 车牌类型 -->
      <div style="font-size: 14px;">
        <van-radio-group
          v-model="carType"
          direction="horizontal"
          @change="carTypeChange"
        >

          <van-radio
            style="margin-bottom: 8px"
            name="old"
          >{{ $tyLanguage.get('wms_project.pda.components.ui.CarPlate.rnmtzvrt','普通车牌') }}</van-radio>

          <van-radio
            :disabled="carPlateList[6]==='挂'"
            name="new"
            style="margin-bottom: 8px"
          >{{ $tyLanguage.get('wms_project.pda.components.ui.CarPlate.rvwizyjh','新能源车牌') }}</van-radio>

          <van-radio
            v-if="!hiddenHandInput"
            style="margin-bottom: 8px"
            name="handInput"
          >{{ $tyLanguage.get('wms_project.pda.components.ui.CarPlate.phheorwz','手动输入') }}</van-radio>

        </van-radio-group>
      </div>

      <template v-if="carType === 'handInput'">
        <ty-input
          :title="$tyLanguage.get('wms_project.pda.components.ui.CarPlate.natiejjr','车牌号')"
          v-model="handInput.value"
          :get-focus.sync="handInput.focus"
          :not-keyboard="false"
          @confirm="handInputConfirm"
        />
      </template>
      <template v-else>
        <!-- 车牌显示部分 -->
        <div class="ty-global-flex-around ty-car-plate-box">

          <!-- 省份和市区 -->
          <div
            v-for="i in 2"
            :key="i-1"
            :class="[
            'ty-car-plate-num-item',
            carPlateItemIndex === (i-1) ? 'ty-car-plat-num-item-action' : ''
          ]"
            @click="carPlateItemClick(i-1)"
          >{{ carPlateList[i - 1] || '' }}
          </div>

          <!-- 分割点 -->
          <div class="ty-car-plate-num-dot"></div>

          <!-- 车牌号 -->
          <div
            v-for="i in 5"
            :key="i+1"
            :class="[
            'ty-car-plate-num-item',
            carPlateItemIndex === (i+1) ? 'ty-car-plat-num-item-action' : ''
          ]"
            @click="carPlateItemClick(i+1)"
          >{{ carPlateList[i + 1] || '' }}
          </div>

          <!-- 新能源 -->
          <div
            v-if="carType==='new'"
            :class="[
            'ty-car-plate-num-item',
            carPlateItemIndex === 7 ? 'ty-car-plat-num-item-action' : ''
          ]"
            @click="carPlateItemClick(7)"
          >{{ carPlateList[7] || '' }}
          </div>
        </div>

        <!-- 省份输入键盘 -->
        <div
          v-if="carPlateItemIndex===0"
          class="ty-global-flex-between ty-global-animation-rotate ty-car-plate-keyboard-box"
        >
          <div
            class="ty-car-plate-keyboard"
            v-for="(i,k) in province"
            :key="k"
            @click="inputClick(i)"
          >{{ i }}
          </div>
        </div>

        <!-- 数字输入键盘 -->
        <div
          v-if="carPlateItemIndex > 1"
          class="ty-global-flex-between ty-global-animation-rotate ty-car-plate-keyboard-box"
        >
          <div
            class="ty-car-plate-keyboard"
            v-for="(i,k) in number"
            :key="k"
            @click="inputClick(i)"
          >{{ i }}
          </div>
        </div>

        <!-- 字母键盘 -->
        <div
          v-if="carPlateItemIndex !==0"
          class="ty-global-flex-between ty-global-animation-rotate ty-car-plate-keyboard-box"
        >
          <div
            class="ty-global-click-style ty-car-plate-keyboard"
            v-for="(i,k) in letter"
            :key="k"
            @click="inputClick(i)"
          >{{ i }}
          </div>
          <div
            :style="
            carType==='old' && carPlateItemIndex===6 ?
            {} :
            {background:'#f0f0f0',color:'#ccc'}
          "
            class="ty-global-click-style ty-car-plate-keyboard"
            @click="carType==='old' && carPlateItemIndex===6 ? inputClick('挂') : '' "
          >挂
          </div>
        </div>
      </template>


      <!-- 按钮操作区 -->
      <template #button>
        <ty-button
          v-if="carType !== 'handInput'"
          type="last"
          @click="del"
        >
          {{ $tyLanguage.get('wms_project.pda.components.ui.CarPlate.del', '删除') }}
        </ty-button>
        <ty-button @click="confirm">
          {{ $tyLanguage.get('wms_project.pda.components.ui.CarPlate.confirm', '确定') }}
        </ty-button>
      </template>
    </ty-popup>
  </div>
</template>

<script>

export default {
  name: "tyCarPlate",
  props: {
    // 标题
    title: String,

    // 车牌号
    value: String,

    // 是否可编辑
    isEdit:{
      type: Boolean,
      default: true
    },

    // 是否隐藏手动输入选项
    hiddenHandInput:{
      type: Boolean,
      default: false
    }
  },
  computed: {
    // 触发input事件的计算值
    num: {
      get() {
        return this.value
      },
      set(v) {
        this.$emit('input', v)
      }
    },
    // 标题
    titleText() {
      return this.title || this.$tyLanguage.get('wms_project.pda.components.ui.CarPlate.natiejjr', '车牌号')
    },
    // 用于显示的车牌号
    carPlate() {
      const data = {
        plate: this.num,
        class: []
      }

      const length = this.num.length

      if (length === 7 || length === 8){
        data.class.push('ty-car-plate-old')
        data.plate = this.num.replace(/(^[\u4e00-\u9fa5][A-Z])/, "$1·")
      }
      if (length === 8){
        data.class.push('ty-car-plate-new')
      }
      if (this.num[6] === '挂'){
        data.class.push('ty-car-plate-big')
      }

      return data
    }
  },
  data() {
    return {
      // 手动输入
      handInput:{
        value: '',
        focus: false
      },

      // 弹框显示的车牌
      carPlateList: [],

      // 车牌类型
      carType: 'old',

      // 当前输入的车牌号索引
      carPlateItemIndex: 0,

      // 弹出层
      showPopup: false,

      // 省份
      province: [
        '京', '津', '冀', '晋', '蒙', '辽', '吉',
        '黑', '沪', '苏', '浙', '皖', '闽', '赣',
        '鲁', '豫', '鄂', '湘', '粤', '桂', '琼',
        '渝', '川', '贵', '云', '藏', '陕', '甘',
        '青', '宁', '新', '港', '澳',
      ],

      // 数字
      number: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'],

      // 字母
      letter: [
        'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K',
        'L', 'M', 'N', 'P', 'Q', 'R', 'S', 'T', 'U', 'V',
        'W', 'X', 'Y', 'Z',
      ],

      // 显示车牌的样式
      valClass: []
    }
  },
  methods: {
    // 打开弹出框
    openPopup() {

      // 根据预设语言或系统语言判断是否是国内，不是国内的就默认为输入框
      const lang = this.$tyLocalStorag.get('tyLanguage') || this.$tyLanguage.getKey() || navigator.language
      const isChina = /zh|zH|Zh|ZH/.test(lang)

      // 如果语言是国内就判断当前车牌是否符合国内车牌规则
      if (isChina){
        // 根据车牌长度确定时否是新能源或燃油车
        switch (this.num.length) {
          case 0:
          case 7:
            this.carType = 'old'
            break;
          case 8 :
            this.carType = 'new'
            break;
          default:
            if (this.hiddenHandInput){
              this.carType = 'old'
            }else {
              this.carType = 'handInput'
            }
        }
      }else {
        this.carType = 'handInput'
      }



      if (this.carType === 'handInput'){
        this.handInput.value = this.num
      }else {
        this.carPlateList = this.num.split('')
        this.carPlateItemIndex = 0
      }

      this.showPopup = true
    },

    // 车牌类型改变
    carTypeChange(){

      // 切换到手动输入就要清空输入框 同时清空预设键盘输入框
      if(this.carType === 'handInput'){
        this.handInput.focus = true
        this.handInput.value = this.carPlateList.join('')
        this.carPlateList = []
        this.carPlateItemIndex = 0
        return
      }

      // 如果不是手动输入，就判断车牌列表是否为空，且输入框是否满足回填条件，满足就回填车牌
      if(
        this.carPlateList.length === 0 &&
        /^[\u4e00-\u9fa5][A-Z][A-Z|0-9]{5,6}/.test(this.handInput.value)
      ){
        this.carPlateList = this.handInput.value.split('')
      }


      // 判断是否是燃油车牌，如果是就把第8为字符设为空
      if (this.carType === 'old'){
        this.carPlateList[7] = ''
      }
    },

    // 车牌项被点击
    carPlateItemClick(k) {
      this.carPlateItemIndex = k
    },

    // 输入车牌
    inputClick(i) {

      this.$set(this.carPlateList, this.carPlateItemIndex, i)

      if (this.carType === 'old' && this.carPlateItemIndex >= 6) return

      if (this.carType === 'new' && this.carPlateItemIndex >= 7) return

      this.carPlateItemIndex++
    },

    // 删除
    del() {
      if (!this.carPlateList[this.carPlateItemIndex]) this.carPlateItemIndex--

      if (this.carPlateItemIndex <= 0) this.carPlateItemIndex = 0

      this.$set(this.carPlateList, this.carPlateItemIndex, '')

    },

    // 确认
    confirm(){
      let num = this.carPlateList.join('')
      if (this.carType === 'old' && num.length !== 7){
        this.$tyShowErrorMsg(
          this.$tyLanguage.get('wms_project.pda.components.ui.CarPlate.mzlqxuiq','车牌输入不正确，请核对')
        )
        return
      }

      if (this.carType === 'new' && num.length !== 8){
        this.$tyShowErrorMsg(
          this.$tyLanguage.get('wms_project.pda.components.ui.CarPlate.mzlqxuiq','车牌输入不正确，请核对')
        )
        return
      }

      if (this.carType === 'handInput') num = this.handInput.value

      this.num = num
      this.showPopup = false
    },

    // 手动输入确认
    handInputConfirm(){
      this.confirm()
    }
  }
}
</script>

<style scoped lang="less">

@import "./../../assets/css/var.less";

.ty-car-plate{
  text-align: center;
  padding: 3px 5px;
}

.ty-car-plate-old{
  border-radius: 3px;
  letter-spacing: 1px;
  background: #052fc2;
  color: #fff;
  border: solid 1px #052fc2;
}

.ty-car-plate-new{
  background: linear-gradient(#ffffff 0% , rgb(8, 178, 24) 100%);
  color: #232323;
  border-color: #232323;
}

.ty-car-plate-big{
  background: #f8f81b;
  color: #232323;
  border-color: #232323;
}

.ty-car-plate-box{
  margin: 15px 0 10px;
  border-bottom: solid 1px #f0f0f0;
  padding-bottom: 10px;
}
.ty-car-plate-num-item{
  width: 25px;
  height: 25px;
  line-height: 25px;
  border: solid 1px #cccccc;
  border-radius: 3px;
  text-align: center;
  transition: all .3s;
}

.ty-car-plate-num-dot{
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #232323;
}

.ty-car-plat-num-item-action{
  border-color: @baseColor;
  box-shadow: 0 0 6px 0 @baseColor;
}

.ty-car-plate-keyboard-box{
  flex-wrap: wrap;
  justify-content: flex-start;
  text-align: center;
}
.ty-car-plate-keyboard{
  width: 24px;
  height: 25px;
  line-height: 25px;
  text-align: center;
  font-size: 14px;
  border: solid 1px #cccccc;
  border-radius: 5px;
  margin: 3px 2px;
}

</style>
