<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">
					<u-input clearable v-model="form.time" disabled placeholder="请选择创建时间区间" @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"><u-input v-model="form.storeName" :maxlength="30" placeholder="请输入门店名称" /></u-form-item>
				<u-form-item label="检查方式" prop="sourceType" label-position="top">
					<view :class="['status-item', item.checked ? 'active' : '']" v-for="item in sourceTypeList" :key="item.id" @click="chooseSourceType(item)">
						{{ item.dispName }}
					</view>
				</u-form-item>
			</u-form>
			<view class="uni-list-btns">
				<button type="primary" @click="handleSearch">查询</button>
				<button type="info" @click="resetForm">重置</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'
import { getLookUpDatas } from '@/api/data.js'
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 {
			isShow: this.visible, // 显示隐藏
			showPicker: false, // 是否显示时间弹窗
			sourceTypeList: [], // 检查方式列表
			form: {
				time: '', // 发起时间区间
				storeName: '', // 门店名称
			},
			beginDate: null, // 开始时间
			endDate: null // 结束时间
		};
	},
	computed: {
		// 检查方式
		sourceType() {
			return this.filterData(this.sourceTypeList);
		}
	},
	mounted() {
		// 获取检查方式
		this.getLookUpData('TASK_TYPE')
		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 : ''
			this.defaultSourceType()
		},
		//  默认检查方式
		defaultSourceType(){
			if(this.defaultParams.sourceType){
				setTimeout(()=>{
					this.sourceTypeList.map(item => {
						if(this.defaultParams.sourceType.indexOf(item.code) != -1){
							item.checked = true
						}else{
							item.checked = false
						}
					})
				},0)
			}
		},
		//  清空创建时间
		clearTime(){
			this.form.time = ''
			this.beginDate = ''
			this.endDate = ''
		},
		// 获取数据字典数据
		getLookUpData(code) {
			getLookUpDatas({ type: code }).then(res => {
				if (res.status == 200) {
					res.data.map(item => {
						item.checked = false
					})
					if (code == 'TASK_TYPE') {
						this.sourceTypeList = res.data
					}
				}
			});
		},
		// 关闭弹窗
		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
		},
		// 过滤已选数据
		filterData(data) {
			let arr = []
			data.map(item => {
				if (item.checked) {
					arr.push(item.code)
				}
			});
			return arr
		},
		// 选择检查方式
		chooseSourceType(item) {
			item.checked = !item.checked
		},
		// 查询
		handleSearch() {
			let params = {
				beginDate: this.beginDate,
				endDate: this.endDate,
				storeName: this.form.storeName,
				sourceType: this.sourceType
			};
			this.$emit('refresh', params)
			this.isShow = false
		},
		// 重置
		resetForm() {
			this.$refs.uForm.resetFields()
			this.sourceTypeList.map(item => {
				item.checked = false
			});
			this.$emit('refresh', {})
			this.isShow = false
		}
	}
};
</script>

<style lang="scss" scoped>
.modal-content {
	position: relative;
}
.search-popup {
	.search-title {
		text-align: center;
		padding: 22upx;
		color: #333;
		border-bottom: 1px solid #eee;
	}
	.form-content {
		padding: 0 20upx;
		.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;
		}
	}
	.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;
		uni-button {
			font-size: 28upx;
			margin: 0 30upx;
			flex: 1;
		}
	}
}
.date-picker {
}
</style>
