<template>
    <view v-if="content.data.length && content.enabled">
        <CategoryCard :title="item.name" v-for="(item, index) in pageData" :key="index">
            <view class="goods">
                <block v-for="(item1, idx) in converItem(item.data)" :key="item1.id">
                    <view class="goods-item" @click="goPage(`/pages/goods/index?id=${item1.id}`)">
                        <view class="info-img mr-3">
                            <u-image
                                :src="item1.image"
                                class="goods-image"
                                width="100%"
                                height="172"
                                border-radius="10"
                                :lazy-load="true"
                            ></u-image>
                        </view>

                        <view class="info-column">
                            <view>
                                <view class="goods-title truncate w-full">
                                    {{ item1.name }}
                                </view>
                                <view class="goods-desc truncate w-full">
                                    {{ item1.remarks }}
                                </view>
                            </view>
                            <view class="price-wrap mt-3">
                                <view>
                                    <view style="color: #d41313">
                                        ¥
                                        <span class="price">{{ servicePrice(item1) }}</span>
                                        <span class="unit pl-1">{{ item1.unit }}</span>
                                    </view>
                                    <view class="text-sm normal mt-1" style="color: #b0aeae">
                                        <text class="font-bold">{{ item1.orderNum }}</text>
                                        人预约过
                                    </view>
                                </view>
                                <u-button
                                    :custom-style="{ background: '#2468f2' }"
                                    size="mini"
                                    shape="circle"
                                    type="primary"
                                    @click="goPage(`/pages/goods/index?id=${item1.id}`)"
                                >
                                    立即抢购
                                </u-button>
                            </view>
                        </view>
                    </view>
                </block>
            </view>
        </CategoryCard>
    </view>
</template>

<script lang="ts" setup>
import CategoryCard from './category-card.vue'
import { ref, nextTick, computed } from 'vue'
import { apiGoodsLists } from '@/api/store'
import cloudIcon from '@/static/images/home/cloud.png'
import waveIcon from '@/static/images/home/wave.png'
import { useAppStore } from '@/stores/app'
import { PriceEnum } from '@/enums/appEnums'
import { formatString } from '@/utils/util'

const { getImageUrl } = useAppStore()

const props = withDefaults(
    defineProps<{
        content: any
    }>(),
    {
        content: []
    }
)
interface CardItem {
    name: string
    data: []
    listBgimage: string
}
const pageData = ref<CardItem[]>([])
const converItem = computed(() => data => {
    if (!data) return
    return data.map(item => {
        const { price, minPrice, maxPrice } = item
        return {
            ...item,
            goodsPrice: price,
            priceRange: `${minPrice}-${maxPrice}`
        }
    })
})
const servicePrice = computed(() => item => {
    const { priceType, goodsPrice, priceRange } = item
    return priceType == PriceEnum.CUSTOMER_PRICE ? goodsPrice : formatString(priceRange)
})

const intPageData = async () => {
    if (props.content && props.content.data?.length > 0) {
        await props.content.data.map(async i => {
            if (i.showList) {
                const { lists } = await apiGoodsLists({
                    pageNo: 1,
                    pageSize: i.sliceNum || 20,
                    categoryId: i.link.query.id
                })
                i.data = lists
            }
        })
        await nextTick()
        pageData.value = props.content.data.filter(i => i.showList)
    }
}
intPageData()

const goPage = (url: string) => {
    uni.navigateTo({ url: url })
}

//截取当前数据到小数点后两位
const numFilter = (value: string) => {
    const realVal = parseFloat(value).toFixed(2)
    return realVal.split('.')
}

const getBgImage = (val: CardItem) => {
    return getImageUrl(val.listBgimage)
}
</script>

<style lang="scss" scoped>
.goods {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-column-gap: 20rpx;
    grid-row-gap: 20rpx;
}
.goods-item {
    display: flex; //让每个子项可以方便换行
    // box-sizing: border-box;
    padding: 32rpx 15rpx;
    border-radius: 10rpx;
    background-color: #ffffff;
    overflow: hidden;
    // height: 240rpx;

    .info-img {
        width: 230rpx;
        display: flex;
        align-items: center;

        .goods-image {
            //图片质量选择器，选择最适合你的游戏图片质量的选择器
            width: 100%; //让图片可以整体显示在页面上
            //border-radius: 10rpx; //因为是 u-image 故需要传入参数变更圆角
        }
    }

    .info-column {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        flex: 1;
        overflow: hidden;

        .goods-title {
            font-size: 1rem;
            font-weight: bold;
            margin-bottom: 10rpx;
        }
        .goods-desc {
            color: #8e8b8b;
            font-size: 0.8rem;
        }

        .goods-scribingPrice {
            font-size: 0.775rem;
            color: #808695;
            text-decoration: line-through;
        }

        .price-wrap {
            display: flex;
            justify-content: space-between;
            align-items: center;

            .price {
                font-size: 1.2rem; //¥
            }
            .unit {
                font-size: 22rpx;
            }
        }
    }
}
</style>
