<template>
  <div class="flightInfo">
    <!--<div class="fli-head">航班信息</div>-->

    <div class="fli-box" v-for="(flight,index) in flightInfo">
      <div class="fli-title"><img :src="flight.airlineLogo" alt="" class="logo">{{flight.airlineName}}({{flight.flightNo}})</div>
      <div class="trip-box">
        <div class="depart">
          <div class="time">{{flight.depTime | getMonthDate}} {{flight.depTime | formatTime}}</div>
          <div class="airport">{{flight.depCode}} {{flight.depAirportName}}{{flight.departureTerm}}</div>
        </div>
        <div class="transfer">
          <i class="bg-dashed has-product-tag"></i>
          <div class="time">{{flight.arrTime | getMonthDate}} {{flight.arrTime | formatTime}}</div>
          <div class="airport">{{flight.arrCode}} {{flight.arrAirportName}}{{flight.arrivalTerm}}</div>
        </div>
        <div class="transfer-info">
          <span class="term-time">{{flight.duration}}</span>
          <div class="prompt" v-show="index<flightInfo.length-1"><font class="mColor">中转</font>&nbsp;{{flight.arrCity}}&nbsp;停留时长：{{flight.flightStopTime}}</div>
        </div>
      </div>
    </div>

    <div class="flight-exp">托运行李额</div>
    <div class="flight-exp-box">
      <div class="flex-box flight-exp-cell" v-for="(flight,index) in flightInfo" v-if="flight.specialRuleText">
        <span>{{flight.depCity}}-{{flight.arrCity}}</span>
        <div class="flex flight-exp-item" v-html="flight.specialRuleText"></div>
      </div>
    </div>

    <p class="tip">出发和达到时间均为当地时间</p>
  </div>
</template>
<script>
    export default {
        name: '',
        props:{
          flightInfo:''
        },
        data () {
            return {

            }
        },
        methods: {}
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
  @import "../../assets/stylus/colorConfig.styl"
.flightInfo{
  background #ffffff
  padding 1rem
  .fli-box{
    margin-bottom 10px
  }
  .fli-head{
    position relative
    line-height 1
    padding 10px 18px
    background-color #91a4c3
    font-size 18px
    color #fff
  }
  .fli-title{
    margin-bottom 10px
    line-height 20px
    font-size 14px
    margin-right 8px
    color mainTitleColor
    .logo{
      position relative
      display inline-block
      height 18px
      width 18px
      top 5px
      margin-right 4px
    }
  }
  .trip-box{
    position relative
    padding-left 140px
    /*margin-top 10px*/
    &:before{
      content ''
      position absolute
      width 2px
      height 100%
      left 130px
      background #EEEEEE
    }
    .depart{
      position relative
      padding-bottom 12px
      font-size 14px
      color mainTitleColor
    }
    .time{
      position absolute
      width 140px
      text-align right
      left -160px
      top 0
    }
    .transfer{
      position relative
      font-size 12px
      padding-bottom 12px
      color #666
      .time{
        color #999
      }
    }
    .transfer-info{
      position relative
      min-height 12px
      font-size 12px
      color #666
      .prompt{
        padding 5px 5px 5px 5px
        background-color #f8f9fb
      }
      .term-time{
        position absolute
        width 140px
        left -160px
        text-align right
        color subcontentColor
      }
    }
  }
  .flight-exp{
    margin-top 20px
    font-size 14px
    color mainTitleColor
  }
  .flight-exp-box{
    .flight-exp-cell{
      margin-top 10px
      font-size 12px
      span{
        margin-right 10px
        margin-top 3px
        font-size 13px
        color mainTitleColor
      }
      .flight-exp-item{
        line-height 17px
        color subheadColor
      }
    }
  }
}
.tip{
  margin-top 20px
  font-size 13px
  color red
}
</style>
