<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="搜索E淘商城商品" 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>
    <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>
      <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>
	  <!--活动入口 v-if="item.contentNumber=='493002004'"x新品-->
	  <div v-if="state.act_bg">
		  <div style="position: relative">
			  <img :src="state.act_bg" alt="" style="width: 98.5vw">
			  <div style="position: absolute;top: 33.2vw;">
				  <!--<div v-for="item in state.actList" style="display: inline-block">-->
				  <!--<img @click="goToAct(item.josnContent)" :src="item.iconpath"-->
				  <!--style="margin-left: .8vw;margin-bottom: .6vw;margin-right: .8vw;width: 42vw">-->
				  <!--</div>-->
				  <div style="display: flex">
					  <div>
						  <img @click="goToAct(state.actHotSell.josnContent)"
							 :src="state.actHotSell.iconpath"
							 style="padding-left: 7.5vw ;margin-bottom: .6vw;width: 42vw">
					  </div>
					  <div>
						  <img @click="goToAct(state.actEight.josnContent)" :src="state.actEight.iconpath"
							 style="margin-bottom: .6vw;width: 42vw;padding-right: 5.5vw">
						  <img @click="goToAct(state.actLittleE.josnContent)"
							 :src="state.actLittleE.iconpath"
							 style="margin-bottom: .6vw;width: 42vw;padding-right: 5.5vw">
					  </div>
				  </div>
			  </div>
		  </div>
	  </div>
    <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>
    <template v-if="state.banner.areaBanner.length > 0&&false">
      <van-image class="block_title" src="https://img.edsmall.com/ROOT/ETao/fenxiao/h5/area_title.png" />
      <view>
        <view v-if="state.banner.areaBanner.length == 6">
          <van-row gutter="8" class="pd-h-px-10">
            <van-col span="12">
              <van-image width="100%" radius="20rpx" :src="state.banner.areaBanner[0].iconpath"
                @tap="changeTab(state.banner.areaBanner[0].josnContent, 'zq')" />
            </van-col>
            <van-col span="12" class="flex col justify-between">
              <van-image width="100%" radius="20rpx" :src="state.banner.areaBanner[1].iconpath"
                @tap="changeTab(state.banner.areaBanner[1].josnContent, 'zq')" />
              <van-image width="100%" radius="20rpx" :src="state.banner.areaBanner[2].iconpath"
                @tap="changeTab(state.banner.areaBanner[2].josnContent, 'zq')" />
            </van-col>
          </van-row>
          <van-row gutter="8" class="pd-h-px-10 pd-t-px-10">
            <van-col span="12" class="flex col justify-between">
              <van-image width="100%" radius="20rpx" :src="state.banner.areaBanner[3].iconpath"
                @tap="changeTab(state.banner.areaBanner[3].josnContent, 'zq',state.banner.areaBanner[3].ifCanEnter)" />
              <van-image width="100%" radius="20rpx" :src="state.banner.areaBanner[4].iconpath"
                @tap="changeTab(state.banner.areaBanner[4].josnContent, 'zq',)" />
            </van-col>
            <van-col span="12">
              <van-image width="100%" radius="20rpx" :src="state.banner.areaBanner[5].iconpath"
                @tap="changeTab(state.banner.areaBanner[5].josnContent, 'zq',state.banner.areaBanner[5].ifCanEnter)" />
            </van-col>
          </van-row>
        </view>
      </view>
    </template>
    <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-grid :center="false" :column-num="2" :gutter="3">
        <van-grid-item class="text-left" v-for="item in state.good.list" style="border-radius: 4px"
          @tap="goto(`/pages/good/detail?skuId=${item.skuId}&spuId=${item.spuId}`)">

          <van-image class="self_center" width="30vw" height="30vw" lazy-load :src="item.mainImg"
            loading-icon="https://img.edsmall.com/ROOT/ETao/fenxiao/h5/default.png" icon-size="30vw" />
		  <!--活动角标-->
		  <div class="sign" v-if="item.subScriptImgUrl">
			  <van-image  :src="item.subScriptImgUrl" alt="" />
			  <div class="discount"  style="color: rgba(247, 103, 67, 1)">{{item.discount}}</div>
		  </div>
          <view  :class="[item.zoneIcon||item.isVideoIcon||item.coTip==1?'mg-t-30-m':'']">
		    <span v-if="item.coTip==1"   class="host_tip" style="position: relative;z-index: 9999">热销</span>
		    <span v-if="item.leftDownIcons&&item.leftDownIcons.length>0">
			    <span  v-for="item1 in item.leftDownIcons" style="margin-right: 3px">
			<van-image  width="60rpx" height="32rpx" :src="item1" />
			    </span>
		    </span>
		    <van-image v-if="item.isVideoIcon" class="mg-l-5" width="32rpx" height="32rpx"
              src="/static/img/play.png" />
          </view>
          <text class="text-s ellipsis line_over2 pd-t-10" style="width: 320rpx;height: 32px;margin-bottom:6px">
            {{ item.title }}
          </text>
          <text class="text-ss">{{ item.size }}</text>
          <text class="text-gray text-ss"></text>
		  <!--未开启设计师模式-->
		  <div v-if="item.salePrice">
			  <view v-if="!item.actPrice" class="text-gray text-ss line-through">零售价￥{{ item.productPrice }}</view>
			  <view v-if="item.actPrice">
				  <view class="text-gray text-ss">零售价￥{{ item.productPrice }}</view>
				  <view class="text-gray text-ss line-through">优惠价￥{{ item.salePrice }}</view>
				  <view class="text-orange text-ss">活动价￥
					  <text class="text-bold text-l">{{ item.actPrice }}</text>
				  </view>
			  </view>
			  <view v-else class="text-orange text-ss">优惠价￥
				  <text class="text-bold text-l">{{ item.salePrice }}</text>
			  </view>
		  </div>
		  <div v-else class="text-orange" style="font-size: 13px;margin-top: 3px">
			  <view v-if="item.actPrice">
				  <view class="text-gray text-ss line-through">零售价￥{{ item.productPrice }}</view>
				  <view class="text-orange text-ss">活动价￥
					  <text class="text-bold text-l">{{ item.actPrice }}</text>
				  </view>
			  </view>
			  <text v-else class="text-bold text-ss" >零售价￥{{ item.productPrice }}</text>
		  </div>
        </van-grid-item>
      </van-grid>
    </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-button @click="state.showCertificates=false"  size="small" type="primary" style="padding: 16px 20px;background: #ff6800;margin-top: -50px">知道了</van-button>-->

		  <!--<div class="wrapper1" @click.stop>-->
			  <!--<div class="block1" >-->
				  <!--<p style="margin: 18px auto;text-align: center">温馨提醒</p>-->
				  <!--<div style="line-height: 1.4rem">-->
					  <!--很抱歉，根据《电子商务法》相关法律法规之规定，因商家未能公示相关证照信息，-->
					  <!--暂时无法正常向您提供商城相关服务，请商家根据指引尽快补充证照信息，-->
					  <!--给您带来的不便，敬请见谅。-->
				  <!--</div>-->
				  <!--<div style="text-align: center;margin-top: 4vw;margin-bottom: 4vw">-->
				  <!--</div>-->
			  <!--</div>-->

		  <!--</div>-->
	  </van-overlay>
	  <van-popup v-model:show="state.show"    position="bottom" :style="{ height: '100%' }" >
		  <van-sticky>
			  <view class="search_bar sh" style="z-index: 99999999999">
				  识别到一下商品
			  </view>
		  </van-sticky>
		  <div style="margin: 20px auto">
			  <van-list v-if="state.inited" :loading="state.good.loading" :finished="state.good.finished" finished-text="没有更多了"
					offset="10" @load="onGoodLoad">
				  <van-grid :center="false" :column-num="2" :gutter="7">
					  <van-grid-item class="text-left" v-for="item in state.good.list" style="border-radius: 4px"
							     @tap="goto(`/pages/good/detail?skuId=${item.skuId}&spuId=${item.spuId}`)">

						  <van-image class="self_center" width="30vw" height="30vw" lazy-load :src="item.mainImg"
								 loading-icon="https://img.edsmall.com/ROOT/ETao/fenxiao/h5/default.png" icon-size="30vw" />
						  <!--活动角标-->
						  <div class="sign" v-if="item.subScriptImgUrl">
							  <van-image  :src="item.subScriptImgUrl" alt="" />
							  <div class="discount"  style="color: rgba(247, 103, 67, 1)">{{item.discount}}</div>
						  </div>
						  <view  :class="[item.zoneIcon||item.isVideoIcon||item.coTip==1?'mg-t-30-m':'']">
							  <span v-if="item.coTip==1"   class="host_tip" style="position: relative;z-index: 9999">热销</span>
							  <span v-if="item.leftDownIcons&&item.leftDownIcons.length>0">
			    <span  v-for="item1 in item.leftDownIcons" style="margin-right: 3px">
			<van-image  width="60rpx" height="32rpx" :src="item1" />
			    </span>
		    </span>
							  <van-image v-if="item.isVideoIcon" class="mg-l-5" width="32rpx" height="32rpx"
									 src="/static/img/play.png" />
						  </view>
						  <text class="text-s ellipsis line_over2 pd-t-10" style="width: 320rpx;height: 32px;margin-bottom:6px">
							  {{ item.title }}
						  </text>
						  <text class="text-ss">{{ item.size }}</text>
						  <text class="text-gray text-ss"></text>
						  <!--未开启设计师模式-->
						  <div v-if="item.salePrice">
							  <view v-if="!item.actPrice" class="text-gray text-ss line-through">零售价￥{{ item.productPrice }}</view>
							  <view v-if="item.actPrice">
								  <view class="text-gray text-ss">零售价￥{{ item.productPrice }}</view>
								  <view class="text-gray text-ss line-through">优惠价￥{{ item.salePrice }}</view>
								  <view class="text-orange text-ss">活动价￥
									  <text class="text-bold text-l">{{ item.actPrice }}</text>
								  </view>
							  </view>
							  <view v-else class="text-orange text-ss">优惠价￥
								  <text class="text-bold text-l">{{ item.salePrice }}</text>
							  </view>
						  </div>
						  <div v-else class="text-orange" style="font-size: 13px;margin-top: 3px">
							  <view v-if="item.actPrice">
								  <view class="text-gray text-ss line-through">零售价￥{{ item.productPrice }}</view>
								  <view class="text-orange text-ss">活动价￥
									  <text class="text-bold text-l">{{ item.actPrice }}</text>
								  </view>
							  </view>
							  <text v-else class="text-bold text-ss" >零售价￥{{ item.productPrice }}</text>
						  </div>
					  </van-grid-item>
				  </van-grid>
			  </van-list>
		  </div>
	  </van-popup>
  </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 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 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>
	.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>
