<template>
  <div class="bg-white p-[8px] rounded-[12px] flex items-start m-[12px]" @click.stop="handleClick(item)">
    <img class="w-[80px] h-[80px] rounded-[10px]" :src="item.commodityPhoto" />
    <div class="flex-1 pl-[12px]">
      <div class="text-[16px] leading-[24px] text-[#171717] mb-[4px]">
        {{ item.commodityName }}
      </div>
      <div v-if="item.commodityFacility" class="text-[12px] leading-[16px] text-ink-400 mb-[4px] truncate">
        {{ item.commodityFacility.join(" ") }}
      </div>
      <div class="text-[12px] leading-[18px] text-[#43669A]">
        {{ item.commodityTradeRuleList.join(" / ") }}
      </div>

      <div class="flex items-center justify-end">
        <div class="mr-[4px] text-[#FF3D60]">
          <span class="text-[12px] mr-[4px]">¥</span>
          <span class="text-[18px] font-medium font-family-misans-vf leading-[24px]">
            {{ item.specificationPrice }}
          </span>
        </div>
        <span v-if="item.stockUnitLabel" class="text-[12px] leading-[16px] text-ink-400">
          /{{ item.stockUnitLabel }}
        </span>
        <!-- <span
          class="ml-[16px] rounded-[10px] px-[8px] py-[4px] text-white [background:linear-gradient(90deg,#ff3d60_57%,#ff990c_100%)]">{{
            t("quick.card.orderShort") }}</span> -->
      </div>
    </div>
  </div>
</template>

<script setup>
import { defineProps } from "vue";
import { useI18n } from "vue-i18n";
import { useRouter } from 'vue-router'
import { useSelectedDateStore } from "@/store";

const { t } = useI18n();

// 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 router = useRouter()
const navigateToPage = (commodityId, path) => {
  const { startDate, endDate, totalDays } = props.selectedDate;
  selectedDateStore.setData({ startDate, endDate, totalDays });

  router.push({ path, query: { commodityId } })
};

const handleClick = ({ commodityId }) => {
  router.push({ name: "goods", query: { commodityId } })
}
</script>
