<template>
	<view class="content">
		<view class="container">
			<headers :titles="titles"><uni-icons type="arrow-left" color="#fff" size="22px"></uni-icons></headers>
			<view class="lv-size">任选一项或者组合查询</view>
			<view class="box_">
				<view class="">交易类型</view>
				<view class="d-s" @click="selectPick()">
					<view v-if="!formData.tradeType" class="h-size">选择交易类型</view>
					<view v-else class="h-size">{{formData.tradeTypeName}}</view>
					<u-icon name="arrow-right" color="#92959b" size="14"></u-icon>
				</view>
			</view>
			<view class="box_">
				<view class="">订单号</view>
				<view class="i-input">
					<input type="text" v-model="formData.orderNo" placeholder="请输入订单号" />
				</view>
			</view>
			<view class="box_">
				<view class="">开始时间</view>
				<view class="d-s" @click="pickTime(1)">
					<view v-if="!formData.startTime" class="h-size">请选择开始时间</view>
					<view v-else class="h-size">{{formData.startTime}}</view>
					<u-icon name="arrow-right" color="#92959b" size="14"></u-icon>
				</view>
			</view>
			<view class="box_">
				<view class="">结束时间</view>
				<view class="d-s" @click="pickTime(2)">
					<view v-if="!formData.endTime" class="h-size">请选择结束时间</view>
					<view v-else class="h-size">{{formData.endTime}}</view>

					<u-icon name="arrow-right" color="#92959b" size="14"></u-icon>
				</view>
			</view>

			<view style="width: 100%; height: 50px; "></view>
			<view class="anniu" @click="queryData()">
				查询
			</view>
			<!-- 一下均为查询列表 -->
			<view class="box-bottom" v-for="it in dataList">
				<view class="bottom-bs" @click="goDetails(it.orderNo)">
					<view class="">订单号</view>
					<view class="">{{it.orderNo}}</view>
				</view>
				<view class="bottom-bs" @click="goDetails(it.orderNo)">
					<view class="">交易类型:{{tradeTypeName(it.tradeType)}}</view>
					<view style="font-size: 20px;color: #E4612E; ">+{{it.trxAmt}}</view>
				</view>
				<view class="bottom-bs" @click="goDetails(it.orderNo)">
					<view class="">设备SN:{{it.tradeInfo}}</view>

				</view>
				<view class="bottom-bs" @click="goDetails(it.orderNo)">
					<view class="">{{it.createDate}}</view>

				</view>
				<view class="box-end" @click="refund(it.orderNo)">
					<view class="aaniu">退款</view>
				</view>
			</view>






			<u-datetime-picker :closeOnClickOverlay="true" :show="pickData.timeShow" v-model="pickData.certEffectDate"
				:formatter="formatter" @confirm="timeConfirm" @cancel="timeCancel" @close="timeCancel"
				mode="date"></u-datetime-picker>
			<u-picker :show="pickData.show" :columns="pickData.columns" :title="pickData.title" keyName="label"
				@confirm="confirm" @cancel="cancel" @close="cancel"></u-picker>

		</view>

	</view>
</template>

<script>
	import headers from '../../components/header/headers.vue'
	import request from '../../utils/request.js'
	export default {
		data() {
			return {
				titles: "自定义查询",
				msg: "1",
				dataList: [],
				show: false,
				status: 'loading',
				pickData: {
					columns: [],
					show: false,
					pickType: null, //下部选择器类型：certSelect 证件选择
					title: "",
					timeShow: false,
					timePopup: false,
					certEffectDate: Number(new Date()),
					certExaDate: Number(new Date()),
					timeType: 1
				},
				formData: {},
				tradeTypeList: [],
				dataList: []
			}
		},
		onLoad(option) {
			if (option.sn) {
				this.formData.sn = option.sn
			}

			this.formData.limit = 10
			this.formData.page = 1
			this.getDictList()
		},
		onPullDownRefresh() {
			this.page = 1,
				this.limit = 10,
				this.totalPage = 0,
				this.dataList = [],
				this.getTradeList();

			uni.stopPullDownRefresh()
		},
		onReachBottom() {
			// 触底加载
			if (this.page < this.totalPage) {
				this.page++
				this.getTradeList()

			} else {
				uni.showToast({
					title: '没有下一页数据',
					icon: 'none'
				})
			}
		},
		components: {
			headers
		},
		methods: {
			refundSure(orderNo) {
				request({
					url: 'app/refund/byOrderNo',
					method: 'post',
					data: {
						orderNo: orderNo,
					},
				}).then(res => {
					uni.showToast({
						title: res.msg
					})

				})
			},
			refund(orderNo) {
				let that = this
				uni.showModal({
					title: '提示',
					content: '是否确定退款',
					success: function(res) {
						if (res.confirm) {
							that.refundSure(orderNo)
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});

			},
			goDetails(orderNo) {
				uni.navigateTo({
					url: '/homePages/Manage/CollectionDetails?orderNo=' + orderNo
				})
			},
			tradeTypeName(type) {
				if (this.tradeTypeList && this.tradeTypeList.length > 0) {
					let tempData = this.tradeTypeList.find(item => item.value == type)
					return tempData.label
				} else {
					return '微信扫码'
				}
			},
			getTradeList() {
				uni.showLoading({
					title: '加载中'
				});
				request({
					url: 'app/uaBase/tradeListBy',
					method: 'post',
					data: this.formData,
				}).then(res => {
					console.log(res, 'res');
					if (res.data) {
						if (this.formData.page != 1) {
							this.dataList = this.dataList.concat(res.data)
						} else {
							this.dataList = res.data
						}
						this.formData.totalPage = res.pages

					}


				}).finally(rr => {
					uni.hideLoading()
				})
			},
			queryData() {
				this.dataList = []
				this.formData.page = 1
				this.getTradeList()
			},
			timeCancel() {
				this.pickData.timeShow = false

			},
			formatter(type, value) {
				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				if (type === 'day') {
					return `${value}日`
				}
				return value
			},
			timeConfirm(e) {
				const date = new Date(e.value);
				const year = date.getFullYear();
				const month = ("0" + (date.getMonth() + 1)).slice(-2);
				const day = ("0" + date.getDate()).slice(-2);
				if (this.pickData.timeType == 1) {
					//证件有效期
					this.formData.startTime = year + "-" + month + "-" + day
				} else {
					//证件有效期
					this.formData.endTime = year + "-" + month + "-" + day
				}


				this.pickData.timeShow = false
			},
			pickTime(type) {
				//选择时间
				this.pickData.timeShow = true
				this.pickData.timeType = type
			},
			// 性别点击取消
			cancel() {
				this.pickData.columns = []
				this.pickData.show = false
			},
			// 弹窗确认
			confirm(e) {
				this.pickData.show = false
				this.pickData.columns = []

				//证件选择
				this.formData.tradeType = e.value[0].value
				this.formData.tradeTypeName = e.value[0].label



			},
			selectPick() {
				//选择证件类型
				this.pickData.columns = []

				this.pickData.show = true

				this.pickData.columns.push(this.tradeTypeList)
				this.pickData.title = '选择交易类型'


			},
			async getDictList() {
				this.tradeTypeList = [{
						label: '支付宝扫码',
						value: 'ALI_QRCODE_PAY'
					}, {
						label: '微信扫码',
						value: 'WX_QRCODE_PAY'
					}, {
						label: '云闪付扫码',
						value: 'YSF_QRCODE_PAY'
					}

				]

			},
			goPaymentList() {
				uni.navigateTo({
					url: '/homePages/EquipmentManagement/paymentList'
				})
			},
			goback() {
				uni.navigateBack()
			}
		}
	}
</script>

<style scoped lang="scss">
	.content {
		background: #fff;
		height: 100vh;
	}

	.container {
		width: 100%;
		background: #fff;
		box-sizing: border-box;
		padding-top: 88px;
	}

	.lv-size {
		width: 100%;
		box-sizing: border-box;
		font-size: 12px;
		font-weight: bold;
		padding: 15px;
		color: #E4612E;
	}

	.box_ {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 15px;
		border: 1px solid #f0f0f0;
	}

	.h-size {
		color: #bcbcbc;
	}

	.d-s {

		display: flex;
		align-items: center;
	}

	.anniu {
		width: 50%;
		height: 40px;
		border-radius: 50px;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #E4612E;
		color: white;
		margin: 10px auto;
	}

	.box-bottom {
		width: 100%;
		box-sizing: border-box;
		padding: 10px;
		border-bottom: 1px solid #efefef;
	}

	.box-bs {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 14px;
		color: #979797;
		margin: 2px 0px;
	}

	.bottom-bs {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 14px;
		color: #000000;
		margin-bottom: 5px;
	}

	.box-end {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

	.aaniu {
		width: 120px;
		height: 35px;
		border-radius: 50px;
		background: #E4612E;
		color: white;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.i-input {
		width: 70%;

		input {
			width: 100%;
			text-align: right;
		}
	}
</style>
