<template>
	<view class="">
		<!-- tab切换 -->
		<view class="projuctTab flex">
			<view class="tabitems flex1" :class="{active:tabactive==1}" @tap="taggletab(1)">
				<view class="tabtitle">开始活动</view>
				<!-- （{{count[0]}}） -->
			</view>
			<view class="tabitems flex1" :class="{active:tabactive==2}" @tap="taggletab(2)">
				<view class="tabtitle">过期活动</view>
				<!-- （{{count[1]}}） -->
			</view>
		</view>


		<view class="projuctlist" :hidden="!(tabactive==1)">
			<view class="" v-if="start_activity.length>0">
				<checkbox-group>
					<!-- 单个商品 -->
					<view class="itempro flex " v-for="(item,index) in start_activity" :key="index" @click="jumpDetail(item.activity_id)">
						<!-- <label class="ali-c">
							<checkbox :value="item.id.toString()" :checked="item.checked==true" />
						</label> -->
						<image class="thumbnail" :src="staticUrl + item.picture" mode=""></image>
						<view class="infobox" style="width: 70%;">

							<view class="title oneline" style="height:45upx ;">{{item.goods_name}}</view>

							<!-- <view class="time">上架时间：{{item.create_time}}</view> -->
							<view>
								<view style="font-size:26rpx;font-weight:bold;">领取时间：</view>
								<view style="font-size:24rpx;color:#656565">{{item.start}}—{{item.end}}</view>
							</view>
						</view>
						<view class="btnbox flex">
							<!-- <view class="btns btnboxdel" @tap="deleteEleProductfun(item,index)">删 除</view> -->
							<!-- <view class="btns btnboxxj" @tap="Selectiondata(item)" v-if="tabactive==1 && isselect==1">加入活动</view> -->
							<!-- <view class="btns btnboxxj" @tap="sold_outfun(item.id,1,index)" v-else-if="tabactive==1">下 架</view> -->
							<!-- <view class="btns btnboxxj"  @tap="sold_outfun(item.id,0,index)"  v-show="tabactive==2">上 架</view> -->
							<!-- <view class="btns btnboxxj" @click="setSpecs(item.product_id)" >规格</view> -->
							<view>
								<view class="btnboxdel flex" style="align-items: center;" @click.stop="switch1Change">
									活动开关：
									<switch :data-activity_id="item.activity_id" :checked="item.state==1" @change="switch1Change" />
									<view class="btns btnboxdel" @tap.stop="tochanges(item,index)">修 改</view>
								</view>
							</view>

						</view>
					</view>
				</checkbox-group>
			</view>

			<view v-if="start_activity.length <= 0" style="text-align: center;width: 100%;height:1000upx;line-height: 1000upx;font-size: 50upx;color:#8C8C8C ;">
				<image src="https://luma.jxdsy.cn//static/applet5/images/uts/meiyoule.png" mode=""></image>
			</view>

		</view>

		<view class="projuctlist" :hidden="!(tabactive==2)">
			<view class="" v-if="end_activity.length > 0">
				<checkbox-group>
					<!-- 单个商品 -->
					<view class="itempro flex " v-for="(item,index) in end_activity" :key="index" @click="jumpDetail(item.activity_id)">
						<!-- <label class="ali-c">
							<checkbox :value="item.id.toString()" :checked="item.checked==true" />
						</label> -->
						<image class="thumbnail" :src="staticUrl + item.picture" mode=""></image>
						<view class="infobox" style="width: 70%;">
							<view class="title oneline">{{item.goods_name}}</view>
							<!-- <view class="time">上架时间：{{item.create_time}}</view> -->
							<view>
								<view style="font-size:26rpx;font-weight:bold;">领取时间：</view>
								<view style="font-size:24rpx;color:#656565">{{item.start}}—{{item.end}}</view>
							</view>
						</view>
						<view class="btnbox flex">
							<!-- <view class="btns btnboxdel" @tap="deleteEleProductfun(item,index)">删 除</view> -->
							<!-- <view class="btns btnboxxj"  @tap="Selectiondata(item)"  v-if="tabactive==1 && isselect==1">加入活动</view> -->
							<!-- <view class="btns btnboxxj" @tap="sold_outfun(item.id,1,index)" v-else-if="tabactive==1">下 架</view> -->
							<!-- <view class="btns btnboxxj"  @tap="sold_outfun(item.id,0,index)"  v-show="tabactive==2">上 架</view> -->
							<!-- <view class="btns btnboxxj" @click="setSpecs(item.product_id)" >规格</view> -->
							<!-- <view class="btnboxdel">
							    活动开关：<switch :checked="chdecked" @change="switch1Change" />  
							 </view>
							<view class="btns btnboxdel" @tap="tochanges(item,index)">修 改</view> -->
						</view>
					</view>
				</checkbox-group>
			</view>
			<view v-if="end_activity.length <= 0" style="text-align: center;width: 100%;height:1000upx;line-height: 1000upx;font-size: 50upx;color:#8C8C8C ;">
				<image src="https://luma.jxdsy.cn//static/applet5/images/uts/meiyoule.png" mode=""></image>
			</view>
		</view>


		<view class="footchindbox flex ali-c jus-b">
			<navigator url="/pages/publishActivities/publishActivity/publishActivity" class="submitbtns">发布活动</navigator>
		</view>
	</view>
</template>

<script>
	import {
		activity_select,
		activity_close
	} from '@/utils/api/merchant.js';
	export default {
		data() {
			return {
				tabactive: 1,
				page: 0,
				start_activity: [],
				end_activity: [],
				endpages: 0,
				startpages: 0

			}
		},
		computed: {
			staticUrl() { //静态资源地址
				return this.$store.state.staticUrl;
			}
		},
		onLoad() {
			console.log('onl;oafdas')
			let that = this
			uni.getStorage({
				key: 'userInfo',
				success(res) {
					that.shop_id = res.data.shop_id
				}
			})
		},
		//下拉刷新
		onPullDownRefresh() {
			if (this.tabactive == 1) {
				this.startpages = 0
				activity_select({
					shop_id: this.shop_id,
					page: 0,
					is_date: 2
				}).then(res => {
					if (res.code == 0) {
						this.start_activity = res.data.data
						uni.stopPullDownRefresh();
					}
				})

			} else if (this.tabactive == 2) {
				this.endpages = 0
				activity_select({
					shop_id: this.shop_id,
					page: 0,
					is_date: 1
				}).then(res => {
					if (res.code == 0) {
						this.end_activity = res.data.data
						uni.stopPullDownRefresh();
					}
				})

			}

		},
		//上拉触底
		onReachBottom() {
			if (this.tabactive == 1) {
				activity_select({
					shop_id: this.shop_id,
					page: ++this.startpages,
					is_date: 2
				}).then(res => {
					if (res.code == 0) {
						this.start_activity = [...this.start_activity, ...res.data.data]
					}
				})

			} else if (this.tabactive == 2) {
				activity_select({
					shop_id: this.shop_id,
					page: ++this.endpages,
					is_date: 1
				}).then(res => {
					if (res.code == 0) {
						this.end_activity = [...this.end_activity, ...res.data.data]
					}
				})
			}
		},

		onShow() {
			this.endpages = 0
			this.startpages = 0
			if (this.tabactive == 1) {
				activity_select({
					shop_id: this.shop_id,
					page: 0,
					is_date: 2
				}).then(res => {
					if (res.code == 0) {
						this.start_activity = res.data.data
					}
				})
			} else if (this.tabactive == 2) {
				activity_select({
					shop_id: this.shop_id,
					page: 0,
					is_date: 1
				}).then(res => {
					if (res.code == 0) {
						this.end_activity = res.data.data
					}
				})
			}

		},

		methods: {

			jumpDetail(activity_id) {
				uni.navigateTo({
					url: `/pages/publishActivities/activityDetail/activityDetail?activity_id=${activity_id}`
				})
			},
			//修改活动

			tochanges(data, index) {
				uni.navigateTo({
					url: `/pages/publishActivities/publishActivity/publishActivity?id=${data.activity_id}&type=edit`,
				})
			},

			// 查找产品
			findEleProduct() {

			},

			switch1Change(e) {
				if (e.type == 'change') {
					console.log(e)
					if (e.detail.value) {
						activity_close({
							shop_id: this.shop_id,
							activity_id: e.currentTarget.dataset.activity_id,
							state: 1
						}).then(res => {
							if (res.code == 0) {

								this.$api.msg('活动开启')
							}
						})
					} else {
						activity_close({
							shop_id: this.shop_id,
							activity_id: e.currentTarget.dataset.activity_id,
							state: 2
						}).then(res => {
							if (res.code == 0) {
								this.$api.msg('活动关闭')
							}
						})
					}
				} else {
					return;
				}

			},
			//交互end
			taggletab(index) {
				this.tabactive = index;
				if (index == 1) {
					if (this.start_activity.length == 0) {
						activity_select({
							shop_id: this.shop_id,
							page: 0,
							is_date: 2
						}).then(res => {
							if (res.code == 0) {
								this.start_activity = res.data.data
							}
						})
					} else {
						return;
					}
				} else if (index == 2) {
					if (this.end_activity.length == 0) {
						activity_select({
							shop_id: this.shop_id,
							page: 0,
							is_date: 1
						}).then(res => {
							if (res.code == 0) {
								this.end_activity = res.data.data
							}
						})
					} else {
						return;
					}
				}

			},
		}

	}
</script>

<style lang="scss">
	.projuctlist {
		margin: 130upx 24upx;
		padding-top: 18upx;
		background: rgba(255, 255, 255, 1);
		border-radius: 14upx;

		.itempro {
			position: relative;
			border-bottom: 1px solid rgba(220, 220, 220, 1);
			padding: 20upx;

			.thumbnail {
				width: 170upx;
				height: 170upx;
				border-radius: 6upx;
				margin-right: 27upx;
				margin-left: 20upx;
			}

			.infobox {

				.title {
					font-size: 34upx;
					color: rgba(51, 51, 51, 1);
					//margin-bottom: 5upx;
				}

				.time {
					//margin-bottom: 5upx;
				}

				.time,
				.price {
					font-size: 30upx;
					color: rgba(153, 153, 153, 1);
				}
			}

			.btnbox {
				position: absolute;
				bottom: 5px;
				right: 5px;

				.btns {
					width: 100upx;
					height: 60upx;
					line-height: 60upx;
					text-align: center;
					border: 1upx solid rgba(160, 160, 160, 1);
					border-radius: 4upx;
					font-size: 30upx;
					color: rgba(0, 0, 0, 1);
				}

				.btnboxdel {
					margin-left: 16upx;
				}

				.btnboxxj {
					background: #FF6900;
					color: #FFFFFF;
					border: 0;
					margin-left: 16upx;
				}
			}
		}

	}

	.projuctTab {
		background: #FFFFFF;
		width: 100%;
		height: 98upx;
		line-height: 98upx;
		position: fixed;
		top: 0;
		/* #ifdef H5 */
		top: 86upx;
		/* #endif */
		left: 0;
		z-index: 99;

		.tabitems {
			text-align: center;

			.tabtitle {
				text-align: center;
				height: 98upx;
				line-height: 98upx;
				font-size: 30upx;
				display: inline-block;
				box-sizing: border-box;
				color: #333333;
			}
		}

		.tabitems.active {
			.tabtitle {
				font-family: PingFang SC;
				font-weight: bold;
				color: #FF6900;
				border-bottom: 1px solid #FF6900;
			}
		}

	}

	.footchindbox {
		width: 100%;
		height: 117upx;
		background: rgba(255, 255, 255, 1);
		padding: 16upx 24upx;
		position: fixed;
		bottom: 0;
		left: 0;

		.rightbtn {
			.btns {
				width: 163upx;
				height: 84upx;
				line-height: 84upx;
				text-align: center;
				border: 1px solid rgba(160, 160, 160, 1);
				border-radius: 6upx;
				color: #000000;
				font-size: 35upx;

			}

			.btns1 {}

			.btns2 {
				margin-left: 28upx;
				background: rgba(255, 102, 0, 1);
				color: #FFFFFF;
				border: 0;
			}
		}
	}

	.submitbtns {
		background: #FF6900;
		height: 88upx;
		line-height: 88upx;
		color: #FFFFFF;
		text-align: center;
		width: 100%;
		border-radius: 14upx;
	}
</style>
