<template>
  <div class="container modalBg">
      <div class="m-wrap">
        <section class="head">
          <div class="fixedTop flex-box border-bottom" style="background: #f3f3f3">
            <i class="iconfont icon-shanchu" @click="closeModal"></i><p class="flex text-c">产品预订</p>
          </div>
        </section>
        <div class="m-content">
          <div class="item-list">
            <div class="item_wrap">
              <!--OW-->
              <p class="date-line flex-box" v-if="tripType=='OW_PACKAGE'">
                <label @click="changeInfo(2)">去程<span class="sColor">{{dateParam.depDate}}</span><i class="iconfont icon-arrow-right1"></i></label>
                <label class="date-night" @click="changeInfo(3)">入住间夜<span class="sColor">{{dateParam.minduration}}晚</span><i class="iconfont icon-arrow-right1"></i></label>
              </p>
              <!--RT-->
              <p class="date-line flex-box" v-else @click="changeInfo(2)">
                <label>去程<span class="sColor">{{dateParam.depDate}}</span></label>
                <label class="border-line night sColor">{{dateParam.minduration}}晚</label>
                <label>返程<span class="sColor">{{dateParam.returnDate}}</span></label>
                <i class="iconfont icon-arrow-right1"></i>
              </p>

            </div>
            <div class="item_wrap">
              <p @click="changeInfo(1)">出行人数 <span class="float-r sColor">{{peopleParam.adults}}成人 {{peopleParam.childNum}}儿童<i class="iconfont icon-arrow-right1"></i></span></p>
            </div>
          </div>
        </div>
        <div class="bottom-section">
          <div class="fixed_bottom">
            <div class="btn flex-box" @click="subBtnFun">
              确定
            </div>
          </div>
        </div>
      </div>
    <mt-popup
      v-model="popupVisible"
      position="right">
      <peopleSet v-show="popIndex==1" @setPeopleNum="setPeopleNum($event)" ref="peopleSet" :peopleObj="peopleParam"></peopleSet>
      <!--RT选择时间-->
      <dateSet class="onlyDate" ref="dateSet" v-show="tripType!='OW_PACKAGE' && popIndex==2" dType="0"  @submitDate="dateSubBtnFun($event)" @closeDateFun="closePopup"></dateSet>
      <!--OW选择时间-->
      <owDateSet v-show="tripType=='OW_PACKAGE' && popIndex==2" @closeDateFun="closePopup" @chooseDepDate="chooseDepDate($event)"></owDateSet>
      <!--OW选择入住间夜-->
      <dayNightSet ref="dayNightSet" v-show="tripType=='OW_PACKAGE' && popIndex==3" :checkInDate="dateParam" @closeDateFun="closePopup" @setDayNight="setDayNight($event)"></dayNightSet>
    </mt-popup>
  </div>
</template>
<script>
  import peopleSet from '../home/peopleSet.vue'
  import dateSet from '../home/dateSet.vue'
  import owDateSet from '../home/owDateSet.vue'
  import dayNightSet from '../home/dayNightSet.vue'

  export default {
    name: '',
    props:{
      modalWidth:'100%',
      modalHeight:'100%',
      tripType:''
    },
    data () {
      return {
        modal_heading:'',
        popupVisible:false,
        popIndex:1, //1人数，2时间,3间夜
        peopleParam:{
        },
        dateParam:{
          depDate:'',
          returnDate:'',
          minduration:0
        }
      }
    },
    methods: {
      /*owPackage-------设置酒店间夜*/
      setDayNight(dayNightInfo){
        this.dateParam=dayNightInfo;
        this.closePopup();
      },
      /*owPackage--------选择出发日期*/
      chooseDepDate(depDate){
        console.log("====",depDate)
        this.dateParam.depDate=depDate;
        this.dateParam.returnDate=GetDateStr(depDate,parseInt(this.dateParam.minduration));
        this.dateType=0;
        this.isFixiable=false;
        this.dateParam.chooseNum=parseInt(this.dateParam.minduration)+1;
        this.closePopup();
      },

      /**关闭模态框*/
      closeModal(){
        this.$emit("close");
      },
      closePopup(){
          this.popupVisible=false;
          this.popIndex=1;
      },
      changeInfo(index){
        this.popupVisible=true;
        this.popIndex=index;
        this.$refs.peopleSet.initPeople();
      },
      /*确定条件*/
      subBtnFun(){
        let param={
          peopleParam:this.peopleParam,
          dateParam:this.dateParam,
        }
        this.$emit("resetSearchFun",param);
      },
      /**设置出行人数*/
      setPeopleNum(obj){
        var arr=[];
        for (var i =0; i<obj.childNum;i++){
          arr.push(obj.children[i]);
        }
        this.peopleParam ={
          adults:obj.adults,
          childNum:obj.childNum,
          children:arr
        };
        this.closePopup();
      },
      /**选择日期*/
      dateSubBtnFun(dateParam){
        dateParam.minduration=dateParam.minduration-1;
        this.dateParam=dateParam;
        this.closePopup();
      }
    },
    components:{
      peopleSet,dateSet,owDateSet,dayNightSet
    },
    watch:{
      popupVisible:function (newval, oldVal) {
        if(!newval){
          this.closePopup();
        }
      }
    },
    mounted(){

    }
  }
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
  @import "product.styl"
  .item-list .item_wrap{
    margin 14px 0px 0
    padding 1rem
    background #fff
    border-top 1px solid border_color
    border-bottom 1px solid border_color
    span{
      font-weight bold
      font-size 17px
    }
    p .iconfont{
      margin-left 12px
    }
    .date-line{
      justify-content: space-between
      align-items center
      label{
        width auto
        &.night{
          line-height 1
          width 35px
          text-align center
          border-radius 13px
          padding 2px 0
        }
        span{
          margin-left 5px
        }
      }
      .date-night{
        text-align right
        span{
          padding 0 15px
        }
      }
    }
  }
  .bottom-section{
    .fixed_bottom{
      padding 10px 20px
      .btn{
        border-radius 2px
      }
  }
  }
</style>
