<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.settleStatus == 0 &&  orderInfo.status !=4" >当前订单状态：等待买家付款。</div>
                    <!-- 待确认 v-if="orderInfo.settleStatus ==1 && orderInfo.status == 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.settleStatus ==1 && orderInfo.status == 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.settleStatus ==1 && orderInfo.status == 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.settleStatus ==1 && orderInfo.status == 3">
                        <p>当前订单状态：交易已完成。</p>
                        <p>系统提醒您：交易已成功，如果买家提出售后要求，请积极与买家协商，做好售后服务。</p>
                    </div>
                    <div class="order_close" v-if="orderInfo.status == 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
                            label="商品"
                            align="center"
                            :width="widthSizeObj.productWidth"
                            >
                            <template slot-scope="scope">
                              <div class="goodsInfoImg">
                                <span class="spanimg" v-for="(item,i) in scope.row.imgs" :key="i">
                                   <image-alert :image="item" height="100"></image-alert>
                                </span>
                              </div>
                            </template>
                        </el-table-column>
                        <el-table-column
                            label="交易状态"
                            align="center"
                            :width="widthSizeObj.dealWidth"
                            prop="orderStatusDesc"
                            >
                        </el-table-column>
                        <el-table-column
                            label="结算单价(元)"
                            :width="widthSizeObj.numberWidth"
                            align="center"
                            prop="orderMoney"
                            >
                        </el-table-column>
                        <el-table-column
                            label="数量"
                            :width="widthSizeObj.numberWidth"
                            align="center"
                            prop="deliverQty"
                            >
                        </el-table-column>

                        <el-table-column
                            label="备注"
                            align="center"
                            width=""
                            prop="orderStatusDesc"
                            >
                        </el-table-column>
                        <el-table-column
                            label="实付款"
                            :width="widthSizeObj.numberWidth"
                            align="center"
                            prop="orderMoney"
                            >
                        </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">

                    <p>经销商(市代)：{{userInfo.userName}}</p>
                    <p>联系人：{{userInfo.contacts}}</p>
                    <p>联系电话：{{userInfo.userPhone}}</p>
                    <p>联系地址：{{userInfo.userAddress}}</p>
                </div>
            </div>
        </div>
       <!-- 标记 -->
       <!-- <signqizi :orderInfo="orderInfo"
       :orderSource="'/etao/scanorder/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 { _countTimer, getOrderDetailRowColum, osmethod } from "@/utils/utils";
// import signqizi from '@/components/page/order/component/Signqizi'


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

        }
    },
    computed:{
        restatus:function(){
            let act;
            if(this.orderInfo.settleStatus == 1 && this.orderInfo.status == 0){
                act = 2
            }else if(this.orderInfo.settleStatus == 1 && this.orderInfo.status == 1){
                act = 2
            }else if(this.orderInfo.settleStatus == 1 && this.orderInfo.status == 2){
                act = 3
            }else if(this.orderInfo.settleStatus == 1 && this.orderInfo.status == 3){
                act = 4
            }else{
                act =1
            }
            return act
        }
    },
    components:{
        orderSendDialog,
        imageAlert,
        // comBreadcrumb,signqizi
    },
    mounted(){
      this.widthSizeObj = this.widthSize;
           this.breadcrumb = this.$route.meta.breadcrumb;
          this.getOrderDetail();
    },
    methods:{
            returnData(val){
      this.orderInfo.flag = val;
    },
        getOrderDetail() {
            let id = this.$route.query.orderid;
            if(!id){ return false}
            this.$axios.get('/scanorder/detailByorderId',{
                params:{
                    orderId:id
                }
            }).then((res) => {
              if(res.data.code==200){
                 this.orderInfo = res.data.data;
                 this.userInfo = res.data.data.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;

              }

            });
        },

        //确认订单
        confirmOrder(orderid){
        let data = {"orderId":orderid};
        this.$confirm('确认订单?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$axios.post('/scanorder/confirm',data).then((res)=>{
            if(res.data.code == 200){
              this.$message.success(res.data.message);
                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';
.main0{
  width: 1010px;
}
.goodsInfoImg .spanimg{display: inline-block;margin: 0 6px;}
.container{padding-bottom: 30px;}


</style>
