<template>
  <view class="themes-activity position-a" :style="{height: 'calc(100vh - ' + hearHeight + ')' }">
    <view class="content" >
		<view class="title-box flex j-center" >
			<view class="flex">
				<image class="t-bg-l" :src="event_rul + '/static/images/bl/bl-ttr.png'" mode="widthFix"></image>
				<text class="t-bg-c font-w"  mode="widthFix">团购活动</text>
				<image class="t-bg-r" :src="event_rul + '/static/images/bl/bl-ttl.png'" mode="widthFix"></image>
			</view>
		</view>
      
      <view class="nav-list flex j-between al-item-center">
      
        <view
        @tap.stop="sortClick"
        class="search-navbar-item"
        :style="!field || field == 'sort' ? 'color:' + '#ED5925' : ''"
        data-field="sort"
        data-order="desc"
        >推荐</view
        >
        <view
        @tap.stop="sortClick"
        class="search-navbar-item"
        :style="field == 'sales' ? 'color:' + '#ED5925' : ''"
        data-field="sales"
        data-order="desc"
        >销量</view
        >
        <view
        @tap.stop="sortClick"
        class="search-navbar-item"
        data-field="sell_price"
        :data-order="order == 'asc' ? 'desc' : 'asc'"
        >
        <text :style="field == 'sell_price' ? 'color:' + '#ED5925' : ''"
          >价格</text
        >
        <text
          style="font-size: 26rpx"
          class="iconfont icon-danbianjiantou1"
          :style="{
          color:
            field == 'sell_price' && order == 'asc' ? '#ED5925' : '#999',
          }"
        ></text>
        <text
          style="font-size: 26rpx; margin-left: -10rpx"
          class="iconfont icon-danbianjiantou"
          :style="{
          color:
            field == 'sell_price' && order == 'desc' ? '#ED5925' : '#999',
          }"
        ></text>
        </view>
        <view @tap="open" >筛选 <text class="iconfont icon-shaixuan" style="font-size: 26rpx; margin-left: 4rpx;color: #999;"></text></view>
      </view>
    </view>
    <scroll-view
      class="scroll-list lise-t"
      :scroll-y="true"
      @scrolltolower="getmorecomment"
      v-if="shopTuangou && shopTuangou.length > 0"
    >
      <themes-tuangou-item v-if="isActivity" :data="shopTuangou" :timestamp="timestamp" :menuindex="menuindex"></themes-tuangou-item>
<!--      <themes-shop
        :mgtop="0"
        :mgright="30"
        :mgleft="30"
        :mgbottom="2"
        v-else
        :shopProduct="shopTuangou"
      ></themes-shop> -->
		<view class="flex flex-colum" v-else>
			<image class="n-thing" :src="event_rul + '/static/images/n-thing.png'" mode="widthFix"></image>
			<view class="text-center color-gray">暂无活动～</view>
		</view>
    </scroll-view>
	<view v-if="visibleSync" :class="{ 'uni-drawer--visible': showDrawer }" class="uni-drawer" @touchmove.stop.prevent="clear">
		<view class="uni-drawer__mask" :class="{ 'uni-drawer__mask--visible': showDrawer && mask }" @tap="close('mask')"></view>
		<view class="uni-drawer__content" :class="{'uni-drawer--right': rightMode,'uni-drawer--left': !rightMode, 'uni-drawer__content--visible': showDrawer,}" :style="{ width: drawerWidth + 'vw' }">
			<view class="bolting-box">
			<view class="name">筛选</view>
			<view class="title">商品分类</view>
			<view class="content flex flex-w">
			<view class="content-itm">
			  <view class="text" :style="{color: boltingListIndex === 0 ? '#CE0000' : '',backgroundColor: boltingListIndex === 0 ? '#FFDCD9' : '#F7F7F7 ',}" @tap="bolting(0)">
				  全部
			  </view>
			  <block v-for="(item, idx) in boltingList" :key="idx">
				<view class="text" v-show="boltingList.length != 0" :style="{color: boltingListIndex === idx + 1 ? '#CE0000' : '', backgroundColor: boltingListIndex === idx + 1 ? '#FFDCD9' : '#F7F7F7 ', }" @tap="bolting(idx + 1)">
					{{ item.name }}
				</view>
			  </block>
			</view>
	      </view>
	      <view class="bolting-box-b flex j-between">
	        <view class="res btn" @tap="boltingAll()">重置</view>
	        <view class="comf btn " :style="{ 'background-color': '#8DB400' }" @tap="filterConfirm(cpid)" >确定</view>
		  </view>
	    </view>
	  </view>
	</view>
    <loading v-if="loading"></loading>
    <nodata text="没有查找到相关商品" v-if="nodata"></nodata>
    <loading v-if="loading"></loading>
  </view>
</template>

<script>
import { myMixin } from '../logic/activity.js';
import themesHead from "./components/themes-head.vue";
import themesShop from "./components/themes-shop.vue";
import themesTuangouItem from "./components/themes-tuangou-item.vue";

export default {
  mixins: [myMixin],
  components: {
    themesHead,
    themesShop,
    themesTuangouItem
  }
};
</script>

<style lang="scss" scoped>
.themes-activity {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: #F4F4F4 ;
  overflow: hidden;
  border-radius: 20rpx 20rpx 0 0;
  
  left: 0;
  right: 0;
}
.content {
	
}
.title-box {
	height: 76rpx;
	align-items: flex-end;
	background: linear-gradient(180deg, #DFDDAD 0%, rgba(255,255,255,0) 100%);
	.t-bg-l{
		width: 60rpx;
		margin: 10rpx 4rpx 0 0;
	}
	.t-bg-c {
		font-style: italic;
		font-size: 36rpx;
		color: #8DB400;
		letter-spacing: 2px;
	}
	.t-bg-r {
		width: 60rpx;
		margin: 10rpx 0 0 10rpx;
	}
}
.nav-list {
  flex-shrink: 0;
  height: 80rpx;
  padding: 34rpx 30rpx 34rpx;
  .actived {
    color: #CE0000;
  }
  .selec {
    // font-size: 32rpx;
    transform: scale(1.1);
  }
}
.scroll-list {
  height: calc(100% - 156rpx);
  overflow-y: scroll;
  // padding: 14rpx 0 20rpx;
  & ::-webkit-scrollbar {
    display: none;
  }
}

.n-thing {
	width: 282rpx;
	margin: 100rpx auto 0;
}
.lise-t {
  // height: calc(100% - 140rpx);
}
.lise-h {
  height: 100%;
  padding-top: 10rpx;
}

.select-box {
  width: 100%;
  height: calc(100% - 80rpx);
  position: absolute;
  left: 0;
  top: 80rpx;
  .select-mxk {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 66;
    background-color: rgba(0, 0, 0, 0.4);
  }

  .select-box-content {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 68;

    .content-item {
      border-top: 2rpx solid #f2f2f4;
    }
  }
}
// 筛选
.uni-drawer {
  height: 100%;
  width: 100%;
  /* #ifndef APP-NVUE */
  display: block;
  /* #endif */
  position: absolute;
  // top: 0;
  // left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  z-index: 999;
}

.uni-drawer__content {
  /* #ifndef APP-NVUE */
  display: block;
  /* #endif */
  position: absolute;
  top: 0;
  width: 220px;
  bottom: 0;
  background-color: #ffffff;
  transition: transform 0.3s ease;
}

.uni-drawer--left {
  right: 0;
  /* #ifdef APP-NVUE */
  transform: translateX(-220px);
  /* #endif */
  /* #ifndef APP-NVUE */
  transform: translateX(100%);
  /* #endif */
}

.uni-drawer--right {
  right: 0;
  /* #ifdef APP-NVUE */
  transform: translateX(220px);
  /* #endif */
  /* #ifndef APP-NVUE */
  transform: translateX(-100%);
  /* #endif */
}

.uni-drawer__content--visible {
  transform: translateX(0px);
}

.uni-drawer__mask {
  width: 100%;
  height: 100%;
  /* #ifndef APP-NVUE */
  display: block;
  /* #endif */
  opacity: 0;
  position: absolute;
  // top: 0;
  // left: 0;
  bottom: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.4);
  transition: opacity 0.3s;
}

.uni-drawer__mask--visible {
  /* #ifndef APP-NVUE */
  display: block;
  /* #endif */
  opacity: 1;
}

.bolting-box {
  padding: 30rpx;

  .name {
	// padding: 30rpx 28rpx 6rpx;
    font-size: 32rpx;
  }
  .title {
   padding: 28rpx 0;
   font-size: 24rpx;
   color: #999;
  }
  .content {
    width: 100%;
	min-height: 186rpx;
	// padding: 0 28rpx;
	
	.content-itm {
		
	}
    .text {
	  width: 150rpx;
	  height: 60rpx;
	  line-height: 60rpx;
	  text-align: center;
      margin-right: 20rpx;
      margin-bottom: 30rpx;
	  font-size: 24rpx;
      // padding: 8rpx 16rpx;
      border-radius: 4rpx;
      // background-color: #FFDCD9;
    }
  }
  .bolting-box-b {
    width: 100%;
	// height: 96rpx;
    padding-top: 60rpx;
    border-top: 2rpx solid #ECECEC;
    .btn {
      width: 214rpx;
      height: 60rpx;
      line-height: 60rpx;
      text-align: center;
      border-radius: 12rpx;
    }
    .res {
		// width: 200rpx;
        border: 2rpx solid #ECECEC;
    }
    .comf {
		color: #fff;
		
    }
  }
}
</style>