<template>
  <view class="input-group">
    <view class="general-label">{{ label }}</view>
    <input 
      class="scan-input" 
      :value="value" 
      :placeholder="placeholder" 
      :disabled="disabled"
      @input="$emit('input', $event.target.value)"
    />
    <view v-if="showScanBtn" class="scan-btn" @click="$emit('scan')">
      <text>{{ scanBtnText }}</text>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    label: String,
    value: [String, Number],
    placeholder: {
      type: String,
      default: ''
    },
    disabled: {
      type: Boolean,
      default: false
    },
    showScanBtn: {
      type: Boolean,
      default: false
    },
    scanBtnText: {
      type: String,
      default: '扫码'
    }
  }
}
</script>

<style scoped>
.input-group {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}
.general-label {
  width: 150rpx;
  font-size: 28rpx;
  color: #333;
}
.scan-input {
  flex: 1;
  height: 80rpx;
  padding: 0 20rpx;
  border: 1px solid #eee;
  border-radius: 8rpx;
  font-size: 28rpx;
}
.scan-btn {
  margin-left: 20rpx;
  padding: 0 20rpx;
  height: 80rpx;
  line-height: 80rpx;
  background-color: #2979ff;
  color: #fff;
  border-radius: 8rpx;
  font-size: 28rpx;
}
</style>