<script setup>
  import { onLoad } from '@dcloudio/uni-app'
  import { getMyGroupList } from '@/api/mall'
  import { ref } from 'vue'
  import { GROUP_STATUS } from '@/constants/mall-data'
  import { navigateTo } from '@/utils/router'

  const list = ref([])
  const loading = ref(true)
  const getData = async () => {
    loading.value = true
    const res = await getMyGroupList()
    list.value = res.data
    console.log(res.data)
    loading.value = false
  }

  const onGo = id => {
    navigateTo('/pages/shop-together/detail', { id })
  }

  onLoad(() => {
    getData()
  })
</script>

<template>
  <view v-if="!loading" class="shop-together">
    <cb-empty v-if="!loading && list.length === 0"></cb-empty>
    <view
      v-for="item in list"
      :key="item.id"
      class="public-product_item"
      @click="onGo(item.id)"
    >
      <image
        :src="item.productImage"
        mode="scaleToFill"
        class="left-img"
      ></image>
      <view class="right-content">
        <text class="product-name">{{ item.productName }}</text>
        <view class="line-box">
          <view class="rmb-box">
            <text></text>
            <text>¥{{ item.totalAmount }}</text>
          </view>
          <view
            :class="`_${GROUP_STATUS[item.status].class}`"
            class="state-box"
          >
            {{ GROUP_STATUS[item.status].name }}
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
  page {
    background: #f9f9f9;
  }
  @import '@/styles/mall.scss';
  .shop-together {
    padding: 16rpx 24rpx;
  }
</style>
