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

  const viewData = ref({})
  const topUser = ref({})
  const participants = ref([])
  const loading = ref(true)

  const getData = async id => {
    const res = await getGroupDetail(id)
    viewData.value = res.data
    participants.value = res.data.participants.filter(
      v => v.roleType == 2
    )
    topUser.value = res.data.participants.find(v => v.roleType == 1)
    loading.value = false
  }

  const onShare = () => {
    // productId
    navigateTo('/pages/shop-together/share', {
      id: viewData.value.id,
      productId: viewData.value.productId
    })
  }

  onLoad(e => {
    getData(e.id)
  })
</script>

<template>
  <view>
    <cb-loading v-if="loading"></cb-loading>
    <view v-else class="shop-together">
      <!-- 顶部用户信息 -->
      <view class="top-user">
        <view class="state-box">发起人</view>
        <view class="left-box">
          <image
            v-if="topUser?.avatar"
            :src="topUser?.avatar"
            mode="aspectFill"
            class="avatar"
          ></image>
          <uni-icons v-else type="contact-filled" size="64"></uni-icons>
          <view class="name-box">
            <text>{{ topUser.userName }}</text>
            <text>ID:{{ topUser.userId }}</text>
          </view>
        </view>
        <view class="right-box">
          <text>
            {{
              viewData.status === 1
                ? viewData.commissionAmount
                : (viewData.commissionRate / 100) * viewData.groupPrice
            }}
          </text>
          <text>积分</text>
        </view>
      </view>

      <!-- 商品展示 -->
      <view class="public-product_item">
        <image
          :src="viewData.productImage"
          mode="scaleToFill"
          class="left-img"
        ></image>
        <view class="right-content">
          <view>
            <text class="product-name">{{ viewData.productName }}</text>
            <text v-if="viewData.activityType" class="num-box">
              {{ viewData.activityType }} 人拼团
            </text>
          </view>
          <view class="line-box">
            <view class="rmb-box">
              <text></text>
              <text>¥{{ viewData.groupPrice }}</text>
            </view>
            <view
              :class="`_${GROUP_STATUS[viewData.status].class}`"
              class="state-box"
            >
              {{ GROUP_STATUS[viewData.status].name }}
            </view>
          </view>
        </view>
      </view>

      <!-- 人员列表 -->
      <view :class="{ 'bottom-user-list': viewData.status == 0 }">
        <view
          v-for="item in participants"
          :key="item.id"
          class="bottom-list"
        >
          <view class="left-name">
            <image
              src="https://wx1.sinaimg.cn/mw690/92eeb099gy1i29hl0ne80j21jk2bcash.jpg"
              mode="scaleToFill"
              class="avatar"
            ></image>
            <text>{{ item.userName }}</text>
          </view>
          <text class="date">加入时间：{{ item.paidTime }}</text>
        </view>
      </view>
      <!-- 底部按钮 -->
      <bottom-view v-if="viewData.status == 0">
        <cb-button @click="onShare">分享</cb-button>
      </bottom-view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
  page {
    background: #f9f9f9;
  }
  @import '@/styles/mall.scss';
  @import './styles/detail.scss';
</style>
