<template>
    <app-view class="product-details">
        <template #header>
            <app-navbar title="商品详情" />
        </template>
        <div class="product-details__content">
            <Swipe class="banner" :autoplay="3000" indicator-color="white" lazy-render>
                <SwipeItem v-for="(item, index) in topBanners" :key="index">
                    <img :src="getImageUrl(item)" />
                </SwipeItem>
            </Swipe>
            <div class="goods">
                <h1 class="goods-title">{{ goodsinfo.wrstandardname }}</h1>
                <div class="goods-price">
                    <span>参考价</span>
                    <span class="red">{{ goodsinfo.spotgoodsprice ?? 0.00 }}</span>
                    <span>元/{{ getGoodsUnitName(goodsinfo.unitid) }}</span>
                </div>
                <Icon class="goods-favorite" :name="isFavorite ? 'star-o' : 'star'" @click="favorite" />
            </div>
            <div class="chart" v-if="chartData.price.length">
                <component :is="componentMap.get('chart')" :loading="loading" :data-list="chartData" />
            </div>
            <div class="gallery">
                <Divider>商品详情</Divider>
                <template v-for="(url, index) in goodsImages" :key="index">
                    <img :src="url" alt="" />
                </template>
            </div>
        </div>
    </app-view>
</template>

<script lang="ts" setup>
import { defineAsyncComponent, computed, shallowRef } from 'vue'
import { useNavigation } from '@/hooks/navigation'
import { Divider, Swipe, SwipeItem, Icon } from 'vant'
import { getImageUrl } from "@/filters";
import { useWrstandardDetails, useUserFavoriteGoods } from '@/business/goods'
import { getGoodsUnitName } from '@/constants/unit'

const componentMap = new Map<string, unknown>([
    ['chart', defineAsyncComponent(() => import('@mobile/components/modules/echarts-line/index.vue'))],
])

const { getQueryStringToNumber } = useNavigation()
const wrstandardid = getQueryStringToNumber('wrstandardid')
const isFavorite = shallowRef(getQueryStringToNumber('favorite'))
const { loading, chartData, details, getWrstandardDetails } = useWrstandardDetails(wrstandardid)
const { getAddUserFavoriteGoods, getRemoveUserFavoriteGoods } = useUserFavoriteGoods(wrstandardid)

const goodsinfo = computed<Partial<Model.THJWrstandardDetailRsp['goodsinfo']>>(() => details.value.goodsinfo ?? {})

// 商品图片列表
const goodsImages = computed(() => {
    const pictureurls = goodsinfo.value.pictureurls ?? ''
    return pictureurls.split(',').map((path) => getImageUrl(path))
})

// 商品banner
const topBanners = computed(() => {
    const bannerpicurls = goodsinfo.value.bannerpicurl ?? ''
    return bannerpicurls.split(',').map((path) => getImageUrl(path))
})

/// 收藏
const favorite = () => {
    if (isFavorite.value === 1) {
        isFavorite.value = 0
        getAddUserFavoriteGoods()
    } else {
        isFavorite.value = 1
        getRemoveUserFavoriteGoods()
    }
}

getWrstandardDetails()
</script>

<style lang="less">
@import './index.less';
</style>