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

      <div class="container0">
  
        <div class="order_detail_box" style="margin-top:0;">
          <span class="title_box order_info_btn">合同信息</span>
          <div class="item_box">
            <div class="content_box order_info_box" id="order_info">
              <el-table
                      tooltip-effect="dark"
                      style="width: 100%"
                      :data="orderInfoArr"
                   
                      border
                      >
                          <el-table-column
                            align="center"
                            label="合同"
                            :width="260"
                            >
                            <template slot-scope="scope">
                              <div class="goodsInfoImg">
                                <span class="spanimg" style="display:inline-block;" v-for="(item,i) in scope.row.contracts" :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" style="display:inline-block;"  v-for="(item,i) in scope.row.receipts" :key="i">
                                   <image-alert :image="item" height="50"></image-alert>
                                </span>
                              </div>
                            </template>
                          </el-table-column>
                                 <el-table-column
                          prop="userName"
                        label="签约经销商"
                        align="center"
                        :width="widthSizeObj.guideWidth">
                      </el-table-column>
                             <el-table-column
                          prop="cityUserName"
                        label="归属市代"
                        align="center"
                        :width="widthSizeObj.guideWidth">
                        <template slot-scope="scope" >
                          <span>{{userInfo?userInfo.cityUserName:''}}</span>
                        </template>
                      </el-table-column>
                          <el-table-column
                          prop="sGuide"
                        label="导购"
                        align="center"
                        :width="widthSizeObj.guideWidth">
                      </el-table-column>
>
                      <el-table-column
                        prop="orderMoney"
                        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">
                        <template slot-scope="scope">
                          <div>{{scope.row.orderStatusDesc}}</div>
                          <!-- <div><span class="spanMright redColor" @click="goOrderDetail(scope.row.orderId)">详情</span></div> -->

                        </template>
                      </el-table-column>
                      <el-table-column
                        prop="payMoney"
                        label="实付款(元)"
                        align="center"
                        :width="widthSizeObj.numberWidth"
                        >
                      </el-table-column>



                </el-table>
             

               
            

              <div class="order_cost">
                实收款:
                <span>{{orderInfo.payMoney}}</span>元
              </div>
              
              <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.remark}}
              </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>
               <p>归属市代：{{userInfo.cityUserName}}</p>
                <p>市代联系电话：{{userInfo.cityUserPhone}}</p>
            </div>
          </div>
        </div>
       
      </div>

    </section>
  
  </div>
</template>
<script>
import qs from "qs";

import { _countTimer } from "@/utils/utils";
import imageAlert from "@/components/common/imageAlert"
export default {
  name:'frmOrderDetailAshop',
  data() {
    return {
      big_arrs: [],
      pageurl: [],
      widthSizeObj: "", // 宽度配置
      breadcrumb: "",
      isAllrefund: "",
      orderInfo: {},
      orderInfoArr:[],
      userInfo: "",
      isend: true,
      countdownText: "倒计时00天00小时00分钟00秒",
      objProps: {
        dialogFormVisible: false,
        orderid: "",
        url: "/order/deliver"
      },
      timer: "",
      orderIndexArr: [],
      pageIndex: "",
      pageTrCount: 5
    };
  },
  computed: {
   
  },
  filters: {
    orderCounTotal: function(arr) {
      var sum = 0;
      for (var i = 0; i < arr.length; i++) {
        sum += arr[i]["count"];
      }
      return sum;
    }
  },
  components: {
 
    imageAlert
  },
  mounted(){
    this.widthSizeObj = this.widthSize;
    this.getOrderDetail();
  },
  methods: {
    returnData(val) {
      this.orderInfo.flag = val;
    },
    getOrderDetail() {
      let id = this.$route.query.orderid;
      this.isAllrefund = this.$route.query.isAllrefund;
      if(!id){ return false}
      this.$axios.get("/astoreorder/detail/" + id).then(res => {
        if (res.data.code == 200) {
          this.orderInfo = res.data.data;
          this.orderInfoArr.push(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 = ~~res.data.data.deliverCountdown;
    
          // countTimer(this,cur_tiem);
          // _countTimer({
          //     el:this,
          //     label:'countdownText',
          //     time:cur_tiem/1000,
          //     type:1,
          //     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;
        }
      });
    },

    //默认行的样式
    tableRowClassName({ row, rowIndex }) {
      return "hovered-row";
    },
    goProdetail(productId) {
      // var productId = productId;
      // if (productId) {
      //   this.$router.push({
      //     path: "/product/etao/detail",
      //     query: {
      //       skuId: productId
      //     }
      //   });
      // }
    },
    goRefund(row) {
      var refundId = row.refundId;
      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(dataParam);
          })
          .catch(() => {});
      } else {
        this.confirmFun(dataParam);
      }
    },
    confirmFun(dataParam) {
      this.$confirm("确认订单?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$axios
            .post("/order/deliver", dataParam)
            .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");
      let msn = e.currentTarget.getAttribute("msn");
      //  let idx = e.currentTarget.getAttribute("idx");
      let refundlen = this.isConfirmRefund().length;
      if (refundlen > 0) {
        this.$confirm(msn,"提示",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }
        )
          .then(() => {
            this.objProps.orderid = orderid;
            this.objProps.dialogFormVisible = true;
          })
          .catch(() => {});
      } else {
        this.objProps.orderid = orderid;
        this.objProps.dialogFormVisible = true;
      }
    },
    cancelForm(res) {
      // 接收子组件参数并赋值
      this.objProps.dialogFormVisible = res.state;
       this.getOrderDetail()
    },
    //打印发货单
    makepdf() {
      this.$refs.pOrder.makepdf();
    }
  },

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

</style>
