<template>
    <div class="container pcContainer">
      <section>
        <div class="order_head">
          <headBar class="mine orderDetail"></headBar>
        </div>
        <div class="w12">
          <p class="w_t"><router-link to="/orderList/all">我的订单 > </router-link> 订单详情</p>
          <!--<div class="w90">-->
          <div class="w_dInfo">
            <orderInfo :orderDetailInfo="orderDetailInfo"></orderInfo>
          </div>

          <div class="order_info">
            <div class="order_cell">
              <div class="o_t">航班信息</div>
              <div class="o_wrap border-bottom" v-for="(flightOrder,index) in orderDetailInfo.flightOrders">
                <div class="o_flight_wrap" v-for="(flight,key) in flightOrder.flightOrderDetail">
                  <div class="f_title">
                    <div class="o_fDate">
                      <span class="f-tip" :class="{'back_flight sColor':index==1}" v-if="key==0">{{index==1 ? '返程' : '去程'}}</span>
                      {{flight.depCity}}
                      <i class="iconfont icon-jiaohuan"></i> {{flight.arrCity}}
                      <span>{{flight.depTime | getMonthDate}}</span>
                      <span>{{flight.depTime | getWeek}}</span>
                    </div>
                    <div class="o_space alignCenter">
                      <img class="icon_cangwei" :src="flight.airlineLogo">
                      {{flight.airlineName}}
                      {{flight.flightNo}}
                    </div>

                    <div class="o_baggage alignCenter mColor">行李额
                      <toolTipWrap class="bottom b-left">
                        <b slot="otherInfo">
                          <span v-if="(!flight.specialRuleText)"><i class="iconfont icon-loading"></i>正在加载中</span>
                          <b v-if="flight.specialRuleText" v-html="flight.specialRuleText"></b>
                        </b>
                      </toolTipWrap>
                    </div>
                  </div>
                  <div class="f_flightInfo">
                    <div class="h_connect">
                      <p class="h_line"></p>
                      <span class="l_stay">{{flight.duration}}</span>
                    </div>
                    <div class="f-airInfo">
                      <span>{{flight.depTime | formatTime}}</span>
                      <span>{{flight.depAirportName}}{{flight.depTerm}}&nbsp;({{flight.depCode}})</span>
                    </div>
                    <div class="f-airInfo back-airInfo">
                      <span>{{flight.arrTime | formatTime}}</span>
                      <span>{{flight.arrAirportName}}{{flight.arrTerm}}&nbsp;({{flight.arrCode}})</span>
                    </div>
                  </div>
                  <p class="flight-stayTime" v-if="flight.flightStopTime && index<flightOrder.flightOrderDetail.length">中转时间：{{flight.flightStopTime}}</p>
                </div>

              </div>
            </div>

            <div class="order_cell hotel_cell" v-if="orderDetailInfo.orderType!='STATIC_PACKAGE'">
              <div class="o_t">酒店信息</div>
              <div class="o_wrap" v-for="hotel in orderDetailInfo.hotelOrders">
                <div class="h_name">
                  <h4 :title="hotel.hotelNameCn">{{hotel.hotelNameCn}}</h4>
                  <p class="pSize" :title="hotel.address">地址：{{hotel.address}}</p>
                </div>
                <div class="h-cell flex-box">
                  <label>入住日期</label>
                  <div class="h-cell-box flex-box">
                    <div class="ho_box">
                      <p class="ho_m">{{hotel.hotelOrderDetail.checkInDate | formatMonth}}</p>
                      <span class="ho_d">{{hotel.hotelOrderDetail.checkInDate | getDate}}日</span>
                      <p class="ho_w">{{hotel.hotelOrderDetail.checkInDate | getDay}}入住</p>
                    </div>
                    <span class="ho-to">至</span>
                    <div class="ho_box">
                      <p class="ho_m">{{hotel.hotelOrderDetail.checkOutDate | formatMonth}}</p>
                      <span class="ho_d">{{hotel.hotelOrderDetail.checkOutDate | getDate}}日</span>
                      <p class="ho_w">{{hotel.hotelOrderDetail.checkOutDate | getDay}}离店</p>
                    </div>
                    <span class="ho-all">共 <font class="mColor">{{hotel.hotelOrderDetail.lengthOfStay}}</font> 晚</span>
                  </div>
                </div>
                <div class="h-cell">
                  <label>房型</label>
                  <span>{{hotel.roomType}}</span>
                </div>
                <div class="h-cell">
                  <label>间数</label>
                  <span>{{hotel.roomNum}}间</span>
                </div>
                <div class="h-cell">
                  <label>早餐</label>
                  <span>{{hotel.meals=='GT06-AO' ? '无早' : '含早'}}</span>
                </div>
                <!--<div class="h_policy policyBox size14 hide">退改签政策-->
                  <!--<div class="refundBox">-->
                      <!--<p class="title">酒店退改签政策</p>-->
                      <!--<p class="p2" v-for="p in hotel.hotelOrderCancelPolicy">{{p.startTime | formatDateTime}}之前免费取消  取消费用：<font class="red">¥{{p.amount}}</font>/人</p>-->
                  <!--</div>-->
                <!--</div>-->

              </div>
            </div>

            <div class="order_cell hotel_cell" v-else>
              <div class="o_t">产品信息</div>
              <div class="o_wrap">
                <div class="h_name">
                  <h4>{{orderDetailInfo.staticProductInfo.title}}</h4>
                </div>
                <div class="h-cell flex-box">
                  <label class="align-start">产品亮点：</label>
                  <div class="h-point flex">
                    <p v-html="orderDetailInfo.staticProductInfo.productPonit"></p>
                    <a href="#" class="viewMoreInfo" @click="dialogVisible=true">更多产品信息</a>
                  </div>
                </div>

                <!--<div class="h-cell">-->
                  <!--<label>费用说明：</label>-->
                  <!--<span v-html="orderDetailInfo.staticProductInfo.productFeeDesc"></span>-->
                <!--</div>-->

                <!--<div class="h_policy policyBox size14 hide">退改签政策-->
                <!--<div class="refundBox">-->
                <!--<p class="title">酒店退改签政策</p>-->
                <!--<p class="p2" v-for="p in hotel.hotelOrderCancelPolicy">{{p.startTime | formatDateTime}}之前免费取消  取消费用：<font class="red">¥{{p.amount}}</font>/人</p>-->
                <!--</div>-->
                <!--</div>-->

              </div>
            </div>

            <div class="order_cell">
              <div class="o_t">出行人信息</div>
              <div class="o_wrap">
                <div class="p-cell p-cellTitle flex-box">
                  <div class="p-cell-t1">姓名</div>
                  <div class="p-cell-t1">乘客类型</div>
                  <div class="p-cell-t1">证件类型</div>
                  <div class="p-cell-number">证件号码</div>
                </div>
                <div class="p-cell flex-box" v-for="(user,index) in orderDetailInfo.listTicketUser" :class="{'border-bottom':index<orderDetailInfo.listTicketUser.length-1}">
                  <div class="p-cell-t1">{{user.nameFirst+user.nameLast}}</div>
                  <div class="p-cell-t1">{{user.ageType==1 ? '儿童' : '成人'}}/{{user.sex | sexType}}</div>
                  <div class="p-cell-t1">{{user.cardType | cardTypeText}}</div>
                  <div class="p-cell-number">{{user.cardNum}}</div>
                </div>
              </div>
            </div>

            <div class="order_cell">
              <div class="o_t">联系人信息</div>
              <div class="o_wrap">
                <div class="p-cell p-cellTitle flex-box">
                  <div class="p-cell-t1">联系人姓名</div>
                  <div class="p-cell-t1">联系人手机</div>
                  <div class="p-cell-t1">联系人邮箱</div>
                </div>
                <div class="p-cell flex-box">
                  <div class="p-cell-t1">{{orderDetailInfo.contactName}}</div>
                  <div class="p-cell-t1">{{orderDetailInfo.contactPhone}}</div>
                  <div class="p-cell-t1">{{orderDetailInfo.contactEmail}}</div>
                </div>
              </div>
            </div>

            <div class="order_cell" v-if="orderDetailInfo.orderType!='STATIC_PACKAGE'">
              <div class="o_t">报销凭证</div>
              <div class="o_wrap border-bottom" v-if="orderDetailInfo.orderInvoiceStatus!=-1">
                <p class="h-cell"><label for="">发票抬头：</label>{{orderDetailInfo.invoicesInfo.title}}</p>
                <p class="h-cell"><label for="">税号：</label>{{orderDetailInfo.invoicesInfo.taxpayerNumber}}</p>
                <p class="h-cell"><label for="">发票明细：</label>{{orderDetailInfo.invoicesInfo.invoiceDetail}}</p>
                <div class="" v-if="orderDetailInfo.invoicesInfo.type==1"><!--//类型 1：纸质发票 2：电子发票-->
                    <p class="h-cell"><label for="">凭证状态：</label>{{orderDetailInfo.invoicesInfo.state ==0 ? '开票中' : '已开发票'}}({{orderDetailInfo.invoicesInfo.invoiceTypeText}})</p>
                    <p class="h-cell"><label for="">收件人：</label>{{orderDetailInfo.invoicesInfo.recipientName}}</p>
                    <p class="h-cell"><label for="">联系人手机：</label>{{orderDetailInfo.invoicesInfo.recipientPhone}}</p>
                    <p class="h-cell"><label for="">快递公司：</label>{{orderDetailInfo.invoicesInfo.logisticsCompany || '无'}}</p>
                    <p class="h-cell"><label for="">快递单号：</label>{{orderDetailInfo.invoicesInfo.logisticsNumber || '无'}}</p>
                    <p class="h-cell"><label for="">邮寄地址：</label>{{orderDetailInfo.invoicesInfo.detailAddress}}</p>
                </div>
                <div v-if="orderDetailInfo.invoicesInfo.type==2">
                    <p class="h-cell"><label for="">凭证状态：</label>{{orderDetailInfo.invoicesInfo.state ==0 ? '开票中' : '已开发票'}}({{orderDetailInfo.invoicesInfo.invoiceTypeText}})</p>
                    <p class="h-cell"><label for="">电子邮箱：</label>{{orderDetailInfo.invoicesInfo.contactEmail}}</p>
                </div>
              </div>
              <div class="o_wrap border-bottom" v-if="orderDetailInfo.orderInvoiceStatus==-1">
                  <p class="h-cell"><label for="">凭证状态：</label>未开发票</p>
              </div>
            </div>
          </div>
          <!--</div>-->
          <div class="w30 hide">
            <p>您可以</p>
            <router-link v-if="orderDetailInfo.orderInvoiceStatus==-1" :to="'/invoice/'+orderNumber" class="btn order-btn">补开发票</router-link>
            <router-link to="/" class="btn order-btn">查看电子发票</router-link>
            <a href="" class="btn order-btn">查看入住凭证</a>
          </div>
        </div>
        <footB></footB>
      </section>

      <!--订单详情 end-->
      <el-dialog class="productDetailDialog"
       title="产品详情"
       :visible.sync="dialogVisible"
       top="8%" width="72%"
       :close-on-click-modal="true">
        <div class="dialog-Box">
          <div class="h-cell flex-box">
            <label>产品特色：</label>
            <div class="flex" v-html="orderDetailInfo.staticProductInfo.productInfo"></div>
          </div>
          <div class="h-cell flex-box">
            <label>费用说明：</label>
            <div class="flex" v-html="orderDetailInfo.staticProductInfo.productFeeDesc"></div>
          </div>
          <div class="h-cell flex-box">
            <label>预订须知：</label>
            <div class="flex" v-html="orderDetailInfo.staticProductInfo.productBookInfo"></div>
          </div>
        </div>
      </el-dialog>

    </div>
</template>
<script>
  import orderInfo from './orderInfo.vue'
  export default {
        name: '',
        data () {
            return {
              loading:false,
              orderNumber:this.$route.params.orderNumber,
              list:2,
              orderDetailInfo:{
                flightOrders:[],
                hotelOrders:[],
                invoicesInfo:{},
                staticProductInfo:{}
              },
              invoiceT:[{label:'企业',val:1},{label:'非企业性单位',val:2},{label:'个人',val:0}],
              refundPolicy:[],
              dialogVisible:false
            }
        },
        methods: {
          isClose(){
              this.dialogVisible=false;
          },
          getOrderDetailInfo(){
            this.loading=true;
            packageOrderDetail(this.orderNumber).then(data=>{
              this.loading=false;
              if(data.returnCode==200){
                this.orderDetailInfo=data.data;
//                this.orderDetailInfo.staticProductInfo={};
                //机票
                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];
                  this.orderDetailInfo.invoicesInfo.detailAddress=this.orderDetailInfo.invoices[0].province+this.orderDetailInfo.invoices[0].city+this.orderDetailInfo.invoices[0].area+this.orderDetailInfo.invoices[0].address;
                  this.orderDetailInfo.invoicesInfo.invoiceTypeText=this.getInvoiceTypeText(this.orderDetailInfo.invoices[0].invoiceType);
                }
              }else {
                this.msgAlert(data.returnMsg);
              }
            })
          },
          msgAlert(info){
            this.$alert('<strong>'+info+'</strong>', {
              dangerouslyUseHTMLString: true,
              distinguishCancelAndClose: true,
              showClose:false,
              confirmButtonText:'返回订单列表',
              center:true,
              beforeClose: (action, instance, done) => {
                done();
                location.href="/orderList/all";
              }
            });
          },
          getInvoiceTypeText(type){
            let invoiceText='';
            this.invoiceT.forEach(item=>{
              if(item.val==type){
                invoiceText=item.label;
              }
            });
            return invoiceText;
          },
        },
        components:{
          orderInfo
        },
        mounted(){
          this.getOrderDetailInfo();
        },
        filters:{

        }
    }
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
@import "orderList.styl"
.pSize{
  font-size 12px
  color #999
}
.w90{
  display inline-block
  width 900px
}
.w30{
  display inline-block
  width 200px
  float right
  margin-right 10px
  font-size 14px
  .order-btn{
    width 160px
    height 32px
    line-height 32px
    margin-top 12px
    border-radius 2px
  }
}
.order_info{
  margin-top 46px
  .order_cell{
    margin-bottom 12px
    font-size 14px
    background #fff
    border-radius 10px
    box-shadow 0 0 3px #eee
    .o_t{
      height 40px
      line-height 40px
      padding-left 28px
      font-weight bold
      background #f8fafb
      border-top-left-radius 10px
      border-top-right-radius 10px
    }
    .o_wrap{
      width 100%
      padding 25px
      box-sizing border-box
      .o_flight_wrap{
        position relative
        border-bottom 1px solid border_color
        padding-bottom 20px
        margin-bottom 20px
        &:last-child{
          border none
          padding-bottom 0px
          margin-bottom 0px
        }
        .flight-stayTime{
          position absolute
          padding-right 10px
          bottom -8px
          font-size 12px
          color subheadColor
          background #fff
        }
      }
      .f_flightInfo{
        position relative
        height 78px
        padding-left 25px
        .h_connect{
          position absolute
          width 100%
          height 70px
          left 10px
          top 0px
          .h_line{
            display inline-block
            width 4px
            height 78px
            margin 0px
            top 0
            background #bbc9db
            &:before,&:after{
              width 14px
              height 14px
              left -5px
              top 0px
              border 4px solid #bbc9db
              box-sizing border-box
            }
            &:after{
              top auto
              bottom 0px
            }
          }
          .l_stay{
            position absolute
            width 120px
            top 36px
            left 20px
            text-align left
            font-size 12px
            color #999999
          }
        }
        .f-airInfo{
          position absolute
          font-size 14px
          color mainTitleColor
          top 0px
          &.back-airInfo{
            top auto
            bottom 0px
          }
        }
      }
      .f_title{
        margin-bottom 15px
        font-size 16px
        color mainTitleColor
        .o_fDate{
          display inline-block
          min-width 300px
        }
        .f-tip{
          display inline-block
          width 38px
          height 16px
          line-height 16px
          text-align center
          background mainColor
          font-size 12px
          color #fff
          border-radius 10px
          &.back_flight{
            background subColor
          }
        }
        .o_space{
          display inline-block
          margin-left 40px
          min-width 120px
          font-size 15px
          img{
            position relative
            display inline-block
            width 20px
            top 4px
          }
        }
        .o_baggage{
          display inline-block
          margin-left 30px
          font-size 14px
          text-decoration underline
          cursor pointer
          .tool-tip{
            display none
            width 240px
            margin-top 10px
          }
          &:hover{
            .tool-tip{
              display block
            }
          }
        }
      }
    }
  }
  .hotel_cell{
    .o_wrap{
      padding 14px 28px
    }
    .h_name{
      margin-bottom 20px
      padding-bottom 20px
      border-bottom 1px solid border_color
    }

    .h_name{
      h4{
        line-height 24px
        margin-bottom 5px
        font-size 22px
        color mainTitleColor
      }
      p{
        line-height 15px
      }
    }
    .h_bed{
      color mainTitleColor
    }
    .h_date{
      color contentColor
      p:last-child{
        margin-top 12px
      }
      font{
        margin-left 8px
        color mainTitleColor
      }
    }
    .h_policy{
      position relative
      line-height 30px
      margin-right 100px
      color mainColor
      .refundBox{
        width 410px
        z-index 1
        line-height 30px
        .title{
          margin-bottom 5px
        }
      }
    }

    .h_connect{
      margin 0 30px
    }

  }
  .h-cell{
    margin-bottom 12px
    align-items center
    font-size 13px
    label{
      display inline-block
      width 100px
      font-size 12px
      color #999

      &.align-start{
        align-self: flex-start
      }
    }
    .h-point{
      line-height 20px
    }
    .viewMoreInfo{
      display inline-block
      margin-top 15px
      font-size 14px
      color #2894f2
    }
    .h-cell-box{
      align-items center
      .ho-to{
        margin 0 10px
      }
      .ho-all{
        margin-left 20px
      }
    }
    .ho_box{
      position relative
      display inline-block
      width 148px
      height 50px
      padding 10px 5px
      box-sizing border-box
      text-align left
      border 1px solid border_color
      .ho_m{
        font-size 14px
        color #333
      }
      .ho_d{
        position absolute
        top 10px
        right 5px
        margin 0px
        font-size 28px
      }
      .ho_w{
        margin-top 3px
        font-size 12px
        color subcontentColor
      }
    }
  }
  .p-cell{
    height 40px
    line-height 40px
    padding 0 20px
    box-sizing border-box
    font-size 13px
    &.p-cellTitle{
      background #f8fafb
      font-size 14px
    }
    .p-cell-t1{
      width 20%

    }
  }
  .p_info{
    width 100%
    margin-bottom 20px
    p{
      flex 33.3%
    }
  }
}

.dialog-Box{
  .h-cell{
    line-height 20px
    margin-bottom 30px
    img{
      max-width 100%
    }
  }
}
</style>
