<template>
  <!--产品详情-->
  <div class="order-info border-line">
    <h3>酒店详情</h3>
    <div class="hotel-box border-line">
      <h4>{{hotelZhName}}</h4>
      <p class="h-star"><i class="iconfont icon-xingxing" v-for="i in productDetail.hotelCategory"></i></p>
      <p class="h-des">{{productDetail.roomDescription}}，{{productDetail.roommeals}}</p>
      <div class="h-info">
        <div class="h_box">
          <span class="h_m">{{productDetail.outFlight.depTime | getMonth}}</span>
          <p class="h_d">{{productDetail.outFlight.depTime | getDate}}日</p>
          <span class="h_w">{{productDetail.outFlight.depTime | getDay}}入住</span>
        </div>
        <div class="h_connect">
          <span class="l_text">{{productDetail.lengthOfStay}}晚</span>
          <p class="h_line"></p>
        </div>
        <div class="h_box">
          <span class="h_m">{{productDetail.inFlight.depTime  | getMonth}}</span>
          <p class="h_d">{{productDetail.inFlight.depTime | getDate}}日</p>
          <span class="h_w">{{productDetail.inFlight.depTime | getDay}}离店</span>
        </div>
      </div>
    </div>

    <h3>航班详情</h3>
    <div class="flight-box border-line">
      <p class="f-title text-r"><span class="float-l">去程</span><img :src="productDetail.outFlight.airlineLogo" alt=""> {{productDetail.outFlight.airlineName}}({{productDetail.outFlight.flightNo}}) | {{productDetail.outFlight.depTime | getMonthDate}}（{{productDetail.outFlight.depTime | getWeek}}） </p>
      <div class="f-box">
        <div class="o_dateTime">
          <h4>{{productDetail.outFlight.depTime | formatTime}}</h4>
          <p class="pSize">{{productDetail.outFlight.depAirportName}}{{productDetail.depTg || ''}}</p>
        </div>
        <div class="h_connect">
          <div class="l_stay" :class="{isStay:productDetail.outFlightFlightType==1}">
            <div style="cursor: pointer" class="link-box" v-if="productDetail.outFlightFlightType==2">
              中转 <i class="iconfont icon-wenhao"></i>
              <div class="airInfo-box">
                <flightInfo :flightInfo="productDetail.outFlightFlightSegments"></flightInfo>
              </div>
            </div>

            <span v-if="productDetail.outFlightFlightType==1">经停 <i class="iconfont icon-wenhao"></i></span>
            <span v-if="productDetail.outFlightFlightType==0">直飞</span>

            <toolTipWrap class="bottom b-center">
              <b slot="otherInfo" v-for="sa in productDetail.outFlightStopAddress">{{sa.cityName}}停留{{sa.stopTime | changeHourMinutestr}}</b>
            </toolTipWrap>
          </div>
          <p class="h_line"></p>
          <span class="l_text">{{productDetail.outFlight.sumduration}}</span>
        </div>
        <div class="o_dateTime text-r">
          <h4>{{productDetail.outFlight.arrTime | formatTime}}
            <!--<span style="font-size: 13px;color: #2894f2" v-if="productDetail.depTermDay>1">+{{productDetail.depTermDay-1}}天</span>-->
          </h4>
          <p class="pSize p-r">{{productDetail.outFlight.arrAirportName}}{{productDetail.depArrTg || ''}}</p>
        </div>
      </div>

      <div class="f-policy">
        <div class="flight-exp"><i class="iconfont icon-gantanhao"></i>行李额
          <toolTipWrap class="top">
            <b slot="otherInfo" v-if="productDetail.depSpecialRuleText" v-html="productDetail.depSpecialRuleText"></b>
          </toolTipWrap>
        </div>
        <div class="float-r link-box" v-if="productDetail.outFlightFlightType==2">
          <a href="JavaScript:void(0)" class="link">航班详情</a>
          <div class="airInfo-box">
            <flightInfo :flightInfo="productDetail.outFlightFlightSegments"></flightInfo>
          </div>
        </div>
      </div>

    </div>
    <div class="flight-box border-line">
      <p class="f-title text-r"><span class="float-l">返程</span><img :src="productDetail.inFlight.airlineLogo" alt="">{{productDetail.inFlight.airlineName}}({{productDetail.inFlight.flightNo}}) | {{productDetail.inFlight.depTime | getMonthDate}}（{{productDetail.inFlight.depTime | getWeek}}） </p>
      <div class="f-box">
        <div class="o_dateTime flex">
          <h4>{{productDetail.inFlight.depTime | formatTime}}</h4>
          <p class="pSize">{{productDetail.inFlight.depAirportName}}{{productDetail.backTg || '' }}</p>
        </div>
        <div class="h_connect">
          <div class="l_stay" :class="{isStay:productDetail.inFlightFlightType==1}">
            <div style="cursor: pointer" class="link-box" v-if="productDetail.inFlightFlightType==2">
              中转 <i class="iconfont icon-wenhao"></i>
              <div class="airInfo-box">
                <flightInfo :flightInfo="productDetail.inFlightFlightSegments"></flightInfo>
              </div>
            </div>
            <span v-if="productDetail.inFlightFlightType==1">经停 <i class="iconfont icon-wenhao"></i></span>
            <span v-if="productDetail.inFlightFlightType==0">直飞</span>
            <toolTipWrap class="bottom b-center">
              <b slot="otherInfo" v-for="sa in productDetail.inFlightStopAddress">{{sa.cityName}}停留{{sa.stopTime | changeHourMinutestr}}</b>
            </toolTipWrap>
          </div>
          <p class="h_line"></p>
          <span class="l_text">{{productDetail.inFlight.sumduration}}</span>
        </div>
        <div class="o_dateTime text-r">
          <h4>{{productDetail.inFlight.arrTime | formatTime}}
            <!--<span style="font-size: 13px;color: #2894f2" v-if="productDetail.backTermDay>1">+{{productDetail.backTermDay-1}}天</span>-->
          </h4>
          <p class="pSize p-r">{{productDetail.inFlight.arrAirportName}}{{productDetail.backArrTg || ''}}</p>
        </div>
      </div>

      <div class="f-policy">
        <div class="flight-exp"><i class="iconfont icon-gantanhao"></i>行李额
          <toolTipWrap class="top">
            <b slot="otherInfo" v-if="productDetail.backSpecialRuleText" v-html="productDetail.backSpecialRuleText"></b>
          </toolTipWrap>
        </div>
        <div class="float-r link-box" v-if="productDetail.inFlightFlightType==2">
          <a href="JavaScript:void(0)" class="link">航班详情</a>
          <div class="airInfo-box">
            <flightInfo :flightInfo="productDetail.inFlightFlightSegments"></flightInfo>
          </div>
        </div>
      </div>
    </div>

    <h3>费用明细</h3>
    <div class="fee-box border-line">
      <div class="f-all">套餐价格<span class="float-r">人均：￥{{Math.ceil(productDetail.price.perPersonAmount)}}</span></div>
      <p class="f-detail">成人<span class="float-r">×{{adultNum}}</span></p>
      <p class="f-detail" v-if="childNum>0">儿童<span class="float-r">×{{childNum }}</span></p>
    </div>

    <div class="total-price">
      <div class="policy float-l"><i class="iconfont icon-qian"></i> 套餐退改政策
        <toolTipWrap class="top">
          <span slot="otherInfo" class="refundText" v-html="refundText"></span>
        </toolTipWrap>
      </div>
      <span class="h-price flex-box float-r" v-if="productDetail.price.voucherAmount>0 && discountCoupon">
        <span class="price-discount">已减￥{{Math.ceil(productDetail.price.voucherAmount)}}</span>
        <span class="price-origin">
          <span class="nowPrice">￥{{Math.ceil(productDetail.price.amount)}}</span>
          <span class="oldPrice">官网最低<font style="text-decoration: line-through">￥{{Math.ceil(productDetail.price.originalAmount)}}</font></span>
        </span>
      </span>
      <span v-else class="h-totalPrice">总额：<span class="listColor">¥{{Math.ceil(productDetail.price.amount)}}</span></span>
    </div>
  </div>
</template>
<script>
  import flightInfo from '../product/flightInfo.vue'
    export default {
      name: '',
      props:{
        productDetail:'',
        hotelZhName:'',
        loading:'',
        adultNum:'',
        childNum:'',
        totalPrice:'',
        perPrice:''
      },
      data () {
          return {
            discountCoupon:discountCoupon,
            refundText:refundText
          }
      },
      methods: {},
      components:{
        flightInfo
      }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
  @import "../../assets/stylus/colorConfig.styl"
  @import "../product/product.styl"
  .order-info{
    position: relative;
    float right
    width 380px
    margin-bottom 20px
    padding 0 20px 20px
    box-sizing border-box
    background #fff
    color mainTitleColor
    &.isLoading:after{
      content ''
      position absolute
      width 100%
      height 100%
      left 0px
      top 0
      background #fff
    }
    .h_connect .h_line{
      width 90px
    }
    h3{
      margin-top 40px
      margin-bottom 22px
      font-size 24px
    }
    .hotel-box{
      padding 15px
      h4{
        line-height 22px
        font-size 18px
      }
      .h-star{
        margin 12px 0
        i{
          color starColor
        }
      }
      .h-des{
        font-size 14px
        color contentColor
      }
      .h-info{
        display inline-block
        width 100%
        margin-top 10px
        .h_box{
          width 80px
          height 80px
          padding 8px 0 0
          .h_d{
            font-size 28px
          }
        }
        .h_connect{
          float left
          margin 25px 18px 0px
        }
      }
    }

    .flight-box{
      margin-top 20px
      .f-title{
        height 30px
        line-height 30px
        padding 0 18px
        box-sizing border-box
        background #6d8493
        font-size 14px
        color #ffffff
        img{
          display inline-block
          position relative
          width 16px
          top 2px
        }
      }
      .f-box{
        padding 0px 5px 20px
        box-sizing border-box
        .o_dateTime{
          width 117px
          h4{
            font-weight 600
            font-size 28px
          }
          p{
            font-size 12px
            color contentColor
          }
        }
        .h_connect{
          margin: 5px 1px 0
          .l_text{
            font-size 12px
          }
          .tool-tip{
            left -13px
          }
        }
      }
      .f-policy{
        padding 0 10px
        font-size 13px
        .airInfo-box{
          left -20%
        }
      }
    }
    .fee-box{
      padding-bottom 15px
      .f-all{
        line-height 52px
        padding 0 15px
        border-bottom 1px dashed border_color
        font-size 16px
      }
      .f-detail{
        padding 15px 15px 0
        font-size 14px
        color contentColor
      }
    }
  }
  .total-price{
    margin 30px -20px 0
    padding 20px 20px 0
    border-top 1px solid border_color
    text-align right
    font-size 14px
    color contentColor
    .policy{
      position relative
      line-height 36px
      font-size 12px
      cursor pointer
      .tool-tip{
        display none
        width 220px
        top auto
        bottom 36px
        padding 10px 20px
        text-align left
        b{
          display block
        }
        span{
          font-size 13px
          color listColor
          em{
            display block
            line-height 22px
            font-size 12px
            color #f5f5f5
          }
        }
      }

      &:hover{
        .tool-tip{
          display block
        }
      }
    }
    .h-price{
      font-size 12px
    }
    .h-totalPrice span{
      font-weight bold
      font-size 25px
    }
  }
</style>
