<!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="w3-row-padding w3-stretch q-mb-md">
    <q-field label="日期" label-width="4" class="search-field w3-col l2 m6 s12 " >
      <date-picker v-model="search.date" type="date" placeholder="請選日期" :clearable="false" value-type="format" format="YYYY-MM-DD" ></date-picker>
    </q-field>
    <q-btn label="查詢" @click="searchData()" glossy color="primary" size="1.2em" class="id-btn"></q-btn>
  </div>
  <div class="w3-row-padding w3-stretch">
    <div class="w3-col l3 m12 s12 q-mb-sm " v-for="mc in meter_charts" >
      <div class="w3-card-4 w3-round w3-display-container" style="display: flex; align-items: center; ">
        <span class="w3-display-topright q-pa-sm">
          <q-btn @click="toHistoryPage(mc)" icon="show_chart" glossy color="primary"></q-btn>
        </span>
        <echart :options="mc" style="width: 60%; height: 330px; padding: 10px 0 0 10px;" autoresize></echart>
        <div class="meter-info" style="width: 40%; text-align: center;">
          <h3>{{mc.info.used.value}} <span>{{mc.info.used.unit}}</span></h3>
          <label>{{mc.info.used.label}}</label>
          <br>
          <br>
          <h3>{{mc.info.qty.value}} <span>{{mc.info.qty.unit}}</span></h3>
          <label>{{mc.info.qty.label}}</label>
        </div>
      </div>
    </div>
  </div>
  
<?php
include_once "html_layout_footer.inc";
?>
</div>
  <?php
  include_once "html_loading.inc";
  ?>
</body><?php
        $is_echarts = true;
        include_once "html_down.inc";
        ?>

</html>