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 = [{
      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
  }];

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

    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>
                  <ion-radio-group>
                    <ion-item>
                      <ion-label>近一年</ion-label>
                      <ion-radio slot="start" value="12" checked id="popSelect1"></ion-radio>
                    </ion-item>
                    <ion-item>
                      <ion-label>近六个月</ion-label>
                      <ion-radio slot="start" value="6" id="popSelect2"></ion-radio>
                    </ion-item>
                    <ion-item>
                      <ion-label>近三个月</ion-label>
                      <ion-radio slot="start" value="3" id="popSelect3"></ion-radio>
                    </ion-item>
                    <ion-item>
                      <ion-label>近一个月</ion-label>
                      <ion-radio slot="start" value="1" id="popSelect4"></ion-radio>
                    </ion-item>
                  </ion-radio-group>
                </ion-list>
                `;
          }
      });

  }

  ngOnInit() {
      this.init();
  }

  init () {
      this.api.alert.getAll([{fieldRegionType: '牛舍'}, (data) => {
          if (data.total > 0) {
              if (data.rows && data.rows.constructor === Array) {
                  this.alarmItems = data.rows;
              }
          }
      }]);
  }
  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(fieldRegionInfo) {
        this.curFieldRegion = fieldRegionInfo;
        this.popoverElement = Object.assign(document.createElement('ion-popover'), {
            component: 'popover-page',
            event: event
        });
        document.body.appendChild(this.popoverElement);
        return await this.popoverElement.present().then( (res) => {
            document.getElementById('popSelect1').onclick = () => {
                this.dismissPopover(12);
            };
            document.getElementById('popSelect2').onclick = () => {
                this.dismissPopover(6);
            };
            document.getElementById('popSelect3').onclick = () => {
                this.dismissPopover(3);
            };
            document.getElementById('popSelect4').onclick = () => {
                this.dismissPopover(1);
            };
        });
    }

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

        this.api.alarm.getAlarmByTerm([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 time = new Date().getTime() - ( 1000 * 3600 * 24 * interval );
      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('intervalValue').innerText = displayValue;
    }
}
