<template>
	<view>
		<view class="box">
			<view class="tabList">
				<view :class="['tabItem', currentIdx == 0 ? 'active' : '']" @click="changeIdx(0)">活动列表</view>
				<view class="line"></view>
				<view :class="['tabItem', currentIdx == 1 ? 'active' : '']" @click="changeIdx(1)">我的订单</view>
			</view>
		</view>
		<view v-if="currentIdx == 0">
			<view class="drawTit">
				领取说明
				<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/explain.png" mode="widthFix"
					@click="onChangeShow" />
			</view>
			<view class="stride">
				<view class="strideItem">
					<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/myReservation_icon1.png"
						mode="widthFix" />
					手机下单
				</view>
				<view class="stideIcon">
					<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/myres_icon.png" mode="widthFix" />
				</view>
				<view class="strideItem">
					<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/myReservation_icon2.png"
						mode="widthFix" />
					到店核销
				</view>
				<view class="stideIcon">
					<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/myres_icon.png" mode="widthFix" />
				</view>
				<view class="strideItem">
					<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/myReservation_icon3.png"
						mode="widthFix" />
					订单完成
				</view>
				<view class="stideIcon">
					<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/myres_icon.png" mode="widthFix" />
				</view>
				<view class="strideItem">
					<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/myReservation_icon4.png"
						mode="widthFix" />
					领取礼品
				</view>
			</view>
			<view class="gray"></view>


			<view class="goodsItem" v-if="goodsList.length != 0" v-for="(item, index) in goodsList" :key="index">
				<view class="goodsItem_left">
					<view class="goodsImg">
						<image :src="item.photo" mode="aspectFill" />
					</view>
					<view class="goodsmsg">
						<view class="name">{{ item.title }}</view>
						<view class="num">{{ item.total }}个</view>
					</view>
				</view>
				<view class="goodsItem_right">
					<view class="right_top" @click="desc2(item.activity_id)">查看自提点
						<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/water_filter/filter_more.png"
							mode="" />
					</view>
					<view class="right_bottom" @click="desc(item.activity_id)">去领取</view>
				</view>
			</view>
			<!-- <u-empty font-size="100rpx" icon-size="100rpx" v-if="goodsList.length == 0" text="暂无内容" mode="order"></u-empty> -->

			<div  v-if="orderList.length == 0" class="empty">
				<u-empty  icon-size="100rpx" text=" " mode="order"></u-empty>
				<div>暂无内容</div>
			</div>

		</view>
		<view class="order" v-if="currentIdx == 1">
			<u-dropdown>
				<u-dropdown-item v-model="value1" :options="options1" @change="headerSelectClick"></u-dropdown-item>
			</u-dropdown>

			<view class="main" v-if="orderList.length != 0" v-for="(item, index) in orderList" :key="index">
				<view class="item_header">
					<image src="https://huishang.magicany.cc/static/xiaoqu/2024/09/14/66e4ed5abe092.jpg" mode=""
						class="item_left" />
					<view class="item_right">
						<view class="right_left">
							<view class="shop_title">{{ item.activity.title }}</view>
							<view class="shop_num">{{ item.num }}个</view>
							<view class="shop_time">{{ item.activity.sign_end }}可用</view>
						</view>
						<view class="right_status">{{ statusType[item.status] }}</view>
					</view>
				</view>
				<view class="item_bottom" v-if="item.status === 1">
					<view class="btn" :data-id="item.activity_id" :data-orderId="item.id" data-name="modify"
						@click="headerPickClick(item.activity_id, item.id, 'modify')">修改数量</view>
					<view class="btn look" @click="headerLookClick">查看自提点</view>
					<view class="btn use" @click="headerGoPayClick(item.title, item.qrcode)">去使用</view>
				</view>
			</view>

			<div  v-if="orderList.length == 0" class="empty">
				<u-empty  icon-size="100rpx" text=" " mode="order"></u-empty>
				<div>暂无内容</div>
			</div>

		</view>
	</view>

</template>

<script>
import { request } from '../../utils/index.js';
export default {

	data() {
		return {
			statusType: {
				1: '待核销',
				2: '已核销',
				3: '已取消'
			},
			show: false,
			currentIdx: 0,
			option1: [
				{ text: '全部', value: 0 },
				{ text: '待使用', value: 1 },
				{ text: '已完成', value: 2 },
			],
			orderList: [],
			value1: 0,

			page_num: 1,
			page_size: 10,
			flag: false,

			goodsList: [],
			orderList: [],
		}
	},
	methods: {
		changeIdx(idx) {
			this.currentIdx = idx
		},
		desc2(id) {
			// 处理查看自提点逻辑
			uni.navigateTo({
				 url: `../pickPoint/index.vue?id=${id}`	
			})
		},
		desc(total, id) {
			// 处理去领取逻辑
			uni.navigateTo({
				 url: `../receive/index.vue?id=${id}`
			});
		},
		async getActiveList() {
			let that = this
			const res = await request('/wechat/shop/shop_list', 'POST', {
				page_num: that.data.page_num,
				page_size: that.data.page_size,
				user_id: 68
			}, {
				'ctoken': 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJkZWFsZXJfaWQiOjAsImV4cCI6MTc0NDI2NDk1NiwiaW1nIjoiL3N0YXRpYy9pbWFnZXMvMjAyNS0wNC0wOC9pREVEV1NDR2tnYlc4YzhhYjZkODc0MjYzMzZmODM0MzMzNTE0NjAzNjdmOC5wbmciLCJtc2hvcF9pZCI6NDIsIm9wZW5faWQiOiJvVWlWajQ5NDNDODZjTXViZU1WQnIyRktzQV8wIiwicm9sZV9pZCI6MSwidXNlcl9pZCI6NjcsInVzZXJfbmFtZSI6IuW-ruS_oeeUqOaItyIsIndzaG9wX2lkIjo0Mn0.pHtbo4GS92iq8BNHFqn7mu6-Ah07XgM_KED-Y1BzmMI',
				silent: false // 是否静默 默认为true， 展示loading 加载弹窗
			})
			console.log(res)


			// util.postUrl(apiArr.getActiveList, {
			// 	page_num: that.data.page_num,
			// 	page_size: that.data.page_size,
			// 	// community_id:''
			// }, res => {
			// 	let flag = false
			// 	if (res.rows && res.rows.length == that.data.page_size) {
			// 		flag = true
			// 	} else {
			// 		flag = false
			// 	}
			// 	res.rows.forEach(item => {
			// 		item.photo = util.img_url + item.photo
			// 	})
			// 	that.setData({
			// 		goodsList: that.data.goodsList.concat(res.rows || []),
			// 		page_num: that.data.page_num + 1,
			// 		flag
			// 	})
			// })
		},
	},
	onReady() {

	},
	onload(option) {
		that.getActiveList()
	},
}
</script>

<style>

.empty{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	color: #999999;
	margin-top: 80rpx;
}

image {
	width: 100%;
	height: 100%;
}

.tabList {
	display: flex;
	align-items: center;
	width: 100%;
	background: #F9F9F9;
	padding: 30rpx 5rpx;
}

.tabItem {
	flex: 1;
	text-align: center;
	font-weight: 400;
	font-size: 28rpx;
	color: #555555;
	position: relative;
}

.active {
	font-weight: bold;
	font-size: 32rpx;
	color: #222222;
	position: relative;
}

.active::after {
	content: '';
	filter: blur(10.899999618530273rpx);
	width: 368rpx;
	height: 10rpx;
	position: absolute;
	left: 50%;
	bottom: -30rpx;
	transform: translateX(-50%);
	background: #FF512A;
}

.active::before {
	content: '';
	width: 368rpx;
	height: 10rpx;
	position: absolute;
	left: 50%;
	bottom: -30rpx;
	transform: translateX(-50%);
	background: #FF512A;
}

.line {
	width: 1rpx;
	height: 30rpx;
	background-color: #E6E6E6;
}

.drawTit {
	font-weight: bold;
	font-size: 28rpx;
	color: #222222;
	display: flex;
	align-items: center;
	margin-left: 20rpx;
	margin-top: 30rpx;
}

.drawTit image {
	width: 30rpx;
	height: 30rpx;
	margin-left: 10rpx;
}

.stride {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 26rpx;
	margin-top: 30rpx;
}

.strideItem {
	font-weight: 400;
	font-size: 28rpx;
	color: #222222;
	white-space: nowrap;
	display: flex;
	flex-direction: column;
}

.strideItem image {
	width: 100rpx;
	height: 100rpx;
	margin-bottom: 10rpx;
}

.stideIcon {
	width: 26rpx;
	height: 26rpx;
	margin-top: -30rpx;
}

.gray {
	margin-top: 30rpx;
}

.goodsItem_left {
	display: flex;
}

.goodsImg {
	width: 160rpx;
	height: 160rpx;
	border-radius: 30rpx 30rpx 30rpx 30rpx;
	overflow: hidden;
}

.goodsmsg {
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin-left: 24rpx;
}

.name {
	font-weight: 400;
	font-size: 32rpx;
	color: #000000;
}

.num {
	font-weight: 400;
	font-size: 24rpx;
	color: #999999;
	margin-top: 8rpx;
}

.goodsItem_right {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.right_top {
	font-weight: 400;
	font-size: 28rpx;
	color: #999999;
	display: flex;
	align-items: center;
}

.right_top image {
	width: 15rpx;
	height: 28rpx;
	margin-left: 10rpx;
}

.goodsItem {
	display: flex;
	justify-content: space-between;
	margin: 30rpx 20rpx;
}

.right_bottom {
	font-weight: 400;
	font-size: 26rpx;
	color: #FFFFFF;
	width: 150rpx;
	height: 50rpx;
	background: #FF512A;
	border-radius: 100rpx 100rpx 100rpx 100rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.drawMsg {
	padding: 30rpx 20rpx;
	width: 500rpx;
}

.drawMsg_tit {
	font-weight: 400;
	font-size: 30rpx;
	color: #000000;
	padding-bottom: 30rpx;
	border-bottom: 1rpx solid #F5F5F5;
	text-align: center;

}

.drawMsg_con {
	margin-top: 30rpx;
	font-weight: 400;
	font-size: 24rpx;
	color: #000000;
	line-height: 32rpx;
}

.drawMsg_con view {
	margin-top: 30rpx;
}

.vrawMsg_btn {
	font-weight: 400;
	font-size: 26rpx;
	color: #FFFFFF;
	width: 150rpx;
	height: 50rpx;
	background: #D5AC66;
	border-radius: 100rpx 100rpx 100rpx 100rpx;
	margin: 0 auto;
	margin-top: 60rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}


.main {
	margin: 30rpx 18rpx 0 20rpx;
}

.item_header {
	margin-bottom: 30rpx;
	display: flex;
}

.item_left {
	width: 160rpx;
	height: 160rpx;
	margin-right: 24rpx;
}

.item_right {
	display: flex;
	align-items: center;
	width: 100%;
}

.right_left {
	flex: 1;
}

.shop_title {
	font-weight: 400;
	font-size: 32rpx;
	color: #000000;
}

.shop_num {
	margin-top: 8rpx;
	font-weight: 400;
	font-size: 24rpx;
	color: #999999;
}

.shop_time {
	font-weight: 400;
	font-size: 24rpx;
	color: #555555;
	margin-top: 23rpx;
}

.right_status {
	font-weight: 400;
	font-size: 28rpx;
	color: #FF512A;
}

.item_bottom {
	display: flex;
	justify-content: center;
}

.btn {
	font-weight: 400;
	font-size: 26rpx;
	color: #FFFFFF;
	background: #FF512A;
	border-radius: 100rpx 100rpx 100rpx 100rpx;
	padding: 10rpx 23rpx;
	margin-right: 40rpx;
}

.look {
	background: #999999;
}

.use {
	background: #D5AC66;
	margin-right: 0;
}
</style>