import { Component, OnInit } from '@angular/core';
import {Api} from '../../service/api';
import {NavController} from '@ionic/angular';


@Component({
  selector: 'v-env-alarm',
  templateUrl: './env-alarm.page.html',
  styleUrls: ['./env-alarm.page.scss'],
})
export class EnvAlarmPage implements OnInit {

  alarmItems = [{
      factoryNo: 'FN108050436279648256',
      factoryName: '一厂',
      fieldRegionNo: 'FRN110268534764224512',
      fieldRegionName: '1号牛舍',
      devErr: 36,
      devErrTotal: 55,
      alarm: 20,
      alarmTotal: 55,
      total: 56
  }, {
      factoryNo: 'FN108050436279648256',
      factoryName: '一厂',
      fieldRegionNo: 'FRN110268534764224512',
      fieldRegionName: '2号牛舍',
      devErr: 36,
      devErrTotal: 55,
      alarm: 20,
      alarmTotal: 55,
      total: 56
  }, {
      factoryNo: 'FN108050436279648256',
      factoryName: '一厂',
      fieldRegionNo: 'FRN110268534764224512',
      fieldRegionName: '3号牛舍',
      devErr: 36,
      devErrTotal: 55,
      alarm: 20,
      alarmTotal: 55,
      total: 56
  }, {
      factoryNo: 'FN108050436279648256',
      factoryName: '一厂',
      fieldRegionNo: 'FRN110268534764224512',
      fieldRegionName: '4号牛舍',
      devErr: 36,
      devErrTotal: 55,
      alarm: 20,
      alarmTotal: 55,
      total: 56
  }];

  constructor(private api: Api, public nav: NavController) {
      customElements.define('popover-page', class ModalContent extends HTMLElement {
          connectedCallback() {
              this.innerHTML = `
                  <ion-list>
                    <ion-list-header>Ionic</ion-list-header>
                    <ion-item button>Learn Ionic</ion-item>
                    <ion-item button>Documentation</ion-item>
                    <ion-item button>Showcase</ion-item>
                    <ion-item button>GitHub Repo</ion-item>
                  </ion-list>
                  <ion-button expand="block" onClick="dismissPopover()">确认</ion-button>
                `;
          }
      });
  }

  ngOnInit() {
      this.api.alert.getAll([{fieldRegionType: '牛舍'}, (data) => {
          if (data.total > 0) {
              if (data.rows && data.rows.constructor === Array) {
                  this.alarmItems = data.rows;
                  // rows.map((value, index) => {
                  //     // this.totalAlert = this.totalAlert + value.devErr + value.alarm;
                  //
                  // });
              }
          }
      }]);
  }


  toControl(one) {
        const query = '/env-alarmDetail?name=' + one.fieldRegionName + '&no=' + one.fieldRegionNo;
        // this.tf.transfer({
        //     url: '/' + one.url,
        //     query: query,
        //     hash: ''
        // });
        console.log(query);
        this.nav.navigateForward(query);
  }

    async presentPopover(ev) {
        const popoverElement = Object.assign(document.createElement('ion-popover'), {
            component: 'popover-page',
            event: event
        });
        document.body.appendChild(popoverElement);
        return await popoverElement.present();
    }
}
