<template>
  <div class="page-container" v-loading="detailLoading">
    <el-tabs v-model="activeName">
      <el-tab-pane label="订单信息" name="1">
        <el-steps
          style="margin-top: 16px;"
          finish-status="success"
          :active="stepActive"
          align-center
          process-status="success"
        >
          <el-step
            v-for="(item,index) in nodes"
            :key="item.nodeName"
            :title="item.nodeName"
          >
          <div slot="description">
            {{ item.nodeTime }} 
            <span :class="[timeOver(nodes[index-1].nodeTime, nodes[index].nodeTime, nodes[index])?'color-r':'color-y']"
             v-if="index-1>=0&&nodes[index].nodeTime">{{getTimeDifference(nodes[index-1].nodeTime,nodes[index].nodeTime)}}</span> 
          </div>
          </el-step>
        </el-steps>
        <el-card shadow="hover"class="box-card box-card1">
          <div slot="header">
            <h3><span></span>基本信息</h3>
          </div>
          <el-descriptions :column="2">
            <el-descriptions-item label="平台订单号">{{orderDetail.platformCode || '--'}}</el-descriptions-item>
            <el-descriptions-item label="ERP订单号">{{orderDetail.erpCode || '--'}}</el-descriptions-item>
            <el-descriptions-item label="订单状态"> <span style="color: #67C23A;">{{orderDetail.orderStatusName || '--'}}</span></el-descriptions-item>
            <el-descriptions-item label="业务类型">{{orderDetail.businessTypeName || '--'}}</el-descriptions-item>
            <el-descriptions-item label="销售渠道"> {{orderDetail.platformName}}/{{ orderDetail.shopName }}</el-descriptions-item>
            <el-descriptions-item label="销售部门">{{orderDetail.departmentName || '--'}}</el-descriptions-item>
            <el-descriptions-item label="业务员">{{orderDetail.businessMan || '--'}}</el-descriptions-item>
            <el-descriptions-item label="购买用户">{{orderDetail.vipName || '--'}}</el-descriptions-item>
          </el-descriptions>
        
        </el-card>

        <el-card shadow="hover"class="box-card" v-for="(item,index) in orderDetail.orderListDeliveryDTOList" :key="index">
          <div slot="header">
            <h3><span></span>包裹{{ index+1 }}</h3>
          </div>
          <el-row :gutter="0">
            <el-col :span="10">
              <el-descriptions :column="1">
                <el-descriptions-item label="发货单号">{{item.code || '--'}}<i class="el-icon-document-copy" @click="copyText(item.code)"></i></el-descriptions-item>
                <el-descriptions-item label="发货仓库">{{item.warehouseName || '--'}}</el-descriptions-item>
                <el-descriptions-item label="发货方式">{{item.deliveryTypeName || '--'}}</el-descriptions-item>
                <el-descriptions-item label="物流单号">{{item.expressNo || '--'}}<i class="el-icon-document-copy" @click="copyText(item.expressNo)"></i></el-descriptions-item>
                <el-descriptions-item label="物流公司">{{item.expressName || '--'}}</el-descriptions-item>
              </el-descriptions>
            </el-col>
            <el-col :span="14">
              <el-tabs v-model="activeName2" @tab-click="tabChange(activeName2)">
                <el-tab-pane :label="expresss.name" :name="index+''" :key="index" 
                v-for="(expresss, index) in expressTimeLines[index]" style="height: 200px;margin-bottom: 16px;overflow-y: auto;">
                  <el-timeline-item
                    placement="top"
                    v-for="(express, i) in expresss.data"
                    :key="i"
                    type="success"
                    :timestamp="express.time"
                  >
                    <el-card>
                      <p>{{ express.context }}</p>
                    </el-card>
                  </el-timeline-item>
                </el-tab-pane>
              </el-tabs>
              <!-- <el-timeline :key="index" >
                <el-timeline-item
                  placement="top"
                  v-for="(express, i) in expresss"
                  :key="i"
                  type="success"
                  :timestamp="express.time"
                >
                  <el-card>
                    <p>{{ express.context }}</p>
                  </el-card>
                </el-timeline-item>
              </el-timeline> -->
            </el-col>
          </el-row>
        </el-card>

        <el-row :gutter="24" style="display: flex;">
          <el-col :span="8" class="minHeight">
            <el-card shadow="hover"class="box-card minHeight box-card2">
              <div slot="header">
                <h3><span></span>收货人信息</h3>
              </div>
              <el-descriptions :column="1">
                <el-descriptions-item label="收货人">{{orderDetail.userName || '--'}}</el-descriptions-item>
                <el-descriptions-item label="手机号">{{orderDetail.userMobile || '--'}}</el-descriptions-item>
                <el-descriptions-item label="地址">{{orderDetail.userAddress || '--'}}</el-descriptions-item>
              </el-descriptions>
            </el-card>
          </el-col>

          <el-col :span="8" class="minHeight">
            <el-card shadow="hover"class="box-card minHeight box-card2">
              <div slot="header">
                <h3><span></span>付款信息</h3>
              </div>
              <el-descriptions :column="1">
                <el-descriptions-item label="付款方式">{{orderDetail.orderPaymentDTOList?orderDetail.orderPaymentDTOList[0].payTypeName:'--'}}</el-descriptions-item>
                <el-descriptions-item label="付款状态">{{orderDetail.orderPaymentDTOList?orderDetail.orderPaymentDTOList[0].payStatusName : '--'}}</el-descriptions-item>
                <el-descriptions-item label="支付方式">{{orderDetail.orderPaymentDTOList?orderDetail.orderPaymentDTOList[0].paymentType : '--'}}</el-descriptions-item>
                <el-descriptions-item label="商品总额">{{orderDetail.orderPrice || '--'}}</el-descriptions-item>
                <el-descriptions-item label="实付总额">{{orderDetail.payPrice || '--'}}</el-descriptions-item>
                <el-descriptions-item label="付款凭证截图">{{orderDetail.orderPaymentDTOList?orderDetail.orderPaymentDTOList[0].payPic : '--'}}</el-descriptions-item>
              </el-descriptions>
            </el-card>
          </el-col>

          <el-col :span="8" class="minHeight">
            <el-card shadow="hover"class="box-card minHeight box-card2">
              <div slot="header">
                <h3><span></span>发票信息</h3>
              </div>
              <el-descriptions :column="1">
                <el-descriptions-item label="开票状态">{{orderDetail.invoiceStatusName || '--'}}</el-descriptions-item>
                <el-descriptions-item label="发票种类">{{orderDetail.invoiceType || '--'}}</el-descriptions-item>
                <el-descriptions-item label="发票类型">{{orderDetail.invoiceCatalogue || '--'}}</el-descriptions-item>
                <el-descriptions-item label="发票抬头">{{orderDetail.invoiceTitle || '--'}}</el-descriptions-item>
                <el-descriptions-item label="纳税人识别号">{{orderDetail.ratepayerCode || '--'}}</el-descriptions-item>
                <el-descriptions-item label="注册地址">{{orderDetail.registerAddress || '--'}}</el-descriptions-item>
                <el-descriptions-item label="注册电话">{{orderDetail.registerPhone || '--'}}</el-descriptions-item>
                <el-descriptions-item label="开户银行">{{orderDetail.registerBank || '--'}}</el-descriptions-item>
                <el-descriptions-item label="银行账户">{{orderDetail.registerAccount || '--'}}</el-descriptions-item>
              </el-descriptions>
            </el-card>
          </el-col>
        </el-row>

        <el-card shadow="hover"class="box-card">
          <div slot="header">
            <h3><span></span>商品信息</h3>
          </div>
          <el-table :data="orderDetail.orderListDetailDTOList" border stripe class="w100">
            <el-table-column prop="goodName" min-width="160" label="商品名称" />
            <el-table-column prop="goodCode" label="商品编码" align="center" />
            <el-table-column prop="uniqueCodes" label="串码" align="center" />
            <el-table-column prop="num" label="销售数量" align="center" />
            <el-table-column label="销售单价(元)" align="center">
              <template slot-scope="scope">
                ￥{{ $numFormat(scope.row.price) }}
              </template>
            </el-table-column>
            <el-table-column label="采购成本价(元)" align="center">
              <template slot-scope="scope">
                ￥{{ $numFormat(scope.row.costPrice) }}
              </template>
            </el-table-column>
            <el-table-column label="商品销售金额(元)" align="center">
              <template slot-scope="scope">
                ￥{{ $numFormat(scope.row.orderPrice) }}
              </template>
            </el-table-column>
            <el-table-column label="实付金额(元)" align="center">
              <template slot-scope="scope">
                ￥{{ $numFormat(scope.row.payPrice) }}
              </template>
            </el-table-column>
            <el-table-column label="平台优惠(元)" align="center">
              <template slot-scope="scope">
                ￥{{ $numFormat(scope.row.platformCouponPrice) }}
              </template>
            </el-table-column>
            <el-table-column label="店铺优惠(元)" align="center">
              <template slot-scope="scope">
                ￥{{ $numFormat(scope.row.companyCouponPrice) }}
              </template>
            </el-table-column>
            <!-- <el-table-column label="支付优惠(元)" align="center">
              <template slot-scope="scope">
                {{ $numFormat(scope.row.cost) }} 
              </template>
            </el-table-column> -->
            <el-table-column label="应收金额(元)" align="center">
              <template slot-scope="scope">
                ￥{{ $numFormat(scope.row.totalPrice) }}
              </template>
            </el-table-column>
          </el-table>
          <div class="price-container">
            <div>商品总额: ￥{{ $numFormat(orderDetail.orderPrice) }}</div>
            <div>实付总额: <span>￥{{ $numFormat(orderDetail.payPrice) }}</span>  </div>
            <div>应收总额: <span>￥{{ $numFormat(orderDetail.totalPrice) }}</span></div>
          </div>
        </el-card>

        <el-card shadow="hover"class="box-card">
          <div slot="header">
            <h3><span></span>订单标记</h3>
          </div>
          <el-row :gutter="0">
            <el-descriptions :column="2">
              <el-descriptions-item label="管易平台旗帜">
                {{orderDetail.erpOrderFlag==1?'红':''}}
                {{orderDetail.erpOrderFlag==2?'黄':''}}
                {{orderDetail.erpOrderFlag==3?'绿':''}}
                {{orderDetail.erpOrderFlag==4?'蓝':''}}
                {{orderDetail.erpOrderFlag==5?'紫':''}}
                {{orderDetail.erpOrderFlag==0?'未插旗':''}}
              </el-descriptions-item>
              <el-descriptions-item label="管易拦截">{{orderDetail.erpHoldInfo || '--'}}</el-descriptions-item>
              <el-descriptions-item label="管易订单标记">{{orderDetail.erpOrderTag || '--'}}</el-descriptions-item>
              <el-descriptions-item label="管易附加信息">{{orderDetail.erpAddInfo || '--'}}</el-descriptions-item>
              <el-descriptions-item label="管易异常信息">{{orderDetail.erpExceptionInfo || '--'}}</el-descriptions-item>
            </el-descriptions>  
            
            <el-descriptions :column="1">  
              <el-descriptions-item label="订单操作超时标记">
                <el-tag type="warning" style="margin-right: 4px;" v-for="(item,index) in orderDetail.orderListTimeoutTagDTOList" :key="index">{{ item.tagName }}</el-tag>
              </el-descriptions-item>
              <el-descriptions-item label="订单异常标记">
                <el-tag type="warning" style="margin-right: 4px;" v-for="(item,index) in orderDetail.orderListAbnormalTagDTOList" :key="index">{{ item.tagName }}</el-tag>
              </el-descriptions-item>
            </el-descriptions>
          </el-row>
        </el-card>

      </el-tab-pane>
      <el-tab-pane label="操作日志" name="2">
        <el-table
          ref="logTable"
          border
          :data="operationLogList"
        >
          <!-- <el-table-column type="selection" width="55" align="center" /> -->
            <el-table-column
              label="操作步骤"
              min-width="140"
              align="left"
              prop="operationType"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.operationType=='COMMIT'?'提交审核':'' }}</span>
                <span>{{ scope.row.operationType=='APPROVED'?'审核通过':'' }}</span>
                <span>{{ scope.row.operationType=='REJECTION'?'审核打回':'' }}</span>
                <span>{{ scope.row.operationType=='PUSH_ERP'?'推送erp':'' }}</span>
                <span>{{ scope.row.operationType=='PUSH_JULIAN'?'推送Julian':'' }}</span>
                <span>{{ scope.row.operationType=='ERP_UPDATE'?'同步管易':'' }}</span>
                <span>{{ scope.row.operationType=='ADDRESS_UPDATE'?'修改地址':'' }}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作描述" min-width="140" align="left" prop="logMsg">
              <template slot-scope="scope">
                <span v-html="scope.row.operationContent"></span>
              </template>
            </el-table-column>
            <el-table-column
              label="操作人"
              min-width="100"
              align="left"
              prop="operationMan"
            />
            <el-table-column
              label="操作时间"
              min-width="140"
              align="left"
              prop="operationTime"
            />
        </el-table>
      </el-tab-pane>
    </el-tabs>  
    
    <el-card shadow="hover"class="box-card text-center">
      <el-button size="mini" type="warning" @click="goBack">返回</el-button>
    </el-card>
  </div>
</template>

<script>
import { getOrderDetail,expressInfo,operationLog } from "@/api/order/index";

export default {
  name: "OrderDetail",
  data() {
    return {
      detailLoading: true,
      dialogVisible: false,
      orderDetail: {orderListDeliveryDTOList:[]},
      operationLogList: [],
      expressTimeLines: [],
      orderId: '',
      firstTime: true,
      activeName: '1',
      activeName2: '0',
      nodes: [
        {nodeName: '提交订单',nodeTime:''},
        {nodeName: '付款成功',nodeTime:''},
        {nodeName: '接入管易',nodeTime:''},
        {nodeName: '审核订单',nodeTime:''},
        {nodeName: '配货',nodeTime:''},
        {nodeName: '仓库发货',nodeTime:''},
        {nodeName: '快递揽件',nodeTime:''},
        {nodeName: '用户签收',nodeTime:''},
      ]
    };
  },
  computed: {
    stepActive() {
      if(this.orderDetail.deliveryReceiptAt){
        return  7;
      }
      if(this.orderDetail.pickupAt){
        return  6;
      }
      if(this.orderDetail.deliveryAt){
        return  5;
      }
      if(this.orderDetail.assignAt){
        return  4;
      }
      if(this.orderDetail.approveAt){
        return  3;
      }
      if(this.orderDetail.dealtime){
        return  2;
      }
      if(this.orderDetail.payAt){
        return  1;
      }
      if(this.orderDetail.orderAt){
        return  0;
      }
    },
  },
  created(){
    this.getDetail();
  },
  activated() {
    if(this.firstTime){ return false }
    this.getDetail();
  },
  methods: {
    getDetail(){
      this.detailLoading = true;
      getOrderDetail({
        orderId: this.$route.query.orderId,
      }).then((res) => {
        if (res.status === 200 || res.status === "200") {
          this.orderDetail = res.data.orderDetailResDTOS;
          this.nodes[0].nodeTime = res.data.orderDetailResDTOS.orderAt;
          this.nodes[1].nodeTime = res.data.orderDetailResDTOS.payAt;
          this.nodes[2].nodeTime = res.data.orderDetailResDTOS.dealtime;
          this.nodes[3].nodeTime = res.data.orderDetailResDTOS.approveAt;
          this.nodes[4].nodeTime = res.data.orderDetailResDTOS.assignAt;
          this.nodes[5].nodeTime = res.data.orderDetailResDTOS.deliveryAt;
          this.nodes[6].nodeTime = res.data.orderDetailResDTOS.pickupAt;
          this.nodes[7].nodeTime = res.data.orderDetailResDTOS.deliveryReceiptAt;
          this.$forceUpdate();
          // console.log(this.nodes)
          if(this.orderDetail.orderListDeliveryDTOList){
            this.orderDetail.orderListDeliveryDTOList.forEach((item,index)=>{
              if(item.expressNo){
                this.getEx(item,index)
              }
            })
          }
        }
        this.detailLoading = false;
        this.firstTime = false;
      }).catch(_=>{
        this.detailLoading = false;
        this.firstTime = false;
      });

      operationLog({orderId: this.$route.query.orderId,}).then(res=>{
        if(res.status==200){
          this.operationLogList = res.data;
        }
      });
    },
    getEx(item,index){
      const expressNo = item.expressNo.split(',');
      expressNo.forEach((ex,expressNoIndex)=>{
        expressInfo({
          expressNo: ex,
          orderId: item.orderId
        }).then(res=>{
          if(res.status==200){
            if (res.data) {
              const line = this.expressTimeLines[index] || [];
              line.push({
                name: ex,
                data: res.data
              });
              this.expressTimeLines[index] = line;
              this.$set(this.expressTimeLines,index,line);
              console.log(this.expressTimeLines)
            } else {
              const line = this.expressTimeLines[index] || [];
              // line[i] = [{ time: "", context: "暂无物流信息" }];
              line.push({
                name: ex,
                data: [{ time: "", context: "暂无物流信息" }]
              });
              this.$set(this.expressTimeLines,index,line);
              // this.$set(this.expressTimeLines,index,[{ time: "", context: "暂无物流信息" }]);
            }
          }
        })
      })
      
    },
    goBack() {
      this.$router.back();
    },
    timeOver(start, end, over){
      if(start==null||end==null){
        return false;
      }
      if(over.nodeName=='提交订单'||over.nodeName=='付款成功'||over.nodeName=='接入管易'||over.nodeName=='用户签收'){
        return false;
      }
      let overT = '';
      if(over.nodeName=='审核订单'){
        overT = this.orderDetail.approveHour;
      }
      if(over.nodeName=='配货'){
        overT = this.orderDetail.assignHour;
      }
      if(over.nodeName=='仓库发货'){
        overT = this.orderDetail.deliveryHour;
      }
      if(over.nodeName=='快递揽件'){
        overT = this.orderDetail.pickupHour;
      }

      const timeDiff = new Date(end).getTime() - new Date(start).getTime();
      let hours=0,minutes=0;

      if(timeDiff<0){
        return false;
      }else{
        // 计算差值的小时、分钟和秒数
        hours = Math.floor(timeDiff / (1000 * 60 * 60));
        minutes = Math.floor((timeDiff % (1000 * 60 * 60)) / (1000 * 60));

        return (hours+(minutes/60))>=overT?true:false;

      }

    },
    onShowPhone(data) {
      this.$set(data, "showPhone", !data.showPhone);
    },
    copyText(text) {
      window.navigator.clipboard
        .writeText(text)
        .then(() => {
          // this.$message.success("复制成功");
          this.$message({
            message: "复制成功",
            type: "success",
            customClass: "phone-message",
            center: true,
          });
        })
        .catch((error) => {
          // this.$message.warning("复制失败");
          this.$message({
            message: "复制失败",
            type: "warning",
            customClass: "phone-message",
            center: true,
          });
        });
    },
    getTimeDifference(start, end) {
      if(start==null||end==null){
        return false;
      }
      const timeDiff = new Date(end).getTime() - new Date(start).getTime();
      let hours=0,minutes=0;
      if(timeDiff<0){
        // 计算差值的小时、分钟和秒数
        hours = 0;
        minutes = 0;
      }else{
        // 计算差值的小时、分钟和秒数
        hours = Math.floor(timeDiff / (1000 * 60 * 60));
        minutes = Math.floor((timeDiff % (1000 * 60 * 60)) / (1000 * 60));
      }
      
      return (hours+(minutes/60)).toFixed(1)+'h';
    },
    tabChange(value){

    }
  },
};
</script>

<style lang="scss" scoped>
.page-container{
  height: 100%;
  overflow-y: scroll;
  overflow-x: hidden;
  padding: 16px;
}
.box-card{
  margin-bottom: 16px;
}
.box-card1{
  margin-top: 16px;
}
.main-container {
  .minHeight {
    // min-height: 330px;
    flex: 1;
  }
  .box-card2{
    height: 95%;
  }
  .price-container {
    width: 20%;
    float: right;
    margin-top: 10px;
    div{
      margin-bottom: 8px;
      span{
        color: #F56C6C;
      }
    }
  }
}
h3{
  font-weight: bold;
  display: flex;
  align-items: center;
  margin: 0;
  font-size: 14px;
  span{
    display: block;
    width: 2px;
    height: 14px;
    background: #F56C6C;
    margin-right: 6px;
  }
}
.color-r {
    color: #F56C6C ;
  }
  .color-y{
    color: #fbc576;
  }
</style>

<style lang="scss">
.page-container{
  .el-timeline-item__content{
    .el-card__body{
      padding: 0 16px;
    }
  }
  .el-descriptions-item__label{
    display: flex;
    align-items: center;
  }
}
</style>
