<template>
  <div class="simple-Keyboard-number">
    <div class="carts">
      <div class="box_status">
        <slot name="input">
          <span> {{ number }}</span>
        </slot>
      </div>
      <div class="number_list_box">
        <div class="yd-keyboard">
          <div class="mini-number-box1">
            <div class="mini-number">
              <div class="key-line">
                <div class="key" @click="keyboradAdd('1')">1</div>
                <div class="key" @click="keyboradAdd('2')">2</div>
                <div class="key" @click="keyboradAdd('3')">3</div>
              </div>
              <div class="key-line">
                <div class="key" @click="keyboradAdd('4')">4</div>
                <div class="key" @click="keyboradAdd('5')">5</div>
                <div class="key" @click="keyboradAdd('6')">6</div>
              </div>
              <div class="key-line">
                <div class="key" @click="keyboradAdd('7')">7</div>
                <div class="key" @click="keyboradAdd('8')">8</div>
                <div class="key" @click="keyboradAdd('9')">9</div>
              </div>
              <div class="key-line">
                <div class="key" @click="clearFunction">
                  <slot name="clear"> </slot>
                </div>
                <div class="key" @click="keyboradAdd('0')">0</div>
                <div
                  class="key"
                  style="font-size: 31px"
                  @click="keyboradReduce"
                >
                  <svg
                    t="1723453480343"
                    class="icon"
                    viewBox="0 0 1664 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    p-id="1467"
                    width="32"
                    height="32"
                  >
                    <path
                      d="M1526.08 1.6H459.84L41.28 416c-53.76 53.248-53.76 139.52 0 192.64l418.624 414.592v-0.064h1066.176a136.96 136.96 0 0 0 137.6-136.256V137.792a136.96 136.96 0 0 0-137.6-136.192z m-331.392 631.168c26.816 26.624 26.816 69.76 0 96.384-26.88 26.56-70.4 26.56-97.28 0l-121.28-120.128-123.328 122.112a69.76 69.76 0 0 1-97.92 0 68.096 68.096 0 0 1 0-96.96L878.208 512l-121.28-120.064a67.648 67.648 0 0 1 0-96.32c26.88-26.624 70.4-26.624 97.28 0l121.216 120.064 122.24-120.96a69.696 69.696 0 0 1 97.92 0 68.032 68.032 0 0 1 0 96.96l-122.24 120.96 121.344 120.064z"
                      fill="#333333"
                      p-id="1468"
                    ></path>
                  </svg>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <template v-if="showConfirm">
        <div class="submit" @click="keyboradConfirm">确认</div>
      </template>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    isCanEmpty: {
      type: Boolean,
      default: false,
    },
    maxTips: {
      type: String,
      default: "输入值超范围",
    },
    showConfirm: {
      type: Boolean,
      default: false,
    },
    max: {
      type: Number,
      default: Infinity,
    },
    value: {
      type: [String, Number],
      default: 0,
    },
  },
  data() {
    return {
      number: 0,
    };
  },
  watch: {
    value(newval) {
      this.number = newval;
    },
    number(newval) {
      this.$emit("input", newval);
    },
  },
  methods: {
    clearFunction() {
      this.$emit("clear", this.number);
    },
    keyboradAdd(n) {
      if (Number(this.number) == 0) {
        return (this.number = n);
      }
      const newval = this.number + n;
      if (newval > this.max) {
        return this.$message( this.maxTips);
      }
      this.number = newval;
    },
    keyboradReduce() {
      if (this.number.length <= 1) {
        return (this.number = this.isCanEmpty ? "" : "0");
      }
      this.number = `${this.number}`.substring(0, this.number.length - 1);
    },
    keyboradConfirm() {
      this.$emit("confirm", this.number);
    },
  },
  mounted() {
    this.number = `${this.value}`;
  },
};
</script>

<style  lang="scss" scoped>
.yd-keyboard {
  justify-content: center;
  margin-bottom: 20px;
}

.mini-number-box1 .mini-number,
.yd-keyboard {
  display: flex;

  flex-direction: column;
}

.mini-number-box1 .mini-number {
  border: 1px solid #dcdfe6;
}

.mini-number-box1 .mini-number .key-line {
  margin-top: 0;
}

.mini-number-box1 .mini-number .key {
  width: 122px;
  height: 60px;
  -webkit-box-shadow: none;
  box-shadow: none;
  border-radius: 0;
  margin-left: 0;
}
.mini-number-box1 .mini-number .key:hover {
  background-color: #dcdfe6;
}
.mini-number-box1 .mini-number .key:not(:last-child) {
  border-right: 1px solid #dcdfe6;
}

.mini-number-box1 .mini-number .key-line:not(:last-child) {
  border-bottom: 1px solid #dcdfe6;
}

.mini-number-box2 {
  display: flex;

  justify-content: center;
}

.mini-number-box2 .key {
  width: 80px;
  height: 70px;
}

.mini-number-box2 .function-button {
  display: flex;

  flex-direction: column;
}

.mini-number-box2 .function-button .key {
  margin-top: 8px;
}

.key-line {
  margin-top: 8px;
}

.key,
.key-line {
  display: flex;

  justify-content: center;
}

.key {
  width: 64px;
  height: 64px;
  background: #fff;
  -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.10196078431372549);
  border-radius: 4px;

  align-items: center;
  margin-left: 8px;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  font-size: 20px;
  color: rgba(0, 0, 0, 0.8);
  text-align: center;
  line-height: 34px;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.10196078431372549);
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.simple-Keyboard-number,
.simple-Keyboard-weight {
  min-width: 410px;
  background: #fff;
  border-radius: 4px;
  overflow: hidden;
}
.submit {
  width: 366px;
  height: 44px;
  background: #22bf64;
  border-radius: 2px;

  display: flex;

  justify-content: center;

  align-items: center;
  font-size: 14px;
  color: #fff;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  margin-bottom: 40px;
  cursor: pointer;
}
.disabled-box {
  position: absolute;
  inset: 0;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

.carts {
  flex-direction: column;
  background: #fff;
  height: 100%;
}

.carts .title,
.carts {
  display: flex;

  align-items: center;
  width: 100%;
}

.carts .title {
  justify-content: space-between;
  height: 64px;
  border-bottom: 1px solid #ebebeb;
  padding: 20px;
  padding-top: 30px;
}

.carts .title .left {
  font-family: PingFangSC-Medium;
  font-weight: 500;
  font-size: 18px;
  color: #000;
}

.carts .title .right {
  font-size: 14.4px;
  cursor: pointer;
}

.carts .box_status {
  margin-bottom: 20px;
  width: 370px;
  height: 58px;
  background: #fff;
  border: 1px solid #dcdfe6;
  border-radius: 4px;

  display: flex;

  justify-content: center;

  align-items: center;
  margin-top: 20px;
  font-family: MicrosoftYaHei;
  font-size: 20px;
  color: rgba(0, 0, 0, 0.8);
  letter-spacing: 1.25px;
  text-align: center;
}

.carts .box_status span {
  padding: 0 5px;
}
</style>