<template>
  <view style="position: relative;">
	  
	  <!-- <view style="height: 66upx;"></view> -->
		  <scroll-view scroll-y="true" @scrolltolower="onScrolltolower" :style="{height: scrollViewHeight}">
		  	<view>
				<view v-if="adsList.length>0"  style="padding: 20upx 20upx 0;">
				   <swiper 
				   style="border-radius: 16upx;overflow: hidden;height: 172upx;" 
				   class="swiper" 
				   interval="5000" 
				   duration="500" 
				   autoplay="true" 
				   circular="true" 
				   :indicator-dots="adsList.length>1" 
				   indicator-color="rgba(153,153,153,1)" 
				   indicator-active-color="#FFF">
				     <swiper-item v-for="(item,index) in adsList" :key="index">
				       <image mode="widthFix" :src="item.path" style="width: 100%;border-radius: 16upx;" @tap="tapNav(item)"></image>
				     </swiper-item>
				   </swiper>
				 </view>
				<view style="position: sticky;top:0;">
					<view :class="isTapSelect?'':'twoLabelNo'" style="position: absolute;margin-left: 20upx;display: flex;z-index: 999999;background-color: white;padding-top: 20upx;padding-bottom: 10upx;">
						<view id="menuLists" style="display: flex;flex-wrap: wrap;width: 566upx;margin: 0 auto;">
							<view v-for="(item,index) in menuList" :key="index" :class="index==curActive?'activeLabel dt-text-row-one':'twoLabel dt-text-row-one'" @tap="tapActive(index,item)">{{index==0?'全部':item.name}}</view>
						</view>
							<view @tap="tapSelect" 
							 style="height: 46upx;
							 width: 46upx;
							 display: flex;
							 align-items: center;
							 justify-content: center;
							 margin-right: 10upx;
							 position: absolute;
							 background-color: white;
							 z-index: 9999999;
							 right: 0;
							 top: 20upx;">
								 <image src="http://139.9.103.171:1888/img/image/ic_select.png" style="width: 16upx;height: 16upx;"></image>
							 </view>
					</view>
				</view>
				<view style="height: 66upx"></view>
				<view  class="scroll-view-content" :style="{display:show}">
					<view v-for="(item,index) in dataList" :key="index" @tap="jumpGoodsDes(item.id||item.productId)">
					<view style="display: flex;padding: 20upx;align-items: center;">
						<image :src="item.thumbnail||item.img|| 'http://139.9.103.171:1888/img/image/goods_def.png'" mode="widthFix" style="width: 152upx;height: 152upx;"></image>
						<view style="margin-left: 24upx;flex:1;">
							<view class="two_line_ellipsis" style="color: #353535;font-size: 24upx;line-height: 28upx;" >{{item.name}}</view>
							<view class="one_line_ellipsis" style="height: 26upx;line-height: 26upx;box-sizing: content-box;font-size: 24upx;color: #A3A3A3;margin-top: 10upx;overflow: hidden;">{{item.caption?item.caption:''}}</view>
							<view style="width: 100%;height: 26upx;margin-top: 16upx;">
								<view v-if="item.promotion" style="display: flex;white-space: nowrap;">
									<view v-if="item.promotion.coupon" style="
									color: #DB4444;
									background:rgba(219,68,68,0.1);
									border-radius: 25upx;
									padding: 4rpx 8rpx;
									margin-right: 5upx;
									font-size: 20rpx;">
									{{item.promotion.coupon.name}}
									</view>
									<view v-if="item.promotion.freeShipping" style="
									color: #DB4444;
									background:rgba(219,68,68,0.1);
									border-radius: 25upx;
									padding: 4rpx 8rpx;
									margin-right: 5upx;
									font-size: 20rpx;">
									{{item.promotion.freeShipping.name}}
									</view>
									<view v-if="item.promotion.gifts.length>0" 
									v-for="(giftsItem,giftsIndex) in item.promotion.gifts"
									:key="giftsIndex"
									style="
									color: #DB4444;
									background:rgba(219,68,68,0.1);
									border-radius: 25upx;
									padding: 4rpx 8rpx;
									margin-right: 5upx;
									font-size: 20rpx;">
									{{giftsItem.name}}
									</view>
									<view v-if="item.promotion.moneyOffs.length>0"
									 v-for="(moneyOffsItem,moneyOffsIndex) in item.promotion.moneyOffs"
									 :key="moneyOffsIndex"
									style="
									color: #444FDB;
									background:rgba(68,79,219,0.1);
									border-radius: 25upx;
									padding: 4rpx 8rpx;
									margin-right: 5upx;
									font-size: 20rpx;">
									{{moneyOffsItem.name}}
									</view>
								</view>
							</view>
							<view style="
							margin-bottom: 18upx;
							border-radius: 4upx;
							line-height: 16upx;
							padding: 0 4upx;
							font-size: 10upx;
							color: #DB4444;"></view>
							<view style="display: flex;align-items: center;justify-content: space-between;">
								<view style="display: flex;align-items: center;">
									<view style="color: #DB4444;font-size: 14upx;margin-top: 10upx;">￥</view>
									<view style="color: #DB4444;font-size: 26upx;">{{item.price}}</view>
									<view style="color: #A3A3A3;font-size: 20upx;margin-left: 20upx;text-decoration: line-through;margin-top: 8upx;">{{item.marketPrice?"￥"+item.marketPrice:''}}</view>
								</view>
								<image src="http://139.9.103.171:1888/img/image/shop_car_icon.png" mode="widthFix" style="width: 40upx;height: 40upx;" ></image>
							</view>
						</view>
					</view>
					<view style="background-color: #f2f2f2;height: 2upx;margin: 0 20upx;"></view>
				</view>
				</view>
				<DtNoMore v-if="isNoMore" />
				<DtEmpty :type="emptyType" :wrapBgColor="white"/>
				<view style="height: 25upx;"></view>
			</view>
		  </scroll-view>
      
  </view>
</template>
<script>
import DtGoodsList from './dt_goods_list.vue'
import DtEmpty from './dt_empty.vue'
import DtNoMore from './dt_no_more.vue'
export default {
  components: {
    DtGoodsList,
    DtEmpty,
    DtNoMore
  },
  data() {
    return {
		white:'white',
      memberId: '',
      productCategoryId: '',
      paramsList: [],
      dataList: [],
      curActive: 0,
      typeList: {
        0: null,
        1: {
          k: 'sales',
          t: 3,
          v: 1
        },
        2: {
          k: 'price',
          t: 3,
          v: 1
        }
      },
	  scrollViewHeight:0,
	  show:'block',
	  isTapSelect:false,
	  rightHeight:0
    }
  },
  props:{
	  menuList:{
		  type:Array,
		  default:[]
	  },
	  adsList:{
		  type:Array,
		  default:[]
	  }
  },
  created() {
	  this.memberId = this.$auth.getMemberId();
  },
  methods: {
	  tapNav(item){
	  		  let type = item.type; //0:文本广告，1：图片广告 2：会场广告
	  		  if([0,"0"].includes(type)&&item.content){
	  		  	uni.navigateTo({
	  		  	  url: '/pagesM/pages/common/ad_textView?content=' + item.content
	  		  	});
	  		  }else if([1,"1"].includes(type)&&item.productId){
	  		  	uni.navigateTo({
	  		  	  url: '/pagesM/pages/goods_des?id=' + item.productId
	  		  	});
	  		  }else if([2,'2'].include(type)&&item.url){
	  		  	let  url = item.url;
	  		  	if (this.memberId){
	  		  		 url = url + this.memberId;
	  		  		 console.log('banner 链接 = ' + url)
	  		  		 uni.navigateTo({
	  		  		   url: '/pagesM/pages/common/webview?url=' + encodeURIComponent(url)
	  		  		 });
	  		  	}
	  		}
	  }, 
	  getswipHeight(adsList){
		  
		  let res = uni.getSystemInfoSync();
		  let clientHeight = res.windowHeight;
		  let clientWidth = res.windowWidth;
		  let upxR = 750 / clientWidth;
		  let left = clientHeight * upxR - 105;
		  let leftHeight = uni.upx2px(left);
		  let right = clientHeight * upxR;
		
		  if(adsList.length>0){
			   this.rightHeight = uni.upx2px(right)-26
		  }else{
				this.rightHeight = uni.upx2px(right)
		  }
		  // this.winLeftHeight = leftHeight;
		  this.scrollViewHeight = this.rightHeight+'px';
	  },
	  tapSelect(){
		this.isTapSelect = !this.isTapSelect  
	  },
	  onLoadPage(){
		  this.queryDataList();
	  },
	  jumpGoodsDes(id) {
	    console.log(id);
	    uni.navigateTo({
	      url: "/pagesM/pages/goods_des?id=" + id
	    })
	  },
    tapActive(idx,item) {
		console.log(item)
      this.curActive = idx
      this.productCategoryId = item.id;
      this.isNoMore = false
      this.pageIndex = 0
      this.dataList.length = 0
      this.queryDataList();
	  this.isTapSelect = false;
    },

    getParams() {
      let param = this.typeList[this.curActive]
      let paramsList = this.paramsList.slice(0)
      console.log(96, paramsList)
      if (this.productCategoryId) {
        paramsList.unshift({
          k: 'productCategory.id',
          t: 1,
          v: this.productCategoryId
        })
      }
      console.log(104, paramsList, param)
      if (param) {
        paramsList.unshift(param)
      }
      console.log(108, paramsList)
      return paramsList
    },
    // 搜索
    async queryDataList() {
      let params = this.getParams()
      console.log(112, params)
      let resp = await this.$api.searchProduct({
        _isShowLoading: true,
        pageNo: this.pageIndex,
        pageSize: this.pageSize,
        memberId: this.memberId,
        params: params
      })
      let list = this.getDataList(resp)
      this.dataList = this.dataList.concat(list);
	  const query = uni.createSelectorQuery().in(this);
	  query.select('#menuLists').boundingClientRect(data => {
	    console.log('打印高度',data); 
	  			let height= this.rightHeight - data.height;
				 this.scrollViewHeight = height+'px';
	  }).exec();
	  
	  if(this.emptyType==0){
		  this.show = 'block'
	  }else{
		  this.show = 'none'
	  }
    },
	onScrolltolower(){
		this.onReachBottomPage()
	}
  },
  
}
</script>

<style lang="scss" scoped>
	.activeLabel{
		width: 120upx;
		height:46upx;
		text-align: center;
		line-height: 46upx;
		border-radius: 4upx;
		color: #DB4444;
		background:rgba(219,68,68,0.24);
		font-size: 24upx;
		margin-right: 10upx;
		margin-bottom: 10upx;
	}
	.twoLabel{
		width: 120upx;
		height:46upx;
		text-align: center;
		line-height: 46upx;
		border-radius: 4upx;
		background-color: #EBEBEB;
		color: #999999;
		font-size: 24upx;
		margin-right: 10upx;
		margin-bottom: 10upx;
	}
	.scroll-view-content{
		flex:1
	}
	.twoLabelNo{
		height: 46upx;
		overflow: hidden;
	}

</style>