<template>
    <div class="container">
      <div class="dateType_bar">
        <i class="float-l iconfont icon-shanchu" @click="back"></i>
        <p class="dateNav">
          <span @click="typeClick(0)" :class="{'active sBgColor':dateType==0}">固定日期</span>
          <span @click="typeClick(1)" :class="{'active sBgColor':dateType==1}">灵活日期</span>
        </p>
      </div>

      <div class="date-wrap">
        <dateBar v-show="dateType==0" tripType="rt" ref="dateBar" @dateSubBtnFun="submitDate($event)" dateOfDeparture="121212"></dateBar>
        <fixiableDate v-show="dateType==1" @chooseFixiableDateFun="submitDate($event)"></fixiableDate>
      </div>

    </div>
</template>
<script>
  import dateBar from '../../components/weChat/date'
  import fixiableDate from '../../components/weChat/fixiableDate.vue'
    export default {
      name: '',
      props:{
        dType:'',
        dateParam:''
      },
      data () {
          return {
              dateType:0,//0固定，1灵活
          }
      },
      methods: {
        back(){
            this.$emit("closeDateFun");
        },
        typeClick(type){
            this.dateType=type;
        },
        submitDate(param){
            this.$emit("submitDate",param)
        },
      },
      mounted(){
        this.dateType= this.dType;
      },
      components:{
        dateBar,
        fixiableDate
      }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
@import "../../assets/stylus/colorConfig"
.onlyDate{
  .dateType_bar{
    height 40px
    line-height 20px
    padding-left 20px
    .dateNav{
      display none
    }
  }
}
.dateType_bar{
  width 100%
  height 60px
  line-height 40px
  padding 10px
  box-sizing border-box
  text-align center
  P{
    display inline-block
    width 70%
    height 40px
    line-height 40px
    border-radius 23px
    box-shadow 0 0 20px rgba(150, 149, 150, 0.33)
    background #fff
    span{
      float left
      width 50%
      font-size 0.825rem
      font-weight bold
      color mainTitleColor
      border-radius 23px
      &.active{
        color #ffffff
      }
    }
  }

}
</style>
