<template>
  <div class="container" style="padding-top:1.875rem">
    <div class="orderInfo" v-for="o in orderList">
      <div class="tip-title point"><span class="color1"></span>即将前往 {{o.flightOrders[0].flightOrderDetail[0].arrCity}}</div>
      <div class="tip-time point"><span></span><b>{{o.flightOrders[0].flightOrderDetail[0].depTime | getMonthDate}}</b></div>
      <div class="order-box">
        <div class="order-cell border-bottom">
          <div class="air-title"><img :src="o.flightOrders[0].flightOrderDetail[0].airlineLogo" />{{o.flightOrders[0].flightOrderDetail[0].flightNo}} &nbsp;&nbsp; <b>{{o.flightOrders[0].flightOrderDetail[0].depCity}}-{{o.flightOrders[0].flightOrderDetail[0].arrCity}}</b></div>
          <div class="airInfo flex-box">
            <div class="flex air_depart">
              <h1>{{o.flightOrders[0].flightOrderDetail[0].depTime | formatTime}}</h1>
              <p class="p2">{{o.flightOrders[0].flightOrderDetail[0].depAirportName+o.flightOrders[0].flightOrderDetail[0].depTerm}}</p>
            </div>
            <div  class="flex_cell h_connect">
              <span class="l_text">{{o.flightOrders[0].flightOrderDetail[0].duration}}</span>
              <p class="h_line"></p>
            </div>
            <div class="flex air_destination text-r">
              <h1>{{o.flightOrders[0].flightOrderDetail[0].arrTime | formatTime}}</h1>
              <p class="p2">{{o.flightOrders[0].flightOrderDetail[0].arrAirportName+o.flightOrders[0].flightOrderDetail[0].arrTerm}}</p>
            </div>
          </div>
          <router-link :to="'/wx/orderDetail/'+o.orderNumber" class="air_bottom text-r border-top sColor">订单详情</router-link>
        </div>
      </div>
    </div>

    <div class="no-data" v-if="orderList && orderList.total<1">
      <img src="../../assets/images/nodata.png" alt="" >
      <p>还没有行程单哦，快去开启你的旅程吧！</p>
    </div>
    <bottomBar activePage="itinerary"></bottomBar>
  </div>
</template>
<script>
  export default {
    name: '',
    data () {
      return {
        userInfo:'',
        orderList:{
        },
        form:{
          page:1,
          size:10,
          param:{
            orderStatus:"9"
          }

        }
      }
    },
    methods: {
      /**获取订单列表信息*/
      getOrderListInfo(){
        getPackageOrdersList(this.form).then(data=>{
          if(data.returnCode==200){
            this.orderList=data.data.list;
          }
        })
      },
    },
    components:{
    },
    mounted(){
      this.getOrderListInfo();
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
  @import "order.styl"
  .orderInfo{
    position relative
    padding 1.875rem 1.25rem .9rem 2.25rem
    color mainTitleColor
    &:before{
      content ''
      position absolute
      width 2px
      height 100%
      background #eeeef1
      left 1.25rem
      top 0
    }
    &:after{
      content ''
      position absolute
      width 8px
      height 8px
      background #eeeef1
      border-radius 8px
      left 1.25rem
      bottom -4px
      margin-left -3px
    }
    .point{
      position relative
      span{
        position absolute
        width 10px
        height 100%
        padding 3px 0
        left -1.25rem
        top -5px
        margin-left -4px
        background #fff
        &:before{
          content ''
          position absolute
          width 8px
          height 8px
          background #eeeef1
          border-radius 8px
          left 50%
          top 50%
          margin-top -4px
        }
        &.color1{
          &:before{
            background -webkit-gradient(linear, 0% 25%, 75% 100%, from(#f87648), to(#f66257))
          }
        }
      }
    }
    .tip-title{
      margin-bottom 2.25rem
      font-size 1.625rem
      font-weight bold
      color mainTitleColor
    }
    .tip-time{
      margin-bottom 1.45rem
      font-size .9rem
      color mainTitleColor
      b{
        font-size 1rem
      }
    }
    .order-box{
      padding 0 1rem
      box-shadow: 0 0 24px 1px rgba(166, 166, 167, 0.24);
      border-radius 3px
      .order-cell{
        padding .9rem 0 .65rem
      }
    }
    .airInfo{
      align-items center
      padding-bottom 1rem
      .flex{
        h1{
          padding-bottom .65rem
        }
      }
    }
    .air_bottom{
      display block
      padding-top .65rem
      margin 0 -1.25rem
      padding-right 1.25rem
      font-size .875rem
      font-weight bold
    }
  }


</style>
