<template>
  <div class="md-license-plate">
    <div v-if="modeShow === 'division'">
      <div
        class="md-license-plate-input-container division"
        :id="inputViewId"
      >
        <md-license-plate-input
          :keyArray="keyArray"
          :selectedIndex="dyCurrentIndex"
          @keyMapping="keyMapping"
        />
      </div>
      <div
        v-if="showDivisionKeyboard"
        class="md-license-plate-keyboard-container division"
        :id="keyboardViewId"
      >
        <md-license-plate-keyboard
          :keyboard="dyKeyboard"
          @enter="$_onEnter"
          @delete="$_onDelete"
          @confirm="$_onConfirm"
        />
      </div>
    </div>
    <div v-if="modeShow === 'popUp'">
      <md-popup
        :value="showPopUp"
        :hasMask="true"
        position="bottom"
        :maskClosable="false"
      >
        <md-popup-title-bar
          only-close
          large-radius
          :title="title"
          :describe="subtitle"
          title-align="left"
          @cancel="$_onHide"
        ></md-popup-title-bar>
        <div class="md-popup-content">
          <div class="md-license-plate-input-container popUp">
            <md-license-plate-input
              :keyArray="keyArray"
              :selectedIndex="dyCurrentIndex"
              @keyMapping="keyMapping"
            />
          </div>
          <div class="md-license-plate-keyboard-container popUp">
            <md-license-plate-keyboard
              :keyboard="dyKeyboard"
              @enter="$_onEnter"
              @delete="$_onDelete"
              @confirm="$_onConfirm"
            />
          </div>
        </div>
      </md-popup>
    </div>
  </div>
</template>

<script>
import LicensePlateKeyboard from '../license-plate-keyboard'
import LicensePlateInput from '../license-plate-input'
import Popup from '../popup'
import PopupTitlebar from '../popup/title-bar'
import {directiveInit, queryCurParentNode, unique} from './util'

export default {
  name: 'md-license-plate',

  components: {
    [LicensePlateKeyboard.name]: LicensePlateKeyboard,
    [LicensePlateInput.name]: LicensePlateInput,
    [Popup.name]: Popup,
    [PopupTitlebar.name]: PopupTitlebar,
  },

  props: {
    // 省份数据
    shortcuts: {
      type: Array,
      default: () => {
        return [
          '京',
          '津',
          '渝',
          '沪',
          '冀',
          '晋',
          '辽',
          '吉',
          '黑',
          '苏',
          '浙',
          '皖',
          '闽',
          '赣',
          '鲁',
          '豫',
          '鄂',
          '湘',
          '粤',
          '琼',
          '川',
          '贵',
          '云',
          '陕',
          '甘',
          '青',
          '蒙',
          '桂',
          '宁',
          '新',
          '藏',
        ]
      },
    },
    // 字母键盘数据
    letterData: {
      type: Array,
      default: () => {
        return [
          {
            value: 'Q',
            disabled: false,
          },
          {
            value: 'W',
            disabled: false,
          },
          {
            value: 'E',
            disabled: false,
          },
          {
            value: 'R',
            disabled: false,
          },
          {
            value: 'T',
            disabled: false,
          },
          {
            value: 'Y',
            disabled: false,
          },
          {
            value: 'U',
            disabled: false,
          },
          {
            value: 'I',
            disabled: true,
          },
          {
            value: 'O',
            disabled: true,
          },
          {
            value: 'P',
            disabled: false,
          },
          {
            value: 'A',
            disabled: false,
          },
          {
            value: 'S',
            disabled: false,
          },
          {
            value: 'D',
            disabled: false,
          },
          {
            value: 'F',
            disabled: false,
          },
          {
            value: 'G',
            disabled: false,
          },
          {
            value: 'H',
            disabled: false,
          },
          {
            value: 'J',
            disabled: false,
          },
          {
            value: 'K',
            disabled: false,
          },
          {
            value: 'L',
            disabled: false,
          },
          {
            value: 'Z',
            disabled: false,
          },
          {
            value: 'X',
            disabled: false,
          },
          {
            value: 'C',
            disabled: false,
          },
          {
            value: 'V',
            disabled: false,
          },
          {
            value: 'B',
            disabled: false,
          },
          {
            value: 'N',
            disabled: false,
          },
          {
            value: 'M',
            disabled: false,
          },
        ]
      },
    },
    // 展示模式
    modeShow: {
      type: String,
      default: 'division',
    },
    // 弹窗模式下控制展示
    showPopUp: {
      type: Boolean,
      default: false,
    },
    // 弹窗模式下展示标题
    title: {
      type: String,
      default: '请输入车牌号码',
    },
    // 弹窗模式下展示副标题
    subtitle: {
      type: String,
      default: '',
    },
    // 默认键位值
    defaultValue: {
      type: String,
      default: '',
    },
    // 是否可无序点击
    disorderClick: {
      type: Boolean,
      default: true,
    },
  },

  data() {
    return {
      // 数字键盘
      numbers: [
        {
          value: 1,
          disabled: false,
        },
        {
          value: 2,
          disabled: false,
        },
        {
          value: 3,
          disabled: false,
        },
        {
          value: 4,
          disabled: false,
        },
        {
          value: 5,
          disabled: false,
        },
        {
          value: 6,
          disabled: false,
        },
        {
          value: 7,
          disabled: false,
        },
        {
          value: 8,
          disabled: false,
        },
        {
          value: 9,
          disabled: false,
        },
        {
          value: 0,
          disabled: false,
        },
      ],
      // 用户输入的车牌数据
      keyArray: ['', '', '', '', '', '', '', ''],
      selectedIndex: 0, // 当前用户输入框已选中的序号
      showDivisionKeyboard: false,
      inputViewId: unique() + '_divisionInput',
      keyboardViewId: unique() + '_divisionKeyboard',
    }
  },

  computed: {
    // 计算属性，当前选中输入框的序号
    dyCurrentIndex: function() {
      return this.selectedIndex
    },
    dyKeyboard() {
      let numbers = [],
        shortcuts = [],
        letterData = [],
        keyboardType,
        mixedKeyboard = []

      // 省市键盘数据
      shortcuts = this.shortcuts

      // 省市键盘 (第一位)
      if (this.dyCurrentIndex === 0) {
        keyboardType = 1
      } else {
        keyboardType = 2

        // 拼接功能键
        letterData = JSON.parse(JSON.stringify(this.letterData))
        // 删除键
        letterData.splice(19, 0, {
          type: 'delete',
          disabled: false,
        })
        // 确定键
        letterData.push({
          type: 'confirm',
          text: '确定',
          disabled: false,
        })

        // 数字键数据
        numbers = this.numbers

        // 数字字母键盘禁用数字 (第二位)
        if (this.selectedIndex === 1) {
          numbers = this.numbers.map(item => {
            return {
              value: item.value,
              disabled: true,
            }
          })
        }

        mixedKeyboard = numbers.concat(letterData)
      }

      return {
        shortcuts,
        mixedKeyboard,
        keyboardType,
      }
    },
    // 健值为null特殊处理
    keyArrayCopy() {
      return this.keyArray.map(item => {
        if (item) {
          return item
        } else {
          return ' '
        }
      })
    },
  },

  created() {
    // 初始化自定义指令
    directiveInit()
  },

  methods: {
    keyMapping(index) {
      // 展示键盘
      if (!this.showDivisionKeyboard) {
        this.showDivisionKeyboard = true
        // 抛出展示分离键盘事件
        this.$emit('sdKeyboard', this.keyboardViewId)
      }
      // 顺序填写，不可无序点击
      if (!this.disorderClick && !this.keyArray[index + 1] && !this.keyArray[index - 1] && index > 0) {
        return
      }
      this.selectedIndex = index
    },
    // 半弹层关闭事件
    $_onHide() {
      this.$emit('hide')
    },
    // 键入事件
    $_onEnter(value) {
      // 重置键位值
      this.$set(this.keyArray, this.selectedIndex, value)

      // 点击的是最后一个键位值，掩藏键盘，自动执行确认事件
      if (this.selectedIndex === this.keyArray.length - 1) {
        this.$_onConfirm()
      } else {
        this.selectedIndex = this.selectedIndex + 1
      }
    },
    // 删除事件
    $_onDelete() {
      // 清空当前键位值
      this.$set(this.keyArray, this.selectedIndex, '')

      // 当前键位是第一个键位，隐藏分离键盘
      if (this.selectedIndex <= 0) {
        if (this.modeShow === 'division') {
          this.hideDivisionKeyboard()
        }
      } else {
        this.selectedIndex = this.selectedIndex - 1
      }
    },
    // 键盘确认事件
    $_onConfirm() {
      if (this.modeShow === 'division') {
        this.hideDivisionKeyboard()
      }
      this.$emit('confirm', this.keyArrayCopy.join(''))
    },
    // 隐藏分离键盘
    hideDivisionKeyboard(e) {
      let isKeyboard = false
      if (e && e.target) {
        isKeyboard = queryCurParentNode(e.target, [this.keyboardViewId, this.inputViewId])
      }
      if (this.showDivisionKeyboard && !isKeyboard) {
        this.showDivisionKeyboard = false
        // 抛出隐藏分离键盘事件
        this.$emit('hdKeyboard', this.keyArrayCopy.join(''))
      }
    },
  },

  mounted() {
    // 分离键位模式下，添加点击监听事件
    this.modeShow === 'division' && document.addEventListener('click', this.hideDivisionKeyboard)
  },

  beforeDestroy() {
    this.modeShow === 'division' && document.removeEventListener('click', this.hideDivisionKeyboard)
  },

  watch: {
    defaultValue: {
      handler(newVal) {
        if (newVal !== '') {
          const defaultValueArray = this.defaultValue.split('')
          const keyArrayCopy = JSON.parse(JSON.stringify(this.keyArray))

          keyArrayCopy.forEach((item, index) => {
            if (defaultValueArray[index]) {
              keyArrayCopy[index] = defaultValueArray[index]
            } else {
              keyArrayCopy[index] = ''
            }
          })

          this.keyArray = keyArrayCopy
        }
      },
      immediate: true,
    },
  },
}

</script>


<style lang="stylus">
.md-license-plate {
  .md-license-plate-keyboard-container {
    width: 100%;
    background: #D9E0E7;
    &.division {
      padding-bottom: constant(safe-area-inset-bottom);
      padding-bottom: env(safe-area-inset-bottom);
      position: fixed;
      bottom: 0px;
      left: 0px;
      z-index: 99999;
    }
  }
  .md-license-plate-input-container{
    &.popUp{
      background: #fff;
      padding: 20px 40px 40px;
    }
  }
  .md-popup-box.md-slide-up{
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
    border-radius: 40px 40px 0 0;
    background: #fff;
  }
}
</style>
