<template>
  <div class="vm-tooth-bit-item">
    <div class="bit-item-label">{{ label }}</div>
    <div class="bit-item-content">
      <el-input-number
        :min="0"
        :controls="false"
        v-model="form.topLeft"
        :disabled="bitDisabled"
      />
      <el-input-number
        :min="0"
        :controls="false"
        v-model="form.topRight"
        :disabled="bitDisabled"
      />
      <el-input-number
        :min="0"
        :controls="false"
        v-model="form.BotLeft"
        :disabled="bitDisabled"
      />
      <el-input-number
        :min="0"
        :controls="false"
        v-model="form.BotRight"
        :disabled="bitDisabled"
      />
    </div>
  </div>
</template>
<script>
import { isObject } from "@/utils/validate"
export default {
  name: "VwToothBitItem",
  inject: {
    vwForm: {
      default: "",
    },
  },
  props: {
    value: {
      type: Object,
      default: () => {
        return {}
      },
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    label: String,
  },
  data() {
    return {}
  },
  computed: {
    form() {
      if (!isObject(this.value)) this.$emit("input", {})
      return this.value
    },
    bitDisabled() {
      return this.disabled || (this.vwForm || {}).disabled
    },
  },
}
</script>
<style lang="scss" scoped>
.vm-tooth-bit-item {
  display: flex;
  padding: 10px;
  align-items: center;
  .bit-item-label {
    margin-right: 10px;
  }
  .bit-item-content {
    width: 140px;
    display: flex;
    flex-wrap: wrap;
    ::v-deep .el-input-number {
      height: 24px;
      width: 50%;
      line-height: 24px;
      .el-input__inner {
        padding: 2px 2px;
        height: 24px;
        line-height: 24px;
        border-color: #000;
      }
      &:first-child {
        .el-input__inner {
          border-left: none;
          border-top: none;
        }
      }
      &:nth-child(2) {
        .el-input__inner {
          border-right: none;
          border-top: none;
        }
      }
      &:nth-child(3) {
        .el-input__inner {
          border-left: none;
          border-bottom: none;
        }
      }
      &:nth-child(4) {
        .el-input__inner {
          border-right: none;
          border-bottom: none;
        }
      }
    }
  }
}
// 去除禁用样式
::v-deep .is-disabled {
  input {
    background-color: #fff;
    color: #606266;
  }
  .el-input__inner {
    background-color: #fff;
    color: #606266;
  }

}
</style>