<template>

	<view class="text-center pd-b-px-55">
		<img @click="gotoU" src="../../static/right_rule.png" style="position: fixed;right: 0;top: 70%;z-index: 99" alt="">
		<van-sticky>
			<view class="search_bar sh">
				<van-search input-align="center" placeholder="搜索商城商品" shape="round" v-model="state.keyword"
						@focus="goSearch" >
					<!--<template v-slot:right-icon>-->
					<!--<van-icon name="photograph" @click="searchImg" size="1.2rem" />-->
					<!--</template>-->
				</van-search>
			</view>

		</van-sticky>
		<!--名片-->
		<view style="background: #ffffff;padding-bottom: 36rpx;padding-top: 20rpx" >
			<view class="card-div">
				<van-row gutter="12" class="pd-h-px-10" style="padding-top: 26rpx">
					<van-col span="6" >
						<van-image style="border-radius: 50%;border: 2rpx solid #DDDDDD;width: 140rpx;height: 140rpx"  radius="20rpx" src="../../static/img/dz/jyx-logo.jpg"
						/>
					</van-col>
					<van-col span="18" style="text-align: left">
						<view style="font-size: 34rpx;font-weight: bold">金燕侠</view>
						<view style="color: #666666;font-size: 26rpx;letter-spacing: 1rpx;margin-top: 6rpx">浙江省杭州市杭州市莫干山路1418-66号3幢12层 1203 室</view>
						<view style="font-size: 26rpx;margin-top: 4px"> <van-icon name="manager-o" color="#707070" size="16px" style="margin-right: 10rpx"/>金燕侠 <span style="margin: 0 16rpx;color: #DDDDDD">|</span><van-icon name="phone-o" color="#707070" size="16px" /> 13613613666 <span style="float: right;border-radius: 8rpx;
border: 1rpx solid #EBA926;color: #EBA926;padding: 2rpx 10rpx" @click="goPhoneBtn(13613613666)">拨打</span> </view>
					</van-col>
				</van-row>
				<van-row  class="pd-h-px-10 dianpu" >
					<van-col span="11" style="background: #fef9ef">
						<view style="display: flex;align-items: center;justify-content: center"> <van-icon name="shop-collect" color="#EBA926" size="20px" style="margin-right: 10rpx"/>店铺信息</view>
					</van-col>
					<van-col span="2" style="background: #fef9ef">
						<view style="color: #DDDDDD">|</view>
					</van-col>
					<van-col span="11" style="background: #fef9ef">
						<view style="display: flex;align-items: center;justify-content: center"><van-icon name="photo" color="#EBA926" size="20px" style="margin-right: 10rpx"/>店铺海报</view>
					</van-col>
				</van-row>
			</view>
		</view>
		<van-swipe v-if="state.banner.indexCarouselBig.length > 0" lazy-render class="banner_top" :autoplay="3000"
			     indicator-color="white">
			<van-swipe-item v-for="item in state.banner.indexCarouselBig">
				<van-image :src="item.iconpath" @tap="goto(item.josnContent)" />
			</van-swipe-item>
		</van-swipe>
		<van-swipe v-if="state.banner.indexCarouselSmall.length > 0" lazy-render class="banner_afterTop" vertical
			     :autoplay="3000" :show-indicators="false">
			<van-swipe-item v-for="item in state.banner.indexCarouselSmall">
				<van-image :src="item.iconpath" @tap="goto(item.josnContent)" />
			</van-swipe-item>
		</van-swipe>
		<van-cell-group v-if="false">
			<van-cell is-link class="justify-middle" @tap="goto('/pages/index/storeCard')">
				<template #title>
					<view class="justify-middle">
						<van-image fit="cover" height="70rpx" round @click.stop="goMe"
							     :src="state.mall.headImg || 'https://img.edsmall.com/ROOT/ETao/fenxiao/h5/mall_default.png'"
							     width="70rpx" />
						<text class="pd-l-15 text-bold text-m" @click.stop="goMe">{{ state.mall.mallName }}</text>
					</view>
				</template>
				<template #right-icon>
					<view class="flex col text-center">
						<van-icon class="text-orange text-xl" name="shop" />
						<text class="text-gray text-ss block">店铺名片</text>
					</view>
				</template>
			</van-cell>
		</van-cell-group>
		<view style="font-size: 40rpx;font-weight: bold;margin-top: 36rpx">频道专区</view>
		<view style="margin-top: 16px;margin-bottom: 50rpx" >
			<view>
				<van-row gutter="8" class="pd-h-px-10">
					<van-col span="12" >
						<van-image @click="goUrl(1)" width="100%;" radius="20rpx" src="../../static/img/dz/act03.png"
						/>
						<van-image @click="goUrl(2)" width="100%" style="margin-top: 12rpx" radius="20rpx" src="../../static/img/dz/act04.png"
						/>
					</van-col>
					<van-col span="12">
						<van-image @click="goUrl(3)" width="100%" radius="20rpx" src="../../static/img/dz/act02.png"
						/>
						<van-image @click="goUrl(4)" width="100%" style="margin-top: 12rpx" radius="20rpx" src="../../static/img/dz/act01.png"
						/>
					</van-col>
				</van-row>
			</view>
		</view>
		<van-tabs class="pd-b-10" v-model:active="state.tab.active" animated swipeable >
			<van-tab v-for="tItem in state.tab.tabList" :title="tItem.title">
				<van-grid class="small-padding" :column-num="4">
					<van-grid-item v-for="item in tItem.list" :key="item.id"
							   @click="changeTab(state.tab.active == 0 ? item.id : item.name)">
						<van-image width="14vw" height="14vw" :src="item.icon || item.img" lazy-load
							     loading-icon="https://img.edsmall.com/ROOT/ETao/fenxiao/h5/default.png" icon-size="18vw" />
						<text class="text-ss text-darkGray">{{ item.name }}</text>
					</van-grid-item>
				</van-grid>
			</van-tab>
		</van-tabs>
		<van-swipe v-if="state.banner.middleBanner.length > 0" lazy-render class="banner_afterTap" vertical :autoplay="3000"
			     :show-indicators="false">
			<van-swipe-item v-for="item in state.banner.middleBanner">
				<van-image :src="item.iconpath" @tap="goto(item.josnContent)" />
			</van-swipe-item>
		</van-swipe>
		<van-image class="block_title" src="https://img.edsmall.com/ROOT/ETao/fenxiao/h5/recommend_title.png" />
		<van-list v-if="state.inited" :loading="state.good.loading" :finished="state.good.finished" finished-text="没有更多了"
			    offset="10" @load="onGoodLoad">
			<van-row gutter="12" style="margin: 10rpx 20rpx;">
				<van-col  span="12"  v-for="item in state.good.list" style="margin-bottom: 25rpx">
					<ShopCard :item="item"></ShopCard>
				</van-col>
			</van-row>
		</van-list>
		<view v-if="state.good.fail" class="text-ss text-gray pd-50" @tap="failReset">请求失败，点击重试
			<van-icon name="replay" />
		</view>
		<to-top />
		<!--弹窗-->
		<!--<popup-banner v-model:show.sync="state.banner.showPopup" :list="state.banner.popupCarousel" />-->
		<van-overlay z-index="99999" :show="state.showCertificates" >
			<van-image  lazy-load :src="state.showCertificatesImg" style="width: 90%;margin: 50vw auto" />
		</van-overlay>
	</view>
</template>

<script setup lang="ts">
    import api from "@/api";
    import {  Toast } from 'vant';
    import { onBeforeMount, onMounted, reactive,ref} from 'vue';
    import toTop from '@/components/tool/toTop.vue';
    import ShopCard from '@/components/ShopCard.vue';
    import popupBanner from '@/components/tool/popupBanner.vue';
    const state = reactive({
        show:false,
        actHotSell:null,
        actEight:null,
        actLittleE:null,
        showCertificatesImg:'',
        showCertificates:false,
        keyword: "",
        actList:[],
        act_bg:'',
        banner: {
            areaBanner: [] as any,
            indexCarouselBig: [] as any,
            indexCarouselSmall: [] as any,
            middleBanner: [] as any,
            popupCarousel: [] as any,
            showPopup: false,
        },
        tab: {
            active: 0,
            tabList: [
                { title: '类型', list: [] },
                { title: '空间', list: [] },
                { title: '风格', list: [] },
            ] as any
        },
        good: {
            loading: false,
            finished: false,
            fail: false,
            page: 0,
            list: [] as any
        },
        mall: {} as any,
        inited: false
    })
    onBeforeMount(() => {
        getBanner()
        getIndexEtaomall()
        canUse()
    })
    const isAPP = ref(false)
    onMounted(() => {
        window._wx.miniProgram.getEnv((res) => {
            if (res.miniprogram) {
                isAPP.value=true
            } else {
                isAPP.value=false
            }
        });
        setTimeout(() => {
            state.inited = true
        }, 1000)
    });
    function goUrl(type) {
        console.log(type);
        if(type==1){
            uni.navigateTo({
                url: `/pages/goodList/index?sortType=0`,
            });
        }else if(type==3){
            uni.navigateTo({
                url: `/pages/goodList/index?sortType=1`,
            });
        }else if(type==2){
            uni.navigateTo({
                url: `/pages/goodList/index?search=套餐`,
            });
        }else {
            Toast('正在筹备中，敬请期待！');
        }
    }
    function goPhoneBtn(val){
        uni.makePhoneCall({
            // 手机号
            phoneNumber: val,
            // 成功回调
            success: (res) => {
            },
            // 失败回调
            fail: (res) => {
            }
        });
    }
    function searchImg() {
        const { token } = uni.getStorageSync("user") || {};
        uni.chooseImage({
            count: 1, //默认3
            sizeType: ['original','compressed'],
            success: function(res) {
                let formData1 = {
                    image:res.tempFiles[0],
                    link:'alisa1',
                    pageNum:1,
                    pageSize:20
                }
                return new Promise((resolve, reject) => {
                    uni.uploadFile({
                        header: {
                            "Authorization": token
                        },
                        url: '/pre/api/image/search',
                        timeout: 1000*6,
                        filePath:'',
                        formData: formData1,
                        success: (res) => {
                            console.log(res);
                        },
                        complete: () => {
                        },
                        fail: (res) => {
                        }
                    })
                })
            }
        });
    }
    function gotoU() {
        uni.redirectTo({
            url: "/pages/my/technicalSupport?name=index",
        });
    }
    function goToAct(id) {
        uni.navigateTo({
            url: `/pages/goodList/index?actId=${id}`,
        });
    }
    function setBgColor (bgColor) {
        return {
            background: 'url(' + bgColor + ') no-repeat 0 0',
            'background-position':'center',
            'background-sizing':'100% 100%',
            'position':'relative'
        }
    }
    function H() {
        let url = 'https://etaoact.edstao.com/etaoappv3/?userId=1'
        const weburl = encodeURIComponent(url+ '/weixin/QRCode&&name=alisa1'+ '&from=wx');
        window._wx.miniProgram.redirectTo({url:`/pages/index?weburl=${weburl}`})
    }
    function goMe() {
        uni.navigateTo({
            url: "/pages/good/contact",
        });
    }
    function goSearch() {
        uni.navigateTo({
            url: "/pages/topSearch/index",
        });
    }
    function getBanner() {
        api.indexModule().then((data: any) => {
            if (!data) return
            const { indexBanners, indexClassify } = data
            state.banner = indexBanners
            if (Object.keys(data.actBanner).length>0) {
                let imgData = data.actBanner
                state.act_bg = imgData.actBackground[0].iconpath
                if (imgData.actHotSell.length > 0) {
                    state.actHotSell = imgData.actHotSell[0]
                }
                if (imgData.actEight.length > 0) {
                    state.actEight = imgData.actEight[0]
                }
                if (imgData.actLittleE.length > 0) {
                    state.actLittleE = imgData.actLittleE[0]
                }
            }
            state.tab.tabList[0].list = [
                ...indexClassify.type.slice(0, 7),
                { img: 'https://img.edsmall.com/ROOT/ETao/fenxiao/h5/more.png', name: '更多' }
            ]
            state.tab.tabList[1].list = [
                ...indexClassify.room.slice(0, 7),
                { img: 'https://img.edsmall.com/ROOT/ETao/fenxiao/h5/more.png', name: '更多' }
            ]
            state.tab.tabList[2].list = [
                ...indexClassify.style.slice(0, 7),
                { img: 'https://img.edsmall.com/ROOT/ETao/fenxiao/h5/more.png', name: '更多' }
            ]
            if (state.banner.popupCarousel.length > 0) state.banner.showPopup = true
        })
    }
    function getIndexEtaomall() {
        api.getIndexEtaomall({ domain: uni.getStorageSync("subdomain") }).then((data: any) => {
            state.mall = data
            uni.setStorageSync('mail', state.mall)
        })
    }
    function canUse() {
        api.getCanUse({ domain: uni.getStorageSync("subdomain") }).then((data: any) => {
            if(data){
                state.showCertificates=true
                state.showCertificatesImg=data
            }
        })
    }

    function onGoodLoad() {
        if (state.good.loading || state.good.fail) return
        state.good.loading = true
        state.good.page += 1
        api.productList({ pageNum: state.good.page, sortType: 0, pageSize: 20, link: uni.getStorageSync("subdomain") }).then((data: any) => {
            if (!data) return
            if (!data||!data.hasNextPage){
                state.good.finished = true
            }
            state.good.list.push(...data.list)
        })
            .catch(() => {
                state.good.fail = true
            })
            .finally(() => {
                state.good.loading = false
            })
    }

    function failReset() {
        state.good.page -= 1
        state.good.finished = false
        state.good.fail = false
        onGoodLoad()
    }

    function goto(url: any) {
        url && uni.navigateTo({ url })
    }
    function changeTab(name: any, ZQ?: any,num?:any) {
        if (num==0) {
            Toast('正在筹备中，敬请期待！');
            return
        }
        if (ZQ == 'zq') {
            uni.navigateTo({
                url: `/pages/goodList/index?zone=${name}`,
            });
            return
        }
        if (!name || name == '更多') {
            let act = 0
            if (state.tab.active == 1) act = 6
            if (state.tab.active == 2) act = 1
            uni.navigateTo({
                url: `/pages/classify/index?act=${act}`,
            });
            return
        }
        let type = null
        if (state.tab.active == 0) {
            type = 'menuId'
        } else if (state.tab.active == 1) {
            type = 'space'
        } else if (state.tab.active == 2) {
            type = 'styleName'
        }
        uni.navigateTo({
            url: `/pages/goodList/index?${type}=${name}`,
        });
    }
</script>

<style lang="scss" scoped>

	.card-div{
		position: relative;
		margin: 0 auto;
		width: 690rpx;
		height: 317rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(0,0,0,0.12);
		border-radius: 16rpx;
		.dianpu {
			background-color: #fef9ef;
			box-sizing: content-box;
			height: 100rpx;
			line-height: 100rpx;
			border-radius: 0rpx 0rpx 16rpx 16rpx;
			position: absolute;
			bottom: 0;
			right: 0;
			left: 0;
		}
	}
	.sign {
		position: absolute;
		right: 1.8vw;
		top: 2vw;
		width: 40px;
		text-align: center;

		img {
			width: 40px;
			margin-bottom: -18px;
		}

		.discount {
			font-family: MiSans-Semibold;
			text-shadow: 0.5px 0.5px #ddd;
			color: #A532E0;
			font-weight: 1000;
			font-size: 12px;
		}
	}
	.wrapper1 {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
	}

	.block1 {
		text-align: left;
		padding: 0 10px;
		border-radius: 10px;
		width: 85%;
		background-color: #fff;
	}
	.search_bar {
		width: 100vw;
	}

	.banner_top {
		height: 43.5vw;
	}

	.banner_afterTop,
	.banner_afterTap {
		height: 20vw;
	}

	.block_title {
		margin: 40rpx auto 25rpx auto;
		width: 60vw;
	}
</style>
