<!DOCTYPE html>
<html>
	<head> 
		<meta charset="utf-8"><meta http-equiv="Expires" content="0"><meta http-equiv="Pragma" content="no-cache"><meta http-equiv="Cache-control" content="no-cache"><meta http-equiv="Cache" content="no-cache">
		<title>订单日历</title>
	</head>

	<body>
		<script type="text/javascript">
			var pageVue = null;
			function loadJsCss(callback) {
				var jscss_urls = [
					{id: "js7", type: "js", url: "root/js/calendar.js"},
				];
				window.top.initJsCss(document, jscss_urls, callback);
			}
		
			function initVue() {
				new BasicsVue({
					el: "#hbody",
					data: {
						title: "订单日历",
						dataname: "md_calendar",
						dataRequest: [
							{
							    name: "md_calendar",//植入上报
							    url: "root/data/getEntitySet",
							    paramsobj: {dataname: "md_calendar", filter: "year=" + new Date().getFullYear()},
							    isnotoption: true, //true:不是选项
							},
							
							{
							    name: "implant_alter_date",//植入上报
							    url: "root/data/getEntitySet",
							    paramsobj: {dataname: "md_calendar", filter: "year=" + new Date().getFullYear() + " and is_implant_open='T'"},
							    isnotoption: true, //true:不是选项
							},
							{
							    name: "implant_alter_cancel_date",//植入上报撤销
							    url: "root/data/getEntitySet",
							    paramsobj: {dataname: "md_calendar", filter: "year=" + new Date().getFullYear() + " and is_implant_alter_open='T'"},
							    isnotoption: true, //true:不是选项
							},
							// {
							//     name: "status",//植入上报
							//     url: "root/getEnvironmentVariant/statusQuery",
							//     isnotoption: true, //true:不是选项
							// },
						],
						
						dayListByYear: [],
						dayObjByYear: {},
						
						date: new Date(),
						implantDates: ['2023-10-07','2023-10-08'],
						implantDateObj: {},
						implantAlterCancelDates: [],
						bodyHeight: 0,
						calendarHeight: 0,
						tableFields: [
							{isshow: "T", field: "implant_date", name: "植入日期"},
						],
						tableData: [],
						tableAttr: {},
						
						cbuttons_r: {
							edit: true
						},
						
					},

					created() {
						var me = this;
						this.popupParames = clone(Root.popupParames);
						let clientHeight = document.documentElement.clientHeight;
						this.bodyHeight = clientHeight - 52;
						this.calendarHeight = 70 * 8 + 20;
						
						this.dateSort();
						
					},
				
					mounted() {
						var me = this;
						// this.initData();
						
						if (window.top.tab.selected.option.page_id) {
							getPageByPageId(window.top.tab.selected.option.page_id, function(result){
								me.cbuttons_r = result.buttons_r;
								// me.cbuttons_r.edit = true
								// me.ctabs_r = result.tabs_r;
								
								//预加载数据
								if (me.dataRequest && me.dataRequest.length) {
								    var result = {};
								    me.loadRequestData(me.dataRequest, result, function(data) {
								        me.dataRequestObj = data;
										
										me.dayListByYear = []
										me.dayObjByYear = {}
										
										me.implantDates = []
										me.implantAlterCancelDates = []
										if (me.dataRequestObj.md_calendar) {
											var dayListByYear_ = []
											var dayObjByYear_ = {}
											me.dataRequestObj.md_calendar.data.entityset.map(r=>{
												// var date_ = dateFormat(new Date(r.doc_date), "yyyy-MM-dd")
												dayListByYear_.push(r)
												dayObjByYear_[r.doc_date] = r;
											})
											me.dayListByYear = dayListByYear_;
											me.dayObjByYear = dayObjByYear_;
										}
										
										if (me.dataRequestObj.implant_alter_date) {
											var implantDates_ = []
											me.dataRequestObj.implant_alter_date.data.entityset.map(r=>{
												var date_ = dateFormat(new Date(r.doc_date), "yyyy-MM-dd")
												implantDates_.push(date_)
											})
											me.implantDates = implantDates_
										}
										
										me.dateSort();
								
								        me.$nextTick(() => {
								        	hideLoading();
								        	me.initData();
								        })
								    });
								}
								else {
								    me.$nextTick(() => {
										hideLoading();
								    	me.initData();
								    })
								}
							})
						}
					},

					methods: {
						initData() {
							var me = this;
							
							this.$nextTick(() => {
								// 点击上个月
								let prevBtn1 = document.querySelector('.el-calendar__button-group .el-button-group>button:nth-child(1)');
								prevBtn1.addEventListener('click',() => {
									console.log('上个月');
								})
								// 点击今天
								let prevBtn2 = document.querySelector('.el-calendar__button-group .el-button-group>button:nth-child(2)');
								prevBtn2.addEventListener('click',() => {
									console.log('今天');
								})
								// 点击下个月
								let prevBtn3 = document.querySelector('.el-calendar__button-group .el-button-group>button:nth-child(3)');
								prevBtn3.addEventListener('click',() => {
									console.log('下个月');
								})
							})
						},
						
						setDateClass(slotDate, slotData) {
							var class_ = "";
							if ((this.implantDates).includes(slotData.day)) {
								class_ = "implant";
							}
							else if ((this.implantAlterCancelDates).includes(slotData.day)) {
								class_ = "implantAlterCancel";
							}
							return class_;
						},
						
						setDateTooltip(slotDate, slotData) {
							var aa = this.$refs.ref_calendar;
							var tooltip_ = "";
							if ((this.implantDates).includes(slotData.day)) {
								tooltip_ = "销售植入报告截止日期";
							}
							else if ((this.implantAlterCancelDates).includes(slotData.day)) {
								tooltip_ = "允许植入调整撤销的时间";
							}
							return tooltip_;
						},
						
						onDay(slotDate, slotData){
							if (this.cbuttons_r.edit) {
								this.onDoDay(slotDate, slotData);
							}
						},
						
						onDoDay(slotDate, slotData) {
							if (this.implantDates.indexOf(slotData.day) != -1) {
								var row = clone(this.dayObjByYear[slotData.day])
								
								if (!row) {
									var date_ = slotData.day.split("-");
									
									let lastMon = new Date(new Date(slotData.day).getTime);
									lastMon.setMonth(lastMon.getMonth());
									lastMon.setDate(0);
									
									// 上一个月日期
									var month_implant_upmonth_ = lastMon
									row = {
										id: slotData.day,
										year: date_[0],
										month: date_[1]*1,
										doc_date: slotData.day,
										is_implant_open: "",
										is_implant_alter_open: "",
										month_implant: null, // 可植入的日期
										month_implant_alter: null, // 可撤销的植入的日期
									}
								}
								
								row.is_implant_open = "F"
								this.dayObjByYear[slotData.day] = row
								
								this.setDayData("del", row);
								
								// this.implantDates.remove(slotData.day);
							}
							else {
								var row = clone(this.dayObjByYear[slotData.day])
								if (!row) {
									var date_ = slotData.day.split("-");
									
									let lastMon = new Date(new Date(slotData.day).getTime);
									lastMon.setMonth(lastMon.getMonth());
									lastMon.setDate(0);
									
									// 上一个月日期
									var month_implant_upmonth_ = lastMon
									row = {
										id: slotData.day,
										year: date_[0],
										month: date_[1]*1,
										doc_date: slotData.day,
										is_implant_open: "",
										is_implant_alter_open: "",
										month_implant: null, // 可植入的日期
										month_implant_alter: null, // 可撤销的植入的日期
									}
								}
								row.is_implant_open = "T"
								this.dayObjByYear[slotData.day] = row
								
								this.setDayData("add", row);
								
								// this.implantDates.push(slotData.day);
							}
						},
						
						// 设置一个日期的对应值
						setDayData(type_code, row) {
							var me = this;
							var operator_ = "saveEntity";//保存
							var entity_ = clone(row);
							var entity = {};
							for (var r in entity_) {
								if (entity_[r] || entity_[r] == "" || entity_[r] == false || entity_[r] == 0) {
									entity[r] = entity_[r];
								}
							}
							
							let param = {
								dataname: this.dataname,
								data: {},
							}
							param.data[this.dataname] = entity;
							Server.call("root/data/" + operator_, param, function(result) {
								console.log(result);
								if (result.success) {
									if (type_code == "add") {
										me.implantDates.push(row.doc_date);
									}
									else if (type_code == "del") {
										me.implantDates.remove(row.doc_date);
									}
									
									me.dateSort();
								}
							}, function(errorresult) {
								console.log("错误信息", errorresult);
								
								if (errorresult.messages && errorresult.messages.count && errorresult.messages.count.error) {
									me.iscommit = false;
									if (errorresult.messages.list) {
										var config = {
											totab: false,  
											icon: "icon-product",
											text: "错误信息",
											url: "module/tool/page/popup_error_messages.html",
											data: {},
											delta: errorresult.messages.list,
											callback: function(obj, callback) {
												if (callback) {
													callback();
												}
											}
										};
										me.doPopupByPublic(config);
									}
								}
								else {
									Root.message({
										type: 'error',
										message: '保存失败'
									}); 
								}
							});
						},
						
						onImport() {
							
						},
						
						dateSort() {
							var tableData_ = [];
							var implantDates_ = this.implantDates.sort();
							implantDates_.map(d=>{
								var row_d = {implant_date: d}
								tableData_.push(row_d)
							})
							this.tableData = tableData_;
						}
						
					},
				});
			};

			loadJsCss(function() {
				initVue();
			});
		</script>

		<style>
			[v-cloak] {
				display: none !important;
			}
			.el-card__body, .el-main {
				padding: 0px;
			}
			.el-calendar-table .el-calendar-day {
				height: 70px;
			}
			.el-tooltip__popper .popper__arrow {
			    border-width: 7px;
			}
			
			.el-calendar-table .el-calendar-day {
				padding: 0px;
			}
			.el-calendar-day>div{
				border-radius: 6px;
				height: 100%;
				padding: 8px;
				box-sizing: border-box;
			}
			.implant_txt {
				display: none;
			}
			.current .implant {
				background-color: #6495ed;
				color: #fff;
			} 
			.current .implant .implant_txt{
				display: flex;
				font-size: 12px;
			}
			.current .implantAlterCancel {
				background-color: #c38e39;
				color: #fff;
			} 
			.h_table {
				margin-top: 0px;
			}
		</style>

		<div v-cloak id="hbody" class="h_body" style="margin: 0;padding: 0;">
			<div id="page_root" style="padding: 0px 0px 0px 10px">
				<div class="topbar">
					<span>{{title}}</span>
					<div style="float: right; margin-right: 18px">
						<el-button v-if="cbuttons_r.import" @click="onImport" :icon="buttonsconfig.import.icon">{{buttonsconfig.import.name}}</el-button>
					</div>
				</div>
				
				<div :style="{display: 'flex', width: '100%', height: bodyHeight + 'px'}">
					
					<div style="width: 63%; height: 100%; padding:1% 0px 0% 1%">
						<div :style="{width: '100%', height: calendarHeight + 'px', display: 'flex', opacity: '1'}">
							<el-card class="card-box" shadow="always">
								<el-calendar ref="ref_calendar">
									<template slot="dateCell" slot-scope="{date, data}">
										<div :class="setDateClass(date, data)" @click="onDay(date, data)">
											{{ data.day.split('-').slice(2).join('-')}}
											<div class="implant_txt">可植入上报</div>
										</div>
									</template>
								</el-calendar>
							</el-card>
						</div>
					</div>
					
					<div style="width: 33%; height: 100%; padding:1% 0px 0% 1%">
						<el-card class="card-box" shadow="always">
							<h-table
								:table-fields="tableFields" 
								:table-data="tableData" 
								:table-height="calendarHeight"
								:is-pagination="false"
								:table-attr="tableAttr"
								:isdraggableorder="false"
							>
							</h-table>
						</el-card>
					</div>
					
				</div>
			</div>
			
			<div id="page_loading" style="position: absolute; top:0px; width: 100vw; height: 50vh;">
			    <div class="spinner">
			      <div class="cube1"></div>
			      <div class="cube2"></div>
			    </div>
			</div>
		</div>
	</body>
</html>