<template>
  <div class="container">
    <ModuleTitle :title="commodityDTO.title" />
    <div class="container-scroll">
      <div v-for="(item, index) in commodityDTO.commodityList" :key="`${item.commodityId}-${index}`">
        <div class="mk-card-item" @click="placeOrderHandle(item)">
          <!-- <div class="card-badge">超值推荐</div> -->
          <img class="card-img" :src="item.commodityIcon" mode="aspectFill" />
          <div class="card-content">
            <div class="card-title-column">
              <span class="card-title">{{ item.commodityName }}</span>
              <div class="card-tags" v-for="tag in item.commodityTradeRuleList" :key="tag">
                <span class="card-tag">{{ tag }}</span>
              </div>
            </div>
            <template v-for="(serviceItem, index) in item.commodityServices" :key="serviceItem.serviceTitle">
              <div v-if="index < 3" class="card-desc">· {{ serviceItem.serviceTitle }}</div>
            </template>
            <div class="card-bottom-row">
              <div class="card-price-row">
                <span class="card-price-fu">￥</span>
                <span class="card-price">{{ item.commodityPrice }}</span>
                <span class="card-unit">/{{ item.stockUnitLabel }}</span>
              </div>

              <span class="card-btn">下单</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

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

const props = defineProps({
  commodityDTO: {
    type: Object,
    default: {},
  },
});

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

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