<template>
    <div class="container pcContainer">
      <!--pc strat-->
      <section class="orderList_pc">
        <div class="persnal_top">
          <headBar class="mine"></headBar>
        </div>
        <div class="content w12">
          <userLogo></userLogo>
          <p class="c_title">
            <a href="javascript:void(0)" :class="{active:!orderStatus || orderStatus=='all'}" @click="orderFun('all')">全部订单</a>
            <a href="javascript:void(0)" :class="{active:orderStatus=='1'}" @click="orderFun(1)">待出票</a>
            <a href="javascript:void(0)" :class="{active:orderStatus=='9'}" @click="orderFun(9)">待出行</a>
            <a href="javascript:void(0)" :class="{active:orderStatus=='6'}" @click="orderFun(6)">退款单</a>
          </p>
          <div class="ifram_wrap flex-box">
            <setLeftBar currActive="orderList"></setLeftBar>
            <div class="c_right flex">
              <div v-if="orderList.length>0">
                <ul class="orderList">
                  <li v-for="o in orderList">
                    <div class="order-item">
                      <p class="o_t">
                        <span style="margin-right: 20px">{{o.depCity}} <i class="iconfont icon-xianghujiaohuan" :class="{'icon-icon_jipiaodancheng':o.orderType=='OW_PACKAGE'}"></i> {{o.arrCity}}</span>
                        <span class="time">{{o.orderPayTime}}</span>
                        <span class="o_code">订单号：<i>{{o.orderNumber}}</i></span>
                      </p>
                      <div class="o_cell flex-box">
                        <span class="o_img">
                          <img :src="o.proImg" alt="" width="100%">
                        </span>
                        <div class="o_hotel">
                          <h4>{{o.proName}}</h4>
                          <p>成人×{{o.adultNumber}} <span v-if="o.childNumber">儿童×{{o.childNumber}}</span></p>
                        </div>
                        <div class="o_tip singleLine">{{o.orderType!='STATIC_PACKAGE' ? '机＋酒' : ''}}</div>
                        <div class="o_date">
                          <div class="twoLine">
                            <p>出行日期：{{o.depTime | formatDate}}</p>
                            <p v-if="o.backTime">返程日期：{{o.backTime | formatDate}}</p>
                          </div>
                        </div>
                        <div class="o_price listColor singleLine">¥{{o.orderActualPrice.toFixed(2)}}</div>
                        <div class="o_status listColor singleLine">
                          <span v-if="o.isPast==-1"><em v-if="o.orderStatus==2">已出行</em><em v-if="o.orderStatus!=2">{{o.orderStatus | statusText}}</em></span>
                          <span v-if="o.isPast!=-1">{{o.orderStatus | statusText}}</span>
                        </div>
                        <div class="o_operation float-r">
                          <!--<router-link to="/pay/" v-if="o.orderStatus==0" class="default-btn btn1">去支付</router-link>-->
                          <span v-if="o.orderStatus==1 && o.isPast!=-1" class="def_span">出票中</span>
                          <a href="javascript:void(0)" v-if="(o.orderStatus==1 || o.orderStatus==2) && o.isPast!=-1 && o.orderType=='STATIC_PACKAGE'" class="refund-btn border-btn btn1" @click="openPop(1,'退款',o.orderNumber)">退款</a>

                          <!--<a href="javascript:void(0)" class="refund-btn btn1" v-if="o.orderStatus==3 || o.orderStatus==4 || o.orderStatus==7" @click="openPop(2,'删除订单',o.orderNumber)">删除订单</a>-->
                          <!--<a class="def_btn" href="javascript:void(0)" v-if="o.orderStatus==0" @click="openPop(0,'取消订单',o.orderNumber)">取消订单</a>-->
                          <router-link class="def_btn" style="margin-bottom: 0px" :to="'/orderDetail/'+o.orderNumber">查看订单</router-link>
                        </div>
                      </div>
                      <div class="o-bottom border-top" v-if="o.orderType!='STATIC_PACKAGE'">
                        <router-link class="def_btn mColor" v-if="o.orderInvoiceStatus==-1" :to="'/invoice/'+o.orderNumber">补开发票</router-link>
                        <span v-if="o.orderInvoiceStatus!=-1">{{o.orderInvoiceStatus==0 ? '开票中' : '已开发票'}}</span>
                      </div>
                    </div>
                  </li>
                </ul>

                <div class="pagination"> <!--v-show="orderList.length>0"-->
                  <el-pagination
                    layout="prev, pager, next"
                    :current-page="form.page"
                    @current-change="changeCurrenPage"
                    :page-size="form.size"
                    :total="total">
                  </el-pagination>
                  <label class="pagination-totalNum">共{{total}}个订单</label>
                </div>
              </div>
              <div class="data-loading" v-if="orderLoading"><i class="iconfont icon-loading"></i>正在加载数据...</div>
              <div class="no-data" v-if="!orderLoading && orderList.length<1">
                <img src="../../assets/images/nodata.png" alt="" >
                <p>还没有订单哦，快去开启你的旅程吧！</p>
              </div>
            </div>
          </div>
        </div>
        <footB class=""></footB>

        <!--弹出框-->
        <popup v-if="popStatus!=-1" :popTitle="popTitle" @closePop="closePopFun" @subPop="subPopFun"></popup>
      </section>
      <!--pc end-->
    </div>
</template>
<script>
  /**
   * TODO
   * 退款未实现
   * */
    import popup from '../../components/common/popup.vue';
    import setLeftBar from '../me/setLeft.vue';
    import userLogo from '../me/userLogo.vue'
    export default {
        name: '',
        data () {
            return {
              loading:false,
              orderLoading:false,
              popTitle:'取消订单',
              popStatus:-1, //-1关闭，0取消订单，1退款，2删除
              orderList:[],
              showList:[],
              userInfo:Cookie.get("data") ? JSON.parse(Cookie.get("data")) : '',
              orderNumber:'',
              orderStatus:this.$route.params.orderStatus,
              form:{
                page:1,
                size:5,
                param:{
                  orderStatus:this.$route.params.orderStatus , //订单状态  0：待支付 1：已支付 2：已出票 3：出票失败 4：已取消 5：退款处理中 6：退款成功 7：退款失败  8：已删除
//                  orderType:'STATIC_PACKAGE' //OW_PACKAGE 、RT_PACKAGE、STATIC_PACKAGE
                }
              },
              currentPage:1,
              total:0,
            }
        },
        methods:{
          /**订单列表*/
          orderFun(status){
            this.orderStatus=status;
            this.form.param.orderStatus=status+'';
            this.getOrderListInfo();
          },
          changeCurrenPage(currentPage){
            this.form.page=currentPage;
            this.getOrderListInfo();
          },
          /**获取订单列表信息*/
          getOrderListInfo(){
            var _this=this;
            this.orderLoading = true;
            if(this.form.param.orderStatus=='all'){
              this.form.param.orderStatus='1,2,3,5,6,7,10,11';
            }else if(this.form.param.orderStatus=='6'){
              this.form.param.orderStatus='5,6,10,11';
            }else {
              this.form.param.orderStatus=this.form.param.orderStatus;
            }
            this.orderList=[];
            getOrderList(this.form).then(data=>{
              this.orderLoading = false;
              if(data.returnCode==200){
                this.orderList=data.data.list;
                this.total=data.data.total;

                this.orderList.forEach(item=>{
                    item.isPast=(new Date().getTime()-new Date(item.flightOrders[0].flightOrderDetail[0].depTime).getTime())>0 ? -1 : 0  ; //-1过期，0没过期
                    item.orderInvoiceStatus=-1;
                    if(item.orderInvoice){
                      item.orderInvoiceStatus=item.orderInvoice.state;
                    }

                    if(item.orderType=='STATIC_PACKAGE'){
                      if(item.staticProductOrderList.length>0){
                        let staticProduct=item.staticProductOrderList[0].staticProduct;
                        item.proName=staticProduct.product.title;
                        item.proImg=staticProduct.product.bannerList[0].bananerUrl;
                        item.adultNumber=staticProduct.adultCount;
                        item.childNumber=staticProduct.childCount;

                      }
                    }else {
                      if(item.hotelOrders.length>0){
                        let hoteInfo=item.hotelOrders[0];
                        item.proName=hoteInfo.hotelNameCn;
                        item.proImg=hoteInfo.hotelMainImg;
                      }
                    }
                    if(item.flightOrders.length>0){
                      item.depCity=item.flightOrders[0].flightOrderDetail[0].depCity;
                      item.arrCity=item.flightOrders[0].flightOrderDetail[item.flightOrders[0].flightOrderDetail.length-1].arrCity;
                      item.depTime=getdate(item.flightOrders[0].flightOrderDetail[0].depTime);
                      item.backTime=getdate(item.flightOrders[item.flightOrders.length-1].flightOrderDetail[0].depTime);
                    }

                });
              }
            })
          },
          /**关闭弹框*/
          closePopFun(){
            this.popStatus=-1;
          },
          /**二次确认弹窗*/
          openPop(status,title,orderNumber){
            this.popStatus=status;
            this.popTitle=title;
            this.orderNumber=orderNumber;
          },
          /**弹框确定按钮*/
          subPopFun(){
            if(this.popStatus==1){ //退款申请
              refundApplication(this.orderNumber).then(data=>{
                if(data.returnCode==200){
                  this.popStatus=-1;
                  this.getOrderListInfo();
                }
              });
            }

          },
        },
        components:{
          popup,setLeftBar,userLogo
        },
        mounted(){
          var _this=this;
          if(['1','9','6'].indexOf(this.$route.params.orderStatus)!=-1){
            this.orderStatus=this.form.param.orderStatus=this.$route.params.orderStatus;
          }else {
            this.orderStatus=this.form.param.orderStatus='all';
          }
          this.showList=this.orderList;
          this.getOrderListInfo();
        },
        filters:{
        }
    }
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
@import "../me/mine.styl"
.content .ifram_wrap .c_right{
  min-height 400px
  background transparent
  ul{
    background #fff
    li{
      border 1px solid border_color
      .o_t{
        height 36px
        line-height 36px
        padding-left 20px
        background #f5f5f5
        font-size 12px
        color subheadColor
        .o_code{
          i{
            font-style normal
            color mainTitleColor
          }
        }
        .warning{
          color color
        }
      }
      .o_cell{
        width 100%
        height 114px
        padding 18px 20px
        box-sizing border-box
        align-items center
        .o_img{
          float left
          position relative
          display inline-block
          width 78px
          height 78px
          margin-right 12px
          background #e5e5e5
          overflow hidden
          img{
            position absolute
            width 150%
            min-height 100%
            -webkit-transform translateX(-50%)
            transform translate(-50%,-50%)
            left 50%
            top 50%
          }
        }
        .o_hotel{
          float left
          width 228px
          align-self flex-start
          font-size 14px
          h4{
            max-height 38px
            line-height 19px
            margin-top 10px
            margin-bottom 12px
            color mainTitleColor
            overflow hidden
          }
          p{
            color subheadColor
          }
        }
        .o_tip{
          float left
          width 80px
          padding-left 10px
          box-sizing border-box
          font-size 12px
          color mainTitleColor
        }
        .o_date{
          float left
          width 178px
          font-size 12px
          color mainTitleColor
          p:first-child{
            margin-bottom 16px
          }
        }
        .o_price{
          float left
          width 100px
          font-weight bold
          font-size 16px
          /*color listColor*/
        }
        .o_status{
          float left
          width 100px
          padding-left 15px
          box-sizing border-box
          font-size 14px
          /*color listColor*/
          em{
            font-style normal
          }
        }
        .o_operation{
          float left
          width 72px
          text-align center
          font-size 12px
          color contentColor
          .def_span{
            display block
            margin-bottom 10px
          }
          a{
            display block
            margin-bottom 10px
            border-radius 2px
            &.default-btn{
              height 26px
              line-height 27px
              margin-top 10px
              color #fff
            }
            &.refund-btn{
              height 26px
              line-height 27px
              margin-top 10px
            }
           /* &.border-btn{
              background transparent
              border 1px solid listColor
              color listColor
            }
            &.btn1:hover{
              background listColor
              color #fff
            }
            &.def_btn:hover{
              color listColor
            }
            &.graybtn{
              color subcontentColor
            }*/
          }
        }
      }
      .o-bottom{
        height 46px
        line-height 46px
        padding 0px 20px
        text-align right
        font-size 13px
      }
    }
  }
  .pagination{
    position relative
    width 100%
    margin-top 20px
    padding 20px 0
    background #ffffff
    text-align center
    .pagination-totalNum{
      position: absolute
      height: 32px
      line-height: 32px
      right: 20px
      bottom: 20px
    }
  }
}

.pagination ul{
  background transparent
}
</style>
