<template>
  <div>

  <!-- <q-btn
    flat
    dense
    aria-label="bell"
    icon="notifications"
    :color="alarmCount > 0 ? 'red':'black'"
    :label="alarmCount"
    @click.native="onClick()"
  >
  </q-btn> -->
<!-- 
  <q-modal
    v-model="AlarmDialogModel"
    prevent-close
    no-route-dismiss
    no-esc-dismiss
    no-backdrop-dismiss
    minimized
  >
    <div style="width: auto;height: 100vh;background: #fff;">
      <div style=" display: flex;flex-flow: row wrap; justify-content: center; align-items: center; text-align: center;height: 70px; width: auto;font-size:24px; font-weight: 700; color: #fff; background: rgb(51, 64, 72);">
          <span > {{ $t('page.22K_System.title') }}</span>
           <div style="position:absolute; top: auto; right: 15px;">
             <q-btn 
              icon="close" 
              color="white" 
              text-color = "black" 
              @click="AlarmDialogModel = false"  
              size="md"
              style="width:16px; height:16px;"> 
             </q-btn>
          </div>  
      </div> 
      <div>
        <q-table
          :data="alarmTable.datas"
          :columns="alarmTable.columns"
          row-key="RowGuid"
          :title="alarmTable.title"
          
          hide-bottom
        >
           
          <q-tr slot="header" slot-scope="props" >
            <q-th v-for="col in props.cols" :key="col.name" :props="props" style="padding: 15px 0;font-size: 16px;font-weight: 700;
                  color: #044695; text-align: center;" >
            {{ $t(col.label) }}
            </q-th>
          </q-tr>

          <q-tr slot="body" slot-scope="props">
            <q-td key="NO" :props="props">{{ props.row.NO }}</q-td>
            <q-td key="Location" :props="props">{{ props.row.Location }}</q-td>
            <q-td key="Equipment" :props="props">{{ props.row.Equipment }}</q-td>
            <q-td key="Alarm_Time" :props="props">{{ props.row.Alarm_Time }}</q-td>
            <q-td key="Recovery_Time" :props="props">{{ props.row.Recovery_Time }}</q-td>
            <q-td key="Message" :props="props">{{ props.row.Message }}</q-td>
            <q-td key="Alarm_Priority" :props="props">{{ props.row.Alarm_Priority }}</q-td>
            <q-td key="Value" :props="props">{{ props.row.Value }}</q-td>
          </q-tr>
        </q-table>
      </div>  

    </div>
  </q-modal> -->
    <q-btn
      flat
      dense
      aria-label="bell"
      icon="notifications"
      :color="$root.RealAlarm.Datas.length > 0 ? 'red':'black'"
      :label="$root.RealAlarm.Datas.length"
      @click="$root.RealAlarm.ManuShow = true;"
    >
    </q-btn>

      <q-modal 
        v-if="$root.RealAlarm.Enable == true" 
        v-model="$root.realAlarmShow" 
        no-route-dismiss
        no-esc-dismiss
        no-backdrop-dismiss
        prevent-close
        
      >
        <div class="alarmbox" style="width: 80vw; height: 60vh;">
          <div style=" display: flex;flex-flow: row wrap; justify-content: center; align-items: center; text-align: center;height: 70px; width: auto;font-size:24px; font-weight: 700; color: #fff; background: rgb(51, 64, 72);">
            <span > {{ $t('page.22K_System.title') }}</span>
              <div style="position:absolute; top: auto; right: 15px;">
                <q-btn 
                 icon="close" 
                 color="white" 
                 text-color = "black" 
                 @click="$root.RealAlarmTrigger(false)"  
                 size="md"
                 style="width:16px; height:16px;"> 
                </q-btn>
              </div>  
          </div> 

        <div slot="body" class="alarm-wapper" >
          <q-table
            :data="$root.RealAlarm.Datas" 
            :columns="$root.RealAlarm.Columns" 
            :selection="$root.RealAlarm.Selection"
            :filter="$root.RealAlarm.SearchText"
            :selected.sync="$root.RealAlarm.Selected"
            :rows-per-page-options="$root.RealAlarm.RowsPerPageOptions"
            :pagination.sync="$root.RealAlarm.Pagination"
            :class="['bg-white', 'AlarmList','text-dark']"
            :row-key="$root.RealAlarm.RowKey"
           
            no-data-label="目前沒有警報"
          >
            <!-- <template slot="top-right" slot-scope="props">
              <div class="dialog-actions">
                <q-btn  color="white" text-color="dark" icon="close" title="關閉" @click="$root.RealAlarmTrigger(false)"></q-btn>
              </div>
            </template> -->
            <q-tr slot="header" slot-scope="props">
              <q-td auto-width v-if="$root.localConnected" align="center">
                <q-checkbox no-ripple v-if="props.multipleSelect" v-model="props.selected" indeterminate-value="some"></q-checkbox>
              </q-td>
              <q-td v-for="col in props.cols" :key="col.name" style="padding: 15px 0;font-size: 16px;font-weight: 700;
                  color: #044695; text-align: center;" :props="props">{{ col.label }}</q-td>
            </q-tr>
            <q-tr slot="body" slot-scope="props" :props="props" :key="props.row[$root.RealAlarm.RowKey]">
              <q-td auto-width v-if="$root.localConnected" align="center" style="overflow: hidden;">
                <q-checkbox no-ripple color="primary" v-model="props.selected" v-if="!props.row.al_ack_time"></q-checkbox>
              </q-td>
              <q-td v-for="col in props.cols" :key="col.name" :props="props"  style="font-size: 16px ;font-weight: 700;">
                <span>{{ typeof col.field == "function" ? (typeof col.format == "function" ? col.format(col.field(props.row)) : col.field(props.row)) : (typeof col.format == "function" ? col.format(props.row[col.field]) : props.row[col.field]) }}</span>
              </q-td>
            </q-tr>
          </q-table>
        </div>
        <div slot="buttons"></div>
        </div> 
      </q-modal>
  </div>
</template>

<script>
module.exports = {
  data () {
    return {
      "alarmCount": 0,
      "AlarmDialogModel" : false,
      // alarmTable: {
      //   display: false,
      //   title: "",
      //   selected: [],
      //   rowsPerPageOptions: [],
      //   rowKey: "No",
      //   pagination: {
      //     page: 1,
      //     rowsPerPage: 10
      //   },
      //   columns: [
      //     {
      //       name: "NO.",label: "page.22K_System.alarm.no",align: "center",field: "NO",
      //     }, 
      //     {
      //       name: "Location",label: "page.22K_System.alarm.location",align: "center",field: "Location",
      //     }, 
      //     {
      //       name: "Equipment",label: "page.22K_System.alarm.equipment",align: "center",field: "Equipment",
      //     }, 
      //     {
      //       name: "Alarm_Time",label: "page.22K_System.alarm.alarm_time",align: "center",field: "Alarm_Time",
      //     },
      //     {
      //       name: "Recovery_Time",label: "page.22K_System.alarm.recovery_time",align: "center",field: "Recovery_Time",
      //     }, 
      //     {
      //       name: "Message",label: "page.22K_System.alarm.message",align: "center",field: "Message",
      //     }, 
      //     {
      //       name: "Alarm_Priority",label: "page.22K_System.alarm.alarm_priority",align: "center",field: "Alarm_Priority",
      //     },
      //     {
      //       name: "Value",label: "page.22K_System.alarm.value",align: "center",field: "Value",
      //     }, 
      //   ],
      //   datas: [],
      // },
    }
  },
  props: [],
  computed: {
    isSingle () {
      return this.$root.VarMenu == 'single';
    },
    location () {
      if (this.isSingle)
        return this.$root.VarSTN;
      else {
        return 'All';
      }
    },
    search () {
      return {
        "start_date": moment().format('YYYY-MM-DD'),
        "end_date": moment().format('YYYY-MM-DD'),
        "location": this.location,
        "alarm_priority": "1",
        "equipment": null,
        "not_returning": true,
      };
    }
  },
  mounted () {
    this.getData();
  },
  methods: {
    
    onClick () {
      this.AlarmDialogModel = true ;
      // if (this.alarmCount > 0) {
      //   if (this.isSingle) {
      //     this.$root.FnPageSwitch('stn_alarm_list.php');
      //   } else {
      //     this.$root.FnPageSwitch('alarm_list.php');
      //   }
      // }
    },
    getData () {
      let that = this;
      var params = {
        Action: 'AlarmList',
        menu_page: 'alarm_list', // 使用 alarm_list.php 的 API
        Datas: that.search,
      };
      that.$root.FnWebAPIGet(params).then(function (res) {
        that.alarmCount = res.data.data.length;
        setTimeout(that.getData, 1000 * 60);
      }).catch(function (err) {
        console.log(err);
      });
    }
  }
}
</script>

<style scoped>

  .alarmbox {
    width: 70vw;
    height: 60vh; 
    background: #fff;
  }

  .alarmbox_th th{
    padding: 15px 0;
    font-size: 16px;
    font-weight: 700;
    color: #044695;
    text-align: center;
  }

  .setting_alarmbox_title{
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
    text-align: center;
    height: 70px;
    width: auto;
    font-size:24px;
    font-weight: 700;
    color: #fff;
    background: rgb(51, 64, 72);
  }

  @media all and (max-width: 769px) {
    .alarmbox{
       width: 100vw !important;
       height: 60vh; 
       background: #fff;
    }
  }


</style>