<template>
	<view class="select_warp">
		<view class="manage_tab">
			<view class="tab_array">
				<image :src="BASE_IMG_URL+'ss.png'" mode="scaleToFill"></image>
				<input @confirm="doSearch" type="text" placeholder-style="color:#999;" 
					:class="name ? 'fontactive' : ''" v-model="name" placeholder="门店名称" class="li_box" />
			</view>
			<view class="tab_screen" @click="screenClick">
				<image :src="BASE_IMG_URL+'shaixuan.png'" mode="scaleToFill"></image>
			</view>
		</view>
		<view class="" style="height:80rpx;"></view>
		<uni-popup ref="popup" type="top" background-color="#fff">
			<scroll-view scroll-y class="scrollbox" style="height:800rpx;background:#fff;">
				<!--筛选模块  -->
				<view class="screen_content" @tap.stop.prevent>
					<view class="fir_li">
						<view class="li_label">门店星级</view>
						<u-rate :count="5" @change="changeLevel" v-model="level" active-color="#FFD049" inactive-color="#b2b2b2" gutter="20"></u-rate>
					</view>
					<view class="fir_li">
						<view class="li_label">门店来源</view>
						<picker @change="changeSource" :value="sourceIndex" :range="sourceList">
							<view class="li_box">
								<view class="form_right">
									<view :class="source ? 'fontactive' : ''">{{source ? source : '点击选择'}}</view>
									<view class="iconfont icon-arrows_right"></view>
								</view>
							</view>
						</picker>
					</view>
					<view class="fir_li">
						<view class="li_label">跟进状态</view>
						<picker @change="changeFollow" :value="followIndex" :range="followList">
							<view class="li_box">
								<view class="form_right">
									<view :class="follow ? 'fontactive' : ''">{{follow ? follow : '点击选择'}}</view>
									<view class="iconfont icon-arrows_right"></view>
								</view>
							</view>
						</picker>
					</view>
					<view class="fir_li">
						<view class="li_label">成交状态</view>
						<picker @change="changeStatus" :value="statusIndex" :range="statusArr">
							<view class="li_box">
								<view class="form_right">
									<view :class="statusArr[statusIndex] ? 'fontactive' : ''">{{statusArr[statusIndex] ? statusArr[statusIndex] : '点击选择'}}</view>
									<view class="iconfont icon-arrows_right"></view>
								</view>
							</view>
						</picker>
					</view>
					<view class="fir_li" v-if="!isSeas">
						<view class="li_label">归属人</view>
						<view class="li_box" @click="toSelectStaff">
							<view class="form_right">
								<view :class="staffObj ? 'fontactive' : ''">
									{{staffObj ? staffObj.name : '点击选择'}}</view>
								<view class="iconfont icon-arrows_right"></view>
							</view>
						</view>
					</view>
					<view class="fir_li">
						<view class="li_label">新增门店时间</view>
						<view class="li_box" style="display: flex;justify-content: space-around;">
							<picker @change="changeNewStartTime" mode="date"  :end="new_end_time"
								style="width:50%;border-right:1rpx solid #CCCCCC">
								<view class="form_right">
									<view style="flex:1;text-align: center;"
										:class="new_start_time ? 'fontactive' : ''">
										{{new_start_time ? new_start_time : '开始时间'}}</view>
									<view class="iconfont icon-arrows_right"></view>
								</view>
							</picker>
							<picker @change="changeNewEndTime" mode="date" :start="new_start_time" style="width:50%">
								<view class="form_right">
									<view style="flex:1;text-align: center;" :class="new_end_time ? 'fontactive' : ''">
										{{new_end_time ? new_end_time : '结束时间'}}</view>
									<view class="iconfont icon-arrows_right"></view>
								</view>
							</picker>
						</view>
					</view>
					<view class="fir_li">
						<view class="li_label">下次联系时间</view>
						<view class="li_box" style="display: flex;justify-content: space-around;">
							<picker @change="changeStartTime" mode="date" :end="end_time"
								style="width:50%;border-right:1rpx solid #CCCCCC">
								<view class="form_right">
									<view style="flex:1;text-align: center;" :class="start_time ? 'fontactive' : ''">
										{{start_time ? start_time : '开始时间'}}</view>
									<view class="iconfont icon-arrows_right"></view>
								</view>
							</picker>
							<picker @change="changeEndTime" mode="date" :start="start_time" style="width:50%">
								<view class="form_right">
									<view style="flex:1;text-align: center;" :class="end_time ? 'fontactive' : ''">
										{{end_time ? end_time : '结束时间'}}</view>
									<view class="iconfont icon-arrows_right"></view>
								</view>
							</picker>
						</view>
					</view>
					
					<search-item v-for="(item,index) in searchForm" :key="index" :objInfo="item" @changeSearchData="changeSearchData"></search-item>
				</view>
			</scroll-view>
			<view class="button_bottom">
				<view @tap.stop="reset">重置</view>
				<view @tap.stop="sureQuery">确定</view>
			</view>
		</uni-popup>
		
		<select-staff ref="staffChild" @sureStaff="sureStaff"></select-staff>
	</view>
</template>

<script>
	import selectStaff from '@/components/selectStaff.vue'
	import searchItem from '../../search/searchitem.vue'
	
	import {
		netSelect,
		netSearchStaffList
	} from '@/api/kehu.js'
	import {
		BASE_IMG_URL
	} from '@/util/api.js'
	export default {
		components:{
			selectStaff,
			searchItem
		},
		data() {
			return {
				Strname: "", //搜索字串
				BASE_IMG_URL: BASE_IMG_URL,
				date: '',
				show: false,
				start_time: '', //开始时间
				end_time: '', //结束时间

				name: '', //门店名称
				level: '', //门店星级
				source: '', //门店来源
				sourceList: [],
				sourceIndex: null,
				follow: '', //跟进状态
				followList: [],
				followIndex: null,
				createtime: '', //新增门店时间
				new_start_time: '', //新增门店开始时间
				new_end_time: '', //新增门店结束时间

				next_time: '', //下次跟进时间

				staffObj:null,  //归属人
				ascripId:null,
				count:5,
				value:1,
				showIndex:1,
				//成交状态
				contract_status:'',   //0：未成交  1：已成交
				statusArr:['未成交','已成交'],
				statusIndex:null,
			}
		},
		props: {
			sortData: {
				type: Array,
				default: []
			},
			de_starttime: { //开始时间
				type: String,
				default: '',
			},
			de_endtime: { //结束时间
				type: String,
				default: ''
			},
			isSeas: {
				type: Boolean,
				default: false
			},
			de_staffid: { //归属人
				type: Number, 
				default: null
			},
			cusStatus: {   
				type: String,
				default: ''
			},
			searchForm:{
				type: Array,
				default:()=>{
					return []
				}
			}
		},
		created() {
			this.ascripId = this.de_staffid
			
			this.getSelect()
		},
		methods: {
			//成交状态
			changeStatus(e) {
				this.statusIndex = e.detail.value
			},
			//搜索
			doSearch() {
				let params = {
					name:this.name,
				}
				if (!this.isSeas) {
					params = Object.assign({}, params, {
						staff_id: this.ascripId
					})
				}
				this.$emit('queryData', params)
			},
			getSelect() {
				netSelect().then(res => {
					this.sourceList = res.data['门店来源']
					this.followList = res.data['门店状态']
				})
			},
			//选择归属人
			toSelectStaff() {
				this.$refs.staffChild.init()
			},
			sureStaff(obj) {
				this.staffObj = obj
				this.ascripId = obj.id
			},
			//归属人
			getGuishu() {
				netSearchStaffList().then(res => {
					let arr = res.data
					if (this.ascripId) {
						arr.forEach((ele, index) => {
							if (ele.id == this.ascripId) {
								this.staffObj = ele
							}
						})
					}
				})
			},
			screenClick() {
				this.$refs.popup.open()
				if(this.showIndex == 1){
					this.new_start_time = this.de_starttime
					this.new_end_time = this.de_endtime
					this.statusIndex = this.cusStatus
				}
			},
			// 新增门店 开始时间
			changeNewStartTime(e) {
				this.showIndex = 2
				this.new_start_time = e.detail.value
				if(!this.new_end_time){
					this.new_end_time = e.detail.value
				}
			},
			//新增门店  结束时间
			changeNewEndTime(e) {
				this.showIndex = 2
				this.new_end_time = e.detail.value
				if(!this.new_start_time){
					this.new_start_time = e.detail.value
				}
			},
			changeLevel(e) {
				this.level = e
			},
			//下次联系  时间
			changeStartTime(e) {
				this.start_time = e.detail.value
				if(!this.end_time){
					this.end_time = e.detail.value
				}
			},
			changeEndTime(e) {
				this.end_time = e.detail.value
				if(!this.start_time){
					this.start_time = e.detail.value
				}
			},
			//门店来源
			changeSource(e) {
				this.sourceIndex = e.detail.value
				this.source = this.sourceList[e.detail.value]
			},
			//跟进状态
			changeFollow(e) {
				this.followIndex = e.detail.value
				this.follow = this.followList[e.detail.value]
			},
			//门店 新增 时间
			changeCreatetime(e) {
				this.createtime = e.detail.value
			},
			changeSearchData(type,key,value){
				this.$emit('changeSearchData',type,key,value)
			},
			//重置
			reset() {
				this.level = ''
				this.source = ''
				this.sourceIndex = null
				this.follow = ''
				this.followIndex = null
				this.next_time = ''
				this.start_time = ''
				this.end_time = '',
				this.createtime = '',
				this.new_start_time = '',
				this.new_end_time = '',
				this.ascripId = null
				this.staffObj = null
				this.statusIndex = null
				this.$emit('resetForm')
			},
			//确定
			sureQuery() {
				let params = {
					level: this.level,
					source: this.source,
					follow: this.follow,
					createtime: (this.new_start_time && this.new_end_time) ? (this.new_start_time + ',' + this.new_end_time) : '',
					next_time: (this.start_time && this.end_time) ? (this.start_time + ',' + this.end_time) : '',
					contract_status:this.statusIndex,
					staff_id:this.staffObj?this.staffObj.id:'',
					
				}
				if (!this.isSeas) {
					params = Object.assign({}, params, {
						staff_id: this.ascripId
					})
				}
				this.$refs.popup.close()
				this.$emit('queryData', params)
			}

		}
	}
</script>

<style lang="scss">
	.fontactive {
		color: #333;
	}

	.select_warp {
		z-index: 9;
		position: relative;
	}

	.custom {
		padding: 100rpx 0 180rpx;
		text-align: center;
		color: $uni-text-color;
		font-size: 28rpx;
	}

	.warpbox {
		position: fixed;
		width: 750rpx;
		left: 0;
		top: 80rpx;
		bottom: 0;
		z-index: 2;
		background: rgba(0, 0, 0, 0.7);
		// height:890rpx;
	}

	.screen_content {
		width: 702rpx;
		z-index: 2;
		border-top: 1rpx solid #CCCCCC;
		background-color: #fff;
		padding: 24rpx;

		.fir_li {
			margin-bottom: 20rpx;

			.li_label {
				font-size: 28rpx;
				color: #333333;
				margin-bottom: 15rpx;
			}

			.li_box {
				// width:700rpx;
				width: 100%;
				border-radius: 15rpx;
				border: 1rpx solid #CCCCCC;
				height: 60rpx;
				padding: 0 35rpx;
				line-height: 60rpx;
				color: #999;
				
			}

			.form_right {
				display: flex;
				justify-content: space-between;

				image {
					width: 40rpx;
					height: 40rpx;
					margin: 28rpx 5rpx 0 0;
				}

			}
		}
	}

	.sort_content {
		background-color: #fff;
		padding-top: 24rpx;
		width: 750rpx;
		z-index: 2;
		border-top: 1rpx solid #CCCCCC;

		.sort_feedback {
			margin-bottom: 20rpx;
			margin-top: 20rpx;

			.feedback_header {
				padding: 0 0 30rpx 24rpx;
				font-size: 28rpx;
				font-weight: 700;
			}

			.feedback_main {
				padding: 0 24rpx;

				.main_con {
					padding-left: 20rpx;
					background-color: #fff;
					height: 80rpx;
					line-height: 80rpx;
					border: 1rpx solid #EAEAEA;
				}

				.tabactive {
					border: 1rpx solid #ff7800;
					color: #ff7800;
				}
			}
		}
	}

	.manage_tab {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		background-color: $uni-text-color;
		display: flex;
		justify-content: space-around;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 1;
		.tab_array {
			display: flex;
			background: #fff;
			border-radius: 34rpx;
			height: 68rpx;
			width: 467rpx;
			overflow: hidden;
			image {
				width: 50rpx;
				height: 50rpx;
				margin: 8rpx 15rpx 0 28rpx;
			}

			input {
				line-height: 68rpx;
				height: 68rpx;
			}
		}

		.tab_screen {
			display: flex;

			image {
				width: 43rpx;
				height: 44rpx;
				margin-top: 10rpx;
			}
		}
	}

	.active {
		&::after {
			content: '';
			float: right;
			margin-right: 40rpx;
		}
	}

	.mar-180 {
		margin-bottom: 180rpx;
	}

	.button_bottom {
		display: flex;
		width: 100%;
		height: 90rpx;
		background-color: #fff;
		line-height: 90rpx;
		text-align: center;
		font-size: 32rpx;

		:first-child {
			flex: 1;
			color: $uni-text-color;
			border-top: 1rpx solid #CCCCCC;
		}

		:last-child {
			flex: 1;
			background-color: $uni-text-color;
			color: #fff;
		}
	}

	.sort_active {
		color: $uni-text-color;
	}

	// 筛选中的点击事件
	.screen_active {
		border: 1rpx solid $uni-text-color !important;
	}
</style>
