<template>
    <view class="main">
        <view class="maintopBox">
            <view class="mainTopRight" @click="handleChangeSortType">
                <view class="distanceText">{{ sortType === 1 ? '按时间' : '按价格' }}</view>
                <image class="distanceIcon" src="https://eshangtech.com/caiyunyiImg/sortIcon.png" />
            </view>
        </view>

        <view class="mainBottom">
            <scroll-view scroll-y="true" class="scrollView" @scrolltolower="handleScrollBottom">
                <view class="nearbyScenicItem" v-for="(item, index) in dataList" :key="index"
                    @touchstart="handleTouchStart($event, index)" @touchmove="handleTouchMove($event, index)"
                    @touchend="handleTouchEnd($event, index)" @click="goShowDetail(item)">
                    <view class="swipe-content" :class="{ 'show-delete': item.showDelete }">
                        <view class="nearByBottomLeftBox">
                            <image class="nearbyImg" :src="item.list_img || '/static/images/home/defaultIcon.png'" />
                        </view>
                        <view class="nearByBottomCenterBox">
                            <view class="scenicName">{{ item.COMMODITY_NAME }}</view>
                            <view class="scenicContent" v-if="item.USERDEFINEDTYPE_NAME">
                                <view class="scenicType">{{ item.USERDEFINEDTYPE_NAME }}</view>
                            </view>
                            <view class="scenicBottom">
                                <view class="scenicBottomItem">
                                    <view class="scenicBottomItemLabel">库存：</view>
                                    <view class="scenicBottomItemValue">{{ item.COMMODITY_STOCK || "" }}</view>
                                </view>
                                <view class="scenicBottomItem">
                                    <view class="scenicBottomItemLabel">销量：</view>
                                    <view class="scenicBottomItemValue">{{ good.COMMODITY_EN || "0" }}</view>
                                </view>
                            </view>
                        </view>
                        <view class="nearByBottomRightBox">
                            <view class="shopPriceBox">
                                <view class="shopPriceUnit">¥</view>
                                <view class="shopPriceValue">{{ item.COMMODITY_MEMBERPRICE }}</view>
                            </view>
                        </view>
                        <!-- 删除按钮 -->
                        <view class="delete-btn" v-if="item.showDelete" @click.stop="handleDelete(item)">
                            删除
                        </view>
                    </view>
                </view>
            </scroll-view>
        </view>
    </view>
</template>

<script>
import { mapGetters } from "vuex";
export default {
    data() {
        return {
            sortType: 1,// 1:按价格，2:按收藏时间
            dataList: [],// 表单数据
            startX: 0,
            moveX: 0,
        }
    },
    onLoad() {
        this.handleGetData();

        this.$utils.addUserBehaviorNew({
            behaviorRecordDesc: "进入我的收藏"
        });
    },
    computed: {
        ...mapGetters(["user"]),
    },
    methods: {
        async handleGetData() {
            let req = {
                ProvinceCode: this.user.PROVINCE_CODE,
                OwnerUnitId: 911,
                MemberShipId: this.user.MEMBERSHIP_ID,
                AppGuid: "wxee018fb96955552a",
                PageIndex: this.PageIndex,
                PageSize: 10,
                SortStr: this.sortType === 2 ? 'COMMODITY_MEMBERPRICE desc' : "",
                type: "encryption"
            }
            const data = await this.$api.$zzyLocalPost(
                "/Member/GetCommodityCollectionList",
                req
            );
            console.log('fjdsifjsaoif', data);
            let list = data.Result_Data.List
            this.dataList = list
        },
        handleChangeSortType() {
            // 这里可以添加排序逻辑
            if (this.sortType === 1) {
                this.sortType = 2;
            } else if (this.sortType === 2) {
                this.sortType = 1;
            }
            this.handleGetData();
        },
        // 滑动到底部
        handleScrollBottom() {

        },
        handleTouchStart(e, index) {
            this.startX = e.touches[0].clientX;
            // 关闭其他item的删除按钮
            this.dataList.forEach((item, i) => {
                if (i !== index) item.showDelete = false;
            });
        },
        handleTouchMove(e, index) {
            this.moveX = e.touches[0].clientX;
            let dis = this.startX - this.moveX;
            // 超过阈值显示删除
            if (dis > 50) {
                this.$set(this.dataList[index], 'showDelete', true);
            } else if (dis < 10) {
                this.$set(this.dataList[index], 'showDelete', false);
            }
        },
        handleTouchEnd(e, index) {
            // 可根据需要补充逻辑
        },
        async handleDelete(obj) {
            let req = {
                COLLECTIONId: obj.CollectionId,
                type: "encryption",
            }
            // 同步收藏
            console.log('reqreqreq', req);
            const data = await this.$api.$zzyLocalPost(
                "/Member/DeleteCOLLECTION",
                req
            );
            console.log('data', data);
            if (data.Result_Code === 100) {
                uni.showToast({
                    title: '删除成功！',
                    icon: 'none'
                })
                this.handleGetData()
            } else {
                uni.showToast({
                    title: data.Result_Desc,
                    icon: 'none'
                })
            }


        },
        // 跳转商品详情页面
        goShowDetail(obj) {
            uni.navigateTo({
                url: `/pages/shopPages/shopDetail/index?id=${obj.GoodsId}`,
            });
        }
    }
}
</script>
<style lang="less" scoped>
.main {
    width: 100vw;
    height: 100vh;
    background: #F5F5F5;
    box-sizing: border-box;
    padding: 24rpx 30rpx;

    .maintopBox {
        width: 100%;
        height: 40rpx;
        display: flex;
        align-items: center;
        justify-content: flex-end;

        .mainTopRight {
            display: flex;
            align-items: center;

            .distanceText {
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: 24rpx;
                color: #333333;
                line-height: 34rpx;
                text-align: left;
                font-style: normal;
                text-transform: none;
            }

            .distanceIcon {
                width: 24rpx;
                height: 24rpx;
                margin-left: 8rpx;
            }
        }
    }

    .mainBottom {
        width: 100%;
        margin-top: 16rpx;

        .scrollView {
            .nearbyScenicItem {
                position: relative;
                overflow: hidden;
                margin-bottom: 16rpx;
                border-radius: 8rpx;

                .swipe-content {
                    width: calc(100% + 120rpx); // 关键：宽度加上删除按钮的宽度
                    box-sizing: border-box;
                    padding: 16rpx 16rpx 24rpx;
                    display: flex;
                    align-items: center;
                    transition: transform 0.2s;
                    background: #fff;
                    position: relative;

                    .nearByBottomLeftBox {
                        width: 136rpx;
                        height: 136rpx;
                        box-sizing: border-box;
                        padding: 4rpx 0;
                        margin-right: 28rpx;

                        .nearbyImg {
                            width: 100%;
                            height: 100%;
                        }
                    }

                    .nearByBottomCenterBox {
                        width: calc(100vw - 164rpx - 140rpx - 60rpx - 32rpx);

                        .scenicName {
                            font-family: PingFangSC, PingFang SC;
                            font-weight: 600;
                            font-size: 29rpx;
                            color: #222222;
                            line-height: 42rpx;
                            text-align: left;
                            font-style: normal;
                            width: 100%;
                            display: inline-block;
                            white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis;
                        }

                        .scenicContent {
                            width: 100%;
                            margin-top: 8rpx;
                            display: flex;
                            align-items: center;

                            .scenicType {
                                font-family: PingFangSC, PingFang SC;
                                font-weight: 400;
                                font-size: 22rpx;
                                color: #3D7FFF;
                                line-height: 32rpx;
                                text-align: right;
                                font-style: normal;
                                padding: 4rpx 16rpx;
                                background: rgba(61, 127, 255, 0.1);
                                border-radius: 6rpx;
                                margin-right: 30rpx;
                            }

                            .scenicRateBox {
                                display: flex;
                                align-items: center;

                                .scenicRate {}

                                .scenicRateText {
                                    font-family: PingFangSC, PingFang SC;
                                    font-weight: 400;
                                    font-size: 20rpx;
                                    color: rgba(0, 0, 0, 0.6);
                                    line-height: 28rpx;
                                    text-align: left;
                                    font-style: normal;
                                    margin-left: 12rpx;
                                }
                            }
                        }

                        .scenicBottom {
                            display: flex;
                            align-items: flex-end;
                            justify-content: flex-start;
                            margin-top: 14rpx;

                            .scenicBottomItem {
                                display: flex;
                                align-items: center;

                                .scenicBottomItemLabel {
                                    display: inline-block;
                                    width: 70rpx;
                                    font-family: PingFangSC, PingFang SC;
                                    font-weight: 400;
                                    font-size: 22rpx;
                                    color: rgba(0, 0, 0, 0.6);
                                    line-height: 28rpx;
                                    text-align: left;
                                    font-style: normal;
                                }

                                .scenicBottomItemValue {
                                    display: inline-block;
                                    width: 80rpx;
                                    font-family: PingFangSC, PingFang SC;
                                    font-weight: 400;
                                    font-size: 22rpx;
                                    color: rgba(0, 0, 0, 0.6);
                                    line-height: 28rpx;
                                    text-align: left;
                                    font-style: normal;
                                }
                            }
                        }
                    }

                    .nearByBottomRightBox {
                        width: 140rpx;
                        display: flex;
                        align-items: center;
                        justify-content: flex-end;

                        .shopPriceBox {
                            display: flex;
                            align-items: flex-end;

                            .shopPriceUnit {
                                font-family: PingFangSC, PingFang SC;
                                font-weight: 600;
                                font-size: 20rpx;
                                line-height: 20rpx;
                                color: #F13216;
                                text-align: right;
                                font-style: normal;
                            }

                            .shopPriceValue {
                                font-family: PingFangSC, PingFang SC;
                                font-weight: 600;
                                font-size: 40rpx;
                                line-height: 40rpx;
                                color: #F13216;
                                text-align: right;
                                font-style: normal;
                            }
                        }
                    }
                }

                .show-delete {
                    transform: translateX(-120rpx);
                }

                .delete-btn {
                    position: absolute;
                    right: 0;
                    top: 0;
                    width: 120rpx;
                    height: 100%;
                    background: #ff4d4f;
                    color: #fff;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-size: 28rpx;
                    z-index: 10;
                }
            }
        }
    }



}
</style>