<template>
	<view class="content">
		<form @submit="selectSubmit" class="form">
			<view class="select-input">
				<input class="input" style="display:none;" />
				<text>订单编号：</text><input class="input" name="orderMumber" placeholder="请输入订单编号" />
			</view>
			<view class="select-input">
				<input class="input" style="display:none;" />
				<text>订单流水：</text><input class="input" name="orderWater" :value="orderWater" placeholder="请输入订单流水后10位" />
				<button type="primary" @click="saoma()" class="button1">
					<p class="p">扫码</p>
				</button>
			</view>
			<view class="select-input2">
				<text class="select-text">点击“扫码”能更方便获取订单流水,它可以去获取保存到手机的支付截图的条形码(订单流水),它也可以直接扫描消费者手机上的支付成功后账单详情中的条形码.如果没有条形码,无法使用扫码,请直接输入.</text>
			</view>
			<!-- 时间选择器  start -->
			<mx-date-picker :show="showPicker" :type="type" :value="value" :show-tips="true" :begin-text="'开始'"
				:end-text="'结束'" :show-seconds="true" @confirm="onSelected" @cancel="oncancel" />
			<view class="select-input">
				<input class="input" style="display:none;" />
				<text @click="onShowDatePicker('rangetime')">开始时间：</text><input class="input" name="startDate"
					:value="startDate" placeholder="支付开始时间" @click="onShowDatePicker('rangetime')" disabled/>
			</view>
			<view class="select-input">
				<input class="input" style="display:none;" />
				<text @click="onShowDatePicker('rangetime')">结束时间：</text><input class="input" name="endDate"
					:value="endDate" placeholder="支付结束时间" @click="onShowDatePicker('rangetime')" disabled/>
			</view>
			<!-- 时间选择器  end -->
			<view class="select-input">
				<text class="select-text">注意:4个信息,至少填写一个,填写的越多,查出来的越准确.时间跨度不能超过两天。</text>
				<!-- <text class="select-text">注意:2个信息,至少填写一个,填写的越多,查出来的越准确.</text> -->
			</view>
			<view class="btn-area">
				<button type="primary" formType="submit">确认</button>
				<!-- <button type="primary" @click="tran()" >提交</button> -->
			</view>
		</form>
		<view v-show="ok">
			<uni-collapse :accordion="true">
				<uni-list v-for="order in orders" :key="order.id">
					<uni-list-item :title="'商品名称:'+order.productName" :note="'支付时间:'+order.payDate"
						:rightText="order.status==1?('已支付'):(order.status==2?('退款中'):(order.status==3?('已退款'):(order.status==3?('支付'):('未支付'))))"
						showArrow clickable @click="trantoedit(order)"></uni-list-item>
					<!-- <uni-list-item :title="alarmClock.hour" :note="alarmClock.week+'---'+alarmClock.type"
					 	:rightText="alarmClock.status" clickable @click="onClick(alarmClock.id)" /> -->
				</uni-list>
			</uni-collapse>
		</view>
	</view>
</template>

<script>
	import MxDatePicker from '../../components/mx-datepicker/mx-datepicker.vue';
	import {
		dateUtils
	} from '@/common/util.js';
	import uniCollapse from '@/components/uni-collapse/uni-collapse.vue';
	import uniCollapseItem from '@/components/uni-collapse-item/uni-collapse-item.vue';
	import uniList from '../../uni_modules/uni-list/components/uni-list/uni-list.vue';
	import uniListItem from '../../uni_modules/uni-list/components/uni-list-item/uni-list-item.vue';
	import uniIcons from '../../uni_modules/uni-icons/components/uni-icons/uni-icons.vue';
	export default {
		components: {
			MxDatePicker,
			uniCollapse,
			uniCollapseItem,
			uniList,
			uniListItem,
			uniIcons
		},
		data() {
			return {
				ok: false,
				//时间选择器
				showPicker: false,
				date: '2021/01/01',
				time: '15:00:12',
				datetime: '2021/01/01 15:00:12',
				range: [],
				rangetime: [],
				startDate: null,
				endDate: null,
				type: 'rangetime',
				orders: [],
				orderWater:'',
				value: ''

			};
		},
		onShow() {
			var date = new Date();
			// var daystr = dateUtils.formateDate(date, 'yyyy年MM月dd日');
			this.date = dateUtils.formateDate(date, 'yyyy/MM/dd');
			this.time = dateUtils.formateDate(date, 'HH:mm:ss');
			this.datetime = dateUtils.formateDate(date, 'yyyy/MM/dd HH:mm:ss');
			this.refse();
		},
		computed: {
			// ...mapState(['isLoading']),
			// loginBtnLabel(){
			// 	return this.isLoading ? '':'登录'
			// }

		},
		methods: {
			selectSubmit(e) {
				// this.ok = true;
				// console.log(e.detail.value);
				if (e.detail.value.orderMumber != "" || e.detail.value.orderWater != "" || (e.detail.value.startDate !=
						"" && e.detail.value.endDate != "")) {
					var orderMumber = e.detail.value.orderMumber;
					var orderWater = e.detail.value.orderWater;
					var startTime = e.detail.value.startDate;
					var endTime = e.detail.value.endDate;
					var startDate = '';
					var endDate = '';
					if (startTime != null && endTime != null&&startTime != '' && endTime !='') {
						var start = new Date(startTime);
						var end = new Date(endTime);
						var t = end.getTime() - start.getTime();
						if (t > 2 * 24 * 60 * 60 * 1000) {
							uni.showModal({
								title: '提示',
								content: '时间跨度超出范围',
								success: function(res) {
									if (res.confirm) {} else if (res.cancel) {}
								}
							});
							return;
							// console.log("超过2天");
						} else {
							var start = new Date(startTime);
							var A = dateUtils.formateDate(start, 'yyyy-MM-dd');
							var B = startTime.split(/[\s]/)[1];
							startDate = A + ' ' + B;
							var end = new Date(endTime);
							var C = dateUtils.formateDate(end, 'yyyy-MM-dd');
							var D = endTime.split(/[\s]/)[1];
							endDate = C + ' ' + D;
							// console.log("少于2天");
						}

					}
					var token = uni.getStorageSync("token");
					var globalUser = uni.getStorageSync("globalUser");
					uni.request({
						url: this.serverurl + '/TOrder/seleceOrder',
						data: {
							"sn": orderMumber,
							"trxNo": orderWater,
							"adminId": globalUser.id,
							"createDate": startDate,
							"modifyDate": endDate,
						},
						header: {
							'token': token
						},
						method: "POST",
						success: (res) => {
							var orders = res.data.data;
							// console.log(orders)
							this.orders = orders;
							if (orders.length > 0) {
								this.ok = true;
							}
						},
					});
				} else {
					uni.showModal({
						title: '提示',
						content: '信息不能为空',
						success: function(res) {
							if (res.confirm) {} else if (res.cancel) {}
						}
					});
					return;
				}


			},
			saoma() {
				var that = this;
				// 允许从相机和相册扫码
				uni.scanCode({
					success(res) {
						that.orderWater = res.result;
						// console.log('条码类型：' + res.scanType);
						// console.log('条码内容：' + res.result);
					}
				});
			},
			refse() {
				var token = uni.getStorageSync("token");
				var globalUser = uni.getStorageSync("globalUser");
				uni.request({
					url: this.serverurl + '/TJoinpayMch/refere',
					data: {
						"adminId": globalUser.id,
					},
					header: {
						'token': token
					},
					method: "POST",
					success: (res) => {
						// var date  = res.data.data;
					},
				});
			},
			trantoedit(order) {
				uni.navigateTo({
					url: 'orderEit?order=' + encodeURIComponent(JSON.stringify(order)),
				});
			},
			onShowDatePicker(type) { //显示
				this.type = type;
				this.showPicker = true;
				this.value = this[type];
			},
			onSelected(e) { //选择
				this.showPicker = false;
				if (e) {
					this[this.type] = e.value;
					//选择的值
					// console.log('value => '+ e.value);
					this.startDate = e.value[0];
					this.endDate = e.value[1];
					//原始的Date对象
					// console.log('date => ' + e.date);
				}
			},
			oncancel(){
				this.showPicker = false;
				this.startDate = '';
				this.endDate = '';
			}

		}

	}
</script>

<style lang="scss">
	@import "../../static/common/selectOrder.scss";
</style>
