<template>
  <div>
    <popup
      v-if="type === 'provinces'"
      v-model="isShow"
      position="bottom"
    >
      <div class="keyboard-content">
        <ul
          v-for="(i, index) in provincesData"
          :key="index"
          class="keyboard-list"
        >
          <li
            v-for="(item, itemIndex) in i"
            :key="itemIndex"
            :class="{'touch-start': currentTouchStart === item.value}"
            @click="clickKey(item.value, 'provinces')"
            @touchstart="handleTouchStart(item.value)"
            @touchend="handleTouchEnd(item.value)"
          >
            {{ item.value }}
          </li>
        </ul>
      </div>
    </popup>
    <popup
      v-if="type === 'alphanumeric'"
      v-model="isShow"
      position="bottom"
    >
      <div class="keyboard-content">
        <ul
          v-for="(i, index) in alphanumeric"
          :key="index"
          class="keyboard-list"
        >
          <li
            v-for="(item, itemIndex) in i"
            :key="itemIndex"
            :class="{
              'delete': item === 'delete' ,
              'touch-start': currentTouchStart === item,
              'end': item === 'end'}"
            @click="clickKey(item, 'alphanumeric')"
            @touchstart="handleTouchStart(item)"
            @touchend="handleTouchEnd(item)"
          >
            {{ showItem(item) }}
            <img
              v-if="item === 'delete'"
              class="delete-icon"
              src="../../assets/key_delete_icon.png"
            >
          </li>
        </ul>
      </div>
    </popup>
    <div ref="reference">
      <slot name="reference" />
    </div>
  </div>
</template>
<script>
import popup from '../popup'
import provinces from './provinces_abbreviation'
import alphanumeric from './alphanumeric'
import { on, off } from '../../utils/dom'
export default {
  components: {
    popup
  },
  model: {
    prop: 'show',
    event: 'change'
  },
  props: {
    type: {
      type: String,
      default () {
        return 'provinces'
      }
    },
    show: {
      type: Boolean,
      default () {
        return false
      }
    }
  },
  data () {
    return {
      provincesData: this.handleProvincesData(), // 省份简称数据
      alphanumeric: this.handleAlphanumericData(), // 字母键盘数据
      isShow: this.show,
      currentTouchStart: '' // 当前按下元素
    }
  },
  watch: {
    show (newValue, oldValue) {
      this.isShow = newValue
    },
    isShow (newValue, oldValue) {
      if (newValue) {
        this.$emit('on-show')
      } else {
        this.$emit('on-hide')
      }
      this.$emit('change', newValue)
    }
  },
  created () {},
  mounted() {
    let reference = this.$refs.reference
    on(reference, 'click', this.doToggle)
    // on(document, 'click', this.handleDocumentClick)
  },
  destroyed() {
    let reference = this.$refs.reference
    off(reference, 'click', this.doToggle)
    // off(document, 'click', this.handleDocumentClick)
  },
  methods: {
    clickKey(value, type) {
      if (type === 'provinces') {
        this.isShow = false
      }
      if (value === 'delete') {
        this.$emit('handle-delete', value)
      } else if (value === 'end') {
        this.isShow = false
      } else {
        this.$nextTick(() => {
          this.$emit('handle-value', value)
        })
      }
    },
    handleTouchStart(value) {
      this.currentTouchStart = value
    },
    handleTouchEnd(value) {
      this.currentTouchStart = ''
    },
    handleProvincesData() {
      let provincesArr = []
      provincesArr.push(provinces.slice(0, 10))
      provincesArr.push(provinces.slice(10, 19))
      provincesArr.push(provinces.slice(19, 26))
      provincesArr.push(provinces.slice(26))
      return provincesArr
    },
    handleAlphanumericData() {
      let alphanumericArr = []
      alphanumericArr.push(alphanumeric.slice(0, 10))
      alphanumericArr.push(alphanumeric.slice(10, 20))
      alphanumericArr.push(alphanumeric.slice(20, 30))
      alphanumericArr.push(alphanumeric.slice(30))
      return alphanumericArr
    },
    showItem(value) {
      if (value === 'delete') {
        return ''
      } else if (value === 'end') {
        return '完成'
      } else {
        return value
      }
    },
    doToggle() {
      this.isShow = !this.isShow
    },
    handleDocumentClick(e) {
      let reference = this.$refs.reference
      if (!this.$el ||
          !reference ||
          this.$el.contains(e.target) ||
          reference.contains(e.target)) return
      this.isShow = false
    }
  }
}
</script>
