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

      <div class="container0">
        <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">
              <p class="pText">当前订单状态：等待买家付款</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="waitconfirm" v-if="orderInfo.canConfirm">
              <p class="pText">当前订单状态：宝贝已买下，买家已付款，等待卖家确认订单。</p>
              <el-button
                type="primary"
                size="mini"
                @click="confirmOrder"
                :msn="orderInfo.confirmTips"
                :orderid="orderInfo.orderId"
                v-show="!isAllrefund"
                class="confirmBtn"
              >确认订单</el-button>
              <div class="textP">
                <span cla>E淘 提醒</span>
                <p>1、如果无法发货，请及时与买家联系并说明情况</p>
                <p>2、买家申请退款后，需征得买家同意后再操作发货，否则买家有权拒收货物。</p>
                <!--<p>3、买家付款后超过交货期+担保时间仍未发货，系统将自动关闭订单并退款给买家 [{{userInfo.userName}}]</p>-->
                <!--<p v-if="orderInfo.showDelayInfo==1">4、买家付款后卖家超时发货，系统将按买家的付款时间自动开启订单扣款</p>-->
                <!--<p v-if="countdownText">-->
                  <!--{{orderInfo.showDelayInfo==1?5:4}}、-->
                  <!--<span>{{orderInfo.isDeliverTimeOut==1?'订单发货已超时：':'订单按时发货时间仅剩：'}}</span>-->
                  <!--<span :class="{'countdown':!isend,'countdownend':isend}" v-text="countdownText"></span>-->
                <!--</p>-->
              </div>
            </div>
            <!-- v-if="orderInfo.settleStatus ==1 && orderInfo.status == 1" -->
            <!-- @click="makepdf" -->
            <div class="wait_send" v-if="orderInfo.canDeliver">
              <p class="pText">当前订单状态：等待卖家发货。</p>
              <el-button
                type="primary"
                size="mini"
                @click="showSendDialog($event,orderInfo)"
                :msn="orderInfo.deliverTips"
                :orderid="orderInfo.orderId"
                :showDelayInfo="orderInfo.showDelayInfo"
                v-show="!isAllrefund"
              >发货</el-button>

              <div class="textP">
                <span>E淘 提醒</span>
                <p>1、如果无法发货，请及时与买家联系并说明情况</p>
                <p>2、买家申请退款后，需征得买家同意后再操作发货，否则买家有权拒收货物。</p>
                <p>3、买家付款后超过交货期+担保时间仍未发货，系统将自动关闭订单并退款给买家 [{{userInfo.userName}}]</p>
                <p v-if="orderInfo.showDelayInfo==1">4、买家付款后卖家超时发货，系统将按买家的付款时间自动开启订单扣款</p>
                <p v-if="countdownText">
                  {{orderInfo.showDelayInfo==1?5:4}}、
                  <span>{{orderInfo.isDeliverTimeOut==1?'订单发货已超时：':'订单按时发货时间仅剩：'}}</span>
                  <span :class="{'countdown':!isend,'countdownend':isend}" v-text="countdownText"></span>
                </p>
              </div>
            </div>
            <el-button type="primary" size="mini"
              v-if="orderInfo.settleStatus ==1 && orderInfo.status != 4"
              @click="makepdf" style="margin:10px 0;">打印发货单</el-button>
            <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>
            </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="orderInfo.details"
                :span-method="objectSpanMethod"
                :cell-class-name="tableRowClassName"
              >
                <el-table-column align="center" label="商品" :width="widthSizeObj.productWidth">
                  <template slot-scope="scope">
                    <div class="goodsInfo" @click="goProdetail(scope.row.productId)">
                      <div class="goodsimg">
                        <img
                          :src="scope.row.goodsImg + '?x-oss-process=image/resize,h_200,w_200'"
                          alt
                        />
                      </div>
                      <div>
                        <div class="goodstext">{{scope.row.goodsInfo}}</div>
                        <div>
                          <img v-if="scope.row.etaoProductTypeIcon" style="width:30px;" :src="scope.row.etaoProductTypeIcon" alt="">
                          <img v-else style="width:30px;" :src="scope.row.etaoProductVipIcon" alt="">
                        </div>
                      </div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column label="交易状态" align="center" :width="widthSizeObj.receiverWidth">
                  <template>
                    <span>{{orderInfo.orderStatusDesc}}</span>
                  </template>
                </el-table-column>
                <el-table-column label="结算单价(元)" align="center" :width="widthSizeObj.numberWidth">
                  <template slot-scope="scope">
                    <span>{{scope.row.settlePrice}}</span>
                    <el-tooltip class="item" effect="light" placement="top-start">
                      <div slot="content">
                        <div
                          v-for="(item,i) in scope.row.labels"
                          :key="i"
                        >{{scope.row.labels[i]}}</div>
                      </div>
                      <span class="el-icon-question"></span>
                    </el-tooltip>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="count"
                  label="数量"
                  align="center"
                  :width="widthSizeObj.numberWidth"
                ></el-table-column>

                <el-table-column
                  prop="totalSettlePrice"
                  label="总价(元)"
                  align="center"
                  :width="widthSizeObj.numberWidth"
                ></el-table-column>
                <el-table-column prop="goodsRemark" label="备注" align="center" width></el-table-column>
                <el-table-column label="退款信息" align="center" width>
                  <template slot-scope="scope">
                    <div v-if="scope.row.hasRefund">
                      <span
                        class="redColor el-icon-time"
                        @click="goRefund(scope.row.refundId,scope.row.onlyShowRefundDesc)"
                      >{{scope.row.refundStatusDesc}}</span>
                    </div>
                  </template>
                </el-table-column>
              </el-table>

              <div class="order_cost">
                实收款:
                <span>{{orderInfo.totalSettlePrice}}</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.payTypeDesc}}
              </p>
              <p class="bottom_info">
                <label for>交易流水号：</label>
                {{orderInfo.tradeNo}}
              </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/order/flag'" @returnData="returnData"></signqizi> -->
      </div>

      <!-- <print-order
        :orderInfo="orderInfo"
        :big_arrs="big_arrs"
        :printOrderTitle="printOrderTitle"
        ref="pOrder"
      ></print-order> -->
    </section>
    <orderSendDialog :objProps="objProps" @resData="cancelForm"></orderSendDialog>
  </div>
</template>
<script>
import { mapState,mapMutations } from 'vuex'
import qs from "qs";
import orderSendDialog from "@/components/common/orderSendDialog";

import printOrder from "@/pages/order/component/PrintOrder";
// import signqizi from "@/components/page/order/component/Signqizi";
import { _countTimer, getOrderDetailRowColum, osmethod,_saveStorage } from "@/utils/utils";

export default {
  name:'frmOrderDetail',
  data() {
    return {
      big_arrs: [],
      pageurl: [],
      printOrderTitle: require("@/assets/img/top.png"),
      widthSizeObj: "", // 宽度配置
      breadcrumb: "",
      isAllrefund: "",
      orderInfo: {},
      userInfo: "",
      isend: true,
      countdownText: "",
      objProps: {
        dialogFormVisible: false,
        orderid: "",
        url: "/order/deliver",
        showDelayInfo:0
      },
      timer: "",
      orderIndexArr: [],
      pageIndex: "",
      pageTrCount: 5
    };
  },
  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;
    }
  },
  filters: {
    orderCounTotal: function(arr) {
      var sum = 0;
      for (var i = 0; i < arr.length; i++) {
        sum += arr[i]["count"];
      }
      return sum;
    }
  },
  components: {
    orderSendDialog,
    printOrder,
  },
  mounted(){
    this.widthSizeObj = this.widthSize;
      this.getOrderDetail();
  },
  methods: {
         ...mapMutations("navBar",['getOrderTimeOutTip','getNewOrder']),
    returnData(val) {
      this.orderInfo.flag = val;
    },
    getOrderDetail() {
      let id = this.$route.query.orderid;
      this.isAllrefund = parseInt(this.$route.query.isAllrefund);
      if(!id){ return false}
      this.$axios.get("/order/detail/" + id).then(res => {
        if (res.data.code == 200) {
          this.orderInfo = res.data.data;
          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===1){
          //   cur_tiem = ~~res.data.data.obligationCountdown; //待付款
          // }else if(this.restatus===2){
          //   cur_tiem = ~~res.data.data.deliverCountdown; //待确认，待发货
          // }else if(this.restatus===3){
          //   cur_tiem = ~~res.data.data.confirmCountdown; //待收货
          // }
          if(res.data.data.isDeliverTimeOut===1){
            cur_tiem = ~~res.data.data.deliverTimeOutCountdown; //超时
          }else if(res.data.data.isDeliverTimeOut===0){
            cur_tiem = ~~res.data.data.deliverCountdown; //未超时
          }

          // countTimer(this,cur_tiem);
          _countTimer({
              el:this,
              label:'countdownText',
              time:cur_tiem,
              type:1,
              sendState:'isend',
              tips:this.countdownText
            })
          this.orderIndexArr = getOrderDetailRowColum(res.data.data.details);

          var dataDetails = res.data.data.details;
          // var big_arrs = [];
          // var min_arrs = [];
          // for (var i = 0; i < dataDetails.length; i++) {
          //   min_arrs.push(dataDetails[i]);
          //   if ((i + 1) % 5 == 0) {
          //     big_arrs.push(min_arrs);
          //     min_arrs = [];
          //   }
          // }
          // if (min_arrs.length > 0) {
          //   big_arrs.push(min_arrs);
          // }
          // this.big_arrs = big_arrs;
         this.getNewOrder()
            this.$nextTick(() => {
            // 打开打印页
            _saveStorage("printData",{
              orderData:this.orderInfo,
              printOrderTitle:this.printOrderTitle,
            })
          })
        }else{
          this.$message.error(res.data.message)
        }
      });
    },

    //合并行
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (this.orderIndexArr.length > 0) {
        if (columnIndex === 1) {
          return osmethod(this.orderIndexArr, rowIndex);
        }
      }
    },

    //默认行的样式
    tableRowClassName({ row, rowIndex }) {
      return "hovered-row";
    },
    goProdetail(productId) {
      // var productId = productId;
      // if (productId) {
      //   this.$router.push({
      //     path: "/product/etao/detail",
      //     query: {
      //       skuId: productId
      //     }
      //   });
      // }
    },
    goRefund(refundId,onlyShowRefundDesc=0) {
      if(onlyShowRefundDesc==1){
        return
      }
      this.$router.push({
        path: "/order/refundProcessing",
        query: { refundId: refundId }
      });
    },

    //订单中有商品退款中状态时，多一层提示框。
    isConfirmRefund() {
      let idxList = this.orderInfo;
      let len = idxList.details.length;
      let arr = [];
      for (let i = 0; i < len; i++) {
        if (
          idxList.details[i].refund != null &&
          idxList.details[i].refund.status == 1 &&
          idxList.details[i].refund.auditStatus !== 1
        ) {
          arr.push(i);
        }
        return arr;
      }
    },

    //确认订单
    confirmOrder(e) {
      // let idx = e.currentTarget.getAttribute("idx");
      let orderid = e.currentTarget.getAttribute("orderid");
      let msn = e.currentTarget.getAttribute("msn");
      let refundlen = this.isConfirmRefund().length;
      let data = { orderId: orderid };
      // let dataParam = qs.stringify(data);
      if (refundlen > 0) {
        this.$confirm(msn, "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            this.confirmFun(data);
          })
          .catch(() => {});
      } else {
        this.confirmFun(data);
      }
    },
    confirmFun(data) {
      this.$confirm("确认订单?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$axios
            .post("/order/confirm", data)
            .then(res => {
              if (res.data.code == 200) {
                this.$message.success("已确认订单");
                this.getOrderDetail();
                this.getOrderTimeOutTip()
              } else {
                this.$message.error(res.data.message);
              }
            })
            .catch(res => {});
        })
        .catch(() => {});
    },
    // 发货
    showSendDialog(e,item) {
      //判断是否有退货商品
      let hasReturnGoods = false;
      let temRefundId = "";
      if (item.details.length > 0) {
        let detaiList = item.details;
        for (let i = 0; i < detaiList.length; i++) {
          if (detaiList[i].refundStatusDesc == "买家申请退款中") {
            hasReturnGoods = true;
            temRefundId = detaiList[i].refundId;
            break;
          }
        }
      }
        let showDelayInfo = e.currentTarget.getAttribute('showDelayInfo')
      let orderid = e.currentTarget.getAttribute("orderid");
      let msn = e.currentTarget.getAttribute("msn");
      //  let idx = e.currentTarget.getAttribute("idx");
      let refundlen = this.isConfirmRefund().length;
      if (hasReturnGoods) {
        this.$confirm("该订单存在买家申请退款的商品，请处理完退款后再确认发货", "提示", {
          confirmButtonText: "去处理退款",
          cancelButtonText: "稍等一会",
          type: "warning",
        }).then(() => {
          this.$router.push({path:'/order/refundProcessing',query:{refundId:temRefundId}})
        }).catch(() => {
        });
      }else {
        this.objProps.showDelayInfo = showDelayInfo;
        this.objProps.orderid = orderid;
        this.objProps.dialogFormVisible = true;
      }
      // if (refundlen > 0) {
      //   this.$confirm(msn,"提示",
      //     {
      //       confirmButtonText: "确定",
      //       cancelButtonText: "取消",
      //       type: "warning"
      //     }
      //   )
      //     .then(() => {
      //       this.objProps.showDelayInfo = showDelayInfo;
      //       this.objProps.orderid = orderid;
      //       this.objProps.dialogFormVisible = true;
      //     })
      //     .catch(() => {});
      // } else {
      //   this.objProps.showDelayInfo =showDelayInfo;
      //   this.objProps.orderid = orderid;
      //   this.objProps.dialogFormVisible = true;
      // }
    },
    cancelForm(res) {
      // 接收子组件参数并赋值
      this.objProps.dialogFormVisible = res.state;
      this.getOrderDetail()
    },
    //打印发货单
    makepdf() {
      // this.$refs.pOrder.makepdf();
      window.open('/printorder')
    }
  },

  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer); //在Vue实例销毁前，清除定时器
    }
    this.$bus.$off('change');
  }
};
</script>
<style lang="scss" scoped>
@import "@/assets/styles/order.scss";
.main0{
  width: 1010px;
}
.container0 {
  padding-bottom: 30px;
}

</style>
