{extend name="../../base/view/common/base" /}
{block name="style"}
<style>
.layui-tab-title .layui-this{background-color:#fff;}
.layui-tab-card,.layui-card{box-shadow:0 0 0 0 rgb(0 0 0 / 10%); border-radius:0;}
.layui-card-tips {color: #969696;}
.layui-card-value {padding: 4px 0 5px;font-size: 18px;color: #1E9FFF;}

.check-items{overflow-x: auto; padding: 2px 0;}

.check-item .check-item-icon strong{margin-right:3px; font-size:36px;}
.check-item strong.blue,.check-item strong.gray{display:none;}
.check-item.blue strong.black,.check-item.gray strong.black{display:none;}
.check-item.blue strong.blue{display:block;}
.check-item.gray strong.gray{display:block;}

.flow-flex-row {box-direction: row;
	box-orient: horizontal;
    -webkit-box-orient: horizontal;
    -ms-flex-direction: row;
    flex-direction: row;
}
.flow-flexbox { width: 100%;text-align: left;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    display: -webkit-flex;
    box-align: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
	flex-wrap: wrap;
}
.check-item{width: auto; -ms-flex-negative: 0; flex-shrink: 0; padding:8px 0;}
.check-item i{font-size:20px; margin-right:3px;}
.layui-icon[data-ok]{color:#34a853}
.layui-icon[data-no]{color:#FF5722;}
.layui-icon[data-on]{color:#4285f4;}
.check-item-time{color:#969696; font-size:12px; margin-left:3px;}
.check-item .layui-icon.layui-icon-right{font-size:20px;}
.check-item:last-child .layui-icon-right{display:none;}
.file-card{line-height:normal;}
</style>
{/block}
<!-- Body -->
{block name="body"}
<div class="p-page">
	<h2 class="pb-3">
		<span class="font20">{$detail.name}</span> 
		{gt name="$role" value="0"}
			{eq name="$detail.status" value="4"}
			<span class="layui-btn layui-btn-xs" data-event="open">Open</span>
			{else/}
			<span class="layui-btn layui-btn-danger layui-btn-xs" data-event="close">Close</span>
			{/eq}
		{/gt}
	</h2>
	<div class="pb-2">
		<span class="layui-badge layui-bg-gray">#T{$detail.id}</span>
		<span class="mx-2">{$detail.admin_name}</span>
		<span class="gray">Created at {$detail.create_time}<span>{gt name="$detail.update_time" value="0"}, last updated at {$detail.update_time}{/gt}</span></span>
	</div>
	<div class="layui-tabs layui-tab-brief" id="projectTab">
		<ul class="layui-tabs-header border-t border-x bg-white">
			<li class="layui-this" data-load="true">Overview</li>
			<li data-load="">Tasks</li>
			<li data-load="">Work Logs</li>
			<li data-load="">Documents</li>
			<li data-load="">Members</li>
			<li data-load="">Activity</li>
			<li data-load="">Comments</li>
		</ul>
		<div class="layui-tabs-body" style="padding:0">
			<div class="layui-tabs-item layui-show">
				{include file="/index/view_overview" /}
			</div>
			
			<div class="layui-tabs-item">
				{include file="/index/view_task" /}				
			</div>
			
			<div class="layui-tabs-item">
				{include file="/index/view_schedule" /}				
			</div>
			
			<div class="layui-tabs-item">
				{include file="/index/view_document" /}				
			</div>
			
			<div class="layui-tabs-item">
				{include file="/index/view_user" /}		
			</div>
			
			<div class="layui-tabs-item">
				{include file="/index/view_log" /}
			</div>
			
			<div class="layui-tabs-item">
				{include file="/index/view_comment" /}
			</div>
		</div>
	</div>
</div>
{/block}
<!-- /Body -->
<!-- Script -->
{block name="script"}
<script src="{__GOUGU__}/third_party/echart/echarts.min.js"></script>
<script>
	const project_id = '{$detail.id}';
	const project_start_time = "{$detail.start_time|date='Y-m-d'}";
	var chartProgress = document.getElementById('progress');
	var progressChart = echarts.init(chartProgress);
	var optionA;
	optionA = {
		backgroundColor: "#ffffff",
		title: {
			text: '67.45%',// Main title text
			subtext: 'Task completion rate',// Subtitle text
			x: 'center',
			y: '39%',
			textStyle: {
				fontWeight: 'normal',
				fontSize: 18,
				color: '#FF974C',
				align: 'center'
			},
			subtextStyle: {
				fontSize: 12,
				color: '#6c7a89',
			}
		},
		tooltip: {
			trigger: "item",
			formatter: '{b}:<br/><strong>{c}</strong>',
			show: true,
		},
		series: [
			{
				type: 'pie',
				radius: ['60%', '80%'],
				center: ['50%', '50%'],
				avoidLabelOverlap: false,
				label: {
					show: false
				},
				data: [
					{ value: 1048, name: 'Pending' },
					{ value: 735, name: 'Completed' }
				]
			}
		]
	};

	var chartDelay = document.getElementById('delay');
	var delayChart = echarts.init(chartDelay);
	var optionB;
	optionB = {
		backgroundColor: "#ffffff",
		title: {
			text: '40.25%',// Main title text
			subtext: 'Task delay rate',// Subtitle text
			x: 'center',
			y: '39%',
			textStyle: {
				fontWeight: 'normal',
				fontSize: 18,
				color: '#FF974C',
				align: 'center',
				marginLeft: '-10px'
			},
			subtextStyle: {
				fontSize: 12,
				color: '#6c7a89',
			}
		},
		tooltip: {
			trigger: "item",
			formatter: '{b}:<br/><strong>{c}</strong>',
			show: true,
		},
		series: [
			{
				type: 'pie',
				radius: ['60%', '80%'],
				center: ['50%', '50%'],
				avoidLabelOverlap: false,
				label: {
					show: false
				},
				data: [{
					value: 1048,
					name: 'Delayed',
					itemStyle: {
						color: "#ED6666",
					}
				},
				{
					value: 735,
					name: 'Not delayed',
					itemStyle: {
						color: "#91CC75",
					}
				}
				]
			}
		]
	};


	var chartCross = document.getElementById('cross');
	var crossChart = echarts.init(chartCross);
	var optionD;
	optionD = {
		backgroundColor: "#ffffff",
		color: ['#8C92A4', '#2C7EF8'],
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: 'cross',
				label: {
					backgroundColor: '#6a7985'
				}
			}
		},
		legend: {
			data: ['Planned remaining', 'Actual remaining']
		},
		grid: {
			top: 36,
			left: 8,
			right: 36,
			bottom: 0,
			containLabel: true
		},
		xAxis: [
			{
				type: 'category',
				boundaryGap: false,
				splitLine: {
					show: true,
					lineStyle: {
						type: 'dashed'
					}
				}
			}
		],
		yAxis: [{
			axisLine: {
				show: true
			},
			boundaryGap: false,
			splitLine: {
				show: true,
				lineStyle: {
					type: 'dashed'
				}
			},
			type: 'value'
		}
		]
	};


	var chartPlan = document.getElementById('plan');
	var planChart = echarts.init(chartPlan);
	var optionE;

	optionE = {
		backgroundColor: "#ffffff",
		title: {
			top: 0,
			left: 0,
			text: ''
		},
		tooltip: {
			padding: 6,
			formatter: function (obj) {
				var value = obj.value;
				var tips = '<div style="font-size: 12px;">' + value[0] + '<br>';
				tips += 'Total ' + value[1] + ' work tasks';
				tips += '</div>';
				return tips;
			}
		},
		visualMap: {
			min: 0,
			max: 10,
			show: false,
			inRange: {
				color: ['#fafafa', '#20BF3F']
			}
		},
		calendar: {
			top: 24,
			left: 36,
			right: 4,
			cellSize: ['auto', 16],
			range: ['2022-03-01', '2022-08-01'],
			splitLine: {
				lineStyle: {
					color: '#333',
					type: 'dashed',
				}
			},
			itemStyle: {
				borderWidth: 0.5
			},
			yearLabel: { show: false },
			monthLabel: {
				nameMap: 'en',
				fontSize: 12
			},
			dayLabel: {
				show: true,
				formatter: '{start}  1st',
				fontWeight: 'lighter',
				nameMap: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
				fontSize: 12
			}
		},
		series: {
			type: 'heatmap',
			coordinateSystem: 'calendar',
			data: []
		}
	};


	var chartWork = document.getElementById('work');
	var workChart = echarts.init(chartWork);
	var optionF;

	optionF = {
		backgroundColor: "#ffffff",
		title: {
			top: 0,
			left: 0,
			text: ''
		},
		tooltip: {
			padding: 6,
			formatter: function (obj) {
				var value = obj.value;
				var tips = '<div style="font-size: 12px;">' + value[0] + '<br>';
				tips += 'Total ' + value[1] + ' hours';
				tips += '</div>';
				return tips;
			}
		},
		visualMap: {
			min: 0,
			max: 10,
			show: false,
			inRange: {
				color: ['#fafafa', '#359AEF']
			}
		},
		calendar: {
			top: 24,
			left: 36,
			right: 4,
			cellSize: ['auto', 16],
			range: ['2022-03-01', '2022-08-01'],
			splitLine: {
				lineStyle: {
					color: '#333',
					type: 'dashed',
				}
			},
			itemStyle: {
				borderWidth: 0.5
			},
			yearLabel: { show: false },
			monthLabel: {
				nameMap: 'en',
				fontSize: 12
			},
			dayLabel: {
				show: true,
				formatter: '{start}  1st',
				fontWeight: 'lighter',
				nameMap: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
				fontSize: 12
			}
		},
		series: {
			type: 'heatmap',
			coordinateSystem: 'calendar',
			data: []
		}
	};


	function getCalendarData(arr) {
		var rangeArray = [];
		for (var property in arr) {
			rangeArray.push(property);
		}
		var rangeArray = [rangeArray[0], rangeArray[rangeArray.length - 1]];
		var start = +echarts.number.parseDate(rangeArray[0]);
		var end = +echarts.number.parseDate(rangeArray[1]);
		if (start + 7776000000 > end) {
			end = start + 8640000000;
			rangeArray[1] = echarts.format.formatTime('yyyy-MM-dd', end);
		}
		var dayTime = 3600 * 24 * 1000;
		var data = [];
		for (var time = start; time < end; time += dayTime) {
			var this_date = echarts.format.formatTime('yyyy-MM-dd', time);
			if (arr[this_date]) {
				data.push([this_date, arr[this_date]]);
			} else {
				data.push([this_date, 0]);
			}
		}
		var res = { 'range': rangeArray, 'data': data };
		return res;
	}

	// Burndown chart stats
	function cross_count(arr, arr2) {
		var planArray = [], doArray = [];
		var today = new Date();
		var todayStr = today.getFullYear() + '-' + (today.getMonth() + 1) + '-' + today.getDate();
		for (var a in arr) {
			planArray.push(a);
		}
		var rangeArray = [planArray[0], planArray[planArray.length - 1]];
		if (arr2 instanceof Array == false) {
			for (var b in arr2) {
				doArray.push(b);
			}
			if ((+echarts.number.parseDate(doArray[doArray.length - 1])) < (+echarts.number.parseDate(todayStr))) {
				doArray.push(todayStr);
			}
			if ((+echarts.number.parseDate(planArray[planArray.length - 1])) < (+echarts.number.parseDate(doArray[doArray.length - 1]))) {
				rangeArray[1] = doArray[doArray.length - 1];
			}
		}
		var start = +echarts.number.parseDate(rangeArray[0]);
		var end = +echarts.number.parseDate(rangeArray[1]);
		var todayInt = +echarts.number.parseDate(todayStr);
		var dayTime = 3600 * 24 * 1000;
		var xArray = [], yArray = [], yArray2 = [], done = 0, doneArray = [];
		for (var time = start; time <= end; time += dayTime) {
			var this_date = echarts.format.formatTime('yyyy-MM-dd', time);
			xArray.push(this_date);
			var plan = cross_recursion(time, end, arr);
			yArray.push(plan);

			if (arr2[this_date]) {
				done += arr2[this_date];
			}
			if (time <= todayInt) {
				doneArray.push(done);
			}
		}
		for (var i = 0; i < doneArray.length; i++) {
			yArray2.push(yArray[0] - doneArray[i]);
		}
		var start_time = +echarts.number.parseDate(project_start_time), tem_x_array = [], tem_y_array = [];
		if (start_time < start) {
			for (var tem_time = start_time; tem_time < start; tem_time += dayTime) {
				var this_date = echarts.format.formatTime('yyyy-MM-dd', tem_time);
				tem_x_array.push(this_date);
				tem_y_array.push(yArray[0]);
			}
			xArray = tem_x_array.concat(xArray);
			yArray = tem_y_array.concat(yArray);
			yArray2 = tem_y_array.concat(yArray2);
		}
		return { 'x': xArray, 'y': yArray, 'y2': yArray2 };
	}

	function cross_recursion(start, end, arr) {
		var count = 0;
		var dayTime = 3600 * 24 * 1000;
		for (var time = start; time <= end; time += dayTime) {
			var this_date = echarts.format.formatTime('yyyy-MM-dd', time);
			if (arr[this_date]) {
				count += arr[this_date];
			}
		}
		return count;
	}
	
	//
	const moduleInit = ['tool','oaPicker','uploadPlus','tablePlus','oaComment','oaSchedule','oaEdit'];

	function gouguInit() {
		var tool = layui.tool,tabs = layui.tabs,comment = layui.oaComment;
		
		comment.init({
				"box":'commentBox',// Container id
			"input": 'commentInput',
			"topic_id":project_id,
			"module": 'project',
		});
		
		$('body').on('click','[data-event="close"]',function(){
			tool.ask('Are you sure you want to close this project?',function(){
				let callback = function (e) {
					layer.msg(e.msg);
					if(e.code==0){
						parent.layui.pageTable.reload();
						setTimeout(function(){
							location.reload();
						},2000)
					}
				}
				tool.post("/project/api/close", { 'id': project_id}, callback);
			})
		})
		$('body').on('click','[data-event="open"]',function(){
			tool.ask('Are you sure you want to open this project?',function(){
				let callback = function (e) {
					layer.msg(e.msg);
					if(e.code==0){
						parent.layui.pageTable.reload();
						setTimeout(function(){
							location.reload();
						},2000)
					}
				}
				tool.post("/project/api/open", { 'id': project_id}, callback);
			})
		})
		
		overview();		
		tabs.on('afterChange(projectTab)', function(data){
			let index = data.index;
			if(index == 1){
				project_task();	
			}
			else if(index == 2){
				project_schedule();	
			}
			else if(index == 3){
				project_document();	
			}
			else if(index == 4){
				project_user();	
			}
			else if(index == 5){
				project_log();	
			}
		});
	}
</script>
{/block}
<!-- /Script -->