<template>
  <view class="card bg-white border-box p-8 rounded-12 flex flex-items-start m-12" @click.stop="handleClick(item)">
    <image class="left rounded-10" :src="item.commodityPhoto" mode="aspectFill" />
    <view class="right border-box flex-full pl-12">
      <view class="font-size-16 line-height-24 color-171717 mb-4">
        {{ item.commodityName }}
      </view>
      <view v-if="item.commodityFacility" class="font-size-12 line-height-16 color-99A0AE mb-4 ellipsis-1">
        {{ item.commodityFacility.join(" ") }}
      </view>
      <view class="font-size-12 line-height-18 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 line-height-24 color-FF3D60 mr-4">
          {{ item.specificationPrice }}
        </text>
        <text class="font-size-12 line-height-16 color-99A0AE">
          /{{ item.stockUnitLabel }}
        </text>
        <text class="btn border-box rounded-10 color-white ml-16" @click.stop="handleBooking(item)">订</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")

const handleBooking = ({ commodityId }) => navigateToPage(commodityId, "/pages-booking/index")
</script>

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