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


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

  alarmItems = [];

  curFieldRegion = {factoryNo: '',
      factoryName: '',
      fieldRegionNo: '',
      fieldRegionName: '',
      devErr: 0,
      devErrTotal: 0,
      alarm: 0,
      alarmTotal: 0,
      total: 0};

    curInterval = '12';
    popoverElement = null;

  constructor(private api: Api, public nav: NavController, private load: Load) {
      // customElements.define('popover-page', class ModalContent extends HTMLElement {
      //     connectedCallback() {
      //         this.innerHTML = `
      //           <ion-list class="popContent">
      //             <ion-radio-group style="">
      //               <ion-item style="">
      //                 <ion-label class="popLabel">近一年</ion-label>
      //                 <ion-radio slot="start" value="12" checked id="popSelect1"></ion-radio>
      //               </ion-item>
      //               <ion-item style="">
      //                 <ion-label class="popLabel">近六个月</ion-label>
      //                 <ion-radio slot="start" value="6" id="popSelect2"></ion-radio>
      //               </ion-item>
      //               <ion-item style="">
      //                 <ion-label class="popLabel">近三个月</ion-label>
      //                 <ion-radio slot="start" value="3" id="popSelect3"></ion-radio>
      //               </ion-item>
      //               <ion-item style="">
      //                 <ion-label class="popLabel">近一个月</ion-label>
      //                 <ion-radio slot="start" value="1" id="popSelect4"></ion-radio>
      //               </ion-item>
      //             </ion-radio-group>
      //           </ion-list>
      //           `;
      //     }
      // });

  }

  ngOnInit() {
      this.init();
  }

  ionViewWillLeave() {

  }
  init () {
      this.curInterval = '12';
      this.api.alert.getAll([{fieldRegionType: '牛舍'}, (data) => {
          if (data.total > 0) {
              if (data.rows && data.rows.constructor === Array) {
                  this.alarmItems = data.rows;
                  this.alarmItems.forEach(item => (item.interval = this.curInterval));
              }
          }
      }]);
  }
  toControl(one, displayArea) {
        const query = '/env-alarmDetail?no=' + one.fieldRegionNo
            + '&displayArea=' + displayArea + '&interval=' + this.curInterval.toString();
        // this.tf.transfer({
        //     url: '/' + one.url,
        //     query: query,
        //     hash: ''
        // });
        console.log(query);
        this.nav.navigateForward(query);
  }

    // async presentPopover(fieldRegionInfo) {
    //     this.curFieldRegion = fieldRegionInfo;
    //     this.popoverElement = Object.assign(document.createElement('ion-popover'), {
    //         component: 'popover-page',
    //         event: event,
    //         cssClass: ['width: 150px']
    //     });
    //     document.body.appendChild(this.popoverElement);
    //     return await this.popoverElement.present().then( (res) => {
    //         document.getElementById('popSelect1').onclick = () => {
    //             this.dismissPopover(12);
    //             this.curInterval = 12;
    //         };
    //         document.getElementById('popSelect2').onclick = () => {
    //             this.dismissPopover(6);
    //             this.curInterval = 6;
    //         };
    //         document.getElementById('popSelect3').onclick = () => {
    //             this.dismissPopover(3);
    //             this.curInterval = 3;
    //         };
    //         document.getElementById('popSelect4').onclick = () => {
    //             this.dismissPopover(1);
    //             this.curInterval = 1;
    //         };
    //     });
    // }

    dismissPopover(one) { // interval, fieldRegionInfo
        this.curFieldRegion = one;
        this.load.toLoad('加载中...', false);
        const condition = {
            fieldRegionNo: this.curFieldRegion.fieldRegionNo,
            startTime: this.getStartTime(one.interval).valueOf(),
            stopTime: new Date().valueOf()
        };

        this.api.alert.getByTerm([condition, (data) => {
            if (data && data.fieldRegionNo) {
                this.curFieldRegion = data;
                this.alarmItems.forEach(item => {
                    if (item.fieldRegionNo === this.curFieldRegion.fieldRegionNo) {
                        item = this.curFieldRegion;
                    }
                });
            }
            this.load.offLoad();
        }]);
        // if (this.popoverElement) {
        //     this.popoverElement.dismiss().then(() => { this.popoverElement = null; });
        // }
        // this.displayInterval(interval);
    }

    getStartTime(interval) {
      const now = new Date;
      const year = now.getFullYear();
      const month = now.getMonth() - interval;
      const day = now.getDate();
      const time = new Date(year, month, day, 0, 0, 0);
      return time;
    }

    displayInterval(interval) {
      let displayValue = '';
      switch (interval) {
          case 12: displayValue = '近一年'; break;
          case 6: displayValue = '近六个月'; break;
          case 3: displayValue = '近三个月'; break;
          case 1: displayValue = '近一个月'; break;
          default: displayValue = '近一年'; break;
      }
        document.getElementById(this.curFieldRegion.fieldRegionNo).innerText = displayValue;
    }

    doRefresh(event) {
        setTimeout(() => {
            this.init();
            event.target.complete();
        }, 3000);
    }
}
