<template>
  <view class="y-f" style="height: 55vh">
    <view class="weight">
      <view class="weight-data"> {{ nums }}</view>
    </view>

    <view class="keyboard-container">
      <view class="keypad">
        <view
          class="oner"
          :class="item.class"
          :style="getListItemStyle(index)"
          v-for="(item, index) in numbers"
          :key="'num_' + index"
          @click="changeNums(item, index)"
        >
          {{ item.text }}
        </view>
      </view>
      <view class="func-pad">
        <view @click="jianshao()" class="oner flex1">
          <u-icon name="arrow-leftward" bold></u-icon>
        </view>
        <view @click="setNull()" class="oner flex1 mt10 mb10"> 清空 </view>
        <view class="oner confirm" @click="ok()"> 确认 </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'zzjc-num-keyboard',
  props: {
    numKeyboardParam: {
      type: Object,
      default: null
    } //小数位数，-1为不限制
  },
  data() {
    return {
      nums: '',
      numbers: [
        {
          text: '1'
        },
        {
          text: '2'
        },
        {
          text: '3'
        },
        {
          text: '4'
        },
        {
          text: '5'
        },
        {
          text: '6'
        },
        {
          text: '7'
        },
        {
          text: '8'
        },
        {
          text: '9'
        },
        {
          text: '0',
          class: 'zero'
        },
        {
          text: '.'
        }
      ]
    }
  },
  created() {},
  methods: {
    //确认
    ok() {
      const val = {
        val: this.nums
      }
      this.nums = ''
      uni.$emit('keyboardOK', val)
    },
    /*
     * 清空
     * 数字类型改为0，其他类型改为空
     * */
    setNull() {
      this.nums = ''
      uni.$emit('keyboardOK', null)
    },
    clearNum() {
      this.nums = ''
    },
    jianshao() {
      if (this.nums) {
        this.nums = this.nums.substring(0, this.nums.length - 1)
      }
    },
    changeNums(item, index) {
      this.sumindex = index
      if (item.text == '.') {
        if (this.nums.indexOf('.') != -1 || this.nums.length == 0) {
          return false
        }
      }
      //检查小数位数
      let decimal = this.numKeyboardParam.decimal
      if (decimal == null) decimal = -1
      if (this.nums.split('.') && this.nums.split('.')[1] && decimal != -1) {
        if (this.nums.split('.')[1].length >= decimal) {
          return false
        }
      }
      this.nums = this.nums + item.text
    },

    getListItemStyle(index) {
      return {
        background: this.numbers[index].background
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.keyboard-container {
  flex: 5;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(232, 232, 232, 0.98);
}
.keypad {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 默认 3 列 */
  gap: 10px;
  padding: 10px;
  flex: 4;
}

.oner {
  width: 95%;
  height: 55px;
  font-size: 20px;
  border: none;
  border-radius: 5px;
  background-color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}

/* 0 占两列 */
.zero {
  width: 98%;
  grid-column: span 2;
}

.func-pad {
  height: 100%;
  display: flex;
  padding: 10px 10px 10px 0;
  flex-direction: column;
  flex: 1;
  box-sizing: border-box;
}
.confirm {
  flex: 2;
  color: #ffffff;
  background-color: #19be6b;
}
.weight {
  width: 100%;
  background-color: #2c405a;
  flex: 1;
  padding: 8px;
  box-sizing: border-box;
}

.weight-data {
  color: #4cd964;
  text-align: right;
  letter-spacing: 5px;
  font-size: 50px;
  font-family: zzjc-lcd;
  height: 40px;
}

@media (max-width: 700px) {
  .weight-data {
    font-size: 25px;
  }
  .oner {
    height: 33px;
    font-size: 16px;
  }
  .weight-data {
    height: 20px;
  }
}
</style>
