<template>
<scroll-view scroll-y="true" :scroll-top="scrollTop" @scroll="scroll">
    <view class="appCotent" v-if="isShow">
        <view>
            <view class="shop">
                <div class="my__search" @click='goSearch'>
                    <u-search placeholder="搜搜你最想知道的" :showAction='false' bgColor='#ffffff'></u-search>
                </div>
                <div class="shop__swiper">
                    <view class="u-demo-block">
                        <u-swiper :list="list3" previousMargin="30" nextMargin="30" circular :autoplay="true" keyName="imageUrl" @click="goOtherLink" height='150' radius="5" bgColor="#ffffff"></u-swiper>
                    </view>
                </div>
                <div class="view__content">
                    <div class="view__title">超低价养车好物</div>
                    <div class="shop__list2">
                        <div class="shop__item2" v-for="(vo,inx) in mallList" :key="inx" @click="goDetail(vo.id,vo.link)">
                            <div class="item2__img">
                                <image :src="getImage(vo.mainImgUrl)" />
                            </div>
                            <div class="item2__title">{{vo.title}}</div>
                            <div class="item2__price">￥{{vo.currentPrice/100}}</div>
                        </div>
                    </div>
                </div>
                <div class="shop__list__one">
                    <div class="view__title">车主精选 养车必备</div>
					<view class="owner-select" v-if="boutiqueMallList.length > 0">
						<view class="one_item" v-for="(vo,inx) in boutiqueMallList" :key="inx" @click="goDetail(vo.id,vo.link)">
							<view class="one_item_img">
								<image :src="getImage(vo.mainImgUrl)" />
							</view>
							<view class="one_item_title">
								{{vo.title}}
							</view>
							<view class="one_item_price">
								￥{{vo.currentPrice/100}}
								<span class="num__two">￥{{vo.originalPrice/100}}</span>
							</view>
						</view>
					</view>
					<u-loadmore :status="loading"  v-if="boutiqueMallList.length > 0"/>
                </div>
            </view>
            <u-gap bgColor="transparent" height="60"></u-gap>
        </view>
    </view>
</scroll-view>
</template>

<script>
export default {
	props:["page"],
    data() {
        return {
            isShow:false,
            scrollTop: 0,
            old: {
                scrollTop: 0
            },
            option: {
                size: 10,
                auto: true
            },
            keyword: '',
            list3: [
                'https://cdn.uviewui.com/uview/swiper/swiper3.png',
                'https://cdn.uviewui.com/uview/swiper/swiper2.png',
                'https://cdn.uviewui.com/uview/swiper/swiper1.png',
            ],
            //普通商品列表
            mallList: [],
            //精品商品
            boutiqueMallList: [],
			loading:"loadmore"
        }
    },
	watch:{
		page(newVal,oldVal){
			if(newVal > oldVal){
				this.loading = "loading"
				setTimeout(()=>{
					this.getBoutiqueMallList()
				},1000)
			}
		}
	},
    methods: {
        scroll: function (e) {
            this.old.scrollTop = e.detail.scrollTop
            // console.log(this.old.scrollTop);
        },
        goTop() {
            this.scrollTop = this.old.scrollTop
            this.$nextTick(function () {
                this.scrollTop = 0
            });
        },
        // 加载数据
        load(paging) {
            setTimeout(() => {
                let opts = {
                    url: '/app/index/mall/list?pageSize=' + paging.size + '&pageNum=' + paging.page,
                    method: 'get'
                };
                this.http.httpRequest(opts, {
                    classification: "2"
                }).then(res => {
                    if (res.data.code == 200) {
                        let list = res.data.data.rows || []
                        this.boutiqueMallList = [...this.boutiqueMallList, ...list];

                        // 加载成功  参数对象{list: 当前列表,total: 数据总长度(后端查询的total)}
                        this.$refs.list.loadSuccess({
                            list: this.boutiqueMallList,
                            total: res.data.data.total
                        });
                    } else {
                        // 加载失败
                        this.$refs.list.loadFail()
						uni.showToast({
							title: res.data.msg,
							icon: 'none',
							duration: 2000
						});
                    }
                })
            }, this.$u.random(100, 1000));
        },
        // 刷新
        refresh(paging) {
            setTimeout(() => {
                let opts = {
                    url: '/app/index/mall/list?pageSize=' + paging.size + '&pageNum=' + paging.page,
                    method: 'get'
                };
                this.http.httpRequest(opts, {
                    classification: "2"
                }).then(res => {
                    if (res.data.code == 200) {
                        let list = res.data.data.rows || []
                        this.boutiqueMallList = list;
                
                        // 加载成功  参数对象{list: 当前列表,total: 数据总长度(后端查询的total)}
                        this.$refs.list.refreshSuccess({
                            list: this.boutiqueMallList,
                            total: res.data.data.total
                        });
                        // 加载失败
                        // this.$refs.list.loadFail()
                    } else {
                         this.$refs.list.refreshFail()
						 uni.showToast({
						 	title: res.data.msg,
						 	icon: 'none',
						 	duration: 2000
						 });
                    }
                })
            }, this.$u.random(100, 1000));
        },
        goSearch() {
            uni.navigateTo({
                url: '/pagesC/pages/shop/search'
            })
        },
        goDetail(id,link) {
			let token = uni.getStorageSync('userToken');
			uni.removeStorageSync('routerLogin')
			uni.setStorageSync('routerLogin',false)
			if(!token){
				let returnPage= '/pages/main';
				let pageType = "reLaunch"
				uni.navigateTo({
					url:"/pages/login/index/index?returnPage="+returnPage+'&pageType='+pageType
				})
			    return;
			}
			if(link){
				// uni.navigateTo({
				//     url: '/pages/webview/webview?url=' + link
				// })
				uni.navigateToMiniProgram({
					appId: 'wx91d27dbf599dff74', // 跳转目标小程序的id
					path: link, // 目标小程序的页面路径
					extraData: { // 需要携带的参数
					},
					success(res) {// 打开成功
					}
				})
				return
			}
			uni.showToast({
				title: "该商品暂无链接！",
				icon: 'none',
				duration: 1500,
			});
            // uni.navigateTo({
            //     url: '/pagesC/pages/shop/detail?id=' + id
            // })
        },
        getMallList() {
            let opts = {
                url: '/app/index/mall/list',
                method: 'get'
            };
            this.http.httpTokenRequest(opts, {
                classification: "1"
            }).then(res => {
                if (res.data.code == 200) {
                    this.mallList = res.data.data.rows || []
                }else{
					uni.showToast({
						title: res.data.msg,
						icon: 'none',
						duration: 2000
					});
				}
            })
        },
        getBoutiqueMallList() {
            let opts = {
                url: '/app/index/mall/list',
                method: 'get'
            };
            this.http.httpTokenRequest(opts, {
                classification: "2",
				pageSize:10,
				pageNum:this.page
            }).then(res => {
                if (res.data.code == 200) {
					let data = res.data.data.rows || [];
					data.forEach(elem=>{
						this.boutiqueMallList.push(elem)
					})
					if(data.length < 10){
						uni.setStorageSync('refresh',1)
						this.loading = "nomore"
					}else{
						uni.setStorageSync('refresh',0)
						this.loading = "loadmore"
					}
                }else{
					uni.showToast({
						title: res.data.msg,
						icon: 'none',
						duration: 2000
					});
				}
            })
        },
        getImage(imageUrl) {
            return imageUrl;
        },
        getRotationList() {
            let opts = {
                url: '/app/index/carouse/2',
                method: 'get'
            };
            this.http.httpTokenRequest(opts, {}).then(res => {
                if (res.data.code == 200) {
                    let data = res.data.data || []
                    let imgList = []
                    data.forEach(e => {
                        imgList.push(e)
                    })
                    this.list3 = imgList
                }else{
					uni.showToast({
						title: res.data.msg,
						icon: 'none',
						duration: 2000
					});
				}
            })
        },
		// 轮播跳转其他页面
		goOtherLink(index){
			let item = this.list3[index]
			let link = item.link;
			if(link) {
				var newStr = link.indexOf("http");
				var newStr2 = link.indexOf("https");
				if (newStr == 0 || newStr2 == 0) {
					uni.navigateTo({
						url: '/pages/webview/webview?url=' + link
					})
					return
				} 
				uni.navigateTo({
					url: link
				})
			}
		}
    },
    onReady: function () {
        uni.setNavigationBarTitle({
            title: '精选商城'
        });
    },
    created() {
        this.goTop()
    },
    mounted() {
        setTimeout(() => {
            this.isShow = true
        }, 200);
        this.getMallList()
        this.getRotationList()
        this.getBoutiqueMallList()
    }
};
</script>

<style lang="scss" scoped>
.shop {
    height: 100%;

    .shop__list__one {
        padding: 0 30rpx 40rpx;
        background: #f9f9f9;

		.owner-select{
			display: flex;
			align-items: center;
			justify-content: space-between;
			flex-wrap: wrap;
			
			.one_item {
				width: 48%;
				background: #FFFFFF;
				box-shadow: 0rpx 0rpx 28rpx 1rpx rgba(232, 232, 232, 0.2);
				border-radius: 20rpx;
				margin-bottom: 30rpx;
			
				.one_item_img {
					width: 100%;
					height: 320rpx;
					background: #FFD4D4;
					border-radius: 20rpx;
			
					image {
						width: 100%;
						height: 100%;
						border-radius: 20rpx;
					}
				}
			
				.one_item_title {
					font-size: 32rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
					margin: 20rpx 0;
					text-indent: 20rpx;
					margin-bottom: 10rpx;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
				}
			
				.one_item_price {
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #E1251B;
					text-indent: 20rpx;
					padding-bottom: 20rpx;
			
					span {
						font-size: 20rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #999999;
					}
				}
			}
		}
    }

	
	
    .my__search {
        padding: 30rpx;
    }

    .view__title {
        font-size: 38rpx;
        font-family: PingFang SC;
        font-weight: bold;
        color: #333333;
        position: relative;
        z-index: 999;
        margin-bottom: 30rpx;
    }

    .view__title::before {
        content: "";
        width: 76rpx;
        height: 14rpx;
        display: inline-block;
        background: url('@/static/move-car/love-car1.png') no-repeat;
        background-size: contain;
        position: absolute;
        bottom: 7rpx;
        z-index: -1;

    }

    .shop__swiper {
        margin-bottom: 30rpx;
    }

    .view__content {
        padding: 40rpx;
        background: #FFFFFF;
        box-shadow: 0rpx 0rpx 28rpx 1rpx rgba(232, 232, 232, 0.2);
        border-radius: 20rpx;
        margin-bottom: 40rpx;

        .shop__list2 {
            display: flex;
            align-items: center;
            justify-content: space-between;
            overflow: hidden;
            overflow-x: scroll;

            .shop__item2 {
                width: 24%;
                margin-right:30rpx;

                .item2__img {
                    margin-bottom: 20rpx;
                    text-align: center;
                    width: 145rpx;
                    height: 145rpx;

                    image {
                        width: 145rpx;
                        height: 145rpx;
                    }
                }

                .item2__title {
                    font-size: 28rpx;
                    font-family: PingFang SC;
                    font-weight: 500;
                    color: #333333;
                    line-height: 42rpx;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    overflow: hidden;
                }

                .item2__price {
                    font-size: 24rpx;
                    font-family: PingFang SC;
                    font-weight: 500;
                    color: #E1251B;
                    line-height: 42rpx;
                }
            }
        }

    }
}
</style>
