<template>
	<!-- 待办单查询 -->
	<div class="modal-content">
		<u-popup v-model="isShow" class="search-popup" mode="right" @close="handleClose" length="85%">
			<view class="search-title">筛选</view>
			<u-form class="form-content" :model="form" ref="uForm" label-width="150">
				<u-form-item label="支付时间" prop="time" class="form-item">
					<u-input clearable v-model="form.time" disabled placeholder="请选择支付时间区间" class="form-item-inp" @click="openPicker" />
					<u-icon v-show="form.time.length != 0" name="close-circle-fill" color="#c8c0cc" size="32" class="close-circle" @click="clearTime"></u-icon>
				</u-form-item>
				<u-form-item label="支付账号" prop="storeName" class="form-item"><u-input v-model="form.storeName" :maxlength="30" placeholder="请输入支付账号" /></u-form-item>
			</u-form>
			<view class="uni-list-btns">
				<u-button class="handle-btn search-btn" size="medium" hover-class="none" :custom-style="customBtnStyle" @click="handleSearch">查询</u-button>
				<u-button class="handle-btn" size="medium" hover-class="none" @click="resetForm">重置</u-button>
			</view>
		</u-popup>
		<!-- 时间选择器 -->
		<w-picker
			class="date-picker"
			:visible.sync="showPicker"
			mode="range"
			:current="true"
			fields="day"
			@confirm="onSelected($event, 'range')"
			@cancel="showPicker = false"
			ref="date"
		></w-picker>
	</div>
</template>

<script>
import wPicker from '@/components/w-picker/w-picker.vue'
export default {
	components: { wPicker },
	props: {
		visible: {
			type: Boolean,
			default: false
		},
		defaultParams: {  //  默认筛选条件
			type: Object,
			default: () => {
				return {};
			}
		}
	},
	watch: {
		visible(newValue, oldValue) {
			if (newValue) {
				this.isShow = newValue
			}
		},
		isShow(newValue, oldValue) {
			if (newValue) {
			} else {
				this.init()
				this.$emit('close')
			}
		}
	},
	data() {
		return {
			customBtnStyle: {  //  自定义按钮样式
				borderColor: '#2ab4e5',
				backgroundColor: '#2ab4e5',
				color: '#fff'
			},
			isShow: this.visible, // 显示隐藏
			showPicker: false, // 是否显示时间弹窗
			form: {
				time: '', // 发起时间区间
				storeName: '', // 门店名称
			},
			beginDate: null, // 开始时间
			endDate: null // 结束时间
		};
	},
	mounted() {
		this.init()
	},
	methods: {
		//  初始化数据
		init(){
			if(this.defaultParams.beginDate && this.defaultParams.endDate){
				this.form.time = this.defaultParams.beginDate + ' ~ ' + this.defaultParams.endDate
			}
			this.beginDate = this.defaultParams.beginDate ? this.defaultParams.beginDate : ''
			this.endDate = this.defaultParams.endDate ? this.defaultParams.endDate : ''
			this.form.storeName = this.defaultParams.storeName ? this.defaultParams.storeName : ''
		},
		//  清空创建时间
		clearTime(){
			this.form.time = ''
			this.beginDate = ''
			this.endDate = ''
		},
		// 关闭弹窗
		handleClose() {
			this.isShow = false
		},
		// 打开时间选择弹框
		openPicker() {
			this.showPicker = true
		},
		// 确认日期选择
		onSelected(v) {
			this.form.time = v.value[0] + ' ~ ' + v.value[1]
			this.beginDate = v.value[0]
			this.endDate = v.value[1]
			this.showPicker = false
		},
		// 查询
		handleSearch() {
			let params = {
				beginDate: this.beginDate,
				endDate: this.endDate,
				storeName: this.form.storeName,
			};
			this.$emit('refresh', params)
			this.isShow = false
		},
		// 重置
		resetForm() {
			this.$refs.uForm.resetFields()
			this.$emit('refresh', {})
			this.isShow = false
		}
	}
};
</script>

<style lang="scss" scoped>
.modal-content {
	position: relative;
}
.search-popup {
	.search-title {
		text-align: center;
		padding: 18upx 22upx;
		color: #333;
		border-bottom: 1px solid #eee;
	}
	.form-content {
		display: block;
		padding: 0 20upx;
		box-sizing: content-box;
		.status-item {
			width: 30%;
			text-align: center;
			line-height: 60upx;
			background-color: #F8F8F8;
			color: #333;
			border-radius: 6upx;
			font-size: 24upx;
			margin: 0 10upx;
		}
		.active {
			background-color: #ffaa00;
			color: #fff;
		}
		.form-item-inp{
			display: inline-block;
			width: 88%;
			vertical-align: top;
		}
	}
	.uni-list {
		margin: 20upx;
		.uni-list-cell {
			display: flex;
			align-items: center;
			border-bottom: 1px dashed #eeeeee;
			.uni-list-cell-db {
				flex: 1;
			}
			.uni-input {
				height: 2.5em;
				line-height: 2.5em;
			}
		}
	}
	.uni-list-btns {
		display: flex;
		padding: 20upx;
		margin-top: 200rpx;
		.handle-btn {
			font-size: 28upx;
			margin: 0 30upx;
			width: 100%;
			flex: 1;
		}
	}
}
.date-picker {
}
</style>
