<template>
  <view class="py-base flex items-start">
    <u-image class="flex-none" width="190" height="190" border-radius="10" :src="goods.cover" :lazy-load="true">
    </u-image>
    <view class="flex-1 ml-15rpx">
      <view class="flex  justify-between ">
        <view class=" flex-1  max-w-200rpx">
          <view class="line-1   text-txBase">{{goods.name}}</view>
          <view class="price-text flex-1 text-txBase text-md mt-30rpx">{{goods.sell_price}}元</view>
        </view>
        <view class="flex-1 w-0 line-1  ml-20rpx text-right ">
          {{ specs.join(' ')}}
        </view>
      </view>
      <view class="flex items-center justify-between mt-30rpx flex-1">
        <view class="text-txBase text-md  price-text">{{goods.vip_price}}元 vip</view>

        <view v-if="isAdd" class="bg-hex-ef4444 text-center px-20rpx py-8rpx text-white rounded-10rpx" @click="add">添加
        </view>
        <view v-else>
          <u-number-box :min="1" v-model="goods.num" @change="valChange">
          </u-number-box>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
  export default {
    props: {
      isAdd: {
        type: Boolean,
        default: false
      },
      goods: {
        type: Object,
        default: () => {}
      }
    },
    computed: {
      specs() {
        return this.goods?.specs ?? []
      }
    },
    methods: {
      //添加商品
      add() {
        this.$emit('addGood', this.goods.id)
      },
      //商品数量改变
      valChange(e) {
        const {
          value
        } = e
        this.$emit('numChange', this.goods.id, value)
      }
    }
  };
</script>
<style lang="scss" scoped>
</style>
