<template>
  <el-dialog width="330px" :title="title" :visible.sync="show">
    <div class="simple-Keyboard-number">
      <div class="carts">
        <div class="pad-14">
          <div class="box_status">
            <span class="sym">￥</span>
            <el-input v-model="number" type="text" @input="numberInput"></el-input>
            <!-- <span class="inputs" :contenteditable="true" @input="numberInput" type="text" >{{ number }}</span> -->
          </div>
        </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
                    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 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 class="key" @click="keyboradAdd('clear')">清空</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 class="key"></div>
                </div>
                <div class="key-line">
                  <div class="key" @click="keyboradAdd('.')">.</div>
                  <div class="key" @click="keyboradAdd('0')">0</div>
                  <div class="key" @click="keyboradAdd('00')">00</div>
                  <div class="key"></div>
                </div>
                <div class="confirm key" @click="confirm">确认</div>
              </div>
            </div>
          </div>
        </div>
        <!-- <div class="submit" @click="keyboradConfirm">确认</div> -->
      </div>
    </div>
  </el-dialog>
</template>
<script>
export default {
  props: {
    title: {
      type: String,
      default: "支付",
    },
    value: {
      type: [String, Number],
      default: 0,
    },
  },
  data() {
    return {
      number: '0',
      show:false
    };
  },
  watch: {
    number(newval) {
      this.$emit("input", newval);
    },
  },
  methods: {
    confirm(){

    },
    open(){
      this.show=true
    },
    close(){
      this.show=false
    },
    numberInput(val){
      console.log(val)
      this.number=`${Number(val)}` 
    },
    keyboradAdd(n) {
      if (n === "clear") {
        return (this.number = '0');
      }
      if(n==='.'){
        return this.number += this.number.includes('.')?'' : '.'
      }
      if (`${this.number}`.length<=1&&Number(this.number)===0) {
        return (this.number = n);
      }
      this.number += n;
    },
    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>
.pad-14 {
  padding: 14px;
  width: 100%;
}
::v-deep .el-dialog__body {
  padding: 0;
}
::v-deep .el-input__inner::-webkit-outer-spin-button{
  -webkit-appearance: none;  
  margin: 0;  
}  
::v-deep .el-input__inner::-webkit-inner-spin-button {  
  -webkit-appearance: none;  
  margin: 0;  
}  
  
/* Firefox */  
::v-deep .el-input__inner {  
  -moz-appearance: textfield;  
}
.number_list_box,
.yd-keyboard,
.mini-number,
.mini-number-box1,
.key-line {
  width: 100%;
}
.yd-keyboard {
  justify-content: center;
}

.mini-number-box1 .mini-number,
.yd-keyboard {
  display: flex;
  position: relative;
  flex-direction: column;
}

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

.mini-number-box2 {
  display: flex;

  justify-content: center;
}

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

.key,
.key-line {
  display: flex;
  justify-content: center;
}

.key {
  width: 25%;
  height: 70px;
  box-sizing: border-box;
  background: #fff;
  align-items: center;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  font-size: 24px;
  color: #212121;
  text-align: center;
  line-height: 34px;
  cursor: pointer;
  user-select: none;
}
.key:hover {
  background-color: #dcdfe6;
}
.key:not(:last-child) {
  border-right: 1px solid #dcdfe6;
}

.key-line:not(:last-child) {
  border-bottom: 1px solid #dcdfe6;
}
.confirm {
  height: 142px;
  width: 25%;
  background: #22bf64;
  color: #fff;
  position: absolute;
  bottom: 0;
  right: 0;
  border-right: none;
}
.confirm:hover {
  background: rgba(34, 191, 100, 0.8666666666666667);
}
.simple-Keyboard-number,
.simple-Keyboard-weight {
  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;
}

.box_status {
  box-sizing: border-box;
  width: 100%;
  background: #fff;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  display: flex;
  padding: 14px;
  align-items: flex-end;
  font-family: MicrosoftYaHei;
  font-size: 20px;
  color: rgba(0, 0, 0, 0.8);
  letter-spacing: 1.25px;
  .sym {
    font-size: 24px;
    color: #212121;
    width: 30px;
    margin-bottom: 3px;
  }
  .inputs {
    font-size: 28px;
    color: #212121;
    outline: none;
    line-height: 37px;
    border: none;
    max-width: 250px;
  }
}
::v-deep .el-input--small .el-input__inner{
  font-size: 28px;
    color: #212121;
    outline: none;
    line-height: 37px;
    border: none;
    max-width: 250px;
    padding-left: 0;
}

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