<template>
  <div class="kole-plate">
    <div class="kole-plate-field" :class="{ 'is-focus': focused, 'is-valid': valid, 'is-invalid': invalid }">
      <select class="kole-plate-prov" v-model="prov">
        <option v-for="p in provinces" :key="p" :value="p">{{ p }}</option>
      </select>
      <input
        class="kole-plate-input"
        :value="body"
        maxlength="7"
        placeholder="A12345"
        @input="onInput"
        @focus="focused = true"
        @blur="focused = false"
      />
    </div>
    <div class="kole-plate-tip" :class="tipClass" v-html="tipText"></div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';

const props = defineProps({
  modelValue: { type: String, default: '' },
  provinces: { type: Array, default: () => ['京', '沪', '粤', '津', '冀', '鲁', '苏', '浙', '川', '渝'] }
});
const emit = defineEmits(['update:modelValue']);
const prov = ref(props.modelValue ? props.modelValue[0] : '京');
const body = ref(props.modelValue ? props.modelValue.slice(1) : '');
const focused = ref(false);

const valid = computed(() => /^[A-Z][A-Z0-9]{5}$/.test(body.value) || /^[A-Z][A-Z0-9]{6}$/.test(body.value));
const invalid = computed(() => !!body.value && !valid.value);
const isNewEnergy = computed(() => /^[A-Z][A-Z0-9]{6}$/.test(body.value));
const tipClass = computed(() => (!body.value ? '' : valid.value ? 'valid' : 'invalid'));
const tipText = computed(() => {
  if (!body.value) return '格式：省份 + 字母 + 5/6 位（新能源 6 位）';
  if (valid.value) return '车牌号合法：' + prov.value + body.value + '<span class="kole-plate-tag">' + (isNewEnergy.value ? '新能源' : '普通') + '</span>';
  return '车牌格式不正确（首位应为字母）';
});

function onInput(e) {
  body.value = e.target.value.toUpperCase().replace(/[^A-Z0-9]/g, '').slice(0, 7);
  e.target.value = body.value;
  emit('update:modelValue', prov.value + body.value);
}
</script>

<style src="./PlateInput.css"></style>
