<template>
  <view class="container">
    <ModuleTitle title="相关商品" />
    <view class="container-scroll">
      <view
        v-for="(item, index) in commodityList"
        :key="`${item.commodityId}-${index}`"
      >
        <view class="mk-card-item" @click="placeOrderHandle(item)">
          <Interceptor />
          <image
            class="card-img"
            :src="item.commodityPhoto"
            mode="aspectFill"
          />
          <view class="card-content">
            <view class="card-title-column">
              <text class="card-title">{{ item.commodityName }}</text>
              <view
                class="card-tags"
                v-for="tag in item.commodityTradeRuleList"
                :key="tag"
              >
                <text class="card-tag">{{ tag }}</text>
              </view>
            </view>
            <template
              v-for="(serviceItem, index) in item.commodityServices"
              :key="serviceItem.serviceTitle"
            >
              <view v-if="index < 3" class="card-desc"
                >· {{ serviceItem.serviceTitle }}</view
              >
            </template>
            <view class="card-bottom-row">
              <view class="card-price-row">
                <text class="card-price-fu">￥</text>
                <text class="card-price">{{ item.specificationPrice }}</text>
                <text class="card-unit">/人</text>
              </view>
              <text class="card-btn">下单</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { defineProps } from "vue";
import { checkToken } from "@/hooks/useGoLogin";
import ModuleTitle from "@/components/ModuleTitle/index.vue";
import Interceptor from "@/components/Interceptor/index.vue";

const props = defineProps({
  commodityList: {
    type: Array,
    default: [],
  },
});

/// 去下单
const placeOrderHandle = (item) => {
  checkToken().then(() => {
    uni.navigateTo({
      url: `/pages/goods/index?commodityId=${item.commodityId}`,
    });
  });
};
</script>

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