<template>
	<view class="detail">
		<view class="empty" v-if="costInfo == ''">
			<u-empty text="暂无交易数据" mode="coupon"></u-empty>
		</view>
		<view class="cost" v-else>
			<view class="header">
				<view class="topItem">
					<text>{{time}}</text>
					<u-switch v-model="showChoiceTime" size="30" @change="change" active-color="#7D5AFC"></u-switch>
					<view @click="show('time')" v-if="showChoiceTime" style="display: inline-block;">
						<text>{{choiceTime}}</text>
						<u-icon name="arrow-down" size="36"></u-icon>
					</view>
					</view>
				<view @click="show('pay')" class="topItem">
					<text>{{text}}</text>
					<u-icon name="arrow-down" size="36"></u-icon>
				</view>
			</view>
			<view class="empty" v-if="Slist == ''">
				<u-empty text="暂无交易数据" mode="coupon"></u-empty>
			</view>
			<view class="container" v-else>
				<u-row v-for="(item,key) in Slist" :key="key">
					<view class="layOut">
						<view class="LText">
							<text class="Lcontent">{{item.month}}-{{item.day}}</text>
							<text class="LcontentB">{{item.hours}}-{{item.minutes}}</text>
						</view>
						<view class="LText">
							<text class="Lcontent">{{item.dec}}</text>
							<text class="LcontentB">{{item.dec}}</text>
						</view>

						<view class="Rcontent">
							<text>{{item.showFAMOUNT}}</text>
						</view>

					</view>
					<u-line class="line" color="info"></u-line>
				</u-row>
			</view>
		</view>
		<view class="select">
			<u-select v-model="showTime" :list="Dlist" mode="mutil-column" @confirm="Dconfirm"></u-select>
			<u-select v-model="showPay" mode="single-column" :list="Tlist" @confirm="Tconfirm"></u-select>
		</view>
	</view>
</template>

<script>
	import {
		loading,
		hidden,
		toast
	} from '../../../tips/myTips.js'
	import {
		getCost
	} from '../../../api/api.js'

	export default {
		onLoad() {
			uni.$u.mpShare.title = '页面分享';
			let that = this
			loading()
			getCost().then((res) => {
				if (res.data.code == 0) {
					hidden()
					console.log("查询结果:", res.data.result)
					that.costInfo = res.data.result
					//分割返回列表的时间，并添加展示数据
					for (let i = 0, len = that.costInfo.length; i < len; i++) {
						let list = {}
						list.year = that.dateChangeFormat('YYYY', that.costInfo[i].FDATETIME)
						list.month = that.dateChangeFormat('mm', that.costInfo[i].FDATETIME)
						list.day = that.dateChangeFormat('dd', that.costInfo[i].FDATETIME)
						list.hours = that.dateChangeFormat('HH', that.costInfo[i].FDATETIME)
						list.minutes = that.dateChangeFormat('MM', that.costInfo[i].FDATETIME)
						list.seconds = that.dateChangeFormat('SS', that.costInfo[i].FDATETIME)
						list.showFAMOUNT = Number(that.costInfo[i].FAMOUNT).toFixed(2)
						if (that.costInfo[i].FAMOUNTTYPE == 2) {
							list.FAMOUNT = "-" + Number(that.costInfo[i].FAMOUNT).toFixed(2)
							that.$set(that.costInfo[i], 'showFAMOUNT', list.FAMOUNT)
							that.$set(that.costInfo[i], 'dec', "支出信息费")
						}
						if (that.costInfo[i].FAMOUNTTYPE == 3) {
							list.FAMOUNT = "-" + Number(that.costInfo[i].FAMOUNT).toFixed(2)
							that.$set(that.costInfo[i], 'showFAMOUNT', list.FAMOUNT)
							that.$set(that.costInfo[i], 'dec', "提现")
						}
						if (that.costInfo[i].FAMOUNTTYPE == 1) {
							list.FAMOUNT = Number(that.costInfo[i].FAMOUNT).toFixed(2)
							that.$set(that.costInfo[i], 'showFAMOUNT', list.FAMOUNT)
							that.$set(that.costInfo[i], 'dec', "收入")
						}
						that.$set(that.costInfo[i], 'year', list.year)
						that.$set(that.costInfo[i], 'month', list.month)
						that.$set(that.costInfo[i], 'day', list.day)
						that.$set(that.costInfo[i], 'hours', list.hours)
						that.$set(that.costInfo[i], 'minutes', list.minutes)
						that.$set(that.costInfo[i], 'seconds', list.seconds)
						that.$set(that.costInfo[i], 'showFAMOUNT', list.FAMOUNT)
						that.Slist = that.costInfo
						that.Syear.push(list.year)
						that.Smonth.push(list.month)
					}
				} else {
					hidden()
					console.log("错误信息:", res)
					toast(res.data.message)
				}
			})
		},
		onShow() {

		},
		data() {
			return {
				costInfo: '',
				time: '交易时间',
				text: '全部类型',
				showTime: false,
				showPay: false,
				//选择列表
				Slist: [],
				showChoiceTime: false,
				choiceTime: "",
				ctype: "",
				cyear: "",
				cmonth: "",
				Syear: [],
				Smonth: [],
				//类型选择
				Tlist: [{
						value: 0,
						label: "全部类型"
					},
					{
						value: 1,
						label: "收入"
					},
					{
						value: 2,
						label: "支出信息费"
					},
					{
						value: 3,
						label: "提现"
					},
				],
				//时间选择
				Dlist: [
					[],
					[],
				],
			}
		},
		methods: {
			show(status) {
				if (status == 'time') {
					this.showTime = true
				}
				if (status == 'pay') {
					this.showPay = true
				}
			},
			//检查选中的类型数据并赋值，筛选符合类型的数据
			Tconfirm(e) {
				this.text = e[0].label
				this.ctype = e[0].value
				this.choiceList()
			},
			//检查选中的时间数据并赋值，筛选符合时间的数据
			Dconfirm(e) {
				console.log(e);
				this.cyear = e[0].value
				this.cmonth = e[1].value
				this.choiceTime = e[0].value + '-' + e[1].value
				this.choiceList()
			},
			//分割数据的时间
			dateChangeFormat(format, date) {
				date = new Date(date);
				const dataItem = {
					'Y+': date.getFullYear().toString(),
					'm+': (date.getMonth() + 1).toString(),
					'd+': date.getDate().toString(),
					'H+': date.getHours().toString(),
					'M+': date.getMinutes().toString(),
					'S+': date.getSeconds().toString(),
				};
				Object.keys(dataItem).forEach((item) => {
					const ret = new RegExp(`(${item})`).exec(format);
					if (ret) {
						format = format.replace(ret[1], ret[1].length === 1 ? dataItem[item] : dataItem[item]
							.padStart(ret[1].length, '0'));
					}
				});
				return format;
			},
			//显示时间按钮变化
			change(status) {
				if (status) {
					console.log(this.Slist)
					this.cyear = this.Slist[0].year
					this.cmonth = this.Slist[0].month
					this.choiceTime = this.Slist[0].year + "-" + this.Slist[0].month
					this.selectDate()
					console.log(this.costInfo)
					this.choiceList()
				} else {
					this.cyear = ""
					this.cmonth = ""
					this.choiceList()
				}
			},
			//根据条件筛选符合条件的数据
			choiceList() {
				this.Slist = []
				if (this.cyear != "") {
					for (let i = 0, len = this.costInfo.length; i < len; i++) {
						if (this.cyear == this.costInfo[i].year && this.cmonth == this.costInfo[i].month && this.ctype ==
							this.costInfo[i].FAMOUNTTYPE) {
							this.Slist.push(this.costInfo[i])
						}
						if (this.cyear == this.costInfo[i].year && this.cmonth == this.costInfo[i].month && this.ctype ==
							0) {
							this.Slist.push(this.costInfo[i])
						}
					}
				} else {
					for (let i = 0, len = this.costInfo.length; i < len; i++) {
						if (this.ctype == this.costInfo[i].FAMOUNTTYPE) {
							this.Slist.push(this.costInfo[i])
						}
						if (this.ctype == 0) {
							this.Slist.push(this.costInfo[i])
						}
					}
				}
			},
			//查找数据中的时间属性
			selectDate() {
				this.Syear = Array.from(new Set(this.Syear))
				this.Smonth = Array.from(new Set(this.Smonth))
				this.Dlist = [
					[],
					[]
				]
				for (let i = 0, len = this.Syear.length; i < len; i++) {
					let list = {}
					list.value = this.Syear[i]
					list.label = this.Syear[i] + "年"
					this.Dlist[0].push(list)
				}
				for (let i = 0, len = this.Smonth.length; i < len; i++) {
					let list = {}
					list.value = this.Smonth[i]
					list.label = this.Smonth[i] + "月"
					this.Dlist[1].push(list)
				}
				console.log(this.Dlist)
			}
		}
	}
</script>

<style>
	.empty {
		margin: 5% 0;
	}

	.header {
		height: 80rpx;
		line-height: 80rpx;
		background-color: #f3f3f3;
		display: flex;
		flex-direction: row;
	}

	.LText {
		display: block;
		margin-left: 20rpx;
		margin-top: 20rpx;
	}

	.LcontentB {
		display: block;
		font-size: 30rpx;
		color: #b9b9b9;
	}

	.Lcontent {
		display: block;
		font-size: 30rpx;

	}

	.Rcontent {
		display: block;
		font-size: 30rpx;
		color: #4CD964;
		margin-right: 20rpx;
		margin-top: 30rpx;
		/* 		margin-left: 360rpx; */
		margin-left: auto;

	}

	.layOut {
		display: flex;
		flex-direction: row;
	}

	.line {
		display: block;
		margin-top: 20rpx;
		margin-left: 20rpx;
		margin-right: 20rpx;
		bottom: 100rpx;
	}
	.topItem{
		flex:1;
		justify-content: center; 
		align-items: center;
		text-align: center;
		vertical-align: middle;
		font-size: 35rpx;
	}
</style>
