<main id="js-page-content" role="main" class="page-content">
	<div class="row">

		<div class="col-sm-12 col-xl-12">
			<h1 class="p-2 mb-0">運維管理</h1>
			<div class="row bg-dark p-2">
				<div class="col-auto">
					<div class="btn-group">
						<button type="button" onclick="setType(1)" class="btn btn-secondary waves-effect waves-themed">維修</button>
						<button type="button" onclick="setType(2)" class="btn btn-secondary waves-effect waves-themed">保義記錄</button>
						<button type="button" onclick="setType(null)" class="btn btn-secondary waves-effect waves-themed">廠商資料</button>
					</div>
				</div>
				<div class="col-auto">
					<div class="btn-group">
						<button onclick="setDate('tdy')" type="button" class="btn btn-secondary waves-effect waves-themed">今天</button>
						<button onclick="setDate('ytd')" type="button" class="btn btn-secondary waves-effect waves-themed">昨天</button>
					</div>
				</div>
				<div class="col-auto">
					<div class="form-group">
						<input class="form-control" id="startdate" type="date" name="date" value="">
					</div>
				</div>
				<div class="col-auto">
					<div class="form-group">
						<input class="form-control" id="enddate" type="date" name="date" value="">
					</div>
				</div>
				<div class="col-auto" style="display: none">
					<div class="form-group">
						<input type="text" id="serial_number" class="form-control" placeholder="表單號">
					</div>
				</div>
				<div class="col-auto" style="display: none">
					<a href="#" for="serial_number" onclick="snSearch()" class="btn btn-info">單號查詢</a>
				</div>
				<hr>

			</div>
			<div class="row bg-dark p-2 align-items-center">
				<div class="col-auto">
					<a href="#" onclick="selAllSysVal" class="btn btn-info">全部類別</a>
				</div>
				<div class="col-auto">
					<div id="mainList" class="frame-wrap">
					</div>
				</div>
			</div>
			<div class="row bg-dark p-2 mb-5 align-items-center">
				<div class="col-auto" style="padding-left: 133px">
					<div id="subList" class="frame-wrap">
					</div>
				</div>
			</div>

			<div class="">
				<div class="frame-wrap">
					<div class="mb-3">
						<a href="#" id="newForm" class="btn btn-success" data-toggle="modal" data-target="#opeFirmModal">+ 維修單</a>
						<a href="#" onclick="exportExcel()" class="btn btn-info waves-effect waves-themed">
							<span class="fal fa-file-excel mr-1"></span>
							匯出
						</a>
					</div>
					<table id="opeFirmTable" class="table table-bordered table-striped text-center m-0 w-100">
					</table>
					<table id="opeRecTable" class="table table-bordered table-striped text-center m-0 w-100">
					</table>
				</div>
			</div>
		</div>
	</div>
</main>

<!-- Modal center 廠商資料 -->
<div class="modal fade" id="opeFirmModal" tabindex="-1" role="dialog" aria-hidden="true">
	<div class="modal-dialog modal-dialog-centered" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<h4 class="modal-title">
					新增廠商資料
				</h4>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true"><i class="fal fa-times"></i></span>
				</button>
			</div>
			<form id="opeFirmForm">
				<div class="modal-body">
					<div class="row">
						<div class="col-md-6">
							<div class="form-group">
								<label class="form-label" for="selSysMain">系統大類</label>
								<select class="form-control" id="selSysMain" name="selSysMain">
								</select>
							</div>
						</div>
						<div class="col-md-6">
							<div class="form-group">
								<label class="form-label" for="selSysSub">系統小類</label>
								<select class="form-control" id="selSysSub" name="selSysSub">
								</select>
							</div>
						</div>
						<div class="col-md-6">
							<div class="form-group">
								<label class="form-label" for="inpName">姓名</label>
								<input type="text" id="inpName" name="inpName" class="form-control">
							</div>
						</div>
						<div class="col-md-6">
							<div class="form-group">
								<label class="form-label" for="inpConPer">聯絡人</label>
								<input type="text" id="inpConPer" name="inpConPer" class="form-control">
							</div>
						</div>
						<div class="col-md-6">
							<div class="form-group">
								<label class="form-label" for="inpPhone">電話</label>
								<input type="text" id="inpPhone" name="inpPhone" class="form-control">
							</div>
						</div>
						<div class="col-md-6">
							<div class="form-group">
								<label class="form-label" for="inpEmail">Email</label>
								<input type="email" id="inpEmail" name="inpEmail" class="form-control">
							</div>
						</div>
						<div class="col-md-6">
							<div class="form-group">
								<label class="form-label" for="inpTaxIdNum">統一編號</label>
								<input type="text" id="inpTaxIdNum" name="inpTaxIdNum" maxlength="8" class="form-control">
							</div>
						</div>
						<div class="col-md-6">
							<div class="form-group">
								<label class="form-label" for="inpRemark">備注</label>
								<input type="text" id="inpRemark" name="inpRemark" class="form-control">
							</div>
						</div>
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-secondary" data-dismiss="modal">關閉</button>
					<button type="button" class="btn btn-primary" id="OpeFirmSendBtn" e-prevent>儲存</button>
				</div>
			</form>
		</div>
	</div>
</div>

<!-- Modal center 設備權限 -->
<div class="modal fade" id="opeRecModal" tabindex="-1" role="dialog" aria-hidden="true">
	<div class="modal-dialog modal-dialog-centered" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<h4 class="modal-title">
					選擇功能
				</h4>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true"><i class="fal fa-times"></i></span>
				</button>
			</div>
			<div class="modal-body">
				<table class="table table-bordered table-striped text-center m-0">
					<thead class="thead-themed">
						<tr>
							<th>選擇</th>
							<th>編號</th>
							<th>功能名稱</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td><input type="checkbox"></td>
							<td>1</td>
							<td>系統監控</td>
						</tr>
						<tr>
							<td><input type="checkbox"></td>
							<td>2</td>
							<td>歷史資料</td>
						</tr>
						<tr>
							<td><input type="checkbox"></td>
							<td>3</td>
							<td>異常記錄</td>
						</tr>
						<tr>
							<td><input type="checkbox"></td>
							<td>4</td>
							<td>即時告警</td>
						</tr>
						<tr>
							<td><input type="checkbox"></td>
							<td>5</td>
							<td>運維管理</td>
						</tr>
						<tr>
							<td><input type="checkbox"></td>
							<td>6</td>
							<td>圖資管理</td>
						</tr>
						<tr>
							<td><input type="checkbox"></td>
							<td>7</td>
							<td>帳號管理</td>
						</tr>
					</tbody>
				</table>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-secondary" data-dismiss="modal">關閉</button>
				<button type="button" class="btn btn-primary">儲存</button>
			</div>
		</div>
	</div>
</div>

<script>
	$(function () {
		pageAct.sub_system_tag = null;
		pageAct.main_system_tag = null;

		initMaiList();
		$('input[type=checkbox][data-type=main]').parent().on('change', function () {
			pageAct.main_system_tag = $('input[type=checkbox]:checked').map(function (i, v) { if ($(v).data('type') == 'main') return $(v).prop('id') }).toArray();

			subList();

			if ($('input[type=checkbox][data-type=main]:checked').length <= 0) {
				pageAct.main_system_tag = null
				pageAct.sub_system_tag = null;
			}

			refTable();
		});

		$('#subList').on('change', $('input[type=checkbox][data-type=sub]').parent(), function () {
			pageAct.sub_system_tag = $('input[type=checkbox]:checked').map(function (i, v) { if ($(v).data('type') == 'sub') return $(v).prop('id') }).toArray();

			if ($('input[type=checkbox][data-type=sub]:checked').length <= 0) {
				pageAct.sub_system_tag = null;
			}

			refTable();
		});

		$('[onclick^=setType]').on('click', function () {
			btnSelCss(this);
		});

		$(`[onclick^=setDate]`).on('click', function () {
			if ($(this).hasClass('btn-dark')) {
				$(this).removeClass('btn-dark');
				$(this).addClass('btn-secondary');
				setDate();
			}
			else
				btnSelCss(this);
		});

		$('#startdate, #enddate').on('change', function () {
			let startdate = new Date($('#startdate').val());
			let enddate = new Date($('#enddate').val());
			setDate(null, startdate, enddate)
		});

		$(`[onclick="setType(null)"]`).click();

		initDate();
		event();
	});

	function loadOpeFirmTable() {
		$('#opeFirmTable_wrapper').css('display', 'block');
		$('#opeRecTable_wrapper').css('display', 'none');
		$('#serial_number').parent().parent().css('display', 'none');
		$('[for=serial_number]').parent().css('display', 'none');

		serial_number = $('#serial_number').val() || null;
		let ajaxObj = {
			url: baseApiUrl + "/operation/OpeFirList",
			method: "POST",
			data: { work_type: null, start_created_at: pageAct.startdate, end_created_at: pageAct.enddate, serial_number: pageAct.serial_number, main_system_tag: pageAct.main_system_tag, sub_system_tag: pageAct.sub_system_tag }
		};
		let tag = "#opeFirmTable";

		let column_defs = [
			{ "targets": [0], "width": "4%", "sortable": true },
			{ "targets": [1], "width": "5%", "sortable": true },
			{ "targets": [2], "width": "5%", "sortable": true },
			{ "targets": [3], "width": "5%", "sortable": true },
			{ "targets": [4], "width": "5%", "sortable": true },
			{ "targets": [5], "width": "5%", "sortable": true },
			{ "targets": [6], "width": "5%", "sortable": true }
		];

		let columns = [
			{
				"title": "廠商類別",
				"data": "system_key",
			},
			{
				"title": "廠商",
				"data": "name",
			},
			{
				"title": "聯絡人",
				"data": "contact_person",
			},
			{
				"title": "電話",
				"data": "phone",
			},
			{
				"title": "email",
				"data": "email",
			},
			{
				"title": "建立日期",
				"data": "created_at"
			},
			{
				"title": "功能",
				"data": "id",
				"render": function () {
					let btnDiv = creDiv(["row", "m-0", "justify-content-center"], { "style": "gap:10px" });
					btnDiv.append(creBtnHtml("刪除", "rolAuthDelBtn", null, ["btn", "btn-danger"]));
					return btnDiv.outerHtml();
				}
			},
		];

		opeFirmTable = new YourTeam.JqDataTables.getTableByAjax(ajaxObj, tag, null, columns, column_defs);
	}

	function loadOpeRecTable() {
		$('#opeFirmTable_wrapper').css('display', 'none');
		$('#opeRecTable_wrapper').css('display', 'block');
		$('#serial_number').parent().parent().css('display', 'block');
		$('[for=serial_number]').parent().css('display', 'block');

		let ajaxObj = {
			url: baseApiUrl + "/operation/OpeRecList",
			method: "POST",
			data: { work_type: pageAct.work_type, start_created_at: pageAct.startdate, end_created_at: pageAct.enddate, serial_number: pageAct.serial_number, main_system_tag: pageAct.main_system_tag, sub_system_tag: pageAct.sub_system_tag }
		}

		let tag = "#opeRecTable";

		let column_defs = [
			{ "targets": [0], "width": "8%", "sortable": true },
			{ "targets": [1], "width": "8%", "sortable": true },
			{ "targets": [2], "width": "8%", "sortable": true },
			{ "targets": [3], "width": "8%", "sortable": true },
			{ "targets": [4], "width": "8%", "sortable": true },
			{ "targets": [5], "width": "8%", "sortable": true },
			{ "targets": [6], "width": "8%", "sortable": true },
			{ "targets": [7], "width": "8%", "sortable": true },
			{ "targets": [8], "width": "8%", "sortable": false },
			{ "targets": [9], "width": "8%", "sortable": false },
			{ "targets": [10], "width": "8%", "sortable": false },
			{ "targets": [11], "width": "8%", "sortable": false },
		];

		let columns = [
			{
				"title": "項目",
				"data": "work_type_name",
			},
			{
				"title": "位置",
				"data": "location",
			},
			{
				"title": "異常代號",
				"data": "error_code",
			},
			{
				"title": "表單號",
				"data": "formId",
			},
			{
				"title": "設備名稱",
				"data": "device_name",
			},
			{
				"title": "狀態",
				"data": "status_name",
			},
			{
				"title": "處理人員",
				"data": "user_full_name",
			},
			{
				"title": "預計施工時間",
				"data": "start_time",
				"render": function (data) {
					return displayDate(data, "datetime");
				}
			},
			{
				"title": "檔案上傳",
				"data": "start_time",
			},
			{
				"title": "完成時間",
				"data": "finish_time",
				"render": function (data) {
					return displayDate(data, "datetime");
				}
			},

			{
				"title": "建立時間",
				"data": "created_at",
			},
			{
				"title": "功能",
				"data": "id",
				"render": function () {
					let btnDiv = creDiv(["row", "m-0", "justify-content-center"], { "style": "gap:10px" });
					btnDiv.append(creBtnHtml("刪除", "rolAuthDelBtn", null, ["btn", "btn-danger"]));
					return btnDiv.outerHtml();
				}
			},
		];

		opeRecTable = new YourTeam.JqDataTables.getTableByAjax(ajaxObj, tag, null, columns, column_defs);
	}

	function setType(wt) {
		pageAct.work_type = wt;

		if (wt == null) {
			$('#newForm').data('target', '#opeFirmModal')
			loadOpeFirmTable();
		}
		else {
			$('#newForm').data('target', '#opeRecModal')
			loadOpeRecTable();
		}
	}

	function setDate(dateType = null, startdate = null, enddate = null) {
		clearPageAct();
		pageAct.startdate = startdate;
		pageAct.enddate = enddate;

		if (dateType == 'tdy') {
			pageAct.startdate = new Date(displayDate(new Date(new Date().setDate(new Date().getDate())), 'date'));
		}
		else if (dateType == 'ytd') {
			pageAct.startdate = new Date(displayDate(new Date(new Date().setDate(new Date().getDate() - 1)), 'date'));
		}
		else {
			$(`[onclick^=setDate]`).removeClass('btn-dark');
			$(`[onclick^=setDate]`).addClass('btn-secondary');
		}

		refTable();
	}

	function initDate() {
		$('#startdate').val(displayDate(new Date(new Date().setDate(new Date().getDate())), 'date').replaceAll('/', '-'));
		$('#enddate').val(displayDate(new Date(new Date().setDate(new Date().getDate() + 1)), 'date').replaceAll('/', '-'));
	}

	function clearPageAct() {
		pageAct.startdate = null;
		pageAct.enddate = null;
		pageAct.serial_number = null;
	}

	function snSearch() {
		clearPageAct();
		pageAct.serial_number = $('#serial_number').val() || null;
	}

	function initMaiList() {
		let url = baseApiUrl + "/operation/MaiSysList";
		function success(res) {
			let strHtml = ``;
			$.each(res.data, function (i, v) {
				strHtml += `<div class="custom-control custom-checkbox custom-control-inline">
								<input type="checkbox" class="custom-control-input" data-type="main" id="${v.system_value}">
								<label class="custom-control-label" for="${v.system_value}">${v.system_key}</label>
							</div>`;
			});

			$('#mainList').html(strHtml);
		}
		ytAjax = new YourTeam.Ajax(url, null, success, null, "POST").send();
	}

	function subList() {
		let sendData = {
			main_system_tag: pageAct.main_system_tag
		}
		objSendData.Data = sendData;

		let url = baseApiUrl + "/operation/SubSysList";
		let strHtml = ``;
		function success(res) {
			$.each(res.data, function (i, v) {
				strHtml += `<div class="custom-control custom-checkbox custom-control-inline">
								<input type="checkbox" class="custom-control-input" data-type="sub" id="${v.system_value}">
								<label class="custom-control-label" for="${v.system_value}">${v.system_key}</label>
							</div>`;
			});

			$('#subList').html(strHtml);

			if (pageAct.sub_system_tag != null) {
				$.each(pageAct.sub_system_tag, function (i, v) {
					$('#' + v).click();
				});
			}
		}
		ytAjax = new YourTeam.Ajax(url, objSendData, success, null, "POST").send();
	}

	function refTable() {
		if (pageAct.work_type == null)
			loadOpeFirmTable();
		else
			loadOpeRecTable();
	}

	function exportExcel() {
		let url = baseApiUrl + "/operation/OpeExportExcel";

		objSendData.Data = {
			work_type: pageAct.work_type,
			startdate: pageAct.startdate == undefined ? null : pageAct.startdate,
			enddate: pageAct.enddate == undefined ? null : pageAct.enddate,
		};
		
		ytAjax = new YourTeam.Ajax(url, objSendData, function (rel) {
			if (rel.code == "0000")
				location.href = baseApiUrl + "/api/df?fileName=" + rel.data + "&token=" + localStorage.getItem("JWT-Authorization");
		}, null, "POST").send();
	}

	function selSysMain() {
		let url = baseApiUrl + "/operation/MaiSysList";

		ytAjax = new YourTeam.Ajax(url, null, function (res) {
			if (!res || res.code != "0000" || !res.data) {

			} else {
				$("#selSysMain").html();
				$("#selSysSub").html();
				strHtml = ``;
				$.each(res.data, (index, roleObj) => {
					strHtml += `<option value='${roleObj.system_value}'>${roleObj.system_key}</option>`;

					if (index == 0)
						pageAct.selSysMain = roleObj.system_value
				})
				$("#selSysMain").html(strHtml);
				selSysSub();
			}
		}, null, "POST").send();
	}

	function selSysSub() {
		url = baseApiUrl + "/operation/SubSysList";
		sendData = {
			main_system_tag: [pageAct.selSysMain],
		};
		objSendData.Data = sendData;
		strHtml = ``;
		ytAjax = new YourTeam.Ajax(url, objSendData, function (res) {
			$.each(res.data, (index, roleObj) => {
				strHtml += `<option value='${roleObj.system_value}'>${roleObj.system_key}</option>`;
			})
			$("#selSysSub").html(strHtml);
		}, null, "POST").send();
	}
	
	function event() {
		onEvent('click', '#newForm', function () {
			selSysMain();
		});

		onEvent('change', '#selSysMain', function () {
			pageAct.selSysMain = $(this).val();
			selSysSub();
		});

		onEvent("click", "#OpeFirmSendBtn", function () {
			let form = $("#opeFirmForm");
			console.log(form);
			$(form).validate({
				rules: {
					selSysMain: { required: true },
					selSysSub: { required: true },
					name: { required: true, maxlength: 50 }
				}
			});
			//if ($(form).valid()) {
			//	console.log($('#selSysMain').val());
			//	let url = baseApiUrl + "/operation/SaveOpeFirm";
			//	let sendData = {
			//		device_system_category_layer2: $('#selSysMain').val(),
			//		device_system_category_layer3: $('#selSysSub').val(),
			//		name: $("#inpName").val(),
			//		contact_person: $("#inpConPer").val(),
			//		phone: $("#inpPhone").val(),
			//		email: $("#inpEmail").val(),
			//		tax_id_number: $("#inpTaxIdNum").val(),
			//		remark: $("#inpRemark").val()
			//	};
			//	objSendData.Data = sendData;
			//	//$("#opeFirmModal").modal("hide");
			//	//ytAjax = new YourTeam.Ajax(url, objSendData, function (res) {
			//	//	if (!res || res.code != "0000" || !res.data) {

			//	//	} else {
			//	//		toast_ok(common.AddSuc);
			//	//		$("#opeFirmModal").modal("hide");
			//	//	}
			//	//}, null, "POST").send();
			//}
		});
	}
</script>