<template>
  <div class="vehicle-no-input">
    <!-- 省份选择 -->
    <el-select
      v-model="province"
      placeholder="省份"
      class="province-select"
      @change="handleProvinceChange"
      filterable
      clearable
    >
      <el-option
        v-for="item in provinceList"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
    
    <!-- 字母输入 -->
    <el-input
      v-model="letter"
      class="letter-input"
      placeholder="A"
      maxlength="1"
      @input="handleLetterInput"
      @keyup.native="handleLetterKeyup"
    />
    
    <!-- 数字/字母输入 -->
    <el-input
      v-model="number"
      class="number-input"
      :placeholder="numberPlaceholder"
      :maxlength="numberMaxLength"
      :key="`number-input-${numberMaxLength}`"
      @input="handleNumberInput"
      ref="numberInput"
    />
  </div>
</template>

<script>
export default {
  name: 'VehicleNoInput',
  props: {
    value: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      province: '',      // 省份
      letter: '',        // 字母
      number: '',        // 数字/字母
      // 省份列表
      provinceList: [
        { label: '京', value: '京' },
        { label: '津', value: '津' },
        { label: '沪', value: '沪' },
        { label: '渝', value: '渝' },
        { label: '冀', value: '冀' },
        { label: '豫', value: '豫' },
        { label: '云', value: '云' },
        { label: '辽', value: '辽' },
        { label: '黑', value: '黑' },
        { label: '湘', value: '湘' },
        { label: '皖', value: '皖' },
        { label: '鲁', value: '鲁' },
        { label: '新', value: '新' },
        { label: '苏', value: '苏' },
        { label: '浙', value: '浙' },
        { label: '赣', value: '赣' },
        { label: '鄂', value: '鄂' },
        { label: '桂', value: '桂' },
        { label: '甘', value: '甘' },
        { label: '晋', value: '晋' },
        { label: '蒙', value: '蒙' },
        { label: '陕', value: '陕' },
        { label: '吉', value: '吉' },
        { label: '闽', value: '闽' },
        { label: '贵', value: '贵' },
        { label: '粤', value: '粤' },
        { label: '青', value: '青' },
        { label: '藏', value: '藏' },
        { label: '川', value: '川' },
        { label: '宁', value: '宁' },
        { label: '琼', value: '琼' },
        { label: '使', value: '使' },
        { label: '领', value: '领' }
      ]
    }
  },
  computed: {
    // 完整车牌号
    fullVehicleNo() {
      return (this.province || '') + (this.letter || '') + (this.number || '')
    },
    // 数字部分最大长度（支持5位普通车牌和6位新能源车牌）
    numberMaxLength() {
      // 如果已经输入了6位数字，或者字母已输入，允许输入6位（新能源车牌）
      // 默认支持6位，用户可以选择输入5位（普通车牌）或6位（新能源车牌）
      return 6
    },
    // 数字输入框占位符
    numberPlaceholder() {
      // 默认显示5位，但允许输入6位
      return '12345'
    }
  },
  watch: {
    value: {
      handler(newVal) {
        if (newVal && newVal !== this.fullVehicleNo) {
          this.parseVehicleNo(newVal)
        }
      },
      immediate: true
    },
    fullVehicleNo(newVal) {
      // 当完整车牌号变化时，通知父组件
      this.$emit('input', newVal)
      this.$emit('change', newVal)
    }
  },
  methods: {
    // 解析车牌号（从完整字符串解析到各个部分）
    parseVehicleNo(vehicleNo) {
      if (!vehicleNo) {
        this.province = ''
        this.letter = ''
        this.number = ''
        return
      }
      
      // 去除空格
      const cleaned = vehicleNo.replace(/\s/g, '').toUpperCase()
      
      // 解析：省份(1位) + 字母(1位) + 数字/字母(5或6位)
      if (cleaned.length >= 2) {
        this.province = cleaned.charAt(0)
        this.letter = cleaned.charAt(1)
        this.number = cleaned.substring(2)
      } else if (cleaned.length === 1) {
        this.province = cleaned.charAt(0)
        this.letter = ''
        this.number = ''
      }
    },
    
    // 省份改变
    handleProvinceChange() {
      this.emitChange()
    },
    
    // 字母输入
    handleLetterInput(value) {
      // 自动转大写，允许所有A-Z字母
      const upperValue = value.toUpperCase()
      const validLetters = /^[A-Z]$/
      if (validLetters.test(upperValue)) {
        this.letter = upperValue
        // 如果已有6位数字，保持不变（支持新能源车牌）
        // 如果已有5位数字，保持不变（支持普通车牌）
        // 让用户自由选择输入5位或6位
      } else {
        this.letter = ''
      }
      this.emitChange()
    },
    
    // 字母输入键盘事件（自动跳转到下一个输入框）
    handleLetterKeyup(event) {
      if (this.letter && event.key !== 'Backspace' && event.key !== 'ArrowLeft' && event.key !== 'ArrowRight') {
        // 自动聚焦到数字输入框
        this.$nextTick(() => {
          const numberInput = this.$refs.numberInput
          if (numberInput && numberInput.$el) {
            const input = numberInput.$el.querySelector('input')
            if (input) {
              input.focus()
            }
          }
        })
      }
    },
    
    // 数字/字母输入
    handleNumberInput(value) {
      // 自动转大写，只允许字母和数字
      this.number = value.toUpperCase().replace(/[^A-Z0-9]/g, '')
      this.emitChange()
    },
    
    // 触发变化事件
    emitChange() {
      this.$emit('input', this.fullVehicleNo)
      this.$emit('change', this.fullVehicleNo)
    }
  }
}
</script>

<style scoped lang="scss">
.vehicle-no-input {
  display: flex;
  align-items: center;
  gap: 8px;
  
  .province-select {
    width: 120px;
  }
  
  .letter-input {
    width: 60px;
    
    ::v-deep .el-input__inner {
      text-align: center;
      font-weight: bold;
      text-transform: uppercase;
      font-size: 16px;
    }
  }
  
  .number-input {
    width: 100px;
    
    ::v-deep .el-input__inner {
      text-align: center;
      font-weight: bold;
      text-transform: uppercase;
      letter-spacing: 1px;
      font-size: 14px;
      padding: 0 8px;
    }
  }
}
</style>

