<template>
    <div class="container">
      <div class="orderInfo">
        <div class="order-code"><span>订单编号：{{orderDetailInfo.orderNumber}}</span></div>
        <div class="order-box">
          <h3 class="title">机票信息</h3>
          <div class="order-item" v-for="(flightOrder,index) in orderDetailInfo.flightOrders">
            <div class="order-cell border-bottom" v-for="(flight,key) in flightOrder.flightOrderDetail">
              <div class="air-title">
                <span class="bgColor air-type" :class="{sBgColor:index==1}" v-if="key==0">{{index==0 ? '去程' : '返程'}}</span>
                <img :src="flight.airlineLogo" class="iconflight" />{{flight.flightNo}} | {{flight.depTime | formatDate}}
                <span class="air-wxp sColor float-r" @click="openCheckPolicy(2,flight)"><i class="iconfont icon-gantanhao"></i>行李额</span>
              </div>
              <div class="airInfo flex-box">
                <div class="flex air_depart">
                  <p class="p1">{{flight.depCity}}({{flight.depCode}})</p>
                  <h1>{{flight.depTime | formatTime}}</h1>
                  <p class="p2">{{flight.depAirportName}}</p>
                </div>
                <div  class="flex_cell h_connect">
                 <!-- <span class="l_text" v-if="flight.flightFlightType==2">
                    中转 <i class="iconfont icon-wenhao"></i>
                  </span>
                  <span class="l_text" v-if="flight.flightFlightType==1">经停 <i class="iconfont icon-wenhao"></i></span>
                  <span class="l_text" v-if="flight.flightFlightType==0">直飞</span>-->
                  <span class="l_text">{{flight.duration}}</span>
                  <p class="h_line"></p>
                </div>
                <div class="flex air_destination text-r">
                  <p class="p1">{{flight.arrCity}}({{flight.arrCode}})</p>
                  <h1>{{flight.arrTime | formatTime}}</h1>
                  <p class="p2">{{flight.arrAirportName}}</p>
                </div>
              </div>

              <p class="flight-stayTime" v-if="flight.flightStopTime && index<flightOrder.flightOrderDetail.length"> <font class="mColor">{{flight.arrCity}}</font> 停留 {{flight.flightStopTime}}</p>
            </div>
          </div>
        </div>

        <div class="order-box" v-if="orderDetailInfo.orderType!='STATIC_PACKAGE'">
          <h3 class="title">酒店信息</h3>
          <div class="hotel-info" v-for="hotel in orderDetailInfo.hotelOrders">
            <h3>{{hotel.hotelNameCn}}</h3>
            <p class="addr">地址：{{hotel.address}}</p>
            <div class="h-s1">{{hotel.roomType}} ×{{hotel.roomNum}}(间）{{hotel.meals=='GT06-AO' ? '无早' : '含早'}}</div>
            <p class="h-time">{{hotel.remark}}</p>

            <div class="h_date flex-box">
              <div class="h_box">
                <span class="h_m">{{hotel.hotelOrderDetail.checkInDate | getMonth}}</span>
                <p class="h_d">{{hotel.hotelOrderDetail.checkInDate | getDate}}&nbsp;日</p>
                <span class="h_w">{{hotel.hotelOrderDetail.checkInDate | getDay}}入住</span>
              </div>
              <div class="h_connect">
                <span class="l_text">{{hotel.hotelOrderDetail.lengthOfStay}}晚</span>
                <p class="h_line"></p>
              </div>
              <div class="h_box">
                <span class="h_m">{{hotel.hotelOrderDetail.checkOutDate | getMonth}}</span>
                <p class="h_d">{{hotel.hotelOrderDetail.checkOutDate | getDate}}&nbsp;日</p>
                <span class="h_w">{{hotel.hotelOrderDetail.checkOutDate | getDay}}离店</span>
              </div>
            </div>
          </div>
        </div>

        <div class="order-box" v-else>
          <h3 class="title">产品信息</h3>
          <div class="hotel-info">
            <h3>{{orderDetailInfo.staticProductInfo.title}}</h3>
            <p class="addr" style="padding-bottom: 15px" v-html="orderDetailInfo.staticProductInfo.productPonit"></p>
            <!--<a href="#" class="viewMoreInfo" @click="openCheckPolicy(6)">更多产品信息</a>-->
          </div>
        </div>

        <div class="order-box">
          <h3 class="title">出行人信息</h3>
          <div class="person-info">
            <div class="p-item border-bottom">
              <p><label for="">联系人姓名：</label>{{orderDetailInfo.contactName}}</p>
              <p><label for="">联系人手机：</label>{{orderDetailInfo.contactPhone}}</p>
              <p v-if="orderDetailInfo.contactEmail"><label for="">电子邮箱：</label>{{orderDetailInfo.contactEmail}}</p>
            </div>
            <div class="p-item" style="padding-bottom: 0" v-for="(user,index) in orderDetailInfo.listTicketUser">
              <p class="flex-box"><label class="user">出行人{{index+1}}（成人）：</label>{{user.nameFirst+user.nameLast}}</p>
              <p><label for="">身份证号码：</label>{{user.cardNum}}</p>
            </div>
          </div>
        </div>

        <div class="order-box" v-if="orderDetailInfo.orderType!='STATIC_PACKAGE'">
          <h3 class="title">报销凭证</h3>
          <!--已开发票-->
          <div class="person-info" v-show="orderDetailInfo.orderInvoiceStatus!=-1">
            <div class="text-wrap flex-box part-wrap border-bottom">
              <label for="">发票</label>
              <p class="flex">
                  <span>
                    <em>{{orderDetailInfo.invoicesInfo.type == 2 ? '电子发票' : '纸质发票'}}({{orderDetailInfo.invoicesInfo.invoiceTypeText}})</em>
                    <em>{{orderDetailInfo.invoicesInfo.title}}</em>
                    <em>{{orderDetailInfo.invoicesInfo.taxpayerNumber}}</em>
                  </span>
              </p>
            </div>
            <div class="text-wrap flex-box part-wrap border-bottom" v-show="orderDetailInfo.invoicesInfo.type==2">
              <label for="">电子邮箱</label>
              <p class="flex">
                  {{orderDetailInfo.invoicesInfo.contactEmail}}
              </p>
            </div>
            <div class="" v-show="orderDetailInfo.invoicesInfo.type==1">
              <div class="text-wrap flex-box part-wrap border-bottom">
                <label for="">配送方式</label>
                <p class="flex">
                  {{orderDetailInfo.invoicesInfo.logisticsCompany || '未邮寄'}}
                </p>
              </div>
              <div class="text-wrap flex-box part-wrap border-bottom">
                <label for="">快递单号</label>
                <p class="flex">
                  {{orderDetailInfo.invoicesInfo.logisticsNumber || '未邮寄'}}
                </p>
              </div>
              <div class="text-wrap flex-box part-wrap border-bottom">
                <label for="">配送地址</label>
                <p class="flex">
                  <span>
                    <em>{{orderDetailInfo.invoicesInfo.recipientName}}</em>
                    <em>{{orderDetailInfo.invoicesInfo.recipientPhone}}</em>
                    <em>{{orderDetailInfo.invoicesInfo.detailAddress}}</em>
                  </span>
                </p>
              </div>
            </div>
            <div class="text-wrap flex-box part-wrap border-bottom">
              <label for="">凭证状态</label>
              <p class="flex" style="font-size: 11px;color:#c30d23">
                发票将在出行结束后7个工作日内寄出
              </p>
            </div>
          </div>
          <!--未开发票-->
          <div class="text-wrap flex-box part-wrap" v-show="orderDetailInfo.orderInvoiceStatus==-1">
            <label>发票</label>
            <p class="flex" @click="openInvoicePage">
                <span>
                  <em>未开发票</em>
                  <em class="stColor">行程结束后1个月内可补开发票</em>
                </span>
            </p>
            <i class="iconfont icon-arrow-right1"></i>
          </div>
        </div>

        <div class="order-box">
          <!--<h3 class="title">订单详</h3>-->
          <div class="person-info time">
            <div class="p-item ">
              <p>下单时间：{{orderDetailInfo.createTime | formatDateTime}}</p>
              <p>支付时间：{{orderDetailInfo.orderPayTime | formatDateTime}}</p>
            </div>
          </div>
        </div>
      </div>

      <div class="bottom-section">
        <div class="fixed_bottom flex-box">
          <div class="b_left flex">
            <div class="h-price" v-if="orderDetailInfo.orderVoucherPrice>0 && discountCoupon">
              <span class="oldPrice">
                总价<font style="text-decoration: line-through">￥{{orderDetailInfo.orderTotalPrice}}</font>
                <span class="price-discount">优惠￥{{orderDetailInfo.orderVoucherPrice}}</span>
              </span>
              <span class="nowPrice">￥{{orderDetailInfo.orderActualPrice}}</span>
            </div>
            <div  class="totalPrice" v-else>
              总价
              <b>¥{{orderDetailInfo.orderActualPrice}}</b>
            </div>
          </div>
          <p class="b-status">
            <span class="detailstatus" :class="{mColor:orderDetailInfo.orderStatus==10}">{{orderDetailInfo.orderStatus | statusText}}</span>
            <a class="policy" href="javascript:void(0)" @click="openCheckPolicy(1)">退改签政策</a>
          </p>
        </div>
      </div>

      <checkPolicy v-show="showPolicyModal" @close="showPolicyModal=false" :type="policyType" showType="order" ref="checkPolicy"></checkPolicy>

    </div>
</template>
<script>
  import checkPolicy from '../product/checkPolicy.vue'
  export default {
        name: '',
        data () {
            return {
              discountCoupon:discountCoupon,
              orderNumber:this.$route.params.orderNumber,
              orderDetailInfo:{
                flight:[],
                hotel:[],
                invoicesInfo:{},
                staticProductInfo:{}
              },
              policyType:1, //1明细（退改政策），2行李额
              showPolicyModal:false,
            }
        },
        methods: {
          /*填写发票信息*/
          openInvoicePage(){
            this.$router.push("/wx/weInvoiceInfo?orderNumber="+this.orderNumber+"&prevPage="+this.$route.path);
          },

          /*行李额/明细------查看*/
          openCheckPolicy(type,f){
            this.showPolicyModal=true;
            this.policyType=type;
            if(type==2){
                this.$refs.checkPolicy.specialRuleText=f.specialRuleText;
            }
          },
          /*订单信息------查询*/
          getOrderDetailInfo(){
            Indicator.open();
            packageOrderDetail(this.orderNumber).then(data=>{
              Indicator.close();
              if(data.returnCode==200){
                this.orderDetailInfo=data.data;
                //机票
                if(this.orderDetailInfo.flightOrders.length>0){
                  this.orderDetailInfo.flightOrders.forEach(flight=>{
                    flight.flightOrderDetail.forEach(item=>{
                      let index=flight.flightOrderDetail.indexOf(item);
                      item.flightFlightType=initFlightInfo(item).type;
                      if(index+1<flight.flightOrderDetail.length){
                        item.flightStopTime=getTermTime(flight.flightOrderDetail[index+1].depTime,item.arrTime);
                      }
                      item.specialRuleText=item.specialRuleText || '请致电'+telPhone ;
                      item.stopAddress=item.stopAddress ? JSON.parse(item.stopAddress) : '';
                    });
                  });
                  this.orderDetailInfo.isPast=(new Date().getTime()-new Date(this.orderDetailInfo.flightOrders[0].flightOrderDetail[0].depTime).getTime())>0 ? -1 : 0  ; //-1过期，0没过期
                }
                //酒店
                this.orderDetailInfo.hotelOrders.forEach(item=>{
                  item.roomNum=1;
                });

                //静态打包
                this.orderDetailInfo.staticProductInfo={};
                if(this.orderDetailInfo.staticOrderDetail.length>0){
                  this.orderDetailInfo.staticProductInfo=this.orderDetailInfo.staticOrderDetail[0].staticProduct.product;
                  this.orderDetailInfo.staticProductInfo.checkInDate=this.orderDetailInfo.staticOrderDetail[0].checkInDate;
                  this.orderDetailInfo.staticProductInfo.lengthOfStay=this.orderDetailInfo.staticOrderDetail[0].lengthOfStay;
                  this.orderDetailInfo.staticProductInfo.roomNum=this.orderDetailInfo.staticOrderDetail[0].staticProduct.hotelCount;
                }

                //发票
                this.orderDetailInfo.invoicesInfo={};
                this.orderDetailInfo.orderInvoiceStatus=-1;
                if(this.orderDetailInfo.invoices && this.orderDetailInfo.invoices.length>0){
                  this.orderDetailInfo.orderInvoiceStatus=0;
                  this.orderDetailInfo.invoicesInfo=this.orderDetailInfo.invoices[0];
                  if(this.orderDetailInfo.invoices[0].invoiceType==0){
                    this.orderDetailInfo.invoicesInfo.invoiceTypeText='个人';
                  }else if(this.orderDetailInfo.invoices[0].invoiceType==0){
                    this.orderDetailInfo.invoicesInfo.invoiceTypeText='企业';
                  }else{
                    this.orderDetailInfo.invoicesInfo.invoiceTypeText='非企业';
                  }
                  this.orderDetailInfo.invoicesInfo.detailAddress=this.orderDetailInfo.invoices[0].province+this.orderDetailInfo.invoices[0].city+this.orderDetailInfo.invoices[0].area+this.orderDetailInfo.invoices[0].address;
                }

              }else {
                MessageBox({message:'<strong style="font-size:14px">'+data.returnMsg+'</strong>',
                  confirmButtonText: '返回订单列表',
                  closeOnClickModal:false,
                  showCancelButton: false
                }).then(action => {
                  location.href="/wx/orderList/all";
                });
              }
            })
          },
        },
        mounted(){
          this.getOrderDetailInfo();
        },
       components:{
         checkPolicy,
       },
       beforeRouteLeave(to, from, next){
          if(to.name == 'weInvoiceInfo') {
            from.meta.keepAlive = true;
          }else {
            from.meta.keepAlive = false;
          }
          next();
       }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
@import "order.styl"
.orderInfo{
  padding 1rem
  background #f3f3f3
  color mainTitleColor
  .order-box{
    margin-bottom 1.5rem
    padding 0 1rem
    background #fff
    box-shadow: 0 0 24px 1px rgba(166, 166, 167, 0.24);
    .order-cell{
      position relative
      /*margin-bottom 10px*/
      padding 1.4rem 0
      .flight-stayTime{
        position absolute
        bottom -7px
        font-size 12px
        background #ffffff
        color subheadColor
        padding-right 10px
      }
    }
    .title{
      height 2rem
      line-height 2rem
      padding-left .875rem
      margin 0 -1rem
      background #eeeeee
      font-size 1rem
      font-weight bold
    }
    .person-info{
      font-size 14px
      padding-bottom .8rem
    }
  }
  .airInfo{
    .h_connect{
      padding-top 1.7rem
    }
  }
  .air_bottom{
    margin-top .7rem
    font-size .75rem
    i{
      font-size .75rem
      margin-right .2rem
    }
  }
  .hotel-info{
    h3{
      margin-top 1rem
      margin-bottom .5rem
      font-size 1.1rem
      font-weight bold
    }
    .addr{
      line-height 1rem
      font-size .75rem
      color subheadColor
    }
    .h-s1{
      margin 1rem 0
      font-weight bold
      font-size .925rem
    }
    .h-time{
      line-height 1.2rem
      font-size .825rem
    }
    .h_date{
      padding 0rem 0 1.53rem
      .h_box{
        width 5rem
        height 5rem
        padding .6rem 0
        border 1px solid border_color
        border-radius 6px
        -webkit-box-sizing border-box
        box-sizing border-box
        text-align center
        font-size .75rem
        color mainTitleColor
        .h_d{
          margin 0
          padding .45rem 0
          font-weight bold
          font-size 1.55rem
        }
        .h_w{
          color subheadColor
        }
      }
      .h_connect{
        margin 1.1rem 1rem
      }
    }
  }
  .person-info{
    .p-item{
      padding .8rem 0
      p{
        line-height 2rem
        font-weight bold
        font-size .875rem
        label{
          display inline-block
          width 8rem
          font-weight normal
        }
      }
    }
    &.time{
      padding-bottom 0
      p{
        font-weight normal
      }
    }
  }
}
.bottom-section{
  .b_left{
    font-size .8rem
    .totalPrice{
      margin-top 7px
      b{
        display block
        margin-top .4rem
        font-size 1.1rem
        color mainColor
      }
    }
  }
  .h-price .nowPrice{
    font-size 18px
  }
  .b-status{
    padding-top 3px
    text-align right
    span{
      display block
    }
    a.policy{
      position relative
      display block
      margin-top 10px
      margin-left 1rem
      font-size .8rem
      color blueColor
      i{
        font-size .8rem
      }
    }
  }

  .subBtn{
    height 3.125rem
    line-height 3.125rem
    margin-top 0
    font-size 1.05rem
    font-weight bold
  }
}

</style>

