<template>
  <view
    :class="['tui-keyboard-input', 'tui-pwd-box']"
    :style="{ backgroundColor: backgroundColor }"
  >
    <view :class="['tui-inner-box', { 'input-box-border': border }]">
      <view
        v-for="(item, index) in inputvalue"
        :key="index"
        class="tui-input"
        :class="[
          inputvalue.length === 4 ? 'tui-margin-right' : '',
          { 'input-border': border },
          { 'input-last': border && index === inputvalue.length - 1 },
          { 'input-inputing': !border && (inputvalue[index - 1] || index === 0) },
          { 'input-number': !border }
        ]"
        :style="{
          fontSize: size + 'rpx',
          color: color,
          width: (inputvalue.length === 4 ? 90 : 70) + 'rpx'
        }"
        >{{ item }}</view
      >
    </view>
  </view>
</template>

<script>
export default {
  name: "TuiKeyboardInput",
  props: {
    //背景颜色
    backgroundColor: {
      type: String,
      default: "#fff"
    },
    size: {
      type: Number,
      default: 32
    },
    color: {
      type: String,
      default: "#333"
    },
    //输入框的值：数组格式，长度即为输入框个数
    inputvalue: {
      type: Array,
      default: () => ["", "", "", "", "", ""] //密码圆点 ●
    },
    border: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {};
  }
};
</script>

<style scoped>
.tui-pwd-box {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  vertical-align: top;
}

.tui-inner-box {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.input-box-border {
  border-radius: 8rpx;
  border: 1px solid #dcdcdc;
}
.tui-input {
  height: 90rpx;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 50rpx;
  border-bottom: 4rpx solid #dcdcdc;
}
.input-border {
  flex: 1;
  border: none;
  margin-right: 0px;
  border-right: 2rpx solid #dcdcdc;
}
.input-last {
  border: none;
}
.input-inputing {
  border-color: #666666;
}
.input-number {
  font-size: 52rpx !important;
}
.tui-margin-right {
  margin-right: 30rpx;
}

.tui-input:last-child {
  margin-right: 0 !important;
}
</style>
