<template>
    <div class="container allVh">
      <div class="head">
        <p class="fixedTop">
          <i class="iconfont icon-shanchu icon_back" @click="back"></i>
        </p>
      </div>
      <div class="person-info">
        <div class="item-wrap flex-box">
          <label for="">入住间夜</label>
          <p class="flex text-r num-cell">
            <span @click="decreaseNum" class="sBgColor" :class="{'not-allowed':checkInDate.minduration==1}">-</span>
            <b>{{checkInDate.minduration}}晚</b>
            <span @click="increaseNum" class="sBgColor" :class="{'not-allowed':checkInDate.minduration>=maxDayNight}">+</span>
          </p>
        </div>
        <div class="item-tip flex-box" v-if="checkInDate.depDate">
          <div class="flex">入住时间 <span class="flex text-c">{{checkInDate.depDate}}</span></div>
          <div class="flex" v-if="isShow">离店时间 <span class="text-c">{{checkInDate.returnDate}}</span></div>
        </div>
      </div>

      <div class="bottom-section">
        <div class="fixed_bottom">
          <div class="btn flex-box" @click="subBtnFun">
            确定
          </div>
        </div>
      </div>
    </div>
</template>
<script>
    export default {
        name: '',
        props:{
          checkInDate:'',
          dateType:''
        },
        data () {
            return {
              maxDayNight:7,
              dayNight:1,
              isShow:false
            }
        },
        methods: {
          back(){
            this.dayNight=this.checkInDate.minduration;
            this.checkInDate.depDate=this.checkInDate.depDate;
            this.checkInDate.returnDate=this.checkInDate.depDate ? GetDateStr(this.checkInDate.depDate,this.checkInDate.minduration) : '';
            this.$emit("setDayNight",this.checkInDate);
          },
          subBtnFun(){
            this.checkInDate.returnDate=this.checkInDate.depDate ? GetDateStr(this.checkInDate.depDate,this.checkInDate.minduration) : '';
            var dateObj = {
              minduration : this.checkInDate.minduration,
              depDate:this.checkInDate.depDate,
              returnDate:this.checkInDate.returnDate
            };
            this.$emit("setDayNight",dateObj);
          },
          /*添加*/
          increaseNum(){
              if(this.checkInDate.minduration<this.maxDayNight){
                this.checkInDate.minduration++;
                this.checkInDate.returnDate=this.checkInDate.depDate ? GetDateStr(this.checkInDate.depDate,this.checkInDate.minduration) : '';
                this.isShow=true;
              }
          },
          /*减少*/
          decreaseNum(){
              if(this.checkInDate.minduration>1){
                this.checkInDate.minduration--;
                this.checkInDate.returnDate=this.checkInDate.depDate ? GetDateStr(this.checkInDate.depDate,this.checkInDate.minduration) : '';
                this.isShow=true;
              }
          }
        },
        mounted(){},
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
  @import "../../assets/stylus/colorConfig"
.allVh{
  height 100vh
  display: flex;
  flex-direction: column;
}
.person-info{
  padding 0 20px 20px
  font-size 15px
  color mainTitleColor
  height calc(100vh - 65px - 50px)
  overflow-y auto
  .item-wrap{
    height 50px
    line-height 50px
    border-bottom 1px solid border_color
    font-size 16px
    font-weight bold
    p{
      &.num-cell{
        span{
          display inline-block
          width 20px
          height 20px
          line-height 16px
          border-radius 2px
          text-align center
          font-weight bold
          font-size 16px
          color #fffee3
          &.not-allowed{
            background #e4e5ea
          }
          &.space{
            background transparent
          }
        }
        b{
          display inline-block
          width 45px
          text-align center
        }
      }
    }
  }
  .item-tip{
    margin-top 20px
    line-height 28px
    font-size 12px
    span{
      padding 3px 10px
      margin 0 15px 0 6px
      border 1px solid #eee
      border-radius 3px
      color #999
    }
  }
}
</style>
