<template>
    <div class="container">

      <div class="person_row">
        <div class="person_column">
          <label class="mtColor">成人</label>
          <p class="person-cell text-r">
            <span @click="decreaseNum(1)" :class="{'not-allowed':adults==1}">-</span>
            <b>{{adults}}</b>
            <span @click="increaseNum(1)" :class="{'not-allowed':adults>=maxAdult}">+</span>
          </p>
        </div>
        <div class="person_column">
          <label class="mtColor">儿童</label>
          <p class="person-cell text-r">
            <span @click="decreaseNum(2)" :class="{'not-allowed':childNum==0}">-</span>
            <b>{{childNum}}</b>
            <span @click="increaseNum(2)" :class="{'not-allowed':childNum>=maxChild}">+</span>
          </p>
        </div>
      </div>
      <p class="tip sColor">注：仅支持预订1间房，需多间房请分开下单哦</p>
      <div class="person_row" v-show="childNum>0">
        <p class="person-title border-top">儿童年龄</p>
        <div class="person_column list-flex">
          <el-select class="custom-select form-control" v-model="children[a-1]" v-for="a in parseInt(childNum)" :key="a">
            <el-option v-for="i in 17" :value="i" :selected="i==10" :key="i" v-show="i> (airType || 0)" :label="i==1 ? '14天-2岁（不含2岁）' : i +'岁'"></el-option>
          </el-select>
        </div>
        <p class="person-title  sColor" style="font-size: 12px;padding-top: 0px" v-show="airType==1">如需预订婴儿票，请拨打{{telPhone}}</p>
      </div>
      <div class="person_row btn_row">
        <a href="javascript:void(0)" class="btn sBtn" @click="choosePeople">确定</a>
      </div>
    </div>
</template>
<script>
    export default {
        name: '',
        data () {
            return {
              airType:airType,
              telPhone:telPhone,
              adults:2,
              childNum:0,
              children:[10,10],
              maxAdult:2,
              maxChild:1,
            }
        },
        methods: {
          changeChildren(){
            if(this.childNum==0){
              this.children=[10,10];
            }
          },
          choosePeople(){
            var child=[];
            for (var i=0;i<this.childNum;i++){
                child.push(this.children[i]);
            }
            this.$parent.adults=this.adults;
            this.$parent.childNum=this.childNum;
            this.$emit("choosePeople",{adults:this.adults,childages:child});
          },
          resetPeople(adults,children){
              this.adults=adults;
              this.childNum=children.length;
              this.children=children;
              for (var i=this.childNum;i<2 ;i++){
                this.children[i]=10;
              }
          },

          /*添加*/
          increaseNum(type){
            if(type==1){ // 1成人，2儿童
              if(this.adults<this.maxAdult){
                this.adults++;
              }
            }else {
              if(this.childNum<this.maxChild){
                this.childNum++;
              }
            }
          },
          /*减少*/
          decreaseNum(type){
            if(type==1){ // 1成人，2儿童
              if(this.adults>1){
                this.adults--;
              }
            }else {
              if(this.childNum>0){
                this.childNum--;
              }
            }
          }

        },
      watch:{
        adults:function (newVal,oldVal) {
          this.$parent.adults=newVal;
        },
        childNum:function (newVal,oldVal) {
          this.$parent.childNum=newVal;
        },
        children:function (newVal,oldVal) {
          this.$parent.children=newVal;
        }
      }
    }
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
.tip{
  margin-top 10px
  font-size 12px
}
.person-title{
  margin 18px 0 15px
  padding-top 15px
  font-size 14px
}
.person_column{
  position relative
  line-height 36px
  box-sizing border-box
  margin-bottom 6px
  .custom-select{
    width 170px
  }
  label{
    float left
    line-height 36px
    font-size 14px
  }
  .person-cell{
    span{
      display inline-block
      width 20px
      height 20px
      line-height 16px
      text-align center
      background #f1f4f7
      border-radius 2px
      font-weight bold
      font-size 20px
      color #3095ef
      cursor pointer
      &.not-allowed{
        background #d9e1e8
        color #fff
        cursor not-allowed
      }
    }
    b{
      display inline-block
      width 36px
      text-align center
      font-weight normal
      font-size 18px
      color #3095ef
      cursor default
    }
  }
  select{
    width 85px
    height 40px
    margin-right 20px
    padding-left 10px
    padding-right 15px
    -webkit-appearance none
    border-color #e5e5e5
    outline none
    font-size 14px
    color #484848
    background url("../../assets/images/pc/icon_select.svg") center right 5px no-repeat
    background-size 20px
    &:hover{
      border-color #fe7065
    }
    &:last-child{
      margin-right 0px
    }
  }
  select::-ms-expand { display: none; }
}
.btn_row{
  a{
    display block
    height 34px
    line-height 34px
    margin 15px 0 10px
    text-align center
    font-size 13px
    color #fff
    border-radius 2px
  }
}
</style>
