<!DOCTYPE html>
<html lang="zh-tw">

<head><?php
		include_once "html_head.inc";
		?></head>

<body>
	<div id="q-app" :visible="IsVueReady==true" @mousemove="FnIdleReset">
		<?php
		include_once "html_layout_header.inc";
		?>

		<div class="container">
			<div class="SwitchPage">
				<div :style="tab == 'trend1' ? {borderBottom:'5px solid #244BC3'}: {paddingBottom:'5px'}">
					<q-btn flat :text-color="tab == 'trend1' ? 'black': 'grey-5'" label="電力趨勢圖" @click="changeTab('trend1')" class="tab-btn"></q-btn>
				</div>
				<div :style="tab == 'bar1' ? {borderBottom:'5px solid #244BC3'}: {paddingBottom:'5px'}">
					<q-btn flat :text-color="tab == 'bar1' ? 'black': 'grey-5'" label="電力長條圖" @click="changeTab('bar1')" class="tab-btn"></q-btn>
				</div>
				<div :style="tab == 'trend2' ? {borderBottom:'5px solid #244BC3'}: {paddingBottom:'5px'}">
					<q-btn flat :text-color="tab == 'trend2' ? 'black': 'grey-5'" label="其它趨勢圖" @click="changeTab('trend2')" class="tab-btn"></q-btn>
				</div>
				<!-- <div :style="tab == 'bar2' ? {borderBottom:'5px solid #244BC3'}: {paddingBottom:'5px'}">
					<q-btn flat :text-color="tab == 'bar2' ? 'black': 'grey-5'" label="其它長條圖" @click="changeTab('bar2')" class="tab-btn"></q-btn>
				</div> -->
			</div>
			<div v-show="tab == 'trend1'">
				<div class="row">
					<div class="search-block">
						<div class="search-block-label">
							<label class="text-center" style="width: 140px;">開始日期(起)</label>
						</div>
						<date-picker style="width: 200px;" class="col search-block-input" v-model="search.trend1.start_at" format="YYYY-MM-DD" type="date"></date-picker>
					</div>
					<div class="search-block">
						<div class="search-block-label">
							<label class="text-center" style="width: 140px;">開始日期(迄)</label>
						</div>
						<date-picker style="width: 200px;" class="col search-block-input" v-model="search.trend1.end_at" format="YYYY-MM-DD" type="date"></date-picker>
					</div>
					<div class="search-block">
						<div class="search-block-label">
							<label class="text-center" style="width: 140px;">設備</label>
						</div>
						<q-select style="width: 220px;" class="col search-block-input" align="center" v-model="search.trend1.device" :display-value="`已選 ${search.trend1.device.length} 設備`" :options="deviceOptions" multiple></q-select>
					</div>
					<div class="search-block">
						<div class="search-block-label">
							<label class="text-center" style="width: 140px;">項目</label>
						</div>
						<!-- <q-select style="width: 220px;" class="col search-block-input" align="center" v-model="search.trend1.item" :display-value="`已選 ${search.trend1.item.length} 項目`" :options="itemOptions" multiple></q-select> -->
						<q-select style="width: 220px;" class="col search-block-input" align="center" v-model="search.trend1.item_single" :options="itemOptions" @input="singel_item_ctrl($event)"></q-select>
					</div>
					<div class="row items-center">
						<q-btn color="primary" class="id-btn" style="margin:10px;" glossy label="查詢" @click="getData()" /></q-btn>
						<!-- <q-btn color="light" class="id-btn" style="margin:10px;" glossy label="清除" @click="refresh()" /></q-btn>
						<q-btn color="secondary" class="id-btn" style="margin:10px;" glossy label="匯出" @click="exportData()"></q-btn> -->
					</div>
				</div>
				<div class="column q-my-md bg-white">
					<multi-yaxis-chart :show-search-btn="false" :show-search-panel="false" :show-download-btn="false" title="電力趨勢圖" :x-axis="xAxis" x-axis-col-name="日期" :y-axis-group="yAxisGroup" :y-axis-select-options="itemOptions" :y-axis-selected="search.trend1.item" :series="series" @search-ok="searchOk"></multi-yaxis-chart>
				</div>
			</div>
			<div v-show="tab == 'bar1'">
				<div class="row">
					<div class="search-block">
						<div class="search-block-label">
							<label class="text-center" style="width: 70px;">時間</label>
						</div>
						<q-select style="width: 70px;" class="col search-block-input" align="center" v-model="search.bar1.data_type" :options="options.data_type" @input="bar_meter_option_ctrl(tab)"></q-select>
					</div>
					<div class="search-block">
						<div class="search-block-label">
							<label class="text-center" style="width: 70px;">裝置</label>
						</div>
						<q-select style="width: 220px;" class="col search-block-input" align="center" v-model="search.bar1.meter_group" :options="options.meter_group" @input="bar_meter_option_ctrl(tab)"></q-select>
					</div>
					<div class="search-block">
						<div class="search-block-label">
							<label class="text-center" style="width: 70px;">電錶</label>
						</div>
						<q-select style="width: 220px;" class="col search-block-input" align="center" v-model="search.bar1.meter_group_item" :display-value="`已選 ${search.bar1.meter_group_item.length} 項目`" :options="options['meter_group_item'][`${search.bar1.meter_group}`]? options['meter_group_item'][`${search.bar1.meter_group}`]:[]" multiple></q-select>
					</div>
					<div class="search-block">
						<div class="search-block-label">
							<label class="text-center" style="width: 70px;">日期1</label>
						</div>
						<date-picker v-show="search.bar1.data_type =='hour'" style="width: 200px;" class="col search-block-input" v-model="search.bar1.time1" value-type="format" type="date"></date-picker>
						<date-picker v-show="search.bar1.data_type =='day'" style="width: 200px;" class="col search-block-input" v-model="search.bar1.time1" value-type="format" type="month"></date-picker>
						<date-picker v-show="search.bar1.data_type =='month'" style="width: 200px;" class="col search-block-input" v-model="search.bar1.time1" value-type="format" type="year"></date-picker>
					</div>
					<div class="search-block">
						<div class="search-block-label">
							<label class="text-center" style="width: 70px;">日期2</label>
						</div>
						<date-picker v-show="search.bar1.data_type =='hour'" style="width: 200px;" class="col search-block-input" v-model="search.bar1.time2" value-type="format" type="date"></date-picker>
						<date-picker v-show="search.bar1.data_type =='day'" style="width: 200px;" class="col search-block-input" v-model="search.bar1.time2" value-type="format" type="month"></date-picker>
						<date-picker v-show="search.bar1.data_type =='month'" style="width: 200px;" class="col search-block-input" v-model="search.bar1.time2" value-type="format" type="year"></date-picker>
					</div>

					<div class="row items-center">
						<q-btn color="primary" class="id-btn" style="margin:10px;" glossy label="查詢" @click="loadBar1()" /></q-btn>
						<!-- <q-btn color="light" class="id-btn" style="margin:10px;" glossy label="清除" @click="refresh()" /></q-btn>
						<q-btn color="secondary" class="id-btn" style="margin:10px;" glossy label="匯出" @click="exportData()"></q-btn> -->
					</div>
				</div>
				<div class="column q-my-md bg-white">
					<echart ref="bar" :options="Trendbar" :style="{ width: '100%', height: '700px', borderRadius: '2px' }" autoresize></echart>
				</div>
			</div>
			<div v-show="tab == 'trend2'">
				<div class="row">
					<div class="search-block">
						<div class="search-block-label">
							<label class="text-center" style="width: 140px;">開始日期(起)</label>
						</div>
						<date-picker style="width: 200px;" class="col search-block-input" v-model="search.trend2.start_at" format="YYYY-MM-DD" type="date"></date-picker>
					</div>
					<div class="search-block">
						<div class="search-block-label">
							<label class="text-center" style="width: 140px;">開始日期(迄)</label>
						</div>
						<date-picker style="width: 200px;" class="col search-block-input" v-model="search.trend2.end_at" format="YYYY-MM-DD" type="date"></date-picker>
					</div>
					<div class="search-block">
						<div class="search-block-label">
							<label class="text-center" style="width: 140px;">設備</label>
						</div>
						<q-select style="width: 220px;" class="col search-block-input" align="center" v-model="search.trend2.device" :options="options.trend2_device" @input="trend2_select_device"></q-select>
					</div>
					<div class="search-block">
						<div class="search-block-label">
							<label class="text-center" style="width: 140px;">項目</label>
						</div>
						<q-select style="width: 220px;" class="col search-block-input" align="center" v-model="search.trend2.item" :options="options.trend2_item" multiple :display-value=" options.trend2_item.length != 0  ? `已選 ${search.trend2.item.length} 項目` : '請先選擇設備' "></q-select>
					</div>
					<div class="row items-center">
						<q-btn color="primary" class="id-btn" style="margin:10px;" glossy label="查詢" @click="getData2()" /></q-btn>
						<!-- <q-btn color="light" class="id-btn" style="margin:10px;" glossy label="清除" @click="refresh()" /></q-btn>
						<q-btn color="secondary" class="id-btn" style="margin:10px;" glossy label="匯出" @click="exportData()"></q-btn> -->
					</div>
				</div>
				<div class="column q-my-md bg-white">
					<multi-yaxis-chart :show-search-btn="false" :show-search-panel="false" :show-download-btn="false" title="其它趨勢圖" :x-axis="xAxis2" x-axis-col-name="日期" :y-axis-group="yAxisGroup2" :y-axis-select-options="options.trend2_item" :y-axis-selected="search.trend2.item" :series="series2" @search-ok="searchOk2"></multi-yaxis-chart>
				</div>
			</div>
			<div v-show="tab == 'bar2'">
				<div class="row">
					<div class="search-block">
						<div class="search-block-label">
							<label class="text-center" style="width: 70px;">時間</label>
						</div>
						<q-select style="width: 70px;" class="col search-block-input" align="center" v-model="search.bar2.data_type" :options="options.data_type"></q-select>
					</div>
					<div class="search-block">
						<div class="search-block-label">
							<label class="text-center" style="width: 70px;">區域</label>
						</div>
						<q-select style="width: 220px;" class="col search-block-input" align="center" v-model="search.bar2.meter_group" :options="options.bar2_device"></q-select>
					</div>
					<div class="search-block">
						<div class="search-block-label">
							<label class="text-center" style="width: 70px;">日期1</label>
						</div>
						<date-picker v-show="search.bar2.data_type =='hour'" style="width: 200px;" class="col search-block-input" v-model="search.bar2.time1" value-type="format" type="date"></date-picker>
						<date-picker v-show="search.bar2.data_type =='day'" style="width: 200px;" class="col search-block-input" v-model="search.bar2.time1" value-type="format" type="month"></date-picker>
						<date-picker v-show="search.bar2.data_type =='month'" style="width: 200px;" class="col search-block-input" v-model="search.bar2.time1" value-type="format" type="year"></date-picker>
					</div>
					<div class="search-block">
						<div class="search-block-label">
							<label class="text-center" style="width: 70px;">日期2</label>
						</div>
						<date-picker v-show="search.bar1.data_type =='hour'" style="width: 200px;" class="col search-block-input" v-model="search.bar1.time2" value-type="format" type="date"></date-picker>
						<date-picker v-show="search.bar1.data_type =='day'" style="width: 200px;" class="col search-block-input" v-model="search.bar1.time2" value-type="format" type="month"></date-picker>
						<date-picker v-show="search.bar1.data_type =='month'" style="width: 200px;" class="col search-block-input" v-model="search.bar1.time2" value-type="format" type="year"></date-picker>
					</div>

					<div class="row items-center">
						<q-btn color="primary" class="id-btn" style="margin:10px;" glossy label="查詢" @click="getData()" /></q-btn>
						<!-- <q-btn color="light" class="id-btn" style="margin:10px;" glossy label="清除" @click="refresh()" /></q-btn>
						<q-btn color="secondary" class="id-btn" style="margin:10px;" glossy label="匯出" @click="exportData()"></q-btn> -->
					</div>
				</div>
				<div class="column q-my-md bg-white">
					<echart ref="bar" :options="Trendbar" :style="{ width: '100%', height: '700px', borderRadius: '2px' }" autoresize></echart>
				</div>
			</div>
		</div>
	</div>

	<?php
	include_once "html_layout_footer.inc";
	?>
	</div>
	<?php
	include_once "html_loading.inc";
	?>
</body><?php
		$is_report_download = true;
		$is_googlemap = true;
		$is_echarts = true;
		include_once "html_down.inc";
		?>

</html>