<!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">
      <!-- 趨勢圖 + 6個區塊 -->
      <div class="w3-col l7 m6 s12">
        <div class="w3-row">
          <div class="w3-col l3 m6 s12 for-space" v-for="item in info" v-if="item['isShowChart']">
            <div class="flex-fcwcfs">
              <div class="text-white">
                {{ item['label'] }}
              </div>
              <div class="bg-white span-border q-py-xs q-px-sm text-light-blue-7" style="width: 100%; border-radius: 5px; text-align: right;">
                {{ item['value'] }}
              </div>  
            </div>  
          </div>  
        </div>  
        <div class="w3-row q-mt-md shadow-2 bg-grey-1" style="height:740px">
          <echart :options="chart" style="width: 100%; height:100%" autoresize></echart>
        </div>

      </div>  

      <div class="w3-col l5 m6 s12">

        <div class="w3-col l6 m6 s12">
          <div class="flex-frcwcc " v-for="item in info" v-if="item['show']">
            <div class="flex-frwfsc " style="padding-bottom: 6%;">
              <div class="text-white"  style="width: 31%; ">
                {{ item['label'] }}
              </div>
              <div class="bg-white span-border q-py-xs q-px-md"  style="width: 50%; border-radius: 25px">
                <div :class="item['class']">
                  <span>{{ item['value'] }}</span>
                  <span class="text-black q-pl-xs" v-if="!_.isNull(item['unit'])">{{ item['unit'] }}</span>
                </div>
              </div> 
            </div> 
          </div>
        </div>

        <div class="w3-col l6 m6 s12">
          <div class="bg-white q-pa-md q-mb-lg frame-ElecMeter">
            <!-- 標題 -->
            <span>{{ mcb['title'] }}</span>
            <!-- 內容 -->
            <div class="flex-frwfsc Meter-content">
              <div class="flex-frwfsc q-my-sm " style="width: 100%" v-for="item in mcb['data']" v-if="item['show']">
                <div class="text-black" style="width : 25%;">
                  {{ item['label'] }}
                </div>
                <div class="bg-white span-border q-pa-xs" style="width : 75%; border-radius: 5px">
                  <div :class="item['class']">
                    {{ item['value'] }}
                  </div>  
                </div> 
                <!-- <hr style="width: 100%; border: 1px solid rgba(43,43,43, 0.5);" v-if="['5', '6'].includes(item['RowNo'])">  -->
              </div>
            </div>  
          </div>

          <div class="bg-white q-pa-md q-mb-lg frame-ElecMeter">
            <!-- 標題 -->
            <span>{{ other['title'] }}</span>
            <!-- 內容 -->
            <div class="flex-frwfsc Meter-content">
              <div class="flex-frwfsc q-my-sm" style="width : 100%" v-for="item in other['data']" v-if="item['show']">
                <div class="text-black" style="width : 25%;" >
                  {{ item['label'] }}
                </div>
                <div class="bg-white span-border q-pa-xs" style="width : 75%; border-radius: 5px"  >
                  <div :class="item['class']">
                    <span>{{ item['value'] }}</span>
                    <span class="text-black q-pl-xs" v-if="!_.isNull(item['unit'])">{{ item['unit'] }}</span>
                  </div>  
                </div> 
              </div>
            </div>  
          </div>

          <div class="w3-row w3-right-align">
            <q-btn glossy label="需量查詢" icon="search" color="primary" @click="FnPageSwitch('demand_query.php')" style="font-size: 1.2rem; font-weight: 700"></q-btn>
          </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>