<template>
	<view class="ConsumptIoninfo container">
		<view class="nav">
			<view class="nav-list" v-for="(item,index) in list" :key="item.id" @tap="changeAct(item,index)">
				<view :class="[act==index?'name':'']">
					{{item.name}}
				</view>
				<view :class="[act==index?'line':'']">
				</view>
			</view>
		</view>
		<view class="" style="border-bottom: 1rpx solid #E5E5E5;height: 1rpx;margin-top: 1rpx;"></view>
		<!-- 条件选择 -->
		<view class="condition">
			<view class="coll" style="margin-left: 57rpx;">
				<picker mode="date" :value="date" fields="month" :start="startDate" :end="endDate"
					@change="bindDateChange">
					<view class="" style="display: flex;align-items: center;">
						<text class="lable">{{query.datatime||date}}</text>
						<image class="datachoice" :src="ImgUrl2+'down.png'" mode="aspectFit"></image>
					</view>
				</picker>
			</view>
			<view class="coll rightInfo" style="margin-left: 139rpx;">
				<text class="money" style="font-size: 40rpx;">{{totalAmount}}</text>
			</view>
		</view>
		<!-- 内容的改变 -->
		<view class="content">
			<view class="orderList" v-if="orderList.length>0">
				<view class="orderitem" v-for="(item,index) in orderList" :key="index" @tap="getOrderDetai(item)">
					<view class="row rowlin1">
						<view class="left name">
							{{item.storeName}}
						</view>
						<view class="right money">
							{{item.amount}}
						</view>
					</view>
					<view class="row rowlin2">
						<view class="left schoolname">
							{{item.userName}}({{item.schoolName}})
						</view>
						<view class="right paystatus"
							:style="{ 'color':['#FA6400'][item.status]||item.debt==1?'#FA6400':'' }">
							<text v-if="item.debt">
								<text v-if="item.status==3">支付宝垫资，已退款 </text>
								<text v-else>支付宝垫资，待支付</text>
							</text>
							<text v-else>{{orderStatus[item.status]}}</text>
						</view>
					</view>
					<view class="row rowlin3">
						<text class="left paytime"> {{item.dealTime}}</text>
					</view>
				</view>
				<!--  -->
				<view class="listover">
					— 已展示全部数据 —
				</view>
			</view>
			<!-- 没有数据 -->
			<view class="nodata" v-else>
				<image :src="ImgUrl2+'nodata.png'" mode="aspectFit"></image>
				<view>无明细数据</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		name: "ConsumptIoninfo",
		data() {
			const currentDate = this.getDate()
			return {
				ImgUrl2: this.$ImgUrl + 'xzfalipay/',
				ImgUrl: this.$ImgUrl + '/static/weapp/',
				// 默认激活样式是第一个
				act: 0,
				list: [{
						value: -1,
						name: '全部'
					},
					{
						value: 1,
						name: '已付款'
					},
					{
						value: 3,
						name: '已退款'
					},
					{
						value: 0,
						name: '待支付'
					}
				],
				orderList: [],
				totalAmount: 0,
				orderStatus: {
					"-1": "全部",
					"0": "已欠费，待支付",
					"1": "已付款",
					"2": "已撤销",
					"3": "已退款",
					"4": "异常订单"
				},
				content: '',
				userList: [],
				userIndex: 0,
				date: currentDate,
				// 选择的数据
				query: {
					user: "",
					datatime: "",
					accountId: 0,
					month: this.getDate({}),
					status: -1
				}
			}
		},
		onShow() {
			// 页面默认显示的是list列表中第一条数据
			this.content = this.list[0]
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		onLoad: function(options) {
			console.log(options);
			console.log(this.query);
			// this.getOrderList()
			this.userList = [{
				"userName": "全部用户",
				"id": 0
			}].concat(this.userList)
		},
		methods: {
			// nav
			async changeAct(item, index) {
				// 激活样式是当前点击的对应下标--list中对应id
				this.act = index;
				// 可以根据点击事件改变内容
				this.content = this.list[index]
				this.query.status = this.list[index].value
				// this.getOrderList()
			},
			// 获取订单列表
			async getOrderList() {
				try {
					uni.showLoading({
						title: "请稍后",
						// #ifndef MP-ALIPAY
						mask: true,
						// #endif
					})
					let respes = await this.$httpWX.post({
						url: '/cgi-xpay/app/user/OrderList'
					}, this.query)
					if (respes.code != 200) {
						uni.showToast({
							icon: "none",
							// #ifndef MP-ALIPAY
							mask: true,
							// #endif
							title: respes.message
						})
						return
					}
					uni.hideLoading()
					if (respes.data && respes.data.orderList) {
						let tmp = []
						for (let s of respes.data.orderList) {
							s.amount = (s.amount / 100).toFixed(2)
							tmp.push(s)
						}
						this.orderList = tmp
						this.totalAmount = (respes.data.totalAmount / 100).toFixed(2)
					} else {
						this.orderList = []
					}

				} catch (error) {
					uni.showToast({
						icon: "error",
						title: error.message
					})
				}
			},
			// 订单详情
			async getOrderDetai(item) {
				try {
					uni.showLoading({
						title: "请稍后",
						// #ifndef MP-ALIPAY
						mask: true,
						// #endif
					})
					await new Promise((res, rej) => {
						setTimeout(() => {
							res()
						}, 1000);
					})
					uni.hideLoading()
					uni.navigateTo({
						url: `../OrderDetai/OrderDetai?devflowNo=${item.devflowNo}`
					})
				} catch (error) {
					uni.showToast({
						icon: "error",
						title: error.message
					})
				}
			},
			// 下拉选择器
			async bindPickerChange(e) {
				console.log('picker发送选择改变，携带值为', e.detail.value)
				this.index = e.detail.value
				this.query.user = this.userList[this.index].userName
				this.query.accountId = this.userList[this.index].id
				this.getOrderList()
			},
			bindDateChange: function(e) {
				if (e.detail.value) {
					let str = e.detail.value.split("-")
					this.date = str[0] + "年" + str[1] + "月"
					this.query.datatime = str[0] + "年" + str[1] + "月"
					this.query.month = e.detail.value
					this.getOrderList()
				}
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year;
				} else if (type === 'end') {
					year = year;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				if (type instanceof Object) {
					return `${year}-${month}`;
				}
				return `${year}年${month}月`;
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #FFFEFF;
		height: 100%;
	}

	.orderList {
		width: 725rpx;
		float: right;
		padding-bottom: 126rpx;

		.orderitem {
			height: 172rpx;
			background-color: #FFFEFF;
			font-family: PingFangSC-Regular, PingFang SC;
			border-bottom: 1rpx solid #E5E5E5;
			display: flex;
			flex-direction: column;

			.row {
				display: flex;
				align-items: center;

			}

			.rowlin1 {
				margin-top: 23rpx;
				justify-content: space-between;
				padding-right: 24rpx;
			}

			.rowlin2 {
				margin-top: 6rpx;
				justify-content: space-between;
				padding-right: 24rpx;
			}

			.rowlin3 {
				margin-top: 2rpx;
			}

			.name {
				height: 45rpx;
				font-size: 32rpx;
				font-weight: 400;
				color: #333333;
				line-height: 45rpx;
			}

			.money {
				height: 45rpx;
				font-size: 32rpx;
				font-weight: 400;
				color: #333333;
				line-height: 45rpx;
			}

			.schoolname {
				height: 37rpx;
				font-size: 26rpx;
				font-weight: 400;
				color: #CCCCCC;
				line-height: 37rpx;
			}

			.paystatus {
				height: 37rpx;
				font-size: 26rpx;
				font-weight: 400;
				line-height: 37rpx;
				color: #CCCCCC;
			}


			.paytime {
				height: 37rpx;
				font-size: 26rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #CCCCCC;
				line-height: 37rpx;
			}
		}

		.listover {
			// width: 252rpx;
			height: 37rpx;
			font-size: 26rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #CCCCCC;
			line-height: 37rpx;
			text-align: center;
			margin-top: 30rpx;
		}
	}

	.nodata {
		text-align: center;
		margin-top: 169rpx;

		image {
			width: 500rpx;
			height: 254rpx;
			position: relative;
		}

		view {
			height: 40rpx;
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #666666;
			line-height: 40rpx;
		}
	}

	.nav {
		height: 84rpx;
		display: flex;
		align-items: center;
		justify-content: space-around;
		background-color: #FFFFFF;
		font-size: 34rpx;
		color: #969799;

	}

	.nav-list {
		height: 100%;
		line-height: 78rpx;

	}

	.nav-list .name {
		color: #323233;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;

	}

	.nav-list .line {
		// margin-top: 10rpx;
		width: 68rpx;
		height: 8rpx;
		background-color: #04B871;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		margin: 0 auto;
		// #ifdef APP
		height: 8rpx !important;
		// #endif
		border-radius: 4rpx
	}

	.condition {
		height: 136rpx;
		width: 100%;
		line-height: 136rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		border-bottom: 1rpx solid #E5E5E5;

		.coll {
			display: flex;
			align-items: center;

			image {
				left: 12rpx;
			}

			.lable {
				height: 42rpx;
				font-size: 30rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
				line-height: 42rpx;
				cursor: pointer;
			}
		}

		.rightInfo {
			height: 56rpx;
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
			line-height: 40rpx;

			.money::before {
				content: '¥';
				position: relative;
				font-size: 28rpx;
				padding-right: 12rpx;
			}

		}

		image {
			width: 17rpx;
			height: 10rpx;
			position: relative;
		}
	}
</style>