<template>
	<view class="schedule">
		<view class="sche_calendar">
			<view class="sche_month">
				<view class="iconfont icon-arrows_left" @click="prev"></view>
				<view>{{time}}</view>
				<view class="iconfont icon-arrows_right" @click="next"></view>
			</view>
			<view class="calendar">
				<view class='header'>
					<view v-for="(item,index) in date" :key="item" :class='[(index == todayIndex) && isTodayWeek ? "weekMark" : ""]'>{{item}}
					</view>
				</view>	
				<!-- 每一天你的日期 -->
				<view class='date-box'>
					<view 
						v-for="(item,index) in dateArr" 
						:key="item.isToday" :class='[nowDate == item.nowdate ? "nowDay" : "",todayData == item.isToday ? "nowdate" : ""]'
						@click="everyDay(item.isToday,item.dateNum)">
						<view></view>
						<view class='date-head' >
							<view>{{item.dateNum}}</view>
							<view :class='item.isEvent ? "circle_dot":""'></view>
							<view v-if="item.dateNum >=start && item.dateNum <= end > 0">{{item.dateNum ==start?'开始':''}}</view>
							<view v-if="item.dateNum >=start && item.dateNum <= end > 0">{{item.dateNum ==end?'结束':''}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="sche_con">
			<view class="sche_con_item"  v-for="(item,index) in list[nowDate]" :key="index">
				<view class="item_left">
					<view class="start-time" >
						<image :src="BASE_IMG_URL+'/start_time.png'" class="timeimg" mode=""></image>
						:{{item.start_time}} 
					</view>
					<view class="content-time" >
						<view class="title">{{item.title}}</view>
						<view>备注：{{item.remark}}</view>
						<view>关联业务：</view>
						<view class="yewu" v-if="item.relation_type == 3" @click="toContractDetail(item.relation_id)">
							<image :src="BASE_IMG_URL+'/file.png'" class="fileimg" mode=""></image>
							合同
						</view>
						<view class="yewu" v-if="item.relation_type == 1" @click="toMore(item.relation_id)">
							<image :src="BASE_IMG_URL+'/file.png'" class="fileimg" mode=""></image>
							客户
						</view>
						<view class="yewu" v-if="item.relation_type == 2" @click="jumpDetail(item.relation_id)">
							<image :src="BASE_IMG_URL+'/file.png'" class="fileimg" mode=""></image>
							联系人
						</view>
						<view class="yewu" v-if="item.relation_type == 4" @click="moreClick(item.relation_id)">
							<image :src="BASE_IMG_URL+'/file.png'" class="fileimg" mode=""></image>
							线索
						</view>
					</view>
					<view class="end-time">
						<image :src="BASE_IMG_URL+'/end_time.png'" class="timeimg" mode=""></image>
						:{{item.end_time}}
					</view>
				</view>
				<view @click="toEditstatuss(item)">
					<view class="item_right" v-if="item.status == 0">
						<image :src="BASE_IMG_URL+'/time.png'"></image>
						<view>未开始</view>
					</view>
					<view class="item_right" v-if="item.status == 1">
						<image :src="BASE_IMG_URL+'/time_ing.png'"></image>
						<view>进行中</view>
					</view>
					<view class="item_right" v-if="item.status == 2">
						<image :src="BASE_IMG_URL+'/time_end.png'"></image>
						<view>已结束</view>
					</view>
					<view class="item_right" v-if="item.status == 3">
						<image :src="BASE_IMG_URL+'/time_over.png'"></image>
						<view>已取消</view>
					</view>
				</view>
			</view>
			<view class="noList" v-if="!list[nowDate] || list[nowDate].length == 0">没有更多日程</view>
		</view>
		<view class="btn_fix" @click="addSchedule">
			<image :src="BASE_IMG_URL+'1.png'"></image>
		</view>
		
		<!-- 日程修改状态 -->
		<pop-status
			:id="scheid"
			:schestatus="schestatus"
			v-if="statusPop"
			@closeStatus="closeStatus"
			@changeStatus="changeStatus"
			@changeSuccess="changeStatusSuccess"
		></pop-status>
	</view>
</template>

<script>
	import { getNowData } from '@/util/weekTime.js'
	import { netScheduleList, netEditScheculeStatus } from '@/api/index.js'
	import {pageJumps} from "../index_page_jumps.js";
	import popStatus from '../components/popStatus.vue'
	import { BASE_IMG_URL } from '@/util/api.js'
	
	export default {
		mixins: [pageJumps],
		components:{
			popStatus
		},
		data() {
			return {
				BASE_IMG_URL:BASE_IMG_URL,
				date: ['日', '一', '二', '三', '四', '五', '六'],
				todayIndex: 0, //表示星期几
				dateArr: [], //储存每个月日期的数组
				todayData: 0, //今天是几号
				year: 0, //年
				month: 0, //月
				day: 0, //日
				isToday: 0, //今天是几号
				isTodayWeek: false, //
				start: 0, //开始
				end: 0, //结束
				dataquan: false, //是否自定义选择区间
				time: '', //当前月份
				nowDate:'',  //今天 日期  2021-04-20
				
				list:[],
				statusPop:false,   //修改 日程  状态 弹窗
				scheid:'',   //日程id
				schestatus:'',  //日程 状态
			}
		},
		onLoad() {

		},
		onShow() {
			this.getDataInfo()
			//获取 当月  数据
			this.getList()
			this.nowDate = getNowData()
		},
		mounted() {

		},
		methods: {
			addSchedule(){
				uni.navigateTo({
					url:'/pages/index/newSche/newSche'
				})
			},
			//获取数据
			getList() {
				let firstDay = ''
				this.dateArr.forEach(ele=>{
					if(ele.dateNum == 1){
						firstDay = ele.nowdate
					}
				})
				let lastDay = this.dateArr[this.dateArr.length - 1].nowdate
				let params = {
					start_day: firstDay,
					end_day: lastDay
				}
				netScheduleList(params).then(res=>{
					this.list = res.data
					// 判断  当天是否有 日程
					this.handleIsEvent()
					
				})
			},
			handleIsEvent() {
				let dateArr = this.dateArr
				let list = this.list
				dateArr.forEach(ele=>{
					if(ele.dateNum){
						if(list[ele.isToday].length != 0) {
							ele.isEvent = true
						}else{
							ele.isEvent = false
						}
					}
				})
				this.dateArr = dateArr
			},
			getDataInfo() {
				let now = new Date();
				let year = now.getFullYear();
				let month = (now.getMonth() + 1 + '').padStart(2, 0);
				let day = (now.getDate() + '').padStart(2, 0);
				this.dateInit();
				this.year = year;
				this.month = month;
				this.day = now.getDate()
				this.isToday = '' + year + "/" + month + "/" + day
				this.todayData = '' + year + "/" + month + "/" + day
				this.time = `${year}年${month}月`
				
			},
			// 点击切换日期
			everyDay(date, dateNum) {
				// start 和 end 全不是0
				if (this.dataquan === true) {
					if (this.start != 0 && this.end != 0) {
						this.start = 0 //暂时定义为开始时间
						this.end = 0
					}
					// start 和 end 全部是0
					if (this.start == 0 && this.end == 0) {
						this.start = dateNum //暂时定义为开始时间
					} else if (dateNum < this.start) {
						this.end = this.start
						this.start = dateNum
					} else if (dateNum > this.start) {
						this.end = dateNum
					}
				}
				this.nowDate = date
			},
			// 初始化当前日期格式  yyyy-mm-dd
			dateInit: function(setYear, setMonth) {
				let dateArr = []; //需要遍历的日历数组数据
				let arrLen = 0; //dateArr的数组长度
				let now = setYear ? new Date(setYear, setMonth) : new Date();
				let year = setYear || now.getFullYear();
				let nextYear = 0;
				let month = setMonth || now.getMonth(); //没有+1方便后面计算当月总天数
				let nextMonth = (month + 1) > 11 ? 1 : (month + 1);
				let startWeek = new Date(year + '/' + (month + 1) + '/' + 1).getDay(); //目标月1号对应的星期
				let dayNums = new Date(year, nextMonth, 0).getDate(); //获取目标月有多少天
				let obj = {};
				let num = 0;
				//  
				if (month + 1 > 11) {
					nextYear = year + 1;
					dayNums = new Date(nextYear, nextMonth, 0).getDate();
				}
				arrLen = startWeek + dayNums;
				for (let i = 0; i < arrLen; i++) {
					if (i >= startWeek) {
						num = i - startWeek + 1;
						obj = {
							isToday: '' + year + "-" + ((month + 1) + '').padStart(2, 0) + "-" + (num + '').padStart(2, 0),
							nowdate: '' + year + "-" + ((month + 1) + '').padStart(2, 0) + "-" + (num + '').padStart(2, 0),
							dateNum: num,
						}
					} else {
						obj = {};
					}
					dateArr[i] = obj;
				}
				this.dateArr = dateArr
				let nowDate = new Date();
				let nowYear = nowDate.getFullYear();
				let nowMonth = nowDate.getMonth() + 1;
				let nowWeek = nowDate.getDay();
				let getYear = setYear || nowYear;
				let getMonth = setMonth >= 0 ? (setMonth + 1) : nowMonth;
				if (nowYear == getYear && nowMonth == getMonth) {
					this.isTodayWeek = true,
						this.todayIndex = nowWeek
				} else {
					this.isTodayWeek = false,
						this.todayIndex = -1
				}
			},
			prev() {
				this.year = parseInt(this.month) - 1 == 0 ? this.year - 1 : this.year
				this.month = parseInt(this.month) - 1 == 0 ? 12 : parseInt(this.month) - 1;
				let setYear = this.year;
				let setMonth = this.month - 1
				this.time = `${setYear}年${(this.month+'').padStart(2,0)}月`
				this.dateInit(setYear, setMonth);
				let nowDate = ''
				this.dateArr.forEach(ele=>{
					if(ele.dateNum == 1){
						nowDate = ele.nowdate
					}
				})
				this.nowDate = nowDate
				this.getList()
			},
			next() {
				this.year = parseInt(this.month) + 1 > 12 ? this.year + 1 : this.year
				this.month = parseInt(this.month) + 1 > 12 ? 1 : parseInt(this.month) + 1;
				let setYear = this.year;
				let setMonth = this.month - 1
				this.time = `${setYear}年${(this.month+'').padStart(2,0)}月`
				this.dateInit(setYear, setMonth);
				let nowDate = ''
				this.dateArr.forEach(ele=>{
					if(ele.dateNum == 1){
						nowDate = ele.nowdate
					}
				})
				this.nowDate = nowDate
				this.getList()
			},
			//修改日程状态
			toEditstatuss(item) {
				this.scheid = item.id
				this.schestatus = item.status
				this.statusPop = true
				uni.hideTabBar({
					animation:true
				})
			},
			//关闭  修改日程 状态 
			closeStatus() {
				this.statusPop = false
				this.schestatus = ''
				this.scheid = ''
				uni.showTabBar({
					animation:true
				})
			},
			changeStatus(status) {
				this.schestatus = status
			},
			//日程 状态  修改成功
			changeStatusSuccess() {
				let params = {
					id: this.scheid,
					status: this.schestatus
				}
				netEditScheculeStatus(params).then(res=>{
					this.statusPop = false
					this.schestatus = ''
					this.scheid = ''
					uni.showToast({
						title:'日程状态修改成功',
						icon:'none'
					})
					uni.showTabBar({
						animation:true
					})
					setTimeout(()=>{
						this.getList()
					},1000)
				})
			},
		}
	}
</script>
<style lang="scss" scoped>
	.start-time{
		color: #0081FF;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		.timeimg{
			width:41rpx;
			height:33rpx;
		}
	}
	.end-time{
		color: #ff7800;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		.timeimg{
			width:41rpx;
			height:33rpx;
		}
	}
	.sche_calendar {
		background-color: #fff;
		margin-bottom: 20rpx;

		.sche_month {
			display: flex;
			height: 120rpx;
			line-height: 120rpx;
			text-align: center;
			font-size: 32rpx;
			justify-content: space-between;
			padding: 0 50rpx;

			.icon-arrows_left,
			.icon-arrows_right {
				font-size: 50rpx;
			}
		}

		.calendar {
			padding: 0 20rpx;
			font-size: 24rpx;
			color: #999;
			background-color: #fff;

			.header {
				view {
					display: inline-block;
					width: 14.285%;
					text-align: center;
					padding: 20rpx 0;
				}

				.weekMark {
					position: relative;

					view {
						position: absolute;
						bottom: 0;
						left: 0;
						width: 100%;
						border-bottom: 1px solid #22A7F6;
					}
				}
			}

			.date-box>view {
				position: relative;
				display: inline-block;
				width: 14.285%;
				color: #020202;
				text-align: center;
				vertical-align: middle;
				margin: 10rpx 0;

			}

		}
	}

	.sche_con {
		background-color: #fff;
		padding: 24rpx 24rpx 5rpx 24rpx;
	
		.sche_con_item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			background-color: #fcfcfc;
			padding:20rpx 10rpx;
			margin-bottom: 24rpx;
			
			.item_left {
				flex: 1;
				color: #999;
				view{
					margin-bottom: 10rpx;
				}
				.title{
					color: #333;
				}
				.yewu{
					display: flex;
					justify-content: flex-start;
					align-items: center;
					background:#f5f7fa;
					padding:10rpx;
					.fileimg{
						width:20rpx;
						height:20rpx;
						margin-right:15rpx;
					}
				}
				:last-child {
					margin-bottom:0;
				}
			}
	
			.item_right {
				display: flex;
				align-items: center;
				color: #999;
	
				image {
					width: 40rpx;
					height: 40rpx;
					margin-right: 10rpx;
				}
			}
		}
	}

	.circle_dot {
		margin-left: 45rpx;
		margin-top: 12rpx;
		width: 12rpx;
		height: 15rpx;
		background-color: $uni-text-color;
		border-radius: 8rpx;
	}

	.red {
		background: red !important;
		border-radius: 0 !important;
		width: auto !important;
		color: #333 !important;
	}



	.date-box {
		font-size: 0;
		padding: 10rpx 0;
		background-color: #fff;
	}

	.btn_fix {
		position: fixed;
		bottom: 100rpx;
		right: 80rpx;

		image {
			width: 80rpx;
			height: 80rpx;

			background-color: #fff;
			border-radius: 40rpx;
		}
	}

	.date-head {
		height: 60rpx;
		/* line-height: 60rpx; */
		font-size: 26rpx;
		display: flex;
		flex-flow: column;
		justify-content: flex-start;
		color: #999;
	}

	.nowDay .date-head {
		width: 60rpx;
		border-radius: 50%;
		text-align: center;
		color: #fff !important;
		background-color: $uni-text-color;
		margin: -30rpx auto 0;
		font-weight: normal !important;
		line-height: 61rpx;
	}

	.nowdate .date-head {
		color: #52c1f5;
		font-weight: bold;
	}

	.van-hairline--top-bottom {
		position: fixed;
	}
	.noList{
		font-size:24rpx;
		text-align: center;
		padding:80rpx 0;
		color:#666;
	}
</style>
