<template>
  <div class="keyboard">
    <bottom-popup
      class="popup-wrap"
      :show="show"
      :mask="maskShow"
      maskBgcolor="none"
      @close="close"
    >
      <ul
        class="_password"
        @click="inFocus"
        v-if="psdShow"
      >
        <li
          v-for="(item, index) in Psdlist"
          :key="index"
          :class="item.class"
        ></li>
      </ul>
      <input
        type="password"
        class="_inputHidden"
        ref="inputPsd"
      >
      <div class="ui-keyboard">
        <ul class="ui-keyboard-numbers">
          <li
            :class="{'zero': item == 0}"
            v-for="(item, index) in keyLeftData"
            :key="index"
            @click="clickKeyFn(item)"
          >{{ item }}</li>
        </ul>
        <ul class="ui-keyboard-btn">
          <li
            class="btn-del"
            @click="del"
          >
            <i class="iconfont iconshanchu"></i>
          </li>
          <li
            class="btn-ok"
            @click="comfirm"
          >完成</li>
        </ul>
      </div>
    </bottom-popup>
  </div>
</template>

<script>
import BottomPopup from '@/components/plugin/bottom-popup'
export default {
  name: 'keyboard',
  components: {
    BottomPopup,
  },
  props: {
    show: {
      type: Boolean,
      default: false
    },
    type: {
      type: String,
      default: '1'
    },
    psdShow: {
      type: Boolean,
      default: false
    },
    maskShow: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
      keyLeftData: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0', '.'],
      keyContent: '',
      Psdlist: [{ class: '' }, { class: '' }, { class: '' }, { class: '' }, { class: '' }, { class: '' }]
    }
  },
  methods: {
    inFocus () {
      if (this.type === '1') {
        this.keyContent = ''
        this.Psdlist = [{ class: '' }, { class: '' }, { class: '' }, { class: '' }, { class: '' }, { class: '' }];
      }
    },
    close () {
      if (this.type === '1') {
        this.keyContent = ''
        this.Psdlist = [{ class: '' }, { class: '' }, { class: '' }, { class: '' }, { class: '' }, { class: '' }];
      }
      this.$emit('closeKey')
    },
    // 点击数字键盘
    clickKeyFn (val) {
      if (val !== '.') {
        let num = 6
        if (this.keyContent.length < num) {
          this.keyContent += val
        }
        console.log('this.type===>', this.type)
        if (this.type === '1') {
          for (let i = 0; i < num; i++) {
            if (this.keyContent[i]) {
              this.Psdlist[i].class = 'active'
            } else {
              this.Psdlist[i].class = ''
            }
          }
        }
        this.$emit('clickKey', this.keyContent)
      }
    },
    // 确认
    comfirm () {
      this.$emit('comfirm')
    },
    // 删除
    del () {
      if (this.type === '1') {
        this.keyContent = this.keyContent.substr(0, this.keyContent.length - 1);
        this.Psdlist[this.keyContent.length].class = ''
      } else {
        this.$emit('del')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.popup-wrap {
  ._password {
    height: 140upx;
    width: 100vw;
    // background: pink;
    padding: 20upx;
    display: flex;
    box-sizing: border-box;
    & > li {
      flex: 1;
      height: 100%;
      border: 1px solid #ddd;
      border-right: none;
    }
    & > li:last-child {
      border-right: 1px solid #ddd;
    }
    & > .active {
      position: relative;
      &::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        border-radius: 20upx;
        transform: translate(-50%, -50%);
        height: 40upx;
        width: 40upx;
        background: #666;
      }
    }
  }
  ._inputHidden {
    width: 1px;
    height: 1px;
    min-height: 1px;
    opacity: 0;
    border: 0;
  }
  .ui-keyboard {
    @include disFlex(center, center);
    padding: 0 20px 20px 20px;
    background-color: $backColor;
    box-shadow: 0 -8px 16px #ddd;
    // 左侧键盘
    .ui-keyboard-numbers {
      width: 78%;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      li {
        width: calc(33.33% - 20px);
      }
      li.zero {
        width: calc(66.66% - 20px);
      }
    }
    // 右侧键盘
    .ui-keyboard-btn {
      width: 22%;
      li {
        margin-right: 0;
      }
      li.btn-ok {
        height: 310px;
        color: #fff;
        background-color: $mainColor;
        // line-height: 310px
      }
    }
    li {
      @include disFlex(center, center);
      height: 90px;
      // line-height: 90px;
      text-align: center;
      border-radius: 10px;
      background-color: #fff;
      margin-top: 20px;
      margin-right: 20px;
      font-size: 38px;
      font-weight: bold;
      box-shadow: 0 2px 10px #ddd;
    }
    li:active {
      background-color: rgba(0, 0, 0, 0.1);
    }
  }
}
</style>
