<template>
  <div class="pay-head">
    <div class="order-code"><span>订单编号：{{orderInfo.orderNumber}}</span></div>
    <div v-if="orderInfo.orderType=='STATIC_PACKAGE'">
      <h3>{{orderInfo.depCity}}出发，{{orderInfo.product.title}}</h3>
      <p class="p1">
        出行人数：{{orderInfo.adultNumber}}成人 <span v-if="orderInfo.childNumber>0">+ {{orderInfo.childNumber}}儿童</span>
      </p>
      <p>出行天数：{{(parseInt(orderInfo.lengthOfStay)+1)+'天'+orderInfo.lengthOfStay +'晚'}}</p>
      <p>出发日期：{{orderInfo.depDate}}</p>
      <p>房间数量：{{orderInfo.hotelCount}}间</p>
    </div>
    <div v-else>
      <h3>{{orderInfo.depCity}}-{{orderInfo.arrCity}} {{(parseInt(orderInfo.lengthOfStay)+1)+'天'+orderInfo.lengthOfStay +'晚'}} 机+酒套餐</h3>
      <p class="p1">
        出行人数：{{orderInfo.adultNumber}}成人 <span v-if="orderInfo.childNumber>0">+ {{orderInfo.childNumber}}儿童</span>
      </p>
      <p>出发日期：{{orderInfo.depDate}}</p>
      <p>入住酒店：{{orderInfo.hotelInfo.hotelNameCn}}</p>
      <p>酒店房型：{{orderInfo.hotelInfo.roomType}}，{{orderInfo.hotelInfo.meals =='GT06-AO' ? '无早' : '含早'}}</p>
    </div>
    <p class="tip">资源价格变动频繁，请尽快完成支付。</p>
    <div class="price">应付总额：<b>￥{{orderInfo.amount}}</b></div>
  </div>
</template>
<script>
    export default {
        name: '',
      props:{
        orderInfo:''
      },
        data () {
            return {}
        },
        methods: {}
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
  @import "../../assets/stylus/colorConfig"
  .order-code{
    margin-bottom .875rem
    span{
      display inline-block
      padding .4rem .625rem
      background #9ecfed
      font-size .75rem
      color #fff
      border-radius 18px
    }

  }
  .pay-head{
    padding 20px
    background #fff
    box-shadow 0 0 14px rgba(214, 215, 216, 0.4)
    h3{
      line-height 30px
      font-weight bold
      font-size 15px
      color mainTitleColor
    }
    p{
      line-height 20px
      font-size 13px
      margin-bottom 4px
    }
    p.tip{
      font-size 12px
      color subheadColor
    }
    .price{
      padding-top 10px
      margin-top 10px
      border-top 1px solid border_color
      font-size 12px
      color subheadColor
      b{
        font-size 18px
        color mainColor
      }
    }
  }
</style>
