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>;

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

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

  showToast(question, idx) {
    this.isShow = true
    this.curQues = question
    this.curQuesIndex = idx
    // console.log(question)
    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]]}
    })
    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']) {
          return;
        }
        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
    }
    console.log(ret);
    this.getAllAnswer.emit(ret);
  }

/*  getAnswer(questionId, option) {
    if (this.curPageData['questions'].length > 0) {
      for (let i = 0; i < this.curPageData['questions'].length; i++) {
        let oldOption = {};
        let question = {
          questionId: '',
          options: []
        };
        question.questionId = this.curPageData['questions'][i].questionId;
        if (questionId == this.curPageData['questions'][i].questionId) {
          oldOption = option;
        } else {
          oldOption = {
            customerInput: null,
            optionId: this.curPageData['questions'][i]['optionId'],
            optionName: this.curPageData['questions'][i]['name'],
            optionOrder: 2,
            selected: true
          };
        }
        question.options.push(oldOption);
        this.questions.push(question);
      }
    } else {
      let curQuestion = {
        questionId: questionId,
        options: [option]
      };
      this.questions.push(curQuestion);
    }
    const ret = {
      pageId: 3,
      questions: this.questions
    }
    console.log(ret);
    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
    //       }
    //     ]
    //   }
    // }
  }
}
