<!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">
      <div class="w3-row-padding w3-stretch flex-frwfsc" >
        <q-field label="查詢區間" label-width="5" class="search-field w3-col l2 m6 s12 flex-space search">
          <q-radio label="年" v-model="search.range" val="year" class="q-ml-sm"></q-radio>
          <q-radio label="月" v-model="search.range" val="month" class="q-ml-sm"></q-radio>
        </q-field>
        <q-field label="年" label-width="4" class="search-field w3-col l2 m6 s12 " v-if="search.range == 'year'" >
          <date-picker v-model="search.year" type="year" placeholder="請選年份" :clearable="false"></date-picker>
        </q-field>
        <q-field label="年月" label-width="4" class="search-field w3-col l2 m6 s12 flex-space" v-if="search.range == 'month'" >
          <date-picker v-model="search.year_month" type="month" placeholder="請選年月份" :clearable="false"></date-picker>
        </q-field>
        <q-btn glossy label="查詢" @click="searchData()" color="primary" class="id-btn"></q-btn>
      </div> 
    </div> 

    <div class="q-my-lg flex-shadow">
      <echart :options="chart" style="width: 100%;" autoresize></echart>
    </div>

    <div class="w3-section w3-row-padding" style="padding: 0; font-size: 20px; font-weight: 600;">
      <div class="w3-col l6 m6 s12 flex-space">
        <div class="flex-shadow w3-responsive">
          <table class="w3-table-all">
            <thead>
              <tr style="background: #4264d0; color: #fff;">
                <th>Date</th>
                <th class="w3-right-align" >{{chart['dataset']['dimensions'][1]}}</th>
                <th class="w3-right-align" >{{chart['dataset']['dimensions'][2]}}</th>
                <th class="w3-right-align" title="((MCB-基線)/基線)*100">差距(%)</th>
              </tr>
            </thead>
            <tr v-for="row,inx in chart['dataset']['source']" v-if="inx <= 14">
              <td>{{row.Date}}</td>
              <td class="w3-right-align">{{row[chart['dataset']['dimensions'][1]]}}</td>
              <td class="w3-right-align">{{row[chart['dataset']['dimensions'][2]]}}</td>
              <td class="w3-right-align">{{ ((row[chart['dataset']['dimensions'][2]]-row[chart['dataset']['dimensions'][1]]) / row[chart['dataset']['dimensions'][1]] * 100).toFixed(2) }}</td>
            </tr>
          </table>
        </div>
      </div>
      <div class="w3-col l6 m6 s12 flex-space">
        <div class="flex-shadow w3-responsive">
          <table class="w3-table-all">
            <thead>
              <tr style="background: #4264d0; color: #fff;">
                <th>Date</th>
                <th class="w3-right-align" >{{chart['dataset']['dimensions'][1]}}</th>
                <th class="w3-right-align" >{{chart['dataset']['dimensions'][2]}}</th>
                <th class="w3-right-align" title="((MCB-基線)/基線)*100">差距(%)</th>
              </tr>
            </thead>
            <tr v-for="row,inx in chart['dataset']['source']" v-if="inx > 15 ">
              <td>{{row.Date}}</td>
              <td class="w3-right-align">{{row[chart['dataset']['dimensions'][1]]}}</td>
              <td class="w3-right-align">{{row[chart['dataset']['dimensions'][2]]}}</td>
              <td class="w3-right-align">{{((row[chart['dataset']['dimensions'][2]]-row[chart['dataset']['dimensions'][1]]) / row[chart['dataset']['dimensions'][1]] * 100).toFixed(2)}}</td>
            </tr>
          </table>
        </div>
      </div>
      <!-- <div class="w3-col l3 m6 s12 flex-space">
        <div class="flex-shadow w3-responsive">
          <table class="w3-table-all">
            <thead>
              <tr style="background: #4264d0; color: #fff;">
                <th>Date</th>
                <th class="w3-right-align" >{{chart['dataset']['dimensions'][1]}}</th>
                <th class="w3-right-align" >{{chart['dataset']['dimensions'][2]}}</th>
                <th class="w3-right-align" >差距(%)</th>
              </tr>
            </thead>
            <tr v-for="row,inx in chart['dataset']['source']" v-if="inx >= 10 && inx < 20">
              <td>{{row.Date}}</td>
              <td class="w3-right-align">{{row[chart['dataset']['dimensions'][1]]}}</td>
              <td class="w3-right-align">{{row[chart['dataset']['dimensions'][2]]}}</td>
              <td class="w3-right-align">{{((row[chart['dataset']['dimensions'][2]]-row[chart['dataset']['dimensions'][1]]) / row[chart['dataset']['dimensions'][1]] * 100).toFixed(2)}}</td>
            </tr>
          </table>
        </div>
      </div>
      <div class="w3-col l3 m6 s12 flex-space">
        <div class="flex-shadow w3-responsive">
          <table class="w3-table-all">
            <thead>
              <tr style="background: #4264d0; color: #fff;">
                <th>Date</th>
                <th class="w3-right-align" >{{chart['dataset']['dimensions'][1]}}</th>
                <th class="w3-right-align" >{{chart['dataset']['dimensions'][2]}}</th>
                <th class="w3-right-align" >差距(%)</th>
              </tr>
            </thead>
            <tr v-for="row,inx in chart['dataset']['source']" v-if="inx >= 20 && inx < 30">
              <td>{{row.Date}}</td>
              <td class="w3-right-align">{{row[chart['dataset']['dimensions'][1]]}}</td>
              <td class="w3-right-align">{{row[chart['dataset']['dimensions'][2]]}}</td>
              <td class="w3-right-align">{{((row[chart['dataset']['dimensions'][2]]-row[chart['dataset']['dimensions'][1]]) / row[chart['dataset']['dimensions'][1]] * 100).toFixed(2)}}</td>
            </tr>
          </table>
        </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>