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 = [];
  // TODO 测试用数据
  // alarmItems = [{
  //     factoryNo: 'FN108050436279648256',
  //     factoryName: '一厂',
  //     fieldRegionNo: 'FRN110268534764224511',
  //     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: 'FRN110268534764224513',
  //     fieldRegionName: '3号牛舍',
  //     devErr: 36,
  //     devErrTotal: 55,
  //     alarm: 20,
  //     alarmTotal: 55,
  //     total: 56
  // }, {
  //     factoryNo: 'FN108050436279648256',
  //     factoryName: '一厂',
  //     fieldRegionNo: 'FRN110268534764224514',
  //     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};

    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();
  }

  init () {
      this.api.alert.getAll([{fieldRegionType: '牛舍'}, (data) => {
          if (data.total > 0) {
              if (data.rows && data.rows.constructor === Array) {
                  this.alarmItems = data.rows;
              }
          }
      }]);
  }
  toControl(one, displayArea) {
        const query = '/env-alarmDetail?no=' + one.fieldRegionNo
            + '&displayArea=' + displayArea + '&interval=' + this.curInterval;
        // 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(interval) {
        this.load.toLoad('加载中...', false);
        const condition = {
            fieldRegionNo: this.curFieldRegion.fieldRegionNo,
            startTime: this.getStartTime(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;
    }
}
