<template>
  <view class="p-base">
    <view class="flex items-start" @tap="$emit('click', goods)">
      <view class="flex items-center">

        <view @tap.prevent.stop="onSelect" class="w-46rpx">
          <block v-if="goods.is_online || isEdit">
            <image v-if="selected" class="w-32rpx h-32rpx flex-none" src="/static/images/cart/check-round-fill.png"
              mode="scaleToFill" />
            <image v-else class="w-32rpx h-32rpx flex-none" src="/static/images/cart/check-round.png"
              mode="scaleToFill" />
          </block>
          <u-icon v-else color="#ccc" class="" name="minus-circle" size="38"></u-icon>
        </view>

        <u-image class="flex-none" width="190" height="190" border-radius="10" :src="goods.cover" :lazy-load="true">
        </u-image>
      </view>

      <view class="ml-rowSm flex-1 w-0">
        <view>
          <view class="line-1 text-lg text-txBase">{{ goods.name }}</view>
        </view>
        <view class="mt-4rpx">
          <!-- <u-tag size="mini" text="属性名" class="mr-6rpx" shape="square" color="#A6A6A6" bg-color="transparent" mode="dark" /> -->
          <view class="bg-gray-200 inline-block h-36rpx leading-36rpx px-12rpx rounded-4rpx bg-hex-F9F9F9 text-sm" v-if="!!goods.specs.join(',')">
            <text>{{ goods.specs.join(',') }}</text>
            <!-- <u-icon size="18" name="arrow-down"></u-icon> -->
          </view>
        </view>
        <view class="flex-1 text-txBase text-md">￥{{ goods.sell_price }}</view>
        <view class="flex-1 flex items-center">
          <text class="text-txSvip text-lg">￥{{ goods.vip_price }}</text>
          <image class="w-58rpx h-58rpx ml-10rpx" src="/static/svg/svip.svg" mode=""></image>
        </view>
        <view class="text-right" @tap.prevent.stop="() => false">
          <u-number-box @change="onNumberChange" :disabled-input="disabledInput" :min="1" :max="goods.stock" :value="data.quantity" integer asyncChange>
          </u-number-box>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
  export default {
    props: {
      data: {
        type: Object,
        default: () => {},
      },
      selected: {
        type: Boolean,
        default: false,
      },
      isEdit: {
        type: Boolean,
        default: false,
      },
      disabledInput: {
        type: Boolean,
        default: false
      }
    },
    computed: {
      goods() {
        return this.data?.sku ?? {};
      },
    },
    methods: {
      onSelect() {
        if (!this.goods.is_online && !this.isEdit) return
        this.$emit('select', this.data.id, !this.selected);
      },
      onNumberChange({value}) {
        this.$emit('num-change', value, this.data.id);
      },
      onPlus({
        value
      }) {
        this.$emit('num-change', value, this.data.id);
      },
      onMinus({
        value
      }) {
        this.$emit('num-change', value, this.data.id);
      },
    },
  };
</script>
