<template>
    <div class="container">
      <section class="order-container">
        <div class="order-head">
          <ul class="flex-box fixedTop">
            <li @click="orderFun('all')"><a :class="{active:!orderStatus || orderStatus=='all'}" >全部</a></li>
            <li @click="orderFun(1)"><a :class="{active:orderStatus=='1'}">待出票</a></li>
            <li @click="orderFun(9)"><a :class="{active:orderStatus=='9'}">待出行</a></li>
            <li @click="orderFun(6)"><a :class="{active:orderStatus=='6'}" >退款单</a></li>
          </ul>
        </div>
        <div class="order-list" v-infinite-scroll="loadMore"
             infinite-scroll-disabled="orderLoading"
             infinite-scroll-distance="10">
          <!--:class="{'exprie-order':index==1}"-->
          <div class="order-cell"  v-for="(o,index) in orderList">
              <div class="order-code"><span>下单时间：{{o.createTime | formatDate}}</span></div>
              <div class="order-box">
                <div @click="toDetail(o.orderNumber)">
                  <h3>
                    <b class="hotelName">{{o.proName}}</b>
                    <p>
                      <font class="bold">成人</font>×{{o.adultNumber}}
                      <span v-show="o.childNumber"><font class="bold">儿童</font>×{{o.childNumber}}</span>
                      <i class="price listColor float-r">￥{{o.orderActualPrice.toFixed(2)}}</i>
                    </p>
                  </h3>
                  <p class="p1" v-if="o.orderType=='OW_PACKAGE'">出行时间：{{o.flightOrders[0].flightOrderDetail[0].depTime| formatDate}}</p>
                  <p class="p1" v-else>出行时间：{{o.flightOrders[0].flightOrderDetail[0].depTime| formatDate}} 至 {{o.flightOrders[1].flightOrderDetail[0].depTime | formatDate}}</p>
                  <span class="order-tip h_tip">机＋酒</span>
                </div>
                <div class="btn-wrap">
                  <span class="float-l sColor" v-show="o.isPast==-1"><em v-show="o.orderStatus==2">已出行</em><em v-show="o.orderStatus!=2">{{o.orderStatus | statusText}}</em></span>
                  <span class="float-l" :class="{mColor:o.orderStatus==10}" v-show="o.isPast!=-1">{{o.orderStatus | statusText}}</span>
                  <a class="border-btn refund-btn" @click="openPop(1,'申请退款',o.orderNumber)" v-show="(o.orderStatus==1 || o.orderStatus==2) && o.isPast!=-1 && o.orderType=='STATIC_PACKAGE'">申请退款</a>
                  <a href="javascript:void(0)" v-show="o.orderStatus==1 && o.isPast!=-1" class="def_btn">出票中</a>
                  <!--<a href="javascript:void(0)" class="border-btn btn1" v-show="o.orderStatus==3 || o.orderStatus==4 || o.orderStatus==7" @click="openPop(2,'删除订单',o.orderNumber)">删除订单</a>-->
                  <router-link class="def_btn" :to="'/wx/orderDetail/'+o.orderNumber">查看订单</router-link>
                </div>
              </div>
          </div>

          <p class="page-infinite-loading" v-show="orderLoading">
            <i class="iconfont icon-loading"></i>
            加载中...
          </p>
          <p class="page-infinite-loading noMore" v-show="isLast && totalNum>0 && !orderLoading">没有更多数据了</p>
        </div>

        <div class="no-data" v-show="totalNum<1 && !orderLoading">
          <img src="../../assets/images/nodata.png" alt="" >
          <p>还没有订单哦，快去开启你的旅程吧！</p>
        </div>
      </section>
    </div>
</template>
<script>
    export default {
        name: '',
        data () {
            return {
              orderLoading:false,
              popTitle:'取消订单',
              popStatus:-1, //-1关闭，0取消订单，1退款，2删除
              orderList:[],
              orderNumber:'',
              orderStatus:this.$route.params.orderStatus,
              form:{
                page:0,
                size:5,
                param:{
                  orderStatus:this.$route.params.orderStatus  //订单状态  0：待支付 1：已支付 2：已出票 3：出票失败 4：已取消 5：退款处理中 6：退款成功 7：退款失败  8：已删除
                }
              },
              isLast:false,
              totalNum:0
            }
        },
        methods:{
          loadMore() {
            if(!this.isLast){
              this.form.page++;
              this.getOrderListInfo();
            }
          },
          /**二次确认弹窗*/
          openPop(status,title,orderNumber){
            this.popStatus=status;
            this.popTitle=title;
            this.orderNumber=orderNumber;
            MessageBox.confirm('确定'+title+'?').then(action => {
                  this.subPopFun();
            },'删除订单');
          },
          toDetail(orderNumber){
              this.$router.push('/wx/orderDetail/'+orderNumber);
          },
          /**弹框确定按钮*/
          subPopFun(){
            if(this.popStatus==1){ //退款申请
              refundApplication(this.orderNumber).then(data=>{
                if(data.returnCode==200){

                  this.orderFun('all');
                }
              });
            }
          },
          /**订单列表*/
          orderFun(status){
            this.orderStatus=status;
            this.form.param.orderStatus=status+'';
            this.form.page=1;
            this.isLast=false;
            this.orderList=[];
            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;
            }
            getPackageOrdersList(this.form).then(data=>{
              this.orderLoading = false;
              if(data.returnCode==200){
                data.data.list.forEach(item=>{
                  item.isPast=(new Date().getTime()-new Date(formatT(item.flightOrders[0].flightOrderDetail[0].depTime)).getTime())>0 ? -1 : 0  ; //-1过期，0没过期
                  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;
                    }
                  }

                  _this.orderList.push(item);
                });
                this.totalNum=data.data.total;
                if(data.data.pageNum*data.data.pageSize>=data.data.total){
                  this.isLast=true;
                }
              }else {
                this.isLast=true;
              }
            })
          }
        },
        components:{
        },
        mounted(){
          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';
          }
        },
        filters:{
        }
    }
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
@import "order.styl"
</style>
