<!--
 * @Author: 王翠碧 1254597151@qq.com
 * @Date: 2023-05-22 22:41:29
 * @LastEditors: 王翠碧 1254597151@qq.com
 * @LastEditTime: 2023-05-26 23:12:10
 * @FilePath: \uniapp\src\bundle\pages\collection_list\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <!-- Main Start -->
    <uni-transition
        mode-class="zoom-in"
        needLayout="true"
        :show="collectData.length"
        :duration="500"
    >
        <u-swipe-action>
            <u-swipe-action-item
                v-for="item in collectData"
                :key="item.id"
                :options="{ text: '取消收藏' }"
            >
                <!-- <block> -->
                <view class="collect flex justify-between" @click="toGoodsDetail(item.goodsId)">
                    <view class="flex">
                        <u-image :src="item.image" width="140" height="140"></u-image>
                        <view class="ml-[20rpx]">
                            <view class="normal font-medium text-xl">{{ item.name }}</view>
                            <view class="mt-[24rpx]">
                                <price :price="item.price" :desc="item.unit"></price>
                            </view>
                        </view>
                    </view>
                    <view class="pt-[30rpx]">
                        <u-button
                            size="mini"
                            :plain="true"
                            type="primary"
                            shape="circle"
                            @click="toGoodsDetail(item.goodsId)"
                        >
                            去下单
                        </u-button>
                    </view>
                </view>
                <!-- </block> -->
            </u-swipe-action-item>
        </u-swipe-action>
    </uni-transition>
    <!-- Main End -->
    <!-- empty Start -->
    <view class="empty" v-show="!collectData.length">
        <u-empty
            text="暂无收藏数据～"
            :src="'/static/images/empty/collection.png'"
            :icon-size="300"
            color="#888888"
        ></u-empty>
    </view>
    <!-- empty Start -->
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import { apiCollectLists } from '@/api/goods'
import Price from '@/components/price/index.vue'

/** Data Start **/
const collectData = ref<any>([])
/** Data End **/

/** Methods Start **/
// 初始化收藏
const initCollect = async (): Promise<void> => {
    const { lists } = await apiCollectLists()
    collectData.value = lists
}
// 去商品详情
const toGoodsDetail = (id: number | null) => {
    console.log('id', id)

    uni.navigateTo({
        url: `/pages/goods/index?id=${id}`
    })
}
/** Methods End **/

/** Life Cycle Start **/
onShow(() => {
    initCollect()
})
/** Life Cycle End **/
</script>

<style lang="scss">
.collect {
    border-radius: 14rpx;
    background-color: white;
    margin: 20rpx 20rpx 0 20rpx;
    padding: 30rpx;
    image {
        border-radius: 16rpx !important;
    }
}

.empty {
    padding-top: 300rpx;
}
</style>
