//这个根模块会告诉 ionic 如何组装该应用

import { NgModule, ErrorHandler } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { IonicStorageModule } from '@ionic/storage';
import { MyApp } from './app.component';

// 其他组件
import { HomePage } from '../pages/home/home';
import { DiscoveryPage } from '../pages/discovery/discovery';
import { ChatPage } from '../pages/chat/chat';
import { NotificationPage } from '../pages/notification/notification';
import { MorePage } from '../pages/more/more';
import { LoginPage } from '../pages/login/login';
import { TabsPage } from '../pages/tabs/tabs';

import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { ApiProvider } from '../providers/api/api';

@NgModule({
  declarations: [
    MyApp,
    HomePage,
    DiscoveryPage,
    ChatPage,
    NotificationPage,
    MorePage,
    LoginPage,
    TabsPage
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    IonicModule.forRoot(MyApp),
    IonicStorageModule.forRoot()
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    DiscoveryPage,
    ChatPage,
    NotificationPage,
    MorePage,
    LoginPage,
    TabsPage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    ApiProvider
  ]
})
export class AppModule {}

// 页面被加载完成后调用的函数，切换页面时并不会进行重新加载，因为有cache的存在
onPageLoaded() {
  console.log('page 1: page loaded.');
}
 
// 页面即将进入的时候
onPageWillEnter() {
  // 在这里可以做页面初始化的一些事情
  console.log('page 1: page will enter.');
}
 
// 页面已经进入的时候
onPageDidEnter() {
  console.log('page 1: page did enter.');
}
 
// 页面即将离开的时候
onPageWillLeave() {
  console.log('page 1: page will leave.');
}
 
// 页面已经离开的时候
onPageDidLeave() {
  console.log('page 1: page did leave.');
}
 
// 从 DOM 中移除的时候执行的生命周期
onPageWillUnload() {
 
}
 
// 从 DOM 中移除执行完成的时候
onPageDidUnload() {
 
}

import { IonicStorageModule } from '@ionic/storage';

@NgModule({
  declarations: [
    // ...
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    IonicStorageModule.forRoot()
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    // ...
  ],
  providers: [
    // ...
  ]
})
export class AppModule {}

import { Storage } from '@ionic/storage';

export class MyApp {
  constructor(private storage: Storage) { }

  ...

  // set a key/value
  storage.set('name', 'Max');

  // Or to get a key/value pair
  storage.get('age').then((val) => {
    console.log('Your age is', val);
  });
}

import { QRScanner, QRScannerStatus } from '@ionic-native/qr-scanner';

  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    QRScanner // 导入插件
  ]

// scan.ts
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, AlertController } from 'ionic-angular';
import { QRScanner, QRScannerStatus } from '@ionic-native/qr-scanner';

@Component({
  selector: 'page-scan',
  templateUrl: 'scan.html',
})
export class ScanPage {

  constructor(public navCtrl: NavController,
    public navParams: NavParams,
    public alertCtrl: AlertController,
    public qrScanner: QRScanner) {
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad ScanPage');
  }
  ionViewDidEnter() {
    this.scanQRCode();
  }

  scanQRCode() {
    this.qrScanner.prepare()
      .then((status: QRScannerStatus) => {
        if (status.authorized) {
          window.document.querySelector('body').classList.add('transparent-body');
          let scanSub = this.qrScanner.scan().subscribe((text: string) => {
            let alert = this.alertCtrl.create({
              title: '二维码内容',
              subTitle: text,
              buttons: ['OK']
            });
            alert.present();
            scanSub.unsubscribe();
          });

          this.qrScanner.show();

        }
        else if (status.denied) {
          //提醒用户权限没有开
        }
        else {

        }
      })
      .catch((e: any) => console.error('Error :', e));
  }

}

import { ScanPage } from '../scan/scan'; // 引入新建的扫描页面

constructor(public navCtrl: NavController, 
  public navParams: NavParams) {
    super()
}

// 跳转到二维码扫描界面，加上'animate': false参数是为了相机能够在整个屏幕显示，否则相机出不来
gotoScanQRCode() {
  this.navCtrl.push(ScanPage, null, {'animate': false})
}

import { AppVersion } from '@ionic-native/app-version';
providers: [
    AppVersion
]

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { AppVersion } from '@ionic-native/app-version';

@Component({
  selector: 'page-versions',
  templateUrl: 'versions.html',
})
export class VersionsPage {

  appName: string;
  packageName: string;
  versionCode: string;
  versionNumber: string;

  constructor(public navCtrl: NavController,
    private appVersion: AppVersion,
    public navParams: NavParams) {
  }

  ionViewDidLoad() {
    this.appVersion.getAppName().then(v => {
      this.appName = v;
    });

    this.appVersion.getPackageName().then(v => {
      this.packageName = v;
    });

    this.appVersion.getVersionCode().then(v => {
      this.versionCode = v;
    });

    this.appVersion.getVersionNumber().then(v => {
      this.versionNumber = v;
    });
  }
}

gotoVersions(){
  this.navCtrl.push(newPage)
}

import { NavController} from 'ionic-angular';

constructor(public navCtrl: NavController) {}

 // 参数可以说任意 这里对象形式
 this.navCtrl.push(DetailsPage, {id: questionId}) 

this.ModalCtrl.create(AnswerPage, {
  id: this.id
})

public id:string;

constructor(public navCtrl: NavController, public navParams: NavParams) {
  this.id = navParams.get('id') // 接收传递过来的参数
}

// 或者这样写
ionViewDidLoad(){
   this.id = this.navParams.get('id')
}

import { ChatdetailsPage } from '../chatdetails/chatdetails' // 1.导入页面

public ChatdetailsPage: any; // 2. 声明类型

constructor(){
    userinfo = {
        userId: '1234',
        username: 'poetries'
    }
    this.ChatdetailsPage = ChatdetailsPage; // 3. 
}

  constructor(public navCtrl: NavController, public navParams: NavParams) {
    this.username = navParams.get('username')
    this.userid = navParams.get('userid')
  }

import { Pipe, PipeTransform } from '@angular/core';
import * as moment from 'moment'

/**
 * Generated class for the RelativetimePipe pipe.
 *
 * See https://angular.io/api/core/Pipe for more info on Angular Pipes.
 */
@Pipe({
  name: 'relativetime',
})
export class RelativetimePipe implements PipeTransform {
  /**
   * Takes a value and makes it lowercase.
   */
  transform(value: string, ...args) {
    return moment(value).toNow() // 将过去时间变成距离现在多久
  }
}

import { RelativetimePipe } from '../pipes/relativetime/relativetime'


@NgModule({
  declarations: [
    RelativetimePipe
  ]
...

// settings.ts
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs/Rx'

@Injectable()
export class SettingsProvider {

  private theme: BehaviorSubject<string>
  constructor(public http: HttpClient) {
    this.theme = new BehaviorSubject('light-theme')
  }
  setActiveTheme(val) {
    this.theme.next(val)
  }
  getActiveTheme() {
    return this.theme.asObservable()
  }
}

// 1. 引入settings providers
import { SettingsProvider } from '../../providers/settings/settings';

export class UserCenterPage {

  // 2. 定义变量
  public selectedTheme: string;

  constructor(public navCtrl: NavController, 
                      public navParams: NavParams,
                      // 3. 注入
                      public settings: SettingsProvider
                      public ModalCtrl: ModalController ) {
                        super()
                        
                         // 4. 获取主题
                        this.settings.getActiveTheme().subscribe(val => this.selectedTheme = val)
  }
  // 5.切换主题
  toggleChangeTheme() {
    if(this.selectedTheme == 'dark-theme') {
      this.settings.setActiveTheme('light-theme')
    }else{
      this.settings.setActiveTheme('dark-theme')
    }
  }
}

import { ComponentsModule } from '../components/components.module'

@NgModule({
  declarations: [
  
  ],
  imports: [
  BrowserModule,
    HttpClientModule,
    ComponentsModule, // 导入自定义组件
    IonicStorageModule.forRoot()
  ],
  bootstrap: [IonicApp],
  entryComponents: [
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

import { Component, Input } from '@angular/core';

// datatype 外部传递进来，dataSourceType 本地接收之后的参数命名
@Input('dataType') dataSourceType;

//这里没有 ionViewDidLoad 生命周期的函数
ngAfterContentInit(){
  console.log(this.dataSourceType) 
}

import {ModalController, LoadingController,  ToastController, ViewController} from 'ionic-angular';

 constructor(
    public loadingCtr: LoadingController,
    public viewCtr: ViewController,
    public toastCtrl: ToastController,
    public ModalCtrl: ModalController 
  ) {
      
 }

// loading使用
let loader = loadingCtr.create({
    content: message, // 加载的内容
    dismissOnPageChange: true 
})
loader.present() // // 触发生效
loading.dismiss() // 关闭loading
 
// toastCtrl使用
let toast = toastCtrl.create({
    message, // 提示的信息
    duration: 3000, // 间隔时间
    position: 'bottom' // top buttom left right
})
toast.present() // 触发生效

// ModalController 

let modal = this.ModalCtrl.create(QuestionPage) // 弹出的页面
modal.present() // 生效
// 关闭后进行父页面刷新
modal.onDidDismiss(()=>{
    // 刷新页面
    this.loadPage()
})


// viewCtr
// 关闭当前页面
this.viewCtr.dismiss()

// common/baseui
import { Loading, LoadingController, ToastController, Toast} from 'ionic-angular';

export abstract class BaseUI {
constructor() {

}

protected showLoading(loadingCtr: LoadingController, message: string): Loading {
    let loader = loadingCtr.create({
        content: message,
        dismissOnPageChange: true
    })
    loader.present()
    return loader
}
protected showToast(toastCtrl: ToastController, message: string):Toast {
    let toast = toastCtrl.create({
        message,
        duration: 3000,
        position: 'bottom'
    })
    toast.present()
    return toast
}
}

// 使用
import { Component } from '@angular/core';
import { ModalController, LoadingController,  ToastController} from 'ionic-angular';
import { ApiProvider } from '../../providers/api/api'
import { BaseUI } from '../../common/baseui' // 1.导入封装的组件

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage extends BaseUI { // 2. 继承BaseUI

  feeds: string[];
  errorMessage: string;

  constructor(
    public loadingCtr: LoadingController, // 3. 构造
    public api: ApiProvider,
    public toastCtrl: ToastController,  // 3. 构造
    public ModalCtrl: ModalController 
    ) {
      super() // 调用子类方法
  }
  
  getFeeds() {
    let loading = super.showLoading(this.loadingCtr, '加载中...') // 4. 使用loading
    this.api.getFeeds().subscribe(data=>{
    
      if(data['UserId']) {
        this.feeds = data
        loading.dismiss() // 关闭loading
      }else{
        // 5. 使用toast
        super.showToast(this.toastCtrl, data['StatusContent'])
      }
    },err=>this.errorMessage = <any>err)
  }
}

doRefresh(refresher) {
    this.getQuestions() // 再次请求数据
    refresher.complete() // 停止刷新
}

var distributionUrl = process.env['CORDOVA_ANDROID_GRADLE_DISTRIBUTION_URL'] || 'https\\://services.gradle.org/distributions/gradle-4.1-all.zip';

// 注释
// var distributionUrl = process.env['CORDOVA_ANDROID_GRADLE_DISTRIBUTION_URL'] || 'https\\://services.gradle.org/distributions/gradle-4.1-all.zip';

// 新增
var distributionUrl = process.env['CORDOVA_ANDROID_GRADLE_DISTRIBUTION_URL'] || '../gradle-4.1-all.zip';