<template>
  <view class="card bg-white p-[8px] rounded-[12px] flex flex-items-start m-12" @click.stop="handleClick(item)">
    <image class="left rounded-[10px]" :src="item.commodityPhoto" mode="aspectFill" />
    <view class="right flex-full pl-[12px]">
      <view class="font-size-16 leading-[24px] text-[#171717] mb-4">
        {{ item.commodityName }}
      </view>
      <view v-if="item.commodityFacility" class="font-size-12 leading-[16px] text-[#99a0ae] mb-4 ellipsis-1">
        {{ item.commodityFacility.join(" ") }}
      </view>
      <view class="font-size-12 leading-[18px] color-43669A">
        {{ item.commodityTradeRuleList.join(" / ") }}
      </view>

      <view class="flex flex-items-center flex-justify-end">
        <text class="amt font-size-18 font-500 font-family-misans-vf leading-[24px] text-[#ff3d60] mr-4">
          {{ item.specificationPrice }}
        </text>
        <text v-if="item.stockUnitLabel" class="font-size-12 leading-[16px] text-[#99a0ae]">
          /{{ item.stockUnitLabel }}
        </text>
        <text class="btn rounded-[10px] text-white ml-16">订</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { defineProps } from "vue";
import { useSelectedDateStore } from "@/store";

// Props
const props = defineProps({
  item: {
    type: Object,
    required: true,
    default: () => ({
      commodityPhoto: "",
      commodityId: "",
      commodityName: "",
      specificationPrice: "",
      commodityServices: [],
      commodityTags: [], // 商品标签
      commodityTradeRuleList: [], // 交易规则列表
      specificationId: "", // 规格ID
      stockUnitLabel: "", // 库存单位
    }),
  },
  selectedDate: {
    type: Object,
    default: () => { },
  },
});

const selectedDateStore = useSelectedDateStore();

const navigateToPage = (commodityId, path) => {
  const { startDate, endDate, totalDays } = props.selectedDate;
  selectedDateStore.setData({ startDate, endDate, totalDays });

  uni.navigateTo({ url: `${path}?commodityId=${commodityId}` });
};

const handleClick = ({ commodityId }) => navigateToPage(commodityId, "/pages/goods/index")

</script>

<style scoped lang="scss">
@import "./styles/index.scss";
</style>
