<template>
	<view class="expense_list">
		<u-sticky bgColor="#FFFFFF">
			<u-tabs :list="tabList" lineColor="#2E75E6" :lineWidth="40" :lineHeight="6" @change="onTabChange"></u-tabs>
		</u-sticky>

		<view v-if="currentTab === '费用报销'">
			<expenseCard v-for="( month, index ) in monthArr" :key="index"
				:personExpenseList="personExpenseGroup[month]" :month="month"></expenseCard>
		</view>
		<view v-else>
			<view class="flex expense_list_filter flex_cen flex_center" @click="showPop = true">
				<image src="../../static/img/fliter.png" style="margin-right: 12rpx; height: 36rpx; width: 40rpx;">
				</image>
				<view>筛选</view>
			</view>

			<expenseReceiptCard v-for="( driverExpensReceipt, index ) in driverExpensReceiptList" :key="index"
				:expenseReceiptInfo="driverExpensReceipt"></expenseReceiptCard>
		</view>

		<u-popup :show="showPop" mode="right" @close="close" customStyle="width:650rpx">
			<view class="expense_list_pop_content">
				<view style="margin-bottom: 16rpx;">
					<text>订单日期</text>
				</view>
				<view class="flex_cen flex_center">
					<!-- <view @click="startFocus=true">
						<u--input readonly inputAlign="center" customStyle="background-color: #F0F0F0;" border="none"
							v-model="startDate">
						</u--input>
					</view>
					<view class="expense_list_pop_content_connect">

					</view>
					<view @click="endFocus=true">
						<u--input readonly inputAlign="center" customStyle="background-color: #F0F0F0;" border="none"
							v-model="endDate">
						</u--input>
					</view> -->
					<uni-datetime-picker v-model="startDate" type="daterange" />
				</view>

				<view style="margin-top: 48rpx;">
					<text>费用类型</text>
					<view class="expense_list_pop_content_type">
						<view class="expense_list_pop_content_type_label" @click="choiceType(filterLabel.value)"
							v-for=" (filterLabel, index) in filterLabelArr"
							:style=" choiceTypeArr.includes(filterLabel.value)?'background-color:rgba(46, 117, 230, .1);color:rgba(46, 117, 230, 1);':''">
							{{filterLabel.label}}
						</view>
					</view>
				</view>
			</view>
			<view class="flex_cen flex_center expense_list_pop_foot">
				<button @click="resetFliter">重置</button>
				<button @click="confirmFliter"
					style="background-color: #2E75E6; color: #FFFFFF; border: none;">确定</button>
			</view>

		</u-popup>
		
		
		
	<!-- 	<u-datetime-picker :show="startFocus || endFocus" mode="date" @cancel="startFocus=endFocus=false"
			@confirm="datePick">
		</u-datetime-picker> -->
	</view>
</template>

<script>
	import {
		GetDriverExpenseList,
		getOptionEnum,
		GetDriverExpensReceiptList
	} from '../../api/apiList.js'
	import {
		formatGMT
	} from '../../utils/util.js'
	export default {
		data() {
			return {
				tabList: [{
					name: '费用报销',
				}, {
					name: '报销单',
				}, ],
				pageNum: 1,
				personExpenseGroup: {},
				monthArr: [],
				currentTab: '费用报销',
				driverExpensReceiptList: [],
				mobile: '',
				showPop: false,
				filterLabelArr: [],
				startFocus: false,
				startDate: [],
				endFocus: false,
				endDate: '',
				choiceTypeArr: [],
				isFliter: false
			};
		},
		onLoad(option) {
			const {
				mobile
			} = option
			this.mobile = mobile

		},

		onShow() {
			this.pageNum = 1
			this.personExpenseGroup = {}
			this.monthArr = []
			this.filterLabelArr = []
			this.getDriverExpenseList()
			this.driverExpensReceiptList = []
			this.getOptionEnumInit()
			this.getDriverExpensReceiptList()
			this.isFliter = false
			this.resetFliter()
		},
		methods: {
			getDriverExpenseList() {
				GetDriverExpenseList({
					"args": {
						"pageNum": this.pageNum,
						"pageSize": 20,
						"restrictions": [{
							"field": "driver.tel",
							"type": "EQ",
							"value": this.mobile
						}]
					}
				}).then(res => {
					res.data.data.datas.map(item => {
						const month = this.getMonth(item.insertDate)
						if (this.monthArr.includes(month)) {
							this.personExpenseGroup[month].push(item)
						} else {
							this.monthArr.push(month)
							this.personExpenseGroup[month] = [item]
						}
					})
				})
			},
			getDriverExpensReceiptList() {
				let restrictions = [{
					"field": "driver.tel",
					"type": "EQ",
					"value": this.mobile
				}]
				if (this.isFliter) {
					if (this.startDate[0] && this.startDate[1]) {
						restrictions.push({
							"field": "insertDate",
							"type": "GE",
							"value": new Date(this.startDate[0].trim()).toISOString()
						})
						restrictions.push({
							"field": "insertDate",
							"type": "LE",
							"value": new Date(this.startDate[1].trim()).toISOString()
						})
					}
					if (this.choiceTypeArr.length) {
						restrictions.push({
							"field": "status",
							"type": "IN",
							"value": this.choiceTypeArr
						})
					}
				}
				GetDriverExpensReceiptList({
					"args": {
						"pageNum": this.pageNum,
						"pageSize": 20,
						restrictions
					}
				}).then(res => {
					this.driverExpensReceiptList = [...this.driverExpensReceiptList, ...res.data.data.datas]
				})
			},
			getMonth(date) {
				const dateObj = new Date(date)
				return dateObj.getFullYear() + '-' + (dateObj.getMonth() + 1)
			},
			onTabChange(item) {
				this.currentTab = item.name
			},
			close() {
				this.showPop = false
				this.resetFliter()
			},
			getOptionEnumInit() {
				getOptionEnum('ReimbursementStatus').then(res => {
					this.filterLabelArr = res.data.data.datas
				})
			},

			datePick(value) {
				const pickDate = formatGMT(value.value, 'D')
				this.startFocus && (this.startDate = pickDate)
				this.endFocus && (this.endDate = pickDate)
				this.startFocus = this.endFocus = false
			},
			choiceType(val) {
				this.choiceTypeArr.includes(val) ? this.choiceTypeArr.splice(this.choiceTypeArr.indexOf(val), 1) : this
					.choiceTypeArr.push(val)

			},
			resetFliter() {
				this.choiceTypeArr = []
				this.startFocus = this.endFocus = false
				this.startDate = this.endDate = ''
				this.isFliter = false
			},
			confirmFliter() {
				this.showPop = false
				this.isFliter = true
				this.pageNum = 1
				this.personExpenseGroup = {}
				this.monthArr = []
				this.getDriverExpenseList()
				this.driverExpensReceiptList = []
				this.getDriverExpensReceiptList()
			}
		},
		onReachBottom() {
			this.pageNum += 1
			this.getDriverExpenseList()
			this.getDriverExpensReceiptList()
		}
	}
</script>

<style lang="scss">
	.expense_list {
		min-height: 100vh;
		background-color: #FAFAFA;

		/deep/ .u-tabs__wrapper__nav__item {
			width: 50%;
		}
		/deep/ .u-sticky{
			/* #ifdef H5 */
			top: 0 !important;
			/* #endif */
		}

		.expense_list_filter {
			color: #434343;
			font-size: 28rpx;
			justify-content: flex-end;
			padding-top: 32rpx;
			padding-right: 24rpx;
			padding-bottom: 16rpx;
		}

		.expense_list_pop_content {
			margin: 24rpx;
			height: calc(100vh - 144rpx);
		}

		.expense_list_pop_foot {
			height: 144rpx;
			position: absolute;
			bottom: 0;
			width: 100%;
			border-top: 2rpx solid #F0F0F0;

			button {
				height: 88rpx;
				width: 284rpx;
				border-radius: 44rpx;
				background-color: #FFFFFF;
				border: 3rpx solid #E5E5E5;
				font-size: 32rpx;
				color: #434343;
				line-height: 88rpx;
			}
		}

		.expense_list_pop_content_type {
			display: flex;
			flex-wrap: wrap;

			.expense_list_pop_content_type_label {
				height: 64rpx;
				width: 150rpx;
				line-height: 64rpx;
				text-align: center;
				background-color: #F0F0F0;
				border-radius: 8rpx;
				font-size: 26rpx;
				margin: 24rpx;
				color: #323233;
			}
		}

		.expense_list_pop_content_connect {
			margin: 0 16rpx;
			height: 0;
			width: 39rpx;
			border: 2rpx solid #BFBFBF;
		}
	}
</style>
