<template>
    <div>
        <section class="main0">
  

        <div class="p_all_20">
            <div class="stepsBox">
                <!-- v-if="orderInfo.status != 4" -->
                <el-steps :active="restatus" finish-status="success" class="elstepsDiv"  v-if="orderInfo.status != 4">
                <el-step title="买家下单"></el-step>
                <el-step title="买家付款"></el-step>
                <el-step title="发货"></el-step>
                <el-step title="买家确认收货"></el-step>
                </el-steps>
                <div class="tipsDiv">
                    <div class="waitpay" v-if="orderInfo.payStatus == 0 &&  orderInfo.orderStatus !=4" >当前订单状态：等待买家付款。</div>
                    <!-- 待确认 v-if="orderInfo.payStatus ==1 && orderInfo.orderStatus == 0" -->
                    <div class="waitconfirm" v-if="orderInfo.canConfirm">
                        <p class="pText">当前订单状态：宝贝已买下，买家已付款，等待卖家确认订单。</p>
                        <el-button type="primary" size="mini" @click="confirmOrder" :orderid="orderInfo.orderId" class="confirmBtn">确认订单</el-button>
                        <div class="textP">
                             <span>E淘 提醒</span>
                            <p> 1、如果无法发货，请及时与买家联系并说明情况</p>
                            <p>2、买家申请退款后，需征得买家同意后再操作发货，否则买家有权拒收货物。</p>
                            <p>3、买家付款后超过交货期+担保时间仍未发货，系统将自动关闭订单并退款给买家 [{{userInfo.userName}}]</p>
                            <!-- <p>4、<span :class="{'countdown':!isend,'countdownend':isend}" v-text="countdownText"></span></p> -->
                        </div>
                    </div>
                    <!-- v-if="orderInfo.payStatus ==1 && orderInfo.orderStatus == 1" -->
                    <div class="wait_send" v-if="orderInfo.canDeliver" >
                        <p class="pText">当前订单状态：等待卖家发货。</p>
                        <el-button type="primary" size="mini"
                         @click="showSendDialog" :orderid="orderInfo.orderId">发货</el-button>
                        <div class="textP">
                             <span>E淘 提醒</span>
                            <p> 1、如果无法发货，请及时与买家联系并说明情况</p>
                            <p>2、买家申请退款后，需征得买家同意后再操作发货，否则买家有权拒收货物。</p>
                            <p>3、买家付款后超过交货期+担保时间仍未发货，系统将自动关闭订单并退款给买家 [{{userInfo.userName}}]</p>
                            <!-- <p>4、<span :class="{'countdown':!isend,'countdownend':isend}" v-text="countdownText"></span></p> -->
                        </div>
                    </div>
                    <div class="order_havesend" v-if="orderInfo.payStatus ==1 && orderInfo.orderStatus == 2">
                        <p>当前订单状态：卖家已发货，等待买家确认收货。</p>
                        <div class="textP">
                             <span>E淘 提醒</span>
                            <p> 1、如果无法发货，请及时与买家联系并说明情况</p>
                            <p>2、买家申请退款后，需征得买家同意后再操作发货，否则买家有权拒收货物。</p>
                            <p>3、买家付款后超过交货期+担保时间仍未发货，系统将自动关闭订单并退款给买家 [{{userInfo.userName}}]</p>
                            <!-- <p>4、<span :class="{'countdown':!isend,'countdownend':isend}" v-text="countdownText"></span></p> -->
                        </div>
                    </div>
                    <div class="order_done" v-if="orderInfo.payStatus ==1 && orderInfo.orderStatus == 3">
                        <p>当前订单状态：交易已完成。</p>
                        <p>系统提醒您：交易已成功，如果买家提出售后要求，请积极与买家协商，做好售后服务。</p>
                    </div>
                    <div class="order_close" v-if="orderInfo.orderStatus == 4">
                        <p>当前订单状态：交易取消</p>
                        <p>取消原因：订单超时关闭</p>
                    </div>
                </div>
            </div>
            <div class="order_detail_box">
             <span class="title_box order_transport_btn">物流信息</span>
            <div class="item_box">
                <div class="content_box order_transport_box" id="Div2">
                    <div class="titleDiv">收货信息</div>
                    <p>收货人: {{orderInfo.receiver}}</p>
                    <p>收货人电话: {{orderInfo.phone}}</p>
                    <p>收货地址: {{orderInfo.address}}</p>
                </div>
                <hr>
                <div class="logistics">
                    <div class="left">
                        <div class="content_box order_transport_box" id="Div1">
                            <div class="titleDiv">经销商（市代）要求发送物流</div>
                            <p>物流公司名称：{{orderInfo.logisticsCompanyName}}</p>
                            <p>物流公司电话：{{orderInfo.logisticsMobilePhone}}</p>
                            <p>物流公司地址：{{orderInfo.logisticsAddress}}</p>
                            <p>所在地区：{{orderInfo.logisticsArea}}</p>
                            <p>物流备注：{{orderInfo.logisticsRemarks}}</p>
                        </div>
                    </div>
                    <div class="right">
                        <div class="content_box order_transport_box" id="Div3">
                            <div class="titleDiv">供货商实发物流</div>
                            <p>物流公司：{{orderInfo.logisticsName}}</p>
                            <p>物流单号：{{orderInfo.invoiceNo}}</p>
                            <p>发货件数：{{orderInfo.deliverQty}}</p>
                        </div>
                    </div>
                </div>
             </div>
          </div>
          <div class="order_detail_box">
            <span class="title_box order_info_btn">订单信息</span>
            <div class="item_box">
                <div class="content_box order_info_box " id="order_info">

                    <el-table style="width: 100%"
                    border
                    :data="orderInfoTable"
                    >
                        <el-table-column
                            align="center"
                            label="采购单"
                            :width="widthSizeObj.purchaseWidth"
                            >
                            <template slot-scope="scope">
                              <div class="goodsInfoImg">
                                <span class="spanimg" v-for="(item,i) in scope.row.purchasePics" :key="i">
                                   <image-alert :image="item" height="50"></image-alert>
                                </span>
                              </div>
                            </template>
                          </el-table-column>
                          <el-table-column
                            align="center"
                            label="收银小票"
                            :width="widthSizeObj.collectWidth"
                            >
                            <template slot-scope="scope">
                              <div class="goodsInfoImg">
                                <span class="spanimg" v-for="(item,i) in scope.row.receiptPics" :key="i">
                                   <image-alert :image="item" height="50"></image-alert>
                                </span>
                              </div>
                            </template>
                          </el-table-column>
                          <el-table-column
                          prop="sGuide"
                        label="导购"
                        align="center"
                        :width="widthSizeObj.guideWidth">
                      </el-table-column>
                      <el-table-column
                          prop="receiver"
                        label="买家"
                        align="center"
                        :width="widthSizeObj.receiverWidth">
                      </el-table-column>
                          <el-table-column
                          prop="purchaseMoney"
                        label="金额(元)"
                        align="center"
                        :width="widthSizeObj.numberWidth">
                      </el-table-column>
                      <el-table-column
                        label="抵扣(元)"
                        align="center"
                        :width="widthSizeObj.deductionWidth">
                        <template slot-scope="scope">
                          <div v-if="scope.row.purchaseMoney">采购金抵扣额:{{scope.row.purchaseMoney}}</div>
                          <div v-if="scope.row.advanceMoney">预付款抵扣额:{{scope.row.advanceMoney}}</div>
                          <span v-if="!scope.row.purchaseMoney && !scope.row.advanceMoney">0</span>
                        </template>
                      </el-table-column>
                     <el-table-column
                        label="交易状态"
                        align="center"
                        :width="widthSizeObj.dealWidth"
                        prop="orderStatusDesc"
                        show-overflow-tooltip>
                      </el-table-column>
                      <el-table-column
                        prop="realPaidMoney"
                        label="实付款(元)"
                        align="center"
                        :width="widthSizeObj.numberWidth"
                        >
                      </el-table-column>

                    </el-table>

                    <div class="order_cost">实收款:<span>{{orderInfo.orderMoney}}</span>元</div>
                    <p class="bottom_info">
                      <label for="">订单备注：</label>{{orderInfo.remark}}

                    </p>
                    <p class="bottom_info">
                        <label for="">订单编号：</label>{{orderInfo.orderCode}}
                    </p>
                    <p class="bottom_info">
                        <label for="">下单时间：</label>{{orderInfo.addDate}}
                    </p>
                     <p class="bottom_info">
                        <label for="">付款时间：</label>{{orderInfo.onlinePayDate}}
                    </p>
                      <p class="bottom_info">
                        <label for="">确认订单时间：</label>{{orderInfo.confirmDate}}

                    </p>
                     <p class="bottom_info">
                        <label for="">发货时间：</label>{{orderInfo.deliveryDate}}

                    </p>
                     <p class="bottom_info">
                        <label for="">确认收货时间：</label>{{orderInfo.completionDate}}

                    </p>
                </div>

            </div>
        </div>
        <div class="order_detail_box">
             <span class="title_box order_transport_btn">经销商（市代）信息</span>
            <div class="item_box">
                <div class="content_box order_transport_box" id="Div4" v-if="userInfo">

                    <p>经销商(市代)：{{userInfo.userName}}</p>
                    <p>联系人：{{userInfo.contacts}}</p>
                    <p>联系电话：{{userInfo.userPhone}}</p>
                    <p>联系地址：{{userInfo.userAddress}}</p>
                </div>
            </div>
        </div>
       <!-- 标记 -->
       <!-- <signqizi :orderInfo="orderInfo"
       :orderSource="'/etao/offlineorder/flag'"
       @returnData="returnData"
       ></signqizi> -->
        </div>
        </section>
  <orderSendDialog :objProps="objProps" @resData="cancelForm"></orderSendDialog>
    </div>
</template>
<script>
import qs from 'qs'
import orderSendDialog from '@/components/common/orderSendDialog.vue'
import imageAlert from "@/components/common/imageAlert"
// import signqizi from '@/components/page/order/component/Signqizi'
import { _countTimer} from "@/utils/utils";

export default {
  name:'frmOrderDetailBrand',
    data(){
        return{
            widthSizeObj:'',
            breadcrumb:'',
            orderInfo:{},
            userInfo:'',
            isend:true,
            countdownText:'',
            objProps:{
              dialogFormVisible:false,
              orderid:'',
              url:'/ulineorder/deliver',
            },
            timer:'',
            orderInfoTable:[]

        }
    },
    computed:{
        restatus:function(){
            let act;
            if(this.orderInfo.payStatus == 1 && this.orderInfo.orderStatus == 0){
                act = 2
            }else if(this.orderInfo.payStatus == 1 && this.orderInfo.orderStatus == 1){
                act = 2
            }else if(this.orderInfo.payStatus == 1 && this.orderInfo.orderStatus == 2){
                act = 3
            }else if(this.orderInfo.payStatus == 1 && this.orderInfo.orderStatus == 3){
                act = 4
            }else{
                act =1
            }
            return act
        }
    },
    components:{
        orderSendDialog,
        imageAlert,
 
    },
    mounted(){
        this.widthSizeObj = this.widthSize;
      this.$nextTick(function(){
           this.breadcrumb = this.$route.meta.breadcrumb;

          this.getOrderDetail();
      })
      // this.$bus.$on('change', ()=> {
      //      this.$nextTick(function(){
      //           this.getOrderDetail();

      //       })
      //   })
    },
    methods:{
            returnData(val){
      this.orderInfo.flag = val;
    },
        getOrderDetail() {
            let id = this.$route.query.orderid;
            if(!id){ return false}
            this.$axios.get('/ulineorder/detail/'+ id,).then((res) => {
              if(res.data.code==200){
                 this.orderInfo = res.data.data;
                 if(res.data.data.userInfo){
                    this.userInfo = res.data.data.userInfo;
                 }
                  this.orderInfo.flag = !res.data.data.flag?res.data.data.flag =1:res.data.data.flag;
               
                  let cur_tiem = 0;
                  if(this.restatus===2){
                    cur_tiem = ~~res.data.data.deliverCountdown; //待确认，待发货
                  }else if(this.restatus===3){
                    cur_tiem = ~~res.data.data.confirmCountdown; //待收货
                  }
                // _countTimer(this,cur_tiem);
                _countTimer({
                  el:this,
                  label:'countdownText',
                  time:cur_tiem,
                  type:1,
                  sendState:'isend',
                  tips:this.countdownText
                })
                let orderTable = [];
                orderTable.push(res.data.data);
                this.orderInfoTable = orderTable;


              }else{
                  this.$message.error(res.data.message);
              }

            });
        },

        //确认订单
        confirmOrder(orderid){
        let data = {"orderId":orderid};
        // let dataParam = qs.stringify(data);
        this.$confirm('确认订单?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$axios.post('/ulineorder/confirm',data).then((res)=>{
            if(res.data.code == 200){
              this.$message.success("已确认订单");
                this.getOrderDetail();
            }else{
               this.$message.error(res.data.message);
            }
          }).catch((res)=>{});

        }).catch(() => {
        });
      },
     //确认发货
      showSendDialog(e){
         let orderid = e.currentTarget.getAttribute("orderid");
         this.objProps.orderid = orderid;
         this.objProps.dialogFormVisible=true;
      },
      cancelForm(res){
          this.objProps.dialogFormVisible = res.state;
           this.getOrderDetail()
        },
    },

    beforeDestroy:function(){
        if(this.timer){
            clearInterval(this.timer);  //在Vue实例销毁前，清除定时器
        }
     }

}
</script>
<style lang="scss" scoped>
@import '@/assets/styles/order.scss';
.goodsInfoImg .spanimg{display: inline-block;margin: 0 6px;}
.container{padding-bottom: 30px;}
.pText{margin-bottom: 10px;}
.main0{
  width: 1010px;
}

</style>
