<template>
  <div class="m-num-keyboard-con flex-default">
    <div class="keyboard flex-default">
      <div v-for="item of 9" :key="`num-item-${item}`" class="key-con">
        <van-button class="key-num" @click="handleClick(`${item}`)">
          {{ item }}
        </van-button>
      </div>
      <template v-if="showSdieBar">
        <div class="key-con" style="width: 66.6%">
          <van-button class="key-num" @click="handleClick('0')">0</van-button>
        </div>
        <div class="key-con">
          <van-button class="key-num" @click="handleClick('.')">.</van-button>
        </div>
      </template>
      <template v-else>
        <div class="key-con" />
        <div class="key-con">
          <van-button class="key-num key-zero" @click="handleClick('0')">0</van-button>
        </div>
        <div class="key-con delete-con flex-default" @click="handleClick('del')">
          <img src="@/assets/img/delete.png" mode="" class="delete" />
          <!-- <van-button class="key-num" @click="handleClick('del')" style="font-size: 14px;">
						<image src="../../static/delete.png" mode="" class="delete"/>
					</van-button> -->
        </div>
      </template>
    </div>
    <div class="keyboard-side-bar flex-default" v-if="showSdieBar">
      <div class="key-con delete-con flex-default" @click="handleClick('del')">
        <img src="@/assets/img/delete.png" mode="" class="delete" />
      </div>
      <div class="key-con">
        <van-button class="key-num key-confirm" @click="handleClick('confirm')">
          完成
        </van-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    value: String,
    maxLength: {
      type: Number,
      default: 0,
    },
    showSdieBar: Boolean,
  },
  watch: {
    value(val) {
      if (val && val.length !== 0 && this.inputList.length == 0) {
        this.inputList = val.split("");
      }
      if(!val || val.length === 0){
        this.inputList = []
      }
    },
    inputList: {
      deep: true,
      handler(val) {
        this.$emit("input", val.join(""));
      },
    },
  },
  data() {
    return {
      inputList: [],
    };
  },
  methods: {
    handleClick(val) {
      if (val == "del") {
        let len = this.inputList.length;
        this.inputList.splice(len - 1);
      } else if (val == "confirm") {
        this.$emit("confirm", this.inputList.join(""));
      } else {
        if (
          this.maxLength &&
          this.maxLength !== 0 &&
          this.inputList.length >= this.maxLength
        ) {
          return;
        }

        this.inputList.push(val);
      }
    },
    clearInputList() {
      this.inputList = [];
    },
  },
};
</script>

<style lang="less">
.m-num-keyboard-con {
  // padding: 6px 0 0 6px;
  background: #ededed;
  > .keyboard {
    flex-wrap: wrap;
    flex: 1;
  }

  .key-con {
    width: 33.3%;
    // padding: 0 6px 6px 0;
    .key-num {
      width: 100%;
      background: #ffffff;
      height: 54px;
      text-align: center;
      font-size: 28px;
      border-radius: 0px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-bottom: 1px solid #d8d8d8;
      border-right: 1px solid #d8d8d8;
      font-family: DINAlternate-Bold;
      &::after {
        border: none;
      }
    }
    .key-zero{
      border: none;
    }
    &:nth-child(3n) {
      .key-num {
        border-right: 0;
      }
    }
    .delete {
      width: 20px;
      height: 14px;
    }
    &.delete-con {
      align-items: center;
      justify-content: center;
    }
  }
  > .keyboard-side-bar {
    flex-direction: column;
    width: 25%;

    .key-con {
      flex: 1;
      width: 100%;
    }

    .key-num {
      width: 100%;
      height: 100%;
      font-size: 16px;
    }

    .key-confirm {
      background: #dd2e41;
      color: #ffffff;
    }
  }
}
</style>
