<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://static.hshuishang.com/explain.png" mode="widthFix"
					@click="onChangeShow" />
			</view>
			<view class="stride">
				<view class="strideItem">
					<image src="https://static.hshuishang.com/myReservation_icon1.png" mode="widthFix" />
					手机下单
				</view>
				<view class="stideIcon">
					<image src="https://static.hshuishang.com/myres_icon.png" mode="widthFix" />
				</view>
				<view class="strideItem">
					<image src="https://static.hshuishang.com/myReservation_icon2.png" mode="widthFix" />
					到店核销
				</view>
				<view class="stideIcon">
					<image src="https://static.hshuishang.com/myres_icon.png" mode="widthFix" />
				</view>
				<view class="strideItem">
					<image src="https://static.hshuishang.com/myReservation_icon3.png" mode="widthFix" />
					订单完成
				</view>
				<view class="stideIcon">
					<image src="https://static.hshuishang.com/myres_icon.png" mode="widthFix" />
				</view>
				<view class="strideItem">
					<image src="https://static.hshuishang.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="‌" />
					</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="headerLookClick">查看自提点
						<image src="https://static.hshuishang.com/water_filter/filter_more.png" mode="" />
					</view>
					<view class="right_bottom" @click="desc(item.activity_id, item.total)">去领取</view>
				</view>
			</view>
			<u-empty v-if="goodsList.length == 0" iconSize="100rpx" text="暂无内容" mode="order" textSize="24"></u-empty>

		</view>
		<view class="order" v-if="currentIdx == 1">
			<!-- 自行封装下拉组件 -->
			<dropdown :options="option1" @change2="headerSelectClick"/>

			<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.activity.title, item.qrcode)">去使用</view>
				</view>
			</view>
			
			<u-empty v-if="orderList.length == 0" iconSize="100rpx" text="暂无内容" mode="order" textSize="24"></u-empty>

		</view>
		<u-popup :show="show"  mode="center" @close="onChangeShow" :round="10" closeOnClickOverlay>
		  <view class="drawMsg">
		  	<view class="drawMsg_tit">领取规则说明</view>
		  	<view class="drawMsg_con">
		  		<view>1.用户需要通过官方小程序完成商品预约， 成功后将生成唯一电子凭证（含二维码+8 位验证码）预约凭证仅限本人使用。</view>
		  		<view> 2.预约成功后请在规定时间内自提，逾期未领取，系统自动作废，商品领取权益终止。</view>
		  	</view>
		  	<view class="vrawMsg_btn" @click="onChangeShow">知道了</view>
		  </view>
		</u-popup>
		
	</view>

</template>

<script>
	import { request, picUrl, NavgateTo } from '../../utils/index';
	import { apiArr } from '../../api/reservation';

	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(e) {
				this.currentIdx = e;
				this.page_num = 1;
				this.flag = false;
				this.orderList = [];
				this.goodsList = [];

				if (e == 0) {
					uni.setNavigationBarTitle({
						title: '我的商品',
					})
					this.getActiveList();
				} else {
					uni.setNavigationBarTitle({
						title: '我的订单',
					})
					this.getOrderList();
				}
			},

			headerPickClick(id, orderId, name) {
				NavgateTo(`/reservation/receive/index?id=${id}&name=${name}&orderId=${orderId}`)
			},

			headerGoPayClick(title, pic) {
				console.log('去使用', title, pic);
				NavgateTo(`/reservation/ticketCode/index?pic=${pic}&name=${title}`)
			},

			// 筛选指定状态订单
			headerSelectClick(item) {
				console.log('1', item.detail.__args__[0].value);
				let detail = {
					text: item.detail.__args__[0].text,
					value: item.detail.__args__[0].value,
				}
				console.log('item', detail);
				this.page_num = 1;
				this.flag = false,
				this.orderList = [],
				this.getOrderList(detail);
			},

			onChangeShow() {
				this.show = !this.show;
			},

			desc(id, total) {
				if (total === 0) {
					uni.showToast({
						title: '暂无可领取数量',
						icon: 'none'
					})
				}
				NavgateTo(`/reservation/receive/index?id=${id}`);
			},

			headerLookClick() {
				uni.getLocation({
					type: "gcj02",
					success(res) {
						NavgateTo(`/reservation/pickPoint/index?lat=${res.latitude}&log=${res.longitude}`)
					},
					fail(err) {
						console.log('errr', err);
					}
				})
			},

			//商品列表
			async getActiveList() {
				const res = await request(apiArr.getActiveList, 'POST', {
					page_num: this.page_num,
					page_size: this.page_size,
				})
				let flag = false;
				if (res?.rows && res?.rows?.length == this.page_size) {
					flag = true
				} else {
					flag = false
				}
				res?.rows.forEach(item => {
					item.photo = picUrl + item.photo
				});

				this.goodsList = this.goodsList.concat(res.rows || []);
				this.page_num = this.page_num + 1;
				this.flag = flag;
			},

			//我的订单
			async getOrderList(status) {
				const { page_num, page_size } = this;

				console.log('13231', page_num, page_size);
				let parmas = {
					page_num,
					page_size,
				};

				if (status) {
					parmas = {
						...parmas,
						status: status.value,
					}
				}
				const res = await request(apiArr.getReserationList, 'POST', parmas);
				console.log('reeee', res);
				
				if ((res?.rows && res?.rows?.length === 0) || !res?.rows) {
					uni.showToast({
						title: '暂无订单数据',
						icon: 'none'
					});
					return;
				};
				let flag = false
				if (res?.rows?.length == this.page_size) {
					flag = true
				} else {
					flag = false
				}
				
				res?.rows?.forEach(item => {
					item.photo = picUrl + item.photo
				})

				this.orderList = this.goodsList.concat(res.rows || []);
				this.page_num = page_num + 1;
				this.flag = flag;
				
			},

		},
		onReady() {

		},

		
		onShow() {
			// 页面加载时重置数据
			this.page_num = 1;
			this.flag = false;
			this.orderList = [];
			this.goodsList = [];
			if(this.currentIdx == 0){
				this.getActiveList()
			}else{
				this.getOrderList()
			}
		},
		
		/**
		* 页面上拉触底事件的处理函数
		*/
		onReachBottom() {
			if(this.flag){
				if(this.currentIdx == 0){
					this.getActiveList()
				}else{
					this.getOrderList()
				}
			}
		},
		
	}
</script>

<style>
@import url("./index.css");
</style>