<template>
	<view class="new_sche">
		<view class="top_required">
			只展示<span style="color:#f00">必填</span>字段<switch :checked="isRequired" color="#008EFF" @change="changeRequired" />
		</view>
		<view class="fllow_form">
			<view><text>*</text>日程标题</view>
			<view class="form_right">
				<input type="text" :class="title ? 'valueActive' : '' " class="inputtext" v-model="title"  placeholder-style="font-size:30rpx;color: #999;" placeholder="填写日程标题" />
			</view>
		</view>
		<view class="fllow_form">
			<view><text>*</text>开始时间</view>
			<!-- #ifdef MP-WEIXIN -->
			<picker @change="changeStartTime" mode="multiSelector" :range="dateTimeArray" :value="dateTime">
				<view class="form_right">
					<view :class="start_time ? 'valueActive' : '' ">{{start_time ? start_time : '点击选择'}}</view>
					<view class="iconfont icon-arrows_right"></view>
				</view>
			</picker>
			<!-- #endif -->
			<!-- #ifdef H5 || APP-PLUS-->
			<picker @change="changeTime" mode="multiSelector" :range="dateTimeArray" :value="dateTime">
				<view class="form_right">
					<view :class="start_time ? 'valueActive' : '' ">{{start_time ? start_time : '点击选择'}}</view>
					<view class="iconfont icon-arrows_right"></view>
				</view>
			</picker>
			<!-- #endif -->
			<!-- #ifdef MP-ALIPAY -->
			<picker @change="changeAlipayStartTime" mode="date">
				<view class="form_right">
					<view :class="start_time ? 'valueActive' : '' ">{{start_time ? start_time : '点击选择'}}</view>
					<view class="iconfont icon-arrows_right"></view>
				</view>
			</picker>
			<!-- #endif -->
		</view>
		<view class="fllow_form">
			<view><text>*</text>结束时间</view>
			<!-- #ifdef MP-WEIXIN -->
			<picker @change="changeEndTime" mode="multiSelector" :range="dateTimeArray" :value="dateTime">
				<view class="form_right">
					<view :class="end_time ? 'valueActive' : '' ">{{end_time ? end_time : '点击选择'}}</view>
					<view class="iconfont icon-arrows_right"></view>
				</view>
			</picker>
			<!-- #endif -->
			<!-- #ifdef H5 || APP-PLUS-->
			<picker @change="changeendTimeh5" mode="multiSelector" :range="dateTimeArray" :value="dateTime">
				<view class="form_right">
					<view :class="end_time ? 'valueActive' : '' ">{{end_time ? end_time : '点击选择'}}</view>
					<view class="iconfont icon-arrows_right"></view>
				</view>
			</picker>
			<!-- #endif -->
			<!-- #ifdef MP-ALIPAY -->
			<picker @change="changeAlipayEndTime" mode="date">
				<view class="form_right">
					<view :class="end_time ? 'valueActive' : '' ">{{end_time ? end_time : '点击选择'}}</view>
					<view class="iconfont icon-arrows_right"></view>
				</view>
			</picker>
			<!-- #endif -->
		</view>
		<view class="fllow_form">
			<view><text>*</text>自动结束</view>
			<view class="form_right">
				<radio-group @change="changeAuto" class="labellist">
					<label class="" class="labelbox">
						<view>
							<radio color="#008EFF" value="1"/>
						</view>
						<view>是</view>
					</label>
					<label class="" class="labelbox">
						<view>
							<radio color="#008EFF" value="0"/>
						</view>
						<view>否</view>
					</label>
				</radio-group>
			</view>
		</view>
		<view class="fllow_form">
			<view><text>*</text>日程状态</view>
			<picker @change="changeSchedule" :range="schedule_list" :value="status">
				<view class="form_right">
					<view :class="schedule_list[status] ? 'valueActive' : '' ">{{schedule_list[status] ? schedule_list[status]  : '点击选择'}}</view>
					<view class="iconfont icon-arrows_right"></view>
				</view>
			</picker>
		</view>
		<view class="fllow_form">
			<view><text>*</text>紧要程度</view>
			<picker @change="changeLevel" :range="level_list" :range-key="'name'" :value="levelIndex">
				<view class="form_right">
					<view :class="level_list[levelIndex] ? 'valueActive' : '' ">{{level_list[levelIndex] ? level_list[levelIndex].name : '点击选择'}}</view>
					<view class="iconfont icon-arrows_right"></view>
				</view>
			</picker>
		</view>
		<view class="fllow_form">
			<view><text>*</text>提醒时间</view>
			<picker @change="changeRemind" :range="remind_list" :value="remindtype">
				<view class="form_right">
					<view :class="remind_list[remindtype] ? 'valueActive' : '' ">{{remind_list[remindtype] ? remind_list[remindtype] : '点击选择'}}</view>
					<view class="iconfont icon-arrows_right"></view>
				</view>
			</picker>
		</view>
		<view class="fllow_form">
			<view><text>*</text>关联类型</view>
			<view class="form_right">
				<radio-group @change="changeRelation" class="labellist">
					<label class="" v-for="(item, index) in relation_List" :key="index" class="labelbox">
						<view>
							<radio color="#008EFF" :value="item.id" :checked="item.id == relation_type" />
						</view>
						<view>{{item.name}}</view>
					</label>
				</radio-group>
			</view>
		</view>
		<view class="fllow_form" v-if="relationName">
			<view><text>*</text>{{relationName}}</view>
			<view class="form_right" @click="toSelectGuanglian">
				<view :class="guanlianName ? 'valueActive' : '' ">{{guanlianName ? guanlianName : '点击选择'}}</view>
				<view class="iconfont icon-arrows_right"></view>
			</view>
		</view>
		<view class="fllow_area" v-if="!isRequired">
			<view class="area_head">备注</view>
			<textarea v-model="remark" :class="remark ? 'valueActive' : '' " placeholder="备注" placeholder-style="color:#999" />
		</view>
		<view class="btn_g bg-blue button-hover round" @click="$noMultipleClicks(toAdd)">
			保存
		</view>
		
		<!-- 选择客户 -->
		<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>
	</view>
	
</template>

<script> 
	import { netPrevCustomer, netLianxiren, netSelectContract } from '@/api/kehu.js'
	import { netAddSchedule } from '@/api/index.js'
	import { netGetNopageClueslist } from '@/api/clues.js'
	import { dateTimePicker, getMonthDay } from '@/util/dateTimePicker.js'
	import selectCustomer from '@/components/selectCustomer.vue'
	import selectLink from '@/components/selectLink.vue'
	import selectContract from '@/components/selectContract.vue'
	import selectClue from '@/components/selectClue.vue'
	
	export default {
		components:{
			selectCustomer,
			selectLink,
			selectContract,
			selectClue
		},
		data() {
			return {
				schedule_list:['未开始','执行中','已结束','已取消'],   //日程状态
				level_list:[
					{ id:1, name:'重要'},
					{ id:2, name:'紧急'},
					{ id:3, name:'普通'},
					{ id:4, name:'重要且紧急'},
				],   //紧要程度
				levelIndex:null,
				remind_list:['准时提醒','5分钟前','15分钟前','30分钟前','一个小时前','两个小时前','一天前','两天前','一周前'],
				relation_List:[
					{ id:'1', name:'客户'},
					{ id:'2', name:'联系人'},
					{ id:'3', name:'合同'},
					{ id:'4', name:'线索'}
				],   //关联类型
				
				guanlianName:'',   //关联  名称 
				title:'',  //标题
				start_time:'',   //开始时间
				end_time:'', //结束时间
				status:'',   //日程状态 
				auto_end:'',  //自动结束  0否   1是
				level:'',   //紧要程度
				remindtype:'',   //提醒时间
				remark:'',   //备注
				relation_type:'',   //关联类型
				relation_id:'',   //关联人  id
				relationName:'',   //关联 名称
				
				dateTimeArray:null,
				dateTime:null,
				dateArr:null,
				noClick:true,
				isRequired:false,  //是否只展示必填字段
			}
		},
		onLoad() {
			this.initTime()
		},
		methods: {
			//切换是否只展示必填字段
			changeRequired(e) {
				this.isRequired = e.detail.value
			},
			initTime(){
				let date = new Date();
				let endYear = date.getFullYear();
				// 获取完整的年月日 时分秒，以及默认显示的数组
				let obj = dateTimePicker(this.startYear, endYear);
				// 精确到分的处理，将数组的秒去掉
				let lastArray = obj.dateTimeArray.pop();
				let lastTime = obj.dateTime.pop();
				let lastDate = obj.dateArray.pop()
			 
				this.dateTimeArray=obj.dateTimeArray
				this.dateArr = obj.dateArray
				this.dateTime=obj.dateTime
			},
			//开始时间
			changeStartTime(e) {
				let arr = e.detail.value
				if(arr.includes(-1)){
					uni.showToast({
						title:'请选择正确的时间',
						icon:'none'
					})
					return
				}
				let str = this.handleTime(arr)
				this.start_time = str
			},
			changeAlipayStartTime(e) {
				this.start_time = e.detail.value
			},
			
			//开始时间h5
			changeTime(e) {
				let arr = e.detail.value
				let str = this.handleTime(arr)
				this.start_time = str
			},
			handleTime(arr) {
				let year = this.dateArr[0][arr[0]]
				let month = this.dateArr[1][arr[1]]
				let day = this.dateArr[2][arr[2]]
				let hour = this.dateArr[3][arr[3]]
				let minu = this.dateArr[4][arr[4]]
				let str = year + '-' + month + '-' + day +' '+hour+':'+minu
				return str
			},
			//结束时间 h5
			changeendTimeh5(e) {
				let arr = e.detail.value
				let str = this.handleTime(arr)
				this.end_time = str
			},
			//结束 时间
			changeEndTime(e) {
				let arr = e.detail.value
				if(arr.includes(-1)){
					uni.showToast({
						title:'请选择正确的时间',
						icon:'none'
					})
					return
				}
				let str = this.handleTime(arr)
				this.end_time = str
			},
			changeAlipayEndTime(e) {
				this.end_time = e.detail.value
			},
			handleTime(arr) {
				let year = this.dateArr[0][arr[0]]
				let month = this.dateArr[1][arr[1]]
				let day = this.dateArr[2][arr[2]]
				let hour = this.dateArr[3][arr[3]]
				let minu = this.dateArr[4][arr[4]]
				let str = year+'-'+month+'-'+day+' '+ hour+':'+minu
				return str
			},
			//是否  自动 结束
			changeAuto(e) {
				this.auto_end = e.detail.value
			},
			//日程状态
			changeSchedule(e) {
				this.status = e.detail.value
			},
			//紧要程度
			changeLevel(e) {
				this.levelIndex = e.detail.value
				this.level = this.level_list[e.detail.value].id
			},
			//提醒时间
			changeRemind(e) {
				this.remindtype = e.detail.value
			},
			
			//关联类型
			changeRelation(e) {
				this.relation_id = ''
				this.guanlianid = ''
				this.guanlianName = ''
				this.relation_type = e.detail.value
				if(this.relation_type == 1) {
					//客户
					this.relationName = '关联客户'
				}else if(this.relation_type == 2) {
					//联系人
					this.relationName = '关联联系人'
				}else if(this.relation_type == 3) {
					//合同
					this.relationName = '关联合同'
				}else if(this.relation_type == 4){
					//线索
					this.relationName = '关联线索'
				}
			},
			toSelectGuanglian() {
				if(this.relation_type == 1) {
					this.toSelectCustomer()
				}else if(this.relation_type == 2){
					this.toSelectLink()
				}else if(this.relation_type == 3){
					this.toSelectContract()
				}else{
					this.toSelectClue()
				}
			},
			//选择关联客户
			toSelectCustomer() {
				this.$refs.customerChild.init()
			},
			getCustomerinfo(obj) {
				this.relation_id = obj.id
				this.guanlianName = obj.name
			},
			//选择关联联系人
			toSelectLink() {
				this.$refs.linkChild.init()
			},
			linkInfo(obj) {
				this.relation_id = obj.id
				this.guanlianName = obj.name
			},
			//选择合同
			toSelectContract() {
				this.$refs.contractChild.init()
			},
			contractInfo(obj) {
				this.relation_id = obj.id
				this.guanlianName = obj.name
			},
			//选择关联线索
			toSelectClue() {
				this.$refs.clueChild.init()
			},
			clueInfo(obj) {
				this.relation_id = obj.id
				this.guanlianName = obj.name
			},
			//保存
			toAdd() {
				let {
					title,  //标题
					start_time,   //开始时间
					end_time, //结束时间
					status,   //日程状态 
					auto_end,  //自动结束  0否   1是
					level,   //紧要程度
					remindtype,   //提醒时间
					remark,   //备注
					relation_type,   //关联类型
					relation_id,   //关联人  id
				} = this
				if(!title){
					uni.showToast({
						title:'请输入标题',
						icon:'none'
					})
					return
				}
				if(!start_time){
					uni.showToast({
						title:'请选择开始时间',
						icon:'none'
					})
					return
				}
				if(!end_time){
					uni.showToast({
						title:'请选择结束时间',
						icon:'none'
					})
					return
				}
				if((status == null || status == '') && status != 0){
					uni.showToast({
						title:'请选择日程状态',
						icon:'none'
					})
					return
				}
				if(!auto_end){
					uni.showToast({
						title:'请选择是否自动结束',
						icon:'none'
					})
					return
				}
				if(!level){
					uni.showToast({
						title:'请选择紧要程度',
						icon:'none'
					})
					return
				}
				if((remindtype == null || remindtype == '') && remindtype != 0){
					uni.showToast({
						title:'请选择提醒时间',
						icon:'none'
					})
					return
				}
				if(!relation_type){
					uni.showToast({
						title:'请选择关联类型',
						icon:'none'
					})
					return
				}
				if(!relation_id){
					uni.showToast({
						title:'请选择'+this.relationName,
						icon:'none'
					})
					return
				}
				let params = {
					title,  //标题
					start_time,   //开始时间
					end_time, //结束时间
					status,   //日程状态 
					auto_end,  //自动结束  0否   1是
					level,   //紧要程度
					remindtype,   //提醒时间
					remark,   //备注
					relation_type,   //关联类型
					relation_id,   //关联人  id
				}
				netAddSchedule(params).then(res=>{
					uni.showToast({
						title: res.msg,
						icon:'none'
					})
					setTimeout(()=>{
						uni.navigateBack({
							delta:1
						})
					},2000)
				})
			}
		}
	}
</script>

<style lang="scss">
	.valueActive{
		color:#333;
	}
	.labellist{
		display: flex;
		justify-content: flex-start;
		.labelbox{
			display: flex;
			justify-content: flex-start;
			align-items: center;
		}
	}
	radio{
		transform: scale(0.6);
	}
</style>
<style lang="scss" scoped>
.new_sche {
	font-size: 28rpx;
	padding-bottom:40rpx;
	.shce_title {
		padding: 0 24rpx;
		margin: 30rpx 0;
		background-color: #fff;
		input {
			height: 100rpx;
			line-height: 100rpx;
		}
	}
	.fllow_form {
		display: flex;
		justify-content: space-between;
		height: 100rpx;
		line-height: 100rpx;
		background-color: #fff;
		border-bottom: 1rpx solid #EAEAEA;
		padding: 0 24rpx;
		.form_right {
			display: flex;
			align-items: center;
			color: #999;
			image {
				width: 40rpx;
				height: 40rpx;
				margin: 28rpx 5rpx 0 0;
			}
			.inputtext{
			// 	height: 100rpx;
			// 	line-height: 100rpx;
				text-align: right;
			}
			
		}
		.theme {
			color: #5ca9fe;
		}
		text {
			color: #f00;
			margin-left: 10rpx;
		}
		.form_input {
			// input {
			// 	height: 100rpx;
			// 	line-height: 100rpx;
			// 	text-align: right;
			// }
		}
		.fllow_button {
			margin-top: 15rpx;
		}
	}
	.fllow_area {
		background-color: #fff;
		padding: 0 30rpx 50rpx;
		margin-bottom: 30rpx;
		.area_head {
			height: 100rpx;
			line-height: 100rpx;
			text {
				color: #f00;
			}
		}
		textarea {
			width: 100%;
			height: 300rpx;
			background: #f8f8f8;
		}
	}
}
</style>
