import {Component, OnInit, Input, Output, EventEmitter} from '@angular/core'

@Component({
  selector: 'app-page3',
  templateUrl: './page3.component.html',
  styleUrls: ['./page3.component.css']
})
export class Page3Component implements OnInit {
  @Input() curPageData: Array<any>
  @Input() isShowChildAgeBtn: boolean
  @Output() getAllAnswer = new EventEmitter<any>()

  isShow: boolean;
  curQues: Object;
  curAllQues: Object;
  selectedNum: number;
  options: Array<any>;
  curQuesIndex: number;
  //当前问题长度
  curQuesLen: number;
  //增加孩子点击次数
  addChildCount: number;
  curQuestionSelecte: string;
  questions: Array<any>;
  selectedObj: Object;

  constructor() {
    this.questions = [];
  }

  ngOnInit() {
    this.curQues = {};
    this.curAllQues = {};
    this.curQuesLen = this.curPageData['questions'].length;
    //初始化增加孩子按钮可以点2次
    this.addChildCount = 2;
    this.selectedOptions();
    // console.log(this.curPageData)
  }

  showToast(question, idx) {
    this.isShow = true
    this.curQues = question
    this.curQuesIndex = idx
    this.curQuestionSelecte = question.name

  }

  closeToast() {
    this.isShow = false
  }

  getAnswer(option) {
    const questionId = this.curQues['questionId']
    this.curAllQues[questionId] = option
    const questions = Object.keys(this.curAllQues).map(questionId => {
      return {questionId, options: [this.curAllQues[questionId]]}
    });
      for (let j = 0; j < this.questions.length; j++) {
        for (let i = 0; i < questions.length; i++) {
        if (questions[i]['questionId'] != this.questions[j]['questionId']) {
          questions.push(this.questions[j]);
          break;
        }
        break;
      }
    }
    const ret = {
      pageId: 3,
      questions
    };
    console.log(ret)
    this.getAllAnswer.emit(ret);
  }

  changeStyle(options, optionId) {
    //当前选中项
    this.curPageData['questions'][this.curQuesIndex]['name'] =
      options.optionName
    this.curPageData['questions'][this.curQuesIndex]['optionId'] =
      options.optionId

  }

  // 保存用户选择的信息
  selectedOptions() {
    if (this.curPageData['questions'].length > 0) {
      for (let i = 0; i < this.curPageData['questions'].length; i++) {
        if (!this.curPageData['questions'][i]['name']) {
          break
        }
        let option = {};
        let question = {
          questionId: '',
          options: []
        };
        question.questionId = this.curPageData['questions'][i].questionId;
        option = {
          customerInput: null,
          optionId: this.curPageData['questions'][i]['optionId'],
          optionName: this.curPageData['questions'][i]['name'],
          optionOrder: 2,
          selected: true
        };
        question.options.push(option);
        this.questions.push(question);
      }
    }
    const ret = {
      pageId: 3,
      questions: this.questions
    };
    this.getAllAnswer.emit(ret);
  }

  addChild() {
    // this.addChildCount--
    // if (this.addChildCount >= 0) {
    //   this.curPageData['questions'][this.curQuesLen++] = {
    //     questionId: 4,
    //     questionName: `孩子${this.addChildCount == 1 ? '1' : '2'}年龄`,
    //     optionType: 1,
    //     questionOrder: 4,
    //     options: [
    //       {
    //         optionId: 22,
    //         optionName: '９５后',
    //         optionOrder: 1,
    //         customerInput: null
    //       },
    //       {
    //         optionId: 23,
    //         optionName: '９０后',
    //         optionOrder: 2,
    //         customerInput: null
    //       },
    //       {
    //         optionId: 24,
    //         optionName: '８５后',
    //         optionOrder: 3,
    //         customerInput: null
    //       },
    //       {
    //         optionId: 25,
    //         optionName: '８０后',
    //         optionOrder: 4,
    //         customerInput: null
    //       },
    //       {
    //         optionId: 26,
    //         optionName: '７５后',
    //         optionOrder: 5,
    //         customerInput: null
    //       },
    //       {
    //         optionId: 27,
    //         optionName: '７０后',
    //         optionOrder: 6,
    //         customerInput: null
    //       },
    //       {
    //         optionId: 28,
    //         optionName: '６５后',
    //         optionOrder: 7,
    //         customerInput: null
    //       },
    //       {
    //         optionId: 29,
    //         optionName: '６０后',
    //         optionOrder: 8,
    //         customerInput: null
    //       }
    //     ]
    //   }
    // }
  }
}
