<template>
  <view class="product-card">
    <view class="product-cover">
      <image
        :src="product.img"
        @error="handleError"
        mode="scaleToFill"
        class="product-img"
        v-if="!isError && product.img"
      />
      <image
        src="/static/images/new_ui/kongtu.png"
        mode="scaleToFill"
        class="product-img"
        v-else
      />

      <!-- <checkbox v-model="product.isChecked" class="product-checkbox" /> -->
    </view>
    <view class="product-info">
      <view class="product-title">{{ product.title }}</view>
      <view class="product-price">
        销售价：{{ product.market_price || "0.00" }}
      </view>
      <view class="product-price">
        养老金：{{ product.pension || "0.00" }}
      </view>
      <view class="product-profit">创客利润：{{ product.mer_profit || "0.00" }}</view>
      <view class="product-status"
        >状态：{{ product.status == 1 ? "正常" : "下架" }}</view
      >
      <view class="product-desc">{{ product.description }}</view>
      <view class="product-actions">
        <button type="primary" @click="handleOperate('detail', product)">
          商品详情
        </button>
        <button
          type="primary"
          :class="[product.is_join == 1 ? 'isjiaru' : '']"
          @click="handleOperate('jiaru', product)"
        >
          加入商品库
        </button>
      </view>
    </view>
  </view>
</template>

<script>
import { joinselectionlibraryApi } from "@/commit/product.js";
export default {
  props: {
    product: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      isError: false,
    };
  },
  methods: {
    handleError() {
      this.isError = true;
    },
    async handleOperate(type, data) {
      if (type == "detail") {
        console.log("handleOperate", data)
        uni.redirectTo({ url: `/pages/onlineproductselection/onlineDetail?spu_id=${data.spu_id}` })
      } else if (type == "jiaru") {
        if (data.is_join == 1) {
          uni.showModal({
            title: "温馨提示",
            content: "已加入商品库，不可操作",
            showCancel: false,
            success: ({ confirm, cancel }) => {},
          });
          return;
        }
        await this.setJiaruchangp(data);
      }
    },
    async setJiaruchangp(data) {
      uni.showLoading({
        title: "提交中",
        mask: true,
      });
      try {
        const res = await joinselectionlibraryApi({ spu_id: data.spu_id });
        if (res.data.status == 200) {
          uni.showToast({
            title: "提交成功",
            icon: "success",
            duration: 2000,
          });
          this.$emit("success", data);
        } else {
          uni.showToast({
            title: res.data.message,
            icon: "success",
            duration: 2000,
          });
        }
        uni.hideToast();
        uni.hideLoading();
      } catch (error) {
        uni.showToast({
          title: error?.data?.message  || "提交失败",
          icon: "error",
          duration: 2000,
        });
        uni.hideToast();
        uni.hideLoading();
      }
    },
  },
};
</script>

<style lang="scss">
.product-card {
  width: calc(100% - 52rpx);
  background-color: #fff;
  border-radius: 10rpx;
  box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
  margin-bottom: 20rpx;
  overflow: hidden;
  // border: 2rpx solid red;
}
.product-cover {
  position: relative;
  height: 210rpx;
  image {
    width: 100%;
    height: 100%;
  }
}

.product-checkbox {
  position: absolute;
  top: 10rpx;
  right: 10rpx;
}
.product-info {
  padding: 15rpx;
}
.product-title {
  font-size: 28rpx;
  margin-bottom: 10rpx;
}
.product-price,
.product-profit,
.product-status {
  font-size: 24rpx;
  color: #666;
  margin-bottom: 5rpx;
}
.product-desc {
  font-size: 22rpx;
  color: #999;
  margin-bottom: 10rpx;
}
.product-actions {
  margin-right: 5rpx;
  width: 100%;
  display: flex;
  gap: 26rpx;
  button {
    //    width: 45%;
    width: 100%;
    background: #007aff;
    color: white;
  }
  .isjiaru {
    background: transparent;
    color: #ff3c00;
  }
}
</style>