<template>
  <div>
    <section title="第一组demo">
      <p style="padding: 20px">
        第一、二组demo: 搜索页面时用到的键盘
      </p>
      <search
        v-model="test2.searchKey"
        placeholde="搜索"
        @on-search="handleSearch('test2')"
      />
      <search
        v-model="test1.alphanumeric"
        placeholde="搜索"
        @on-focus="test1.showAlphanumeric = true"
        @on-search="handleSearch('test1')"
      >
        <div
          slot="label"
          class="label"
          @click="test1.showProvinces = true"
        >
          <span>{{ test1.provinces }}</span>
          <i class="icon" />
        </div>
      </search>
      <keyboard
        v-model="test1.showProvinces"
        @handle-value="handleKeyboardValue($event, 'test1', 'provinces', false)"
        @on-show="handleShowKeyboard('test1', 'Provinces')"
        @on-hide="handleHideKeyboard('test1', 'Provinces')"
      />
      <keyboard
        v-model="test1.showAlphanumeric"
        type="alphanumeric"
        @handle-value="handleKeyboardValue($event, 'test1', 'alphanumeric', false)"
        @handle-delete="handleKeyboardValue($event, 'test1', 'alphanumeric', true)"
        @on-show="handleShowKeyboard('test1', 'Alphanumeric')"
        @on-hide="handleHideKeyboard('test1', 'Alphanumeric')"
      />
    </section>
    <group title="第三组demo，单纯调起省份和字母数字弹窗">
      <x-switch
        v-model="test3.showProvinces"
        title="省份键盘"
      />
      <x-switch
        v-model="test3.showAlphanumeric"
        title="字母数字键盘"
      />
      <keyboard
        v-model="test3.showProvinces"
        @handle-value="handleKeyboardValue($event, 'test3', 'provinces', false)"
        @on-show="handleShowKeyboard('test3', 'Provinces')"
        @on-hide="handleHideKeyboard('test3', 'Provinces')"
      />
      <keyboard
        v-model="test3.showAlphanumeric"
        :type="'alphanumeric'"
        @handle-value="handleKeyboardValue($event, 'test3', 'alphanumeric', false)"
        @handle-delete="handleKeyboardValue($event, 'test3', 'alphanumeric', true)"
        @on-show="handleShowKeyboard('test3', 'Alphanumeric')"
        @on-hide="handleHideKeyboard('test3', 'Alphanumeric')"
      />
    </group>
    <section title="第四组demo">
      <group title="第四组demo，提交数据页面用到键盘">
        <cell
          class="search-box"
          is-link
        >
          <div
            slot="icon"
            class="weui_label"
          >
            车牌号
          </div>
          <x-input
            v-model="test4.alphanumeric"
          >
            :max="7"
            :show-clear="false"
            @on-change="change"
            @on-focus="test4.showAlphanumeric = true"
            :placeholder="'请输入车牌号'"
            <div
              slot="label"
              class="label"
              @click="test4.showProvinces = true"
            >
              <span>{{ test4.provinces }}</span>
              <i class="icon" />
            </div>
          </x-input>
        </cell>
      </group>
      <keyboard
        v-model="test4.showProvinces"
        @handle-value="handleKeyboardValue($event, 'test4', 'provinces', false)"
        @on-show="handleShowKeyboard('test4', 'Provinces')"
        @on-hide="handleHideKeyboard('test4', 'Provinces')"
      />
      <keyboard
        v-model="test4.showAlphanumeric"
        type="alphanumeric"
        @handle-value="handleKeyboardValue($event, 'test4', 'alphanumeric', false)"
        @handle-delete="handleKeyboardValue($event, 'test4', 'alphanumeric', true)"
        @on-show="handleShowKeyboard('test4', 'Alphanumeric')"
        @on-hide="handleHideKeyboard('test4', 'Alphanumeric')"
      />
    </section>
  </div>
</template>
<script>
import { Keyboard, Group, XSwitch, XInput, Search, Cell } from '../components/_index'
// import provincesData from '../components/keyboard/provinces_abbreviation'
export default {
  components: {
    Keyboard,
    Group,
    XSwitch,
    XInput,
    Search,
    Cell
  },
  props: {},
  data () {
    return {
      test1: {
        provinces: '粤',
        alphanumeric: '',
        showProvinces: false,
        showAlphanumeric: false
      },
      test2: {
        searchKey: ''
      },
      test3: {
        provinces: '粤',
        alphanumeric: '',
        showProvinces: false,
        showAlphanumeric: false
      },
      test4: {
        provinces: '粤',
        alphanumeric: '',
        showProvinces: false,
        showAlphanumeric: false
      }
    }
  },
  methods: {
    /**
       * @description 显示键盘
       * @param { Object } testValue 测试组的值
       * @param { String } type= 'provinces' || 'alphanumeric' 键盘的类型
       */
    handleShowKeyboard(testValue, type) {
      this[testValue]['show' + type] = true
    },
    /**
       * @description 处理键盘值
       * @param { String } val 键盘的值
       * @param { Object } testValue 测试组的值
       * @param { String } type= 'provinces' || 'alphanumeric' 键盘的类型
       * @param { Boolean } isDel = true || false 是否是删除操作
       */
    handleKeyboardValue(val, testValue, type, isDel) {
      if (isDel) {
        this[testValue][type] = this[testValue][type].substring(0, this[testValue][type].length - 1)
      }
      if (type === 'alphanumeric' && this[testValue][type].length < 7 && !isDel) {
        this[testValue][type] = this[testValue][type] + val
      }
      if (type === 'provinces') {
        this[testValue][type] = val
      }
    },
    /**
       * @description 处理隐藏键盘
       * @param testValue 测试组的值
       * @param type 键盘消失的类型
       */
    handleHideKeyboard(testValue, type) {
      if (type === 'Provinces') {
        this[testValue].showAlphanumeric = true
      }
    },
    /**
       * @description 处理当前测试组搜索
       * @param testValue
       */
    handleSearch(testValue) {
      console.log(testValue + '去搜索')
    }
  }
}
</script>
<style lang="less">
  @import '../styles/cui/base/fn';
  .search-box{
    .weui_cell{
      padding: 0;
    }
    .vin-label{
      width: 36/@w2;
      height: 27/@w2;
      margin-right: 20/@w2;
      line-height: 80/@w2;
      img{
        display: inline-block;
        width: 100%;
      }
    }
    .label{
      display: flex;
      align-items: center;
      padding: 20/@w2 15/@w2;
      margin-right: 20/@w2;
      line-height: 60/@w2;
      background-color: #eeeeee;
      border-radius: 4px;
      span{
        display: inline-block;
        font-size: 15px;
        line-height: 15/@w2;
      }
    }
    .icon{
      display: inline-block;
      margin: 6px 0 0 3px;
      width:0px;
      height:0px;
      border: 12/@w2 solid  #5d5c57;
      border-top-color: #5d5c57;
      border-bottom-color:transparent;
      border-left-color:transparent;
      border-right-color:transparent;
    }
  }
  .search{
    &:before{
      font-size: 20px;
      color: rgba(0, 0, 0, 0.4);
    }
  }
</style>
