<template>
	<view class="constant">
		<!-- 	<view class="topbox">
			<view class="left">
				<view class="">
					筛选
				</view>
				<view class=""></view>
			</view>
			<view class="right">
				<up-input class="input" placeholder="搜索订单号" v-model="value"
					@change="change"></up-input>
			</view>
		</view> -->
		<!-- 抖音 -->
		<view v-if="form.type == 2">
			<view class="bottomconstant" v-for="(item,index) in form.list" :key="index">
				<view class="itemlist">
					<view class="ordernumber">
						{{item.d_order_id}}
					</view>
					<view class="title">
						{{item.title}}
					</view>
					<view class="itemlists" v-for="(item1,index1) in item.douyinCodeGoods" :key="item1.id">
						<view class="top">
							<view class="date">
								{{item1.create_time}}
							</view>
							<view class="tag" v-if="item1.status == 1" @click="clickcancel(item1)"
								style="background: #318AFE;color: #fff; border-radius: 10rpx;">
								撤销核销
							</view>
							<view class="tag" v-if="item1.status == 0">
								等待验券
							</view>
							<view class="tag" v-if="item1.status == 2">
								失败
							</view>
						</view>
						<view class="bottom">
							<view class="bottomtitle">
								{{item1.title}}
							</view>
							<view class="price">
								<view class="prices">
									{{item1.pay_amount}}
								</view>
								<!-- <view class="pricees">
									{{item1.market_price}}
								</view> -->
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 美团 -->
		<view class="bottomconstant" v-else>
			<view class="itemlist" v-for="(item,index) in form.list" :key="index">
				<view class="itemlists" style="padding: 0;">
					<view class="top">
						<view class="date">
							{{item.couponUseTime}}
						</view>
						<view class="tag" :style="!item.type?'background: #318AFE;color: #fff; border-radius: 10rpx;':''"
							@click="clickcancel(item)">
							{{item.type ? item.couponStatusDesc:'撤销核销'}}
						</view>
					</view>
					<view class="bottom">
						<view class="bottomtitle">
							{{item.dealTitle}}
						</view>
						<view class="price">
							<view class="prices">
								¥{{item.couponBuyPrice}}
							</view>
							<!-- <view class="pricees">
								156
							</view> -->
						</view>
					</view>
				</view>
			</view>
		</view>
		<up-loadmore :status="form.status" />
	</view>
</template>

<script setup>
	import {
		onLoad,
		onShow,
		onReachBottom
	} from '@dcloudio/uni-app';
	import {
		computed,
		reactive,
		ref,
		watch
	} from 'vue';
	import dayjs from "dayjs";
	import {
		orderlist,
		fulfilmentcertificatecanceles
	} from '@/http/php/api.ts';
	// 下拉加载
	onReachBottom(() => {
		if (form.status != 'nomore') {
			form.page = ++form.page;
			getlist()
		}
	})
	onLoad(async (e) => {
		form.type = uni.getStorageSync('clint_type')
		initial()
	})
	const dropdownvalue = ref(1)
	const optionsdropdown = [{
			label: '等待验证',
			value: 1,
		},
		{
			label: '成功',
			value: 2,
		},
		{
			label: '失败',
			value: 3,
		}
	]
	// 初始化
	const initial = () => {
		form.page = 1
		form.status = 'loadmore'
		form.d_order_id = ''
		form.querystatus = ''
		getlist()
	}
	// 
	const form = reactive({
		type: '',
		d_order_id: '',
		querystatus: '',
		page: 1,
		status: '',
		list: [],
		count: '',
		date: ''
	});
	const getlist = async () => {
		let data = null
		if (uni.getStorageSync('clint_type') == 1) {
			data = {
				page: form.page,
				date: form.date
			}
		} else {
			data = {
				page: form.page,
				status: form.querystatus,
				d_order_id: form.d_order_id
			}
		}
		let res = await orderlist(data)

		form.count = res.count
		form.status = 'loading';
		if (form.page == 1 && res.list.length == 0) {
			form.status = 'nomore'
			return false;
		} else {
			setTimeout(() => {
				if (form.page == 1) {
					form.list = res.list
				} else {
					form.list = [...form.list, ...res.list];
				}
				if (form.list.length >= form.count && res.list.length < 10) {
					form.status = 'nomore';
				} else {
					form.status = 'loadmore';
				}
				// 这是美团处理的数据
				if (uni.getStorageSync('clint_type') == 1) {
					form.list = form.list.map(item => {
						// 计算60天后
						item.couponUseTimes = dayjs(item.couponUseTime).add(60, 'day').format(
							'YYYY-MM-DD HH:mm:ss')
						item.type = dayjs().isAfter(dayjs(item.couponUseTime).add(60, 'day'),
							'year')
						return item
					});
				}
			}, 500)
		}
	}
	const clickcancel = async (item) => {
		uni.showModal({
			title: '确认撤销吗？',
			success: async (res) => {
				if (res.confirm) {
					let data = null
					if (uni.getStorageSync('clint_type') == 1) {
						data = {
							couponCode: item.couponCode
						}
					} else {
						data = {
							verify_id: item.verify_id,
							certificate_id: item.certificate_id
						}
					}
					await fulfilmentcertificatecanceles(data)
					uni.showToast({
						title: '撤销核销成功',
						icon: 'success'
					})
					setTimeout(() => {
						initial()
					}, 1000)
				} else if (res.cancel) {
					console.log('用户点击取消');
				}

			}
		})

	}
</script>

<style lang="scss" scoped>
	page {
		background: #F9F9F9;
	}

	.constant {
		padding-bottom: 32rpx;

		.topbox {
			width: 100%;
			padding: 32rpx 28rpx;
			background: #fff;
			display: flex;
			justify-content: space-between;
			align-items: center;
			flex-wrap: wrap;

			.left {}

			.right {
				width: 80%;

				.input {
					width: 100%;
				}
			}
		}

		.bottomconstant {
			padding: 0 28rpx;
			width: 100%;
			border-radius: 18rpx 18rpx 18rpx 18rpx;

			.itemlist {
				margin-top: 32rpx;
				padding: 32rpx 24rpx;
				width: 100%;
				background: #FFFFFF;
				border-radius: 18rpx 18rpx 18rpx 18rpx;

				.ordernumber {
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: 400;
					font-size: 24rpx;
					color: #999999;
				}

				.title {
					margin-top: 16rpx;
					padding-bottom: 24rpx;
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: bold;
					font-size: 28rpx;
					color: #333333;
					border-bottom: 1rpx solid #E5E5E5;
				}

				.itemlists {
					padding-top: 24rpx;

					.top {
						display: flex;
						justify-content: space-between;
						align-items: center;
						flex-wrap: wrap;

						.date {
							font-family: Source Han Sans CN, Source Han Sans CN;
							font-weight: 400;
							font-size: 24rpx;
							color: #999999;
						}

						.tag {
							background: #EAF4FD;
							border-radius: 4rpx 4rpx 4rpx 4rpx;
							padding: 6rpx 12rpx;
							font-family: Source Han Sans CN, Source Han Sans CN;
							font-weight: 400;
							font-size: 20rpx;
							color: #318AFE;
						}
					}

					.bottom {
						display: flex;
						justify-content: space-between;
						align-items: center;

						.bottomtitle {
							width: 350rpx;
							overflow: hidden; //超出的文本隐藏
							text-overflow: ellipsis; //溢出用省略号显示
							white-space: nowrap; //溢出不换行
							font-family: Source Han Sans CN, Source Han Sans CN;
							font-weight: 500;
							font-size: 28rpx;
							color: #333333;
						}

						.price {
							margin-top: 16rpx;
							display: flex;
							justify-content: flex-start;
							align-items: center;

							.prices {
								font-family: Source Han Sans CN, Source Han Sans CN;
								font-weight: 500;
								font-size: 28rpx;
								color: #333333;
							}

							.pricees {
								margin-left: 12rpx;
								font-family: Source Han Sans CN, Source Han Sans CN;
								font-weight: 500;
								font-size: 24rpx;
								color: #999999;
								text-decoration-line: line-through;
							}
						}
					}
				}
			}
		}
	}
</style>