<template>
	<view class="parts">
		<view class="u-flex u-col-center u-row-around lists">
      <view class="u-flex-1 name">
        {{info.name}}
      </view>
      <view class="num">
        <u-number-box v-if="!disabled" v-model="info.quantity" :min="info.min || 0" :max="info.max || 9999" @change="numChange" @minus="minusValue" @blur="minusValue"></u-number-box>
        <text class="nums" v-else>x{{ info.quantity || 1 }}</text>
        <text v-if="info.unit" class="unit-text">{{info.unit || ''}}</text>
      </view>
    </view>
	</view>
</template>

<script>
	export default {
		props: {
			info: { 
				default () {
					return {}
				}
			},
      disabled: {
        type: Boolean,
				default () {
					return false
				}
      }
		},
		data() {
			return {
        
			}
		},
		created() {
		},
		methods: {
			numChange(event) {
        this.$emit('change', event.value)
      },
      minusValue(event) {
        this.$emit('minusValue', event.value)
      }
		}
	}
</script>
<style scoped lang="scss">
	.parts{
    .lists {
      padding: 10rpx 0;
      .name {
        font-size: 26rpx;
      }
      .num {
        width: 200rpx;
        text-align: center;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        .nums {
          //color: #F59A23;
        }
        .unit-text {
          padding-left: 10rpx;
        }
      }
    }
  }
</style>
