// plate-input.js
// 车牌号输入组件：先选省份简称 → 再选城市代码 → 最后键盘输入号码
Component({
  properties: {
    value: { type: String, value: '' }
  },

  data: {
    plateChars: [],
    numValue: '',
    inputFocus: false,
    showProvince: false,
    showCity: false,
    hasValue: false,
    provinces: [
      '京', '津', '沪', '渝', '冀', '豫', '云', '辽', '黑', '湘',
      '皖', '鲁', '新', '苏', '浙', '赣', '鄂', '桂', '甘', '晋',
      '蒙', '陕', '吉', '闽', '贵', '粤', '川', '青', '藏', '琼', '宁'
    ],
    cityLetters: [
      'A', 'B', 'C', 'D', 'E', 'F', 'G',
      'H', 'J', 'K', 'L', 'M', 'N', 'P',
      'Q', 'R', 'S', 'T', 'U', 'V', 'W',
      'X', 'Y', 'Z'
    ],
    numSlots: [0, 1, 2, 3, 4, 5]
  },

  observers: {
    'value': function (val) {
      if (val && val !== this._lastEmitted) {
        this._parseValue(val)
      }
    }
  },

  lifetimes: {
    attached() {
      if (this.data.value) {
        this._parseValue(this.data.value)
      }
    }
  },

  methods: {
    _parseValue(val) {
      const chars = val.split('')
      const numValue = chars.slice(2).join('')
      this.setData({
        plateChars: chars,
        numValue: numValue,
        hasValue: chars.length > 0
      })
    },

    _emit(chars) {
      const value = chars.filter(Boolean).join('')
      this._lastEmitted = value
      this.triggerEvent('change', { value })
    },

    // 点击省份格
    onProvinceTap() {
      this.setData({ showProvince: true, showCity: false, inputFocus: false })
    },

    // 选择省份
    selectProvince(e) {
      const code = e.currentTarget.dataset.value
      const chars = [code, this.data.plateChars[1]].filter(Boolean)
      this.setData({ plateChars: chars, showProvince: false, showCity: true, hasValue: true })
      this._emit(chars)
    },

    // 点击城市格
    onCityTap() {
      if (!this.data.plateChars[0]) {
        this.setData({ showProvince: true })
        return
      }
      this.setData({ showCity: true, showProvince: false, inputFocus: false })
    },

    // 选择城市代码
    selectCity(e) {
      const letter = e.currentTarget.dataset.value
      const numPart = this.data.plateChars.slice(2).join('')
      const chars = [this.data.plateChars[0], letter].concat(numPart.split(''))
      this.setData({
        plateChars: chars,
        showCity: false,
        numValue: numPart,
        inputFocus: true,
        hasValue: true
      })
      this._emit(chars)
    },

    // 点击号码格 → 弹出键盘
    onNumTap() {
      if (!this.data.plateChars[0] || !this.data.plateChars[1]) {
        this.setData({ showProvince: true })
        return
      }
      this.setData({ inputFocus: true, showProvince: false, showCity: false })
    },

    // 键盘输入号码
    onNumInput(e) {
      const raw = e.detail.value.toUpperCase().replace(/[^A-Z0-9]/g, '').slice(0, 6)
      const chars = [this.data.plateChars[0], this.data.plateChars[1]].concat(raw.split(''))
      this.setData({ plateChars: chars, numValue: raw, hasValue: true })
      this._emit(chars)
    },

    // 关闭弹窗
    hidePicker() {
      this.setData({ showProvince: false, showCity: false })
    },

    noop() {},

    // 清除车牌号
    clearPlate() {
      this.setData({
        plateChars: [],
        numValue: '',
        inputFocus: false,
        hasValue: false
      })
      this._emit([])
    }
  }
})