<!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-field label="查詢區間" label-width="5" class="search-field w3-col l2 m6 s12" >
        <q-radio label="日" v-model="search.range" val="day" ></q-radio>
        <q-radio label="月" v-model="search.range" val="month" ></q-radio>
      </q-field>
      <q-field label="日期" label-width="4" class="search-field w3-col l2 m6 s12" v-if="search.range == 'day'">
        <q-datetime v-model="search.date" type="date" format24h align="center" ></q-datetime>
      </q-field>
      <q-field label="年月" label-width="4" class="search-field w3-col l2 m6 s12" v-if="search.range == 'month'" >
        <input type="month" style="height: 100%; width: 100%;" v-model="search.year_month">
      </q-field> -->

        <q-field label="查詢區間" label-width="5" class="search-field w3-col l2 m6 s12 " >
          <q-radio label="日" v-model="search.range" val="day" 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 == 'day'" >
          <date-picker v-model="search.date" type="date" placeholder="請選日期" :clearable="false" ></date-picker>
        </q-field>
        <q-field label="年月" label-width="4" class="search-field w3-col l2 m6 s12" v-if="search.range == 'month'" >
          <date-picker v-model="search.year_month" type="month" placeholder="請選年月份" :clearable="false"  ></date-picker>
        </q-field>

      <q-field :label="itemLabel" label-width="4" class="search-field w3-col l2 m6 s12" >
        <q-select v-model="search.item" align="center" multiple :options="itemOptions" :display-value="`已選${search.item.length}項`"></q-select>
      </q-field>
      
      <q-btn glossy label="查詢" @click="searchData()" color="primary" class="id-btn" style="margin-left: 8px;"></q-btn>
      <q-btn label="返回" @click="FnPageSwitch(fromPage)" color="cyan-3" class="w3-right id-btn"></q-btn>
    </div>
    
    <div class="w3-section" style="height: 900px;">
      <echart :options="pieOptions" autoresize style="width: 100%; height: 100%;" id="my-pie"></echart>
    </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>