<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="stationName" class="form-item"><u-input v-model="form.stationName" :maxlength="30" placeholder="请输入网点名称" /></u-form-item>
				<u-form-item label="排序方式：" prop="orderType" class="form-item">
					<view @tap="openSort=true" :style="{color: form.orderType?null:'#c0c4cc'}">{{orderTypeName}}</view>
				</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>
		<u-picker mode="selector" v-model="openSort" :default-selector="selectDefault" :range="list" range-key="dispName" @confirm="confirm"></u-picker>
	</div>
</template>

<script>
import { getLookUpDatas } from '@/api/data.js'
export default {
	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: '#07c160',
				backgroundColor: '#07c160',
				color: '#fff'
			},
			isShow: this.visible, // 显示隐藏
			form: {
				stationName: '',  //  套餐名称
				orderType: '', // 客户手机
			},
			list: [],
			openSort: false,  //  选择
			orderTypeName: '请选择',
			selectDefault: [0],  //  下拉默认选中项
		};
	},
	mounted() {
		this.init()
	},
	created() {
		this.getLookUpDatas()
	},
	methods: {
		//  获取数据字典
		getLookUpDatas(){
			getLookUpDatas({ type: 'WAIT_CLEAN_SORT_RULE' }).then(res => {
				if(res.status == 200){
					this.list = res.data || []
					this.form.orderType = this.defaultParams.orderType ? this.defaultParams.orderType : ''
					if(this.defaultParams.orderType){
						this.list.map((item, index) => {
							if(item.code == this.form.orderType){
								this.orderTypeName = this.list[index].dispName
								this.selectDefault[0] = index
							}
						})
					}
				}else{
					this.list = []
					this.form.orderType = ''
					this.orderTypeName = '请选择'
					this.selectDefault = [0]
				}
			})
		},
		//  初始化数据
		init(){
			this.form.stationName = this.defaultParams.stationName ? this.defaultParams.stationName : ''
		},
		// 关闭弹窗
		handleClose() {
			this.isShow = false
		},
		// 查询
		handleSearch() {
			let params = {
				stationName: this.form.stationName,
				orderType: this.form.orderType,
			};
			this.$emit('refresh', params)
			this.isShow = false
		},
		// 重置
		resetForm() {
			this.$refs.uForm.resetFields()
			this.$emit('refresh', {orderType: 'max'})
			this.isShow = false
		},
		//  确定
		confirm(v){
			this.selectDefault = v
			this.form.orderType = this.list[v[0]].code
			this.orderTypeName = this.list[v[0]].dispName
		}
	}
};
</script>

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