<template>
	<view class="">
	<uni-popup ref="popup" type="top" background-color="#fff">
		<scroll-view scroll-y class="scrollbox" style="height:600rpx;background:#fff;" >
			<!--筛选模块  -->
			<view class="screen_content"  @tap.stop.prevent>
				<view class="fir_li">
					<view class="li_label">是否已读状态</view>
					<picker @change="changeRead" :value="readIndex" :range="readList">
						<view class="li_box" >
							<view class="form_right" style="text-align: center;">
								<view :class="readList[readIndex] ? 'valueActive' : ''">
									{{readList[readIndex] ? readList[readIndex] : '点击选择'}}
								</view>
								<view class="iconfont icon-arrows_right"></view>
							</view>
						</view>
					</picker>
				</view>
				<view class="fir_li">
					<view class="li_label">跟进类型</view>
					<picker @change="changeType" :value="typeIndex" :range="typeList" :range-key="'name'">
						<view class="li_box" >
							<view class="form_right" style="text-align: center;">
								<view :class="typeList[typeIndex] ? 'valueActive' : ''">
									{{typeList[typeIndex] ? typeList[typeIndex].name : '点击选择'}}
								</view>
								<view class="iconfont icon-arrows_right"></view>
							</view>
						</view>
					</picker>
				</view>
				<view class="fir_li" v-if="typeList[typeIndex] && typeList[typeIndex].id == 1">
					<view class="li_label">关联客户</view>
					<view class="li_box" @click="toSelectCustomer">
						<view class="form_right" style="text-align: center;">
							<view :class="customerObj ? 'valueActive' : ''">
								{{customerObj ? customerObj.name : '点击选择'}}
							</view>
							<view class="iconfont icon-arrows_right"></view>
						</view>
					</view>
				</view>
				<view class="fir_li" v-if="typeList[typeIndex] && typeList[typeIndex].id == 2">
					<view class="li_label">关联联系人</view>
					<view class="li_box" @click="toSelectLink">
						<view class="form_right" style="text-align: center;">
							<view :class="linkObj ? 'valueActive' : ''">
								{{linkObj ? linkObj.name : '点击选择'}}
							</view>
							<view class="iconfont icon-arrows_right"></view>
						</view>
					</view>
				</view>
				<view class="fir_li" v-if="typeList[typeIndex] && typeList[typeIndex].id == 3">
					<view class="li_label">关联合同</view>
					<view class="li_box" @click="toSelectContract">
						<view class="form_right" style="text-align: center;">
							<view :class="contractObj ? 'valueActive' : ''">
								{{contractObj ? contractObj.name : '点击选择'}}
							</view>
							<view class="iconfont icon-arrows_right"></view>
						</view>
					</view>
				</view>
				<view class="fir_li" v-if="typeList[typeIndex] && typeList[typeIndex].id == 4">
					<view class="li_label">关联线索</view>
					<view class="li_box" @click="toSelectClue">
						<view class="form_right" style="text-align: center;">
							<view :class="clueObj ? 'valueActive' : ''">
								{{clueObj ? clueObj.name : '点击选择'}}
							</view>
							<view class="iconfont icon-arrows_right"></view>
						</view>
					</view>
				</view>
				<view class="fir_li" v-if="typeList[typeIndex] && typeList[typeIndex].id == 5">
					<view class="li_label">关联商机</view>
					<view class="li_box" @click="toSelectBus">
						<view class="form_right" style="text-align: center;">
							<view :class="busObj ? 'valueActive' : ''">
								{{busObj ? busObj.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;">
						<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 ? 'valueactive' : '' ">
									{{start_time ? start_time : '开始时间'}}</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 ? 'valueactive' : '' ">{{end_time ? end_time : '结束时间'}}
								</view>
							</view>
						</picker>
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="button_bottom">
			<view @tap.stop="reset">重置</view>
			<view @tap.stop="sureQuery">确定</view>
		</view>
	</uni-popup>
	
	<select-customer ref="customerChild" @getCustomerinfo="getCustomerinfo"></select-customer>
	<!-- 选择联系人 -->
	<select-link ref="linkChild" @linkInfo="linkInfo"></select-link>
	<!-- 选择合同 -->
	<select-contract ref="contractChild" @contractInfo="contractInfo"></select-contract>
	<!-- 选择线索 -->
	<select-clue ref="clueChild" @clueInfo="clueInfo"></select-clue>
	<!-- 关联商机 -->
	<select-business ref="businessChild" @sureBusiness="sureBusiness"></select-business>
	</view>
</template>

<script>
	import selectCustomer from '@/components/selectCustomer.vue'
	import selectLink from '@/components/selectLink.vue'
	import selectContract from '@/components/selectContract.vue'
	import selectClue from '@/components/selectClue.vue'
	import { netContact } from '@/api/kehu.js'
	import selectBusiness from '@/components/selectBusiness.vue'
	
	export default{
		components:{
			selectCustomer,
			selectLink,
			selectContract,
			selectClue,
			selectBusiness
		},
		props:{
			
		},
		data() {
			return{
				times:'',
				readList:['全部','已读','未读'],
				readIndex:0,   //是否已读
				customerObj:null,   //客户
				linkObj:null,   //联系人
				contractObj:null,   //合同
				clueObj:null,   //线索
				busObj:null,   //商机
				typeList:[
					{ id:'1', name:'客户'},
					{ id:'5', name:'商机'},
					{ id:'2', name:'联系人'},
					{ id:'3', name:'合同'},
					{ id:'4', name:'线索'}
				],
				typeIndex:null,
				start_time:'',  //开始时间
				end_time:'',  //结束时间
				showIndex:1
			}
		},
		methods:{
			init(arr) {
				this.$refs.popup.open()
				if(arr && arr.length!=0 && this.showIndex == 1){
					this.start_time = arr[0]
					this.end_time = arr[1]
				}
			},
			close() {
				this.$refs.popup.close()
			},
			changeRead(e) {
				this.readIndex = e.detail.value
			},
			changeType(e) {
				this.typeIndex = e.detail.value
			},
			//选择关联客户
			toSelectCustomer() {
				this.$refs.customerChild.init()
			},
			getCustomerinfo(obj) {
				this.customerObj = obj
			},
			//选择关联联系人
			toSelectLink() {
				this.$refs.linkChild.init()
			},
			linkInfo(obj) {
				this.linkObj = obj
			},
			//选择合同
			toSelectContract() {
				this.$refs.contractChild.init()
			},
			contractInfo(obj) {
				this.contractObj = obj
			},
			//选择关联线索
			toSelectClue() {
				this.$refs.clueChild.init()
			},
			clueInfo(obj) {
				this.clueObj = obj
			},
			//选择关联 商机
			toSelectBus() {
				this.$refs.businessChild.init()
			},
			sureBusiness(obj) {
				this.busObj = obj
			},
			changeTime(e) {
				this.times = e.detail.value
			},
			changeStartTime(e) {
				this.showIndex = 2
				this.start_time = e.detail.value
				if(!this.end_time){
					this.end_time = e.detail.value
				}
			},
			changeEndTime(e) {
				this.showIndex = 2
				this.end_time = e.detail.value
				if(!this.start_time){
					this.start_time = e.detail.value
				}
			},
			reset() {
				this.times = ''
				this.start_time = ''
				this.end_time = ''
				this.typeIndex = null
				this.customerObj = null
				this.linkObj = null
				this.contractObj = null
				this.clueObj = null
				this.busObj = null
				this.readIndex = 0
			},
			sureQuery() {
				let linkid = ''
				if(this.typeList[this.typeIndex]){
					if(this.typeList[this.typeIndex].id == 1){
						linkid = this.customerObj?this.customerObj.id:''
					}else if(this.typeList[this.typeIndex].id == 2){
						linkid = this.linkObj?this.linkObj.id:''
					}else if(this.typeList[this.typeIndex].id == 3){
						linkid = this.contractObj?this.contractObj.id:''
					}else if(this.typeList[this.typeIndex].id == 4){
						linkid = this.clueObj?this.clueObj.id:''
					}else if(this.typeList[this.typeIndex].id == 5){
						linkid = this.busObj?this.busObj.id:''
					}
				}
				let params = {
					times: (this.start_time && this.end_time) ? (this.start_time + ',' + this.end_time) : '',
					is_read: this.readIndex,
					relation_type:this.typeList[this.typeIndex]?this.typeList[this.typeIndex].id:'',
					relation_id:linkid
				}
				this.close()
				this.$emit('sureParams',params)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.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{
				border-radius: 15rpx;
				border:1rpx solid #CCCCCC;
				height:60rpx;
				padding:0 35rpx;
				line-height: 60rpx;
			}
			.form_right {
				display: flex;
				justify-content: space-between;
				color:#999;
				image {
					width: 40rpx;
					height: 40rpx;
					margin: 28rpx 5rpx 0 0;
				}
				.rightinput{
					height:60rpx;
					line-height: 60rpx;
					width:100%;
				}
			}
		}
	}
	.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;
		}
	}
</style>