<template>
  <div class="order-detail-wrapper">
    <bread-crumb :curmbFirst="curmbFirst" :curmbSecond="curmbSecond" :curmbThird="curmbThird" :jumPathThird="jumPathThird"></bread-crumb>
    <div class="order-detail-content screenSet" id="screenSet">
      <el-row :gutter="20" class="order-detail-header">
          <el-col :span="20"><div class="header-title">订单详情</div></el-col>
          <el-col :span="4" >
            <div class="trade-status"><img :src="statusImgUrl"/> {{showStatusStr}}</div>
              </el-col>
      </el-row>
      <!-- <div class="header-title">订单详情</div> -->
      <div class="detail-all-info">
        <!-- <div class="trade-status" v-if="showStatus == 1"><img src="../../assets/image/order/order_status1.png"/>交易成功</div>
        <div class="trade-status" v-if="showStatus == 2"><img src="../../assets/image/order/order_status2.png"/>已发货</div>
        <div class="trade-status" v-if="showStatus == 3"><img src="../../assets/image/order/order_status3.png"/>待发货</div>
        <div class="trade-status" v-if="showStatus == 4"><img src="../../assets/image/order/order_status4.png"/>等待买家付款</div>
        <div class="trade-status" v-if="showStatus == 5"><img src="../../assets/image/order/order_status5.png"/>退款/关闭</div> -->
        <!-- 表格 -->
        <el-table :data="tableData" border class="item-table" style="width: 100%;margin-top: 30px;">
          <el-table-column prop="goodsName" label="商品名称" min-width="100" align="center">
            <template slot-scope="scope">
              <div style="cursor: pointer;color: #449284" @click="goGoodsEdit(scope.row)">{{ scope.row.goodsName }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="size" label="规格" min-width="100" align="center"></el-table-column>
          <el-table-column prop="goodsQuantity" label="数量" min-width="100" align="center">
            <template slot-scope="scope">
              <span>×{{ scope.row.goodsQuantity }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="price" label="单价" min-width="100" align="center">
            <template slot-scope="scope">
              <span>￥{{ scope.row.price | toFixed2 }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="totalPrice" label="商品总额" min-width="100" align="center">
              <template slot-scope="scope">
                <span>￥{{ scope.row.totalPrice | toFixed2 }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="amount" label="商品实付" min-width="100" align="center">
              <template slot-scope="scope">
                <span>￥{{ scope.row.amount | toFixed2 }}</span>
              </template>
            </el-table-column>
          <el-table-column
            prop="goodsShowStatusStr"
            label="状态"
            min-width="100"
            align="center"
            :filters="getFilterArr('goodsShowStatusStr')"
            :filter-method="filterStatusHandler"
          >
          </el-table-column>
          <el-table-column prop="expressCompany" label="物流公司" min-width="100" align="center">
            <template slot-scope="scope">
              <span>{{scope.row.expressCompany || '--'}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="expressNo" label="物流公司单号" min-width="110" align="center">
            <template slot-scope="scope">
              <span>{{scope.row.expressNo || '--'}}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="belongPackage"
            label="所属包裹"
            min-width="100"
            align="center"
            :filters="getFilterArr('belongPackage')"
            :filter-method="filterPackageHandler"
          >
            <template slot-scope="scope">
              <span>{{scope.row.belongPackage || '--'}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="refundDesc" label="退款说明" min-width="100" align="center">
            <template slot-scope="scope">
              <el-button v-if="[6, 7, 8].includes(scope.row.goodsShowStatus)" type="text" @click="showRefundDetail(scope.row.aid)">查看</el-button>
              <span v-else> -- </span>
            </template>
          </el-table-column>
        </el-table>
        <div class="total-set">
          <p><span>商品总额：</span><span>￥{{orderDetailData.totalPrice | toFixed2}}</span></p>
          <p><span>优惠：</span><span>-￥{{orderDetailData.totalCouponFee | toFixed2}}</span></p>
          <p><span>&nbsp;运费：</span>
            <span v-if="orderDetailData.expressFee == 0">免运费</span>
            <span v-else-if="orderDetailData.expressFee != 0">￥{{orderDetailData.expressFee | toFixed2}}</span>
          </p>
          <p class="total-price" v-if="showStatus == 4"><span>应付：</span><span>￥{{(orderDetailData.totalPrice)| toFixed2}}</span></p>
          <p class="total-price" v-else-if="showStatus == 5 || showStatus == 7"><span>实付：</span><span>￥0.00</span></p>
          <p class="total-price" v-else><span>实付：</span><span>￥{{orderDetailData.amount | toFixed2}}</span></p>      
        </div>
          <!-- 物流信息 -->
        <div class="trade-info">
          <el-card class="left-card">
            <div slot="header" class="clearfix">
              <span>{{storeType == 1 ? '物流' : '配送'}}信息</span>
            </div>
            <!-- 物流信息 -->
            <div class="logistics-info">
              <div class="title">收货信息</div>
              <p>{{ orderDetailData.receiverAddr }}</p>
              <p>{{orderDetailData.receiver}} {{ orderDetailData.receiverMobile }}</p>
            </div>
            <div v-if="showStatus == 1 || showStatus == 2 || showStatus == 6">
              <div>
                <!-- 多包裹 -->
                <div class="multi-package">
                    <el-tabs v-model="packageName" @tab-click="handlePackageClick">
                      <el-tab-pane v-for="(item, index) in expressList" :key="index" :label="item.packageName" :name="item.packageName">
                        <div class="package-img">
                          <div class="img-box" v-for="(goodsval, goodsindex) in item.goodsInfoList" :key="goodsindex">
                            <img :src="goodsval.goodsImageUrl" alt="">
                            <span class="img-tips">{{goodsval.goodsQuantity}}件</span>
                          </div>
                        </div>
                        <!-- 云鹊配送 小药房 && 线下配送-->
                        <div class="yq-logistics" v-if="(storeType == 2 && item.expressType == 2)">
                          <div class="title">
                            {{item.expressStatus !== 4 ? '云鹊配送中' : '云鹊配送完成'}} 
                          </div>
                          <p>配送员：{{ item.senderName }}</p>
                          <p>手机号：{{ item.senderMobile }}</p>
                          <p>备注：{{ item.remark }}</p>
                        </div>
                        <!-- 物流信息 供货商 || 小药房 && 物流信息-->
                        <div
                            v-if="storeType == 1 || (storeType == 2 && item.expressType == 1)"
                            class="package-detail"
                          >
                            <div>物流公司：{{ item.expressCompany }}</div>
                            <div>快递单号：{{item.expressNo }}
                              <el-button type="text" @click="copyTxt(item.expressNo,index)">复制单号</el-button>
                              <input type="text" :id="`copyInput_${index}`" class="hidden-input" />
                            </div>
                            <div>备注：{{ item.remark }}</div>
                        </div> 
                        <!--  线上物流时间线 -- 订单展示状态,1已完成,2已发货,3待发货,4待支付,5交易关闭 -->
                        <div class="steps-logistics" v-if="item.expressType == 1 && (showStatus === 1 || showStatus === 2 || showStatus === 6)">
                          <el-steps direction="vertical" :active="0">
                            <el-step
                              v-for="item in expressData"
                              :title="item.time"
                              :description="item.context"
                              :key="item.time"
                            >
                              <div slot="icon">
                                <div class="dot"></div>
                              </div>
                            </el-step>
                          </el-steps>
                        </div>
                      </el-tab-pane>
                    </el-tabs>
                </div>
              </div>
            </div>
            <!-- <div v-if="showStatus == 1 || showStatus == 2">
             <div v-if="storeType == 3">
               <p>无配送信息，买家自提</p>
             </div>
              <div>
                <p class="trade-status1">
                  <i class="el-icon-truck" style="font-size: 18px"></i>
                  <span class="send-status" v-if="storeType == 1">已发货</span>
                  <span class="send-status" v-if="storeType == 2  && showStatus == 2">{{expressType == 1 ? '已发货':'云鹊配送中'}}</span>
                  <span class="send-status" v-if="storeType == 2  && showStatus == 1">{{expressType == 1 ? '已收货':'云鹊配送完成'}}</span>
                  <span class="send-status" v-if="storeType == 3">已收货</span>
                </p>
                <p v-if="storeType == 1 || storeType == 2">收货地址：{{orderDetailData.receiverAddr}}，{{orderDetailData.receiver}}，{{orderDetailData.receiverMobile}}</p>
                <div v-if="storeType == 1 || (storeType == 2 && expressType == 1)">
                  <p>物流公司：{{orderDetailData.expressName}}</p>
                  <p>快递单号：{{orderDetailData.expressNo}}</p>
                  <el-button type="text" @click="copyTxt">复制</el-button>
                  <el-button type="text" @click="updateOrderNo">修改物流单号</el-button>
                  <input type="text" id="copyInput" class="hidden-input" />
                </div>
                <div v-if="storeType == 2 && expressType == 2">
                  <p>配送员姓名：{{orderDetailData.sender}}</p>
                  <p>手机号：{{orderDetailData.senderMobile}}</p>
                </div>
                <div v-if="storeType == 3">
                  <p>收货人：{{orderDetailData.receiver}}</p>
                  <p>手机号：{{orderDetailData.receiverMobile}}</p>
                </div>
                <p v-if="storeType == 1 || storeType == 2">备注：{{orderDetailData.remark}}</p>
              </div>
              <div class="steps-logistics" v-if="storeType == 1 || storeType == 3 || expressType == 1">
                <el-steps direction="vertical" :active="0">
                  <el-step
                    v-for="item in expressData"
                    :title="item.time"
                    :description="item.context"
                    :key="item.time"
                  >
                    <div slot="icon">
                      <div class="dot"></div>
                    </div>
                  </el-step>
                </el-steps>
              </div>
            </div>
            <div v-if="(showStatus == 3) && (storeType == 1 || storeType == 2)">
              <div class="trade-status1">
                <p>
                  <i class="el-icon-truck" style="font-size: 18px"></i>
                <span class="send-status">{{storeType == 1 ? '待发货' : '待配送'}}</span>
                </p>
                <el-button type="text" @click="showSendDialog">{{storeType == 1 ? '去发货' : '去配送'}}</el-button>
              </div>
              <p>收货地址：{{orderDetailData.receiverAddr}}，{{orderDetailData.receiver}}，{{orderDetailData.receiverMobile}}</p>
            </div>
            <div v-if="showStatus == 4">
              <p>暂无{{storeType == 1 ? '物流' : '配送'}}信息，待买家支付</p>
            </div>
            <div v-if="showStatus == 5"><p>交易已关闭</p></div> -->
          </el-card>
          <el-card class="right-card">
            <div slot="header" class="clearfix">
              <span>订单信息</span>
            </div>
            <div>
              <p>订单编号：{{orderDetailData.orderNo}}</p>
              <p>下单时间：{{orderDetailData.createdTime}}</p>
              <p v-if="(showStatus == 1 || showStatus == 2 || showStatus == 3) && orderDetailData.payChannel">支付方式：{{orderDetailData.payChannel | payChanelFormat}}</p>
              <p v-if="showStatus == 1 || showStatus == 2 || showStatus == 3">支付时间：{{orderDetailData.paymentTime}}</p>
              <p v-if="showStatus == 1 || showStatus == 2 || showStatus == 3">&nbsp;&nbsp;&nbsp;招募人：{{orderDetailData.ownerName}}</p>
              <p v-if="showStatus == 1 || showStatus == 2 || showStatus == 3">所属药代：{{orderDetailData.brokerName}}</p>
              <!-- <p>下单人手机号：{{orderDetailData.prescriberMobile}}</p>
              <p>订单类型：{{orderDetailData.saleTypeStr}}</p>
              <p v-if="orderDetailData.refundReason">退款原因：{{orderDetailData.refundReason}}</p> -->
              <!--<p>发货时间：{{orderDetailData.sendTime}}</p>-->
              <!--<p>成交时间：{{orderDetailData.finishTime}}</p>-->
            </div>
          </el-card>
        </div>
      </div>
      <!-- <send-set-dialog
          :sendGoodsDialog="sendGoodsDialog"
          :dtType="dtType"
          :sendSetFormData="sendSetForm"
          @closeSendSet="closeSendSet">
      </send-set-dialog> -->
    </div>
    <!-- <el-dialog
      class="tui-dialog"
      title="修改物流单号"
      :visible="showOrderNoFlag"
      @close="showOrderNoFlag = false"
      width="600px"
    >
      <el-form ref="orderDetailData" :model="orderDetailData" :rules="rulesExpress" label-width="120px">
        <el-form-item label="快递公司" prop="expressName">
          <el-input v-model="orderDetailData.expressName"></el-input>
        </el-form-item>
        <el-form-item label="快递单号" prop="expressNo">
          <el-input v-model="orderDetailData.expressNo"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="orderDetailData.remark"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" type="primary" @click="confirmExpressNo">完成</el-button>
      </span>
    </el-dialog> -->
    <!-- 退款说明 -->
    <el-dialog
      class="refund-explain-dialog"
      title="退款说明"
      :visible.sync="refundDialog"
      width="20%">
      <div class="explain-content">退款方式：{{refundDialogData.refundWay}}</div>
      <div class="explain-content">退款金额：{{refundDialogData.refundAmount | toFixed2}}</div>
      <div class="explain-content">退款对象：{{refundDialogData.refundObject}}</div>
      <div class="explain-content">退款理由：{{refundDialogData.refundReason}}</div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="refundDialog = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  // import { openLoading, closeLoading } from "../../utils/utils";
  import BreadCrumb from "@/components/breadcrumb.vue";
  import { queryOrderDetail, updateExpressNo, expressInfo, getRefundDesc } from '@/utils/shop';
  import SendSetDialog from "@/components/shop/send-set-dialog";

  export default {
    components: {
      BreadCrumb,
      SendSetDialog
    },
    data(){
      return{
        curmbFirst: '商铺管理',
        curmbSecond: '订单管理',
        jumPathThird: '',
        curmbThird: '订单详情',
        storeId: null,
        orderId: null,
        showStatus: null,//订单展示状态,1已完成,2已发货,3待发货,4待支付,5交易关闭
        storeType: null,//店铺类型，1供应商，2小药房，3医生小店
        orderDetailData: {
          amount: '',//订单实付总金额
          createdTime: '',//下单时间
          expressId: '',//物流id
          expressName: '',//物流公司名称
          receiverAddr: '',//收货地址
          expressNo: '',//快递单号
          expressStatus: '',//物流状态
          finishTime: '',//成交时间
          orderNo: '',//订单编号
          orderStatus: '',//订单状态：1待支付,2支付中,3支付失败,4订单超时,5支付成功,6交易完成,7交易关闭
          paymentTime: '',//支付时间
          totalCouponFee: '',//优惠券金额
          totalPrice: '',//订单总金额
          remark: '',//备注
          sendTime: '',//发货时间
          payChannel: '',//支付方式
          ownerName:'',// 招募人姓名
          brokerName:'',//药代名称
          prescriberMobile:'',//下单人手机号
          // showStatus: null,//订单展示状态,1已完成,2已发货,3待发货,4待支付,5交易关闭
          saleTypeStr:'',// 订单类型
        },
        expressData:[
          {
            time: "",
            context: "待揽收",
          }
        ],
        rulesExpress: {
          expressName: [
            { required: true, message: '请输入快递公司', trigger: "blur"},
          ],
          expressNo: [
            { required: true, message: '请输入快递单号', trigger: "blur"},
          ]
        },
        tableData: [],
        sendGoodsDialog: false,
        dtType: 1,
        sendSetForm: {},
        showOrderNoFlag: false,
        expressType: 1,
        isShowRefundDetail: false, // 是否展示退款说明弹窗
        showStatusStr: '', // 订单状态文案
        packageName: '包裹1', // 多包裹name
        expressIndex: 0, // 修改物流单号下标
        refundDialog: false, // 退款说明弹窗
        refundDialogData: {
        refundWay: '',
        refundAmount: '',
        refundObject: '',
        refundReason: ''
      }
      }
    },
    created() {
      const {id, storeId, storeType} = this.$route.query;
      this.orderId = id;
      this.storeId = storeId;
      this.storeType = storeType;
      this.jumPathThird = `/order-manage?storeId=${this.storeId}`;
      this.init();
    },
    computed:{
      statusImgUrl() {
      // "订单展示状态：1已完成,2已发货,3待发货,4待支付,5已关闭,6部分发货,7已取消"
      let imgUrl = '';     
      console.log(imgUrl);
      switch (this.showStatus) {
        case 1:
          return (imgUrl = require(`../../assets/image/order/order_status1.png`));
        case 2:
        case 6:
          return (imgUrl = require(`../../assets/image/order/order_status2.png`));
        case 3:
        case 4:
          return (imgUrl = require(`../../assets/image/order/order_status3.png`));
        case 5:
        case 7:
          return (imgUrl = require(`../../assets/image/order/order_status5.png`));
        default:
          return (imgUrl = '');
      }
    }
    },
    methods: {
          // 多包裹切换获取包裹物流信息
        handlePackageClick(tab) {
          this.expressList.forEach(item => {
            if (item.packageName === tab.name) {
              this.viewLogistics(item.expressNo, this.orderDetailData.receiverMobile);
            }
          })
        },
        getPrice(value) {
          let val;
          if (value) {
            val = (value / 100).toFixed(2);
          } else {
            val = 0.00;
          }
          return val;
        },
      // 退款说明
      showRefundDetail(aid) {             
          getRefundDesc(aid).then(res => {
            if (res.code == "000000") {     
            this.isShowRefundDetail = true;
            let refundWayStr = '';
            let refundObjectStr = '';
            this.refundDialog = true;
            refundWayStr =  res.data.refundWay == 0 ? '仅退款，无需退货' : '退款退货';
            refundObjectStr = res.data.refundObject == 1 ? '开单医生' : '支付用户';
            res.data.refundWay = refundWayStr;
            res.data.refundObject = refundObjectStr;
            this.refundDialogData = res.data;
        }    
      })
        },
      init() {
        queryOrderDetail(this.orderId).then(res => {
          if (res.code == '000000') {
            const { goodsInfoDtoList, expressList } = res.data;
            this.orderDetailData = {...res.data};
            this.showStatus = res.data.showStatus;
            this.showStatusStr = res.data.showStatusStr;
            this.expressType = res.data.expressType; // 小店 1.普通快递，2云鹊快递            
            this.tableData = goodsInfoDtoList;  
            let expressNo = '';
            goodsInfoDtoList.map(item => {
            if (item.belongPackage == '包裹1') {
              expressNo = item.expressNo
            }
            })     
            let receiverMobile = this.orderDetailData.receiverMobile;
            this.expressList = expressList; // 包裹信息
            this.viewLogistics(expressNo, receiverMobile);
          }
        })
      },
      showSendDialog() {
        this.sendGoodsDialog = true;
        this.sendSetForm = this.orderDetailData;
        if (this.storeType == 1) {
          this.dtType = 1;
        }else {
          this.dtType = 2;
        }
      },
      closeSendSet(val) {
        //保存操作
        if (val.type == 2) {
          this.init();
        }
        this.sendGoodsDialog = false;
      },
      //跳转至商品编辑页
      goGoodsEdit(row) {
        // this.$store.dispatch('goodsManage/changeGoodsInfo', {...row});
        this.$router.push({
          path: '/create-good-new',
          query: {
            id: row.goodsId,
            storeId: this.storeId,
          }
        })
      },
      // 修改物流单号
      updateOrderNo(){
        this.showOrderNoFlag = true;
      },
      confirmExpressNo() {
        if (this.orderDetailData.expressName == null || this.orderDetailData.expressName == "") {
          this.$message.error("请填写快递公司");
          return;
        }
        if (this.orderDetailData.expressNo == null || this.orderDetailData.expressNo == "") {
          this.$message.error("请填写快递单号");
          return;
        }
        updateExpressNo({
          orderId: this.orderId,
          expressName: this.orderDetailData.expressName,
          expressNo: this.orderDetailData.expressNo,
          remark: this.orderDetailData.remark
        }).then(res => {
          if (res.code == '000000') {
            this.$message.success('操作成功');
            this.showOrderNoFlag = false;
            this.searchList();
          } else {
            this.$message.success(`操作失败:${res.message}，请重试`);
          }
        });
      },
      copyTxt(expressNo,index) {
        let txt = document.getElementById(`copyInput_${index}`);
        txt.value = expressNo;
        // if (navigator.userAgent.match(/(iPhone|iPod|iPad|Mac);?/i)) {
        if (navigator.userAgent.indexOf("Safari") > -1 && navigator.userAgent.indexOf("Chrome") < 1) {
          var el = document.createElement('input');
          el.value = txt.value;//要复制的内容
          el.style.opacity = '0';
          document.body.appendChild(el);
          var editable = el.contentEditable;
          var readOnly = el.readOnly;
          el.contentEditable = true;
          el.readOnly = false;
          const range = document.createRange();
          range.selectNodeContents(el);
          var sel = window.getSelection();
          sel.removeAllRanges();
          sel.addRange(range);
          el.setSelectionRange(0, 999999);
          el.contentEditable = editable;
          el.readOnly = readOnly;
          var ret = document.execCommand('copy');
          el.blur();
        } else {
          txt.select(); //选择对象
          document.execCommand("copy");
        }
        this.$message.success('复制成功');
      },
    //查看物流
      viewLogistics(expressNo, receiverMobile) {
        if (expressNo && receiverMobile)
          expressInfo({
            expressNo: expressNo,
            receiverMobile: receiverMobile,
          }).then((res) => {
            if (res.code == "000000") {
              if (res.data.data && res.data.data.length) {
                this.expressData = res.data.data;
              } else {
                this.expressData = [{
                  time: res.data.updateTime || '',
                  context: "待揽收1"
                }];
              }
            }
          });
      },
    getFilterArr(value) {
      let newFilterArr = [];
      for (const newItem of this.tableData) {
        let flag = true;
        for (const item  of newFilterArr) {
          if(item.text == newItem[value]) {
            flag = false;
          }
        }
        if(newItem[value] && flag) {
          newFilterArr.push({
            text: newItem[value],
            value: newItem[value]
          })
        }
      }
      return newFilterArr;
    },
    filterStatusHandler(value, row, column) {
      return row.goodsShowStatusStr === value;
    },
    filterPackageHandler(value, row, column) {
      return row.belongPackage === value;
    },
    },
    filters: {
      toFixed2: function (value) {
        let val;
        if (value) {
          val = (value/100).toFixed(2);
        }else {
          val = 0.00
        }
        return val;
      },
      payChanelFormat: function (value) {
        let str = '';
        if(value == 1) {
          str = '微信支付'
        }
        return str;
      }
    },
  }
</script>
<style lang="scss">
  .order-detail-wrapper{
     .el-dialog__wrapper {
      .el-dialog {
        .el-dialog__body {
          padding: 0 20px;  
          .explain-content {
          margin-bottom: 5px;
          }    
        }
      }  
    }
    .el-table__column-filter-trigger i {
      color: #0d9078;
      font-size: 14px;
      transform: scale(1);
    }
    .hidden-input {
      height: 0;
    }
    .order-detail-content{
      background: #fff;
      padding: 10px;
       .order-detail-header {
          border-bottom: 1px solid #efefef;
        }
        .header-title {
          font-size: 13px;
          color: #449284;
          line-height: 35px;   
        }
        .trade-status{
          font-size: 20px;
          padding-bottom: 15px;
          img{
            width: 25px;
            height: 25px;
            margin-right: 15px;
            vertical-align: -6px;
          }
          .set-icon{
            color: #449284;
            font-size: 20px;
            margin-right: 10px;
          }
        }
        .total-set{
          text-align: right;
          margin-top: 20px;
          p{
            font-size: 13px;
            color: #999999;
            line-height: 24px;
            span:first-child{
              display: inline-block;
              width: 72px;
              text-align: left;
            }
            span:last-child{
              display: inline-block;
              width: 90px;
            }
          }
          .total-price{
            font-size: 15px;
            color: #333333;
            margin-top: 5px;
          }
        }
      .detail-all-info{
        padding-bottom: 30px;
        .trade-info{
          width: 100%;
          box-sizing: border-box;
          display: flex;
          font-size: 13px;
          justify-content: space-between;
          margin-top: 30px;
          .el-card__body{
            padding-top: 10px;
          }
          .left-card{
            width: 69%;
            display: inline-block;
            margin-right: 2%;
            .trade-status1{
              height: 26px;
              display: flex;
              align-items: center;
              justify-content: space-between;
              padding-bottom: 5px;
              .send-status{
                margin-left: 10px;
                display: inline-block;
              }
            }
            .steps-logistics {
              border-top: 2px solid #ddd;
              padding-top: 20px;
              margin-top: 20px;
              height: 200px;
              overflow-y: scroll;
            }
            .logistics-info {
              .title {
                padding-bottom: 10px;
              }
            }
          .multi-package {
            .package-img {
              display: flex;
              .img-box {
                width: 88px;
                height: 88px;
                background-color: #ccc;
                position: relative;
                margin-right: 10px;
                img {
                  width: 88px;
                  height: 88px;     
                }
                .img-tips {
                  position: absolute;
                  right: 4px;
                  bottom: 4px;
                  font-size: 14px;
                  font-family: PingFangSC-Regular, PingFang SC;
                  color: #666666;
                }
              }  
            }
            .yq-logistics {
              padding-top: 25px;
              .title {
                padding-bottom: 20px;
              }
            }
            .package-detail {
              padding-top: 15px;
              #copyInput {
                display: none;
              }
            }
          }
          }
          .right-card{
            width: 28%;
            display: inline-block;
            max-height: 240px;
          }
          .left-card, .right-card{
            p{
              color: #838683;
              line-height: 22px;
            }
          }
          .clearfix:before,
          .clearfix:after {
            display: table;
            content: "";
          }
          .clearfix:after {
            clear: both
          }
        }
      }
    }
    .el-button--text{
      color: #449284;
      font-size: 14px;
      &::after{
        content: '';
        position: relative;
        height: 14px;
        /*border-right: 1px solid #EBEEF5;*/
        border-right: 1px solid #aaaaaa;
        padding-right: 10px;
      }
      &:last-of-type{
        &::after{
          content: '';
          position: relative;
          width: 1px;
          height: 14px;
          border-right: none;
        }
      }
    }
    .el-step__icon {
      border: none;
      background: transparent;
    }
    .el-step__title {
      font-size: 14px;
    }
    .el-step:last-of-type .el-step__line {
      display: block !important;
      height: 30%;
    }
    .dot {
      border-radius: 50%;
      height: 8px;
      width: 8px;
      border: 1px solid #999999;
      background-color: #b8b8b8;
    }
    .el-steps--vertical {
      height: auto;
    }
  }
</style>
