<template>
  <div class="simple-Keyboard-number">
    <div class="keybord-box">
      <div class="box_status">
        <slot name="input">
          <span>{{ number }}</span>
        </slot>
      </div>
      <slot name="tips"></slot>
      <div class="number_list_box" v-if="!disabled">
        <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 setup>
import { ElMessage } from "element-plus";
const props = defineProps({
  isCanEmpty: {
    type: Boolean,
    default: false,
  },
  maxTips: {
    type: String,
    default: "输入值超范围",
  },
  showConfirm: {
    type: Boolean,
    default: false,
  },
  disabled: {
    type: Boolean,
    default: false,
  },
  max: {
    type: [Number, String],
    default: Infinity,
  },
  value: {
    type: [String, Number],
    default: 0,
  },
  // 是否启用小数
  isFloat: {
    type: Boolean,
    default: false,
  },
  maxLength: {
    type: Number,
    default: 14,
  },
});

const number = defineModel({
  default: 0,
});

const emits = defineEmits(["input", "confirm"]);

function clearFunction() {
  if (props.isFloat) {
    return keyboradAdd(".");
  }
  number.value = "";
}
const regex = /^\d+(\.\d{1,2})?$/;

function keyboradAdd(n) {
  if (`${number.value}`.length >= props.maxLength) {
    return;
  }
  if (n == "." && `${number.value}`.includes(".")) {
    return;
  }
  if (Number(number.value) == 0) {
    if (n == ".") {
      return (number.value = 0 + n);
    }
  }
  if (n == ".") {
    return (number.value += n);
  }
  const newval = number.value + n;
  if (newval * 1 > props.max * 1) {
    return ElMessage.error(props.maxTips);
  }
  if (props.isFloat && !regex.test(newval)) {
    console.log("输入不合法");
    return;
  }
  console.log(number.value);
  number.value = newval;
}
function keyboradReduce() {
  if (number.value.length <= 1) {
    return (number.value = props.isCanEmpty ? "" : "0");
  }
  number.value = `${number.value}`.substring(0, number.value.length - 1);
}
function keyboradConfirm() {
  this.$emit("confirm", number.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;
}

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

.keybord-box .title,
.keybord-box {
  display: flex;

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

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

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

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

.keybord-box .box_status {
  margin-bottom: 20px;
  width: 370px;
  min-height: 58px;
  background: #fff;
  border-radius: 4px;
  overflow: hidden;
  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;
}

.keybord-box .box_status span {
  padding: 0 5px;
}
</style>