<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-form-item>
				<u-form-item label="门店" prop="storeName">
					<u-input v-model="form.storeName" placeholder="请输入门店名称" />
				</u-form-item>
				<u-form-item label="巡店人" prop="userName">
					<u-input v-model="form.userName" placeholder="请输入巡店人名称" />
				</u-form-item>
				<u-form-item label="单据状态" prop="status" label-position="top"> 
					<view :class="['status-item', item.checked ? 'active' : '']" v-for="item in statusList" :key="item.id" @click="chooseStatus(item)">
						{{item.dispName}}
					</view>
				</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>
			<!-- <mx-date-picker class="date-picker" :show="showPicker" type="range" format="yyyy-mm-dd" :value="form.time" :show-tips="true" @confirm="onSelected" @cancel="showPicker=false" /> -->
		</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
			}
		},
		watch: {
			visible (newValue, oldValue) {
				if (newValue) {
					this.isshow = newValue
				} else {
				}
			},
			isshow (newValue, oldValue) {
				if (newValue) {
				} else {
					this.$emit('close')
				}
			}
		},
		data() {
			return {
				isshow: this.visible,  // 显示隐藏
				showPicker: false, // 是否显示时间弹窗
				statusList: [], // 状态列表
				sourceTypeList: [], // 检查方式列表
				form: {
					time: '', // 发起时间区间
					storeName: '', // 门店名称
					userName: '' // 巡店人
				},
				beginDate: null, // 开始时间
				endDate: null, // 结束时间
			}
		},
		computed: {
			// 已选单据状态
			status() {
				return this.filterData(this.statusList)
			},
			// 检查方式
			sourceType () {
				return this.filterData(this.sourceTypeList)
			}
		},
		mounted() {
			// 获取单据状态 和 检查方式列表
			this.getLookUpData('BACKLOG_STATUS')
			this.getLookUpData('BACKLOG_SOURCE_TYPE')
		},
		methods: {
			// 获取数据字典数据
			getLookUpData (code) {
				getLookUpDatas({type:code}).then(res=>{
					if (res.status == 200) {
						res.data.map(item => {
							item.checked = false
						})
						if (code == 'BACKLOG_STATUS') {
							this.statusList = res.data
						}
						if (code == 'BACKLOG_SOURCE_TYPE') {
							this.sourceTypeList = res.data
						}
					}
				})
			},
			// 关闭弹窗
			handleClose () {
				this.isshow = false
			},
			// 打开时间选择弹框
			openPicker () {
				this.showPicker = true
			},
			// 确认日期选择
			onSelected (v) {
				console.log(v,'vvvvvvvv')
				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
			},
			// 选择单据状态
			chooseStatus (item) {
				item.checked = !item.checked
			},
			// 选择检查方式
			chooseSourceType (item) {
				item.checked = !item.checked
			},
			// 查询
			handleSearch () {
				let params = {
					beginDate: this.beginDate,
					endDate: this.endDate,
					storeName: this.form.storeName,
					userName: this.form.userName,
					status: this.status,
					sourceType: this.sourceType
				}
				this.$emit('refresh',params)
				this.isshow = false
			},
			// 重置
			resetForm () {
				this.$refs.uForm.resetFields()
				this.statusList.map(item=>{
					item.checked = false
				})
				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: #e2e2e2;
				color: #333;
				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>
