<template>
  <view class="product-info">
    <view class="price-section">
      <view class="price-item">
        <view class="label">销售价</view>
        <view class="value">￥{{ market_price }}</view>
      </view>
      <view class="price-item">
        <view class="label">创客利润</view>
        <view class="value">￥{{ profit }}</view>
      </view>
      <view class="price-item">
        <view class="label">养老金</view>
        <view class="value">￥{{ yanglaojin}}</view>
      </view>
    </view>
    <view class="brand-info">
      <view class="label">品牌商</view>
      <view class="value">{{ product.spuId_info&&product.spuId_info.band_name }}</view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    product: {
      type: Object,
      required: true
    },
    skuId_info:{
      type: Object,
      default:()=>{}
    }
  },
  computed:{
    attribute_json(){
       const data = this.skuId_info || {}
      return data.attribute_json;
    },
     cost_price(){
      const data = this.skuId_info || {}
      return data.cost_price || "0.00"
     }, 
     market_price(){
      const data = this.skuId_info || {}
      return data.market_price || "0.00"
     },
     retail_price(){
      const data = this.skuId_info || {}
      return data.retail_price || "0.00"
     },
     profit(){
      const data = this.skuId_info || {}
      return data.profit || "0.00"
     },
     yanglaojin(){
      const data = this.skuId_info || {}
      return data.yanglaojin
     }, 
  }
};
</script>

<style lang="scss" scoped>
.product-info {
  background-color: #ffffff;
  border-radius: 10rpx;
  box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
  padding: 30rpx;
  margin-bottom: 30rpx;
}
.price-section {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.price-item {
  width: 33%;
  margin-bottom: 20rpx;
}
.label {
  font-size: 24rpx;
  color: #666666;
  margin-bottom: 8rpx;
}
.value {
  font-size: 32rpx;
  color: #333333;
  font-weight: 500;
}
.brand-info {
  margin-top: 20rpx;
}
</style>