<template>
	<view class="uDropdown-wrap">
		<!-- 顶部筛选条件 -->
		<u-dropdown ref="uDropdown" class="uDropdown" @close="closeDropdownItem">
			<u-dropdown-item v-model="searchForm.inspectorId" :title="isAll" @change="dropdownChange" :options="screenClass"></u-dropdown-item>
			<u-dropdown-item title="检查方式" class="screen-dropdown">
				<view class="slot-content">
					<scroll-view class="scroll-view" style="height: 180upx;" scroll-y="true">
						<view class="screen-module">
							<view :class="['status-item', item.checked ? 'active' : '']" v-for="item in sourceTypeList" :key="item.id" @click="chooseSourceType(item)">
								{{ item.dispName }}
							</view>
						</view>
					</scroll-view>
					<u-button style="border-radius: 0;" type="primary" @click="closeTypeDropdown">确定</u-button>
				</view>
			</u-dropdown-item>
			<u-dropdown-item v-model="searchForm.status" title="状态" :options="screenState" @change="dropdownChange"></u-dropdown-item>
			<u-dropdown-item title="筛选" class="screen-dropdown">
				<view class="slot-content">
					<scroll-view class="scroll-view" scroll-y="true">
						<view class="screen-module">
							<text class="screen-tit">时间区间：</text>
							<view class="screen-time-val">
								<text @click="onShowDatePicker('range')">{{ range.length == 0 ? '请选择' : range[0] + '~' + range[1] }}</text>
								<u-icon v-show="range.length != 0" name="close-circle-fill" color="#c8c0cc" size="32" class="close-circle" @click="range=[]"></u-icon>
							</view>
						</view>
						<view class="screen-module">
							<text class="screen-tit">门店：</text>
							<view class="screen-inp-val">
								<u-input class="screen-inp" v-model="moreScreen.storeName" :height="56" placeholder="请输入门店名称" type="text" :border="true" />
							</view>
						</view>
						<view class="screen-module">
							<text class="screen-tit">巡店人：</text>
							<view class="screen-inp-val">
								<u-input class="screen-inp" v-model="moreScreen.userName" :height="56" placeholder="请输入巡店人名字" type="text" :border="true" />
							</view>
						</view>
					</scroll-view>
					<u-button style="border-radius: 0;" type="primary" @click="closeDropdown">确定</u-button>
				</view>
			</u-dropdown-item>
		</u-dropdown>
		<!-- 选择时间区间 -->
		<w-picker
			:visible.sync="showPicker"
			mode="range" 
			startYear="2017" 
			endYear="2030"
			:value="searchForm.creatTime"
			:current="false"
			@confirm="onSelected($event,'range')"
			@cancel="onSelected"
			ref="range"></w-picker>
	</view>
</template>

<script>
	import wPicker from '@/components/w-picker/w-picker.vue'
	import { getLookUpDatas } from '@/api/data.js'
	export default{
		components: { wPicker },
		props: {
			defaultParams: {
				type: Object,
				default: () => {
					return {}
				}
			}
		},
		data(){
			return{
				searchForm: this.defaultParams,  //  筛选条件
				screenClass: [  // 过滤条件  类型
					{ label: '全部', value: '', },
					{ label: '我的巡店', value: 1 }
				],
				screenMethod: [],  // 过滤条件  检查方式
				screenState: [],  // 过滤条件  状态
				showPicker: false,  //  是否选择创建时间
				range: [],  //  筛选创建时间的默认值
				sourceTypeList: [], // 检查方式数据列表
				moreScreen: {  //  数据暂存
					storeName: '',  //  门店
					userName: ''  //  巡店人
				}
			}
		},
		computed: {
			isAll(){
				let str = this.searchForm.inspectorId ? '我的巡店' : '全部'
				return str
			},
			// 检查方式
			sourceType() {
				return this.filterData(this.sourceTypeList)
			}
		},
		mounted() {
			this.getLookUpData('TASK_TYPE')  // 获取检查方式
			this.getLookUpData('TASK_STATUS')  // 获取状态
			this.init()
		},
		methods: {
			//  初始化
			init(){
				this.searchForm.creatTime = this.defaultParams.creatTime ? this.defaultParams.creatTime : []
				this.range = this.searchForm.creatTime
				this.searchForm.storeName = this.defaultParams.storeName ? this.defaultParams.storeName : ''
				this.searchForm.userName = this.defaultParams.userName ? this.defaultParams.userName : ''
				this.moreScreen.storeName = this.searchForm.storeName
				this.moreScreen.userName = this.searchForm.userName
				this.defaultSourceType()
			},
			//  巡店人、状态  筛选条件  change
			dropdownChange(val){
				this.$emit('refresh', this.searchForm)
			},
			//  检查方式  筛选条件
			closeTypeDropdown(){
				this.searchForm.typeList = this.sourceType
				this.$emit('refresh', this.searchForm)
				this.$refs.uDropdown.close()
			},
			//  筛选  筛选条件
			closeDropdown(){
				this.searchForm.creatTime = this.range
				this.searchForm.storeName = this.moreScreen.storeName
				this.searchForm.userName = this.moreScreen.userName
				this.$emit('refresh', this.searchForm)
				this.$refs.uDropdown.close()
			},
			//  默认检查方式
			defaultSourceType(){
				if(this.defaultParams.typeList){
					setTimeout(()=>{
						this.sourceTypeList.map(item => {
							if(this.defaultParams.typeList.indexOf(item.code) != -1){
								item.checked = true
							}else{
								item.checked = false
							}
						})
					},0)
				}
			},
			//  关闭
			closeDropdownItem(ind){
				if(ind == 1){  //  检查方式
					this.defaultSourceType()
				}else if(ind == 3){  //  多条件筛选
					this.moreScreen.storeName = this.searchForm.storeName
					this.moreScreen.userName = this.searchForm.userName
					this.range = this.searchForm.creatTime
				}
			},
			// 获取数据字典数据
			getLookUpData(code) {
				getLookUpDatas({ type: code }).then(res => {
					if (res.status == 200) {
						res.data.map(item => {
							item.label = item.dispName
							item.value = item.code
							item.checked = false
						})
						if (code == 'TASK_TYPE') {  //  检查方式
							this.sourceTypeList = res.data
						}else if(code == 'TASK_STATUS'){  //  状态
							res.data.unshift({label: '全部', value: ''})
							this.screenState = res.data
						}
					}
				});
			},
			// 选择检查方式
			chooseSourceType(item) {
				item.checked = !item.checked
			},
			// 过滤已选数据
			filterData(data) {
				let arr = []
				data.map(item => {
					if (item.checked) {
						arr.push(item.code)
					}
				})
				return arr
			},
			//  显示日期选择
			onShowDatePicker(type){
				this.showPicker = true
			},
			//  日期选择
			onSelected(e) {
				this.showPicker = false
				if(e) {
					this.range = e.value
				}
			},
		}
	}
</script>

<style lang="scss">
	.uDropdown-wrap{
		height: 100%;
		border-bottom: 1px solid #EEEEEE;
		box-shadow: 1px 1px 3px #eeeeee;
		// 筛选条件
		.uDropdown{
			background-color: #fff;
			.screen-dropdown{
				.slot-content{
					background-color: #fff;
					.scroll-view{
						height: 320upx;
						padding: 20upx 0;
						box-sizing: border-box;
						.screen-module{
							margin: 0 30upx;
							padding: 14upx 0;
							display: flex;
							align-items: center;
							.screen-tit{
								color: #464646;
								font-size: 26upx;
								width: 140upx;
								flex-shrink: 0;
							}
							.screen-time-val{
								flex-grow: 1;
								font-size: 26upx;
								background-color: #f4f4f4;
								border-radius: 12upx;
								padding: 16upx 10upx;
								text-align: center;
								text{
									display: inline-block;
									width: 85%;
								}
								.close-circle{
									display: inline-block;
									padding-left: 3%;
									vertical-align: bottom;
								}
							}
							.screen-inp-val{
								flex-grow: 1;
								.screen-inp{
									color: #464646;
									font-size: 26upx;
								}
							}
						}
						.status-item {
							display: inline-block;
							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;
						}
					}
				}
			}
		}
	}
</style>
