<template>
  <view class="choosing_accessories_item">
    <view class="accessories_item minwidth" @tap.stop="$emit('selectItem', item)">
      <view class="accessories_item_lay">
        <view class="accessories_item_title">
          {{ item.partsName }}
        </view>
        <view class="accessories_item_number">
          {{ item.partsNumber }}
        </view>
      </view>
      <view class="accessories_item_lay">
        <view class="accessories_item_inventory"> 库存{{ item.qty }} </view>
        <view class="accessories_item_unit"> 单位：{{ item.goodsStockUnit }} </view>
      </view>
      <view class="accessories_item_lay">
        <view class="accessories_item_amount">
          新件售价<text>￥{{ item.salesPrice }}</text>
        </view>
      </view>
    </view>
    <view class="checked">
      <radio-group @change="radioChange">
        <radio :value="item.id" :checked="item.id === id"></radio>
      </radio-group>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    item: {
      type: Object,
      default: () => ({})
    },
    id: {
      type: [Number, String],
      default: ''
    }
  },
  methods: {
    radioChange(b) {
      if (b.detail.value === this.id) {
        this.$emit('selectItem', {})
      } else {
        this.$emit('selectItem', this.item)
      }
    }
  }
}
</script>

<style scoped lang="scss">
@import './style/accessories_item.scss';

.choosing_accessories_item {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;

  &:not(:last-child) {
    border-bottom: 1rpx solid #e5e5e5;
  }

  .minwidth {
    width: 86% !important;
  }

  .checked {
    margin-left: 20upx;
  }

  .accessories_item {
    border-bottom: none !important;
  }
}
</style>
