<template>
  <div class="order">
    <!--    顶部-->
    <div class="order_top">
      <div class="order_top_content">
        <el-steps :active="time_step">
          <el-step title="待审核" icon="iconfont icon-fudonganniu">
            <div slot="description" class="step-desc">
              <p>{{ order_detail.operatorName }}</p>
              <p v-if="order_detail.createTime">
                {{ $_common.formatDate(order_detail.createTime) }}
              </p>
            </div>
          </el-step>
          <el-step title="待出库" icon="iconfont icon-fudonganniu">
            <div
              v-if="
                order_detail.orderLog &&
                order_detail.orderLog[0] &&
                order_detail.orderLog[0].actionType === '审核通过'
              "
              slot="description"
              class="step-desc"
            >
              <p>{{ order_detail.orderLog[1].userName }}</p>
              <p>
                {{ $_common.formatDate(order_detail.orderLog[1].createTime) }}
              </p>
            </div>
          </el-step>
          <el-step title="已出库" icon="iconfont icon-fudonganniu">
            <div slot="description" class="step-desc">
              <p>{{ out_detail.auditName }}</p>
              <p v-if="out_detail.auditTime">
                {{ $_common.formatDate(out_detail.auditTime) }}
              </p>
            </div>
          </el-step>
          <el-step title="已完成" icon="iconfont icon-fudonganniu"></el-step>
          <el-step title="已关闭" icon="iconfont icon-fudonganniu"></el-step>
        </el-steps>
      </div>
    </div>
    <!--    中间-->
    <div class="order_midden">
      <div class="order_midden_top">
        <p>
          <span
            v-if="
              order_detail.deliveryName === '上门自提' ||
              order_detail.orderType === 23
            "
            class="salf-code"
          >
            自提码：{{ order_detail.verifyCode }}
          </span>
          <!--          订单详情按钮-->
          <el-button-group v-if="activeName === 'one'">
            <el-button
              v-if="
                order_detail.orderMsg === '待审核' &&
                $accessCheck($Access.orderQueryUpdateOrderStatus)
              "
              type="primary"
              size="small"
              @click="updateOrderStatus"
            >
              取消订单
            </el-button>
            <el-button
              v-if="
                !(
                  parseInt(order_detail.payStatus) === 4 &&
                  [1, 2].includes(order_detail.payType)
                ) &&
                parseInt(order_detail.auditStatus) !== 2 &&
                $accessCheck($Access.orderQueryUpdateAuditStatus) &&
                order_detail.orderMsg === '待审核'
              "
              :disabled="
                order_detail.payType === '9' && order_detail.payStatus === 4
              "
              type="primary"
              size="small"
              :loading="audit_loading"
              @click="updateAuditStatus"
            >
              审核订单
            </el-button>
            <el-button
              v-if="
                order_detail.auditStatus === 2 && order_detail.outStatus === 4
              "
              type="primary"
              @click="deAudit()"
            >
              驳回订单
            </el-button>
            <el-button
              v-if="
                parseInt(order_detail.auditStatus) === 2 &&
                parseInt(order_detail.orderStatus) === 4 &&
                parseInt(order_detail.outStatus) !== 4 &&
                $accessCheck($Access.orderQueryUpdateOrderStatus)
              "
              type="primary"
              size="small"
              @click="confirmOrder"
            >
              确认收货
            </el-button>
            <el-button type="primary" size="small" @click="openUrl('order')">
              打印订单
            </el-button>
            <el-button
              v-if="parseInt(order_detail.orderStatus) === 7"
              type="primary"
              size="small"
              @click="cancel_tip = true"
            >
              取消审核
            </el-button>
            <!-- 出库状态为 部分出库 下显示的按钮-->
            <el-button
              v-if="
                order_detail.outStatus === 6 &&
                Number(order_detail.retMoney) === 0
              "
              type="primary"
              size="small"
              @click="reStockOut"
            >
              再次出库
            </el-button>
            <el-button
              v-if="
                order_detail.outStatus === 6 &&
                Number(order_detail.retMoney) === 0
              "
              type="primary"
              size="small"
              @click="retAmount"
            >
              一键退款
            </el-button>
          </el-button-group>
          <!-- 出库详情按钮-->
          <el-button-group v-if="activeName === 'two'">
            <el-button
              v-if="
                $accessCheck($Access.InventoryOutUpdateInventoryOutStatus) &&
                out_detail.auditStatus !== 2
              "
              type="primary"
              @click="updateSaleOutStatus"
            >
              出库审核
            </el-button>
            <el-button
              v-if="out_detail.typeName === '销售出库'"
              type="primary"
              @click="openUrl()"
            >
              打印出库单
            </el-button>
            <el-button
              v-if="out_detail.deliveryType === 3"
              type="primary"
              @click="logistics_show = true"
            >
              设置物流信息
            </el-button>
          </el-button-group>
        </p>
      </div>
      <el-tabs v-model="activeName" style="font-size: 20px">
        <el-tab-pane label="订单详情" name="one" style="overflow: auto">
          <el-row :span="24">
            <el-col :span="8">
              <p
                style="padding-left: 20px"
                class="order_midden_left_text el-icon-arrow-right"
              >
                订单详情
              </p>
            </el-col>
            <el-col :span="8">
              <p class="order_midden_left_text el-icon-arrow-right">
                买家及收货信息
              </p>
            </el-col>
            <el-col :span="8">
              <p class="order_midden_left_text el-icon-arrow-right">其他信息</p>
            </el-col>
            <el-col :span="8">
              <div class="order_midden_left">
                <el-form
                  label-width="80px"
                  style="margin-top: 10px; padding-left: 28px; font-size: 10px"
                >
                  <el-form-item label="订单编号">
                    {{ order_detail.no }}
                  </el-form-item>
                  <el-form-item label="支付单号">
                    {{ order_detail.outerTradeNo || "无" }}
                  </el-form-item>
                  <el-form-item label="创建时间">
                    <span v-if="order_detail.createTime">
                      {{ $_common.formatDate(order_detail.createTime) }}
                    </span>
                    <span v-else>--</span>
                  </el-form-item>
                  <el-form-item label="订单状态">
                    <span
                      :class="[
                        order_detail.orderMsg === '待审核'
                          ? 'warning-status'
                          : order_detail.orderMsg === '已关闭'
                          ? 'info-status'
                          : order_detail.orderMsg === '已出库'
                          ? 'primary-status'
                          : order_detail.orderMsg === '已完成'
                          ? 'success-status'
                          : order_detail.orderMsg === '待出库'
                          ? 'danger-status'
                          : 'primary-status',
                      ]"
                    >
                      {{ order_detail.orderMsg }}
                    </span>
                  </el-form-item>
                  <el-form-item label="付款状态">
                    <span
                      :class="[
                        parseInt(order_detail.payStatus) === 5
                          ? 'success-status'
                          : 'danger-status',
                      ]"
                    >
                      {{
                        parseInt(order_detail.payStatus) === 4
                          ? "未付款"
                          : parseInt(order_detail.payStatus) === 5
                          ? "已付款"
                          : parseInt(order_detail.payStatus) === 6
                          ? "已退款"
                          : parseInt(order_detail.payStatus) === 7
                          ? "部分退款"
                          : "部分付款"
                      }}
                      <span v-if="order_detail.payStatus === 3">
                        （剩余未支付金额:{{
                          $_common.formattedNumber(order_detail.notPayMoney)
                        }}）
                      </span>
                      <span v-if="order_detail.payStatus === 7">
                        （退款金额:{{
                          $_common.formattedNumber(order_detail.retMoney)
                        }}）
                      </span>
                      <!--<span
                        v-if="
                          order_detail.payStatus !== 4 &&
                          order_detail.payStatus !== 5
                        "
                        style="margin-left: 10px"
                      >
                        已收定金0元
                      </span>-->
                    </span>
                  </el-form-item>
                  <el-form-item label="退货状态">
                    <span
                      :class="[
                        order_detail.returnStatus === 1
                          ? 'warning-status'
                          : order_detail.returnStatus === 2
                          ? 'primary-status'
                          : 'success-status',
                      ]"
                    >
                      {{
                        order_detail.returnStatus === 1
                          ? "部分退货"
                          : order_detail.returnStatus === 2
                          ? "全部退货"
                          : "未退货"
                      }}
                    </span>
                  </el-form-item>
                  <el-form-item label="审核状态">
                    <span
                      :class="[
                        parseInt(order_detail.auditStatus) === 1
                          ? 'warning-status'
                          : parseInt(order_detail.auditStatus) === 2
                          ? 'success-status'
                          : parseInt(order_detail.auditStatus) === 3
                          ? 'danger-status'
                          : parseInt(order_detail.auditStatus) === 4
                          ? 'warning-status'
                          : 'primary-status',
                      ]"
                    >
                      {{
                        parseInt(order_detail.auditStatus) === 1
                          ? "待审核"
                          : parseInt(order_detail.auditStatus) === 2
                          ? "已通过"
                          : parseInt(order_detail.auditStatus) === 3
                          ? "已驳回"
                          : parseInt(order_detail.auditStatus) === 4
                          ? "审核中"
                          : "其他"
                      }}
                    </span>
                  </el-form-item>
                  <el-form-item label="出库状态">
                    <span
                      :class="[
                        parseInt(order_detail.outStatus) === 4
                          ? 'danger-status'
                          : parseInt(order_detail.outStatus) === 5
                          ? 'success-status'
                          : parseInt(order_detail.outStatus) === 6
                          ? 'warning-status'
                          : 'primary-status',
                      ]"
                    >
                      {{
                        parseInt(order_detail.outStatus) === 4
                          ? "未出库"
                          : parseInt(order_detail.outStatus) === 5
                          ? "已出库"
                          : parseInt(order_detail.outStatus) === 6
                          ? "部分出库"
                          : "其他"
                      }}
                    </span>
                  </el-form-item>
                  <el-form-item label="支付方式">
                    <span v-if="order_detail.payTypeMsg">
                      {{ order_detail.payTypeMsg }}
                    </span>
                    <span v-else>
                      <span v-for="(item, index) in admixPayData" :key="index">
                        {{ item.title }}：{{
                          $_common.formattedNumber(item.payMoney)
                        }};
                      </span>
                    </span>
                  </el-form-item>
                  <el-form-item label="订单来源">
                    <span>
                      {{
                        parseInt(order_detail.source) === 1
                          ? "ios"
                          : parseInt(order_detail.source) === 2
                          ? "安卓"
                          : parseInt(order_detail.source) === 3
                          ? "小程序"
                          : parseInt(order_detail.source) === 4
                          ? "后台创建"
                          : parseInt(order_detail.source) === 5
                          ? "H5页面"
                          : parseInt(order_detail.source) === 6
                          ? "pc页面"
                          : parseInt(order_detail.source) === 8
                          ? "字节跳动小程序"
                          : "其他"
                      }}
                    </span>
                  </el-form-item>
                </el-form>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="order_midden_m">
                <el-form style="margin-top: 10px" label-width="90px">
                  <el-form-item label="客户名称">
                    <span>{{ order_detail.customerName }}</span>
                  </el-form-item>
                  <el-form-item label="客户类型">
                    <span>{{ order_detail.customerTypeName || "无" }}</span>
                  </el-form-item>
                  <el-form-item label="配送方式">
                    <span>
                      {{ order_detail.deliveryName || "其他" }}
                    </span>
                  </el-form-item>
                  <!--                  自提点-->
                  <div
                    v-if="
                      order_detail.deliveryType === 2 &&
                      selfRuleData &&
                      selfRuleData.name
                    "
                  >
                    <el-form-item label="自提点">
                      {{ selfRuleData.name || "--" }}
                    </el-form-item>
                    <el-form-item label="自提点电话">
                      {{ selfRuleData.mobile || "--" }}
                    </el-form-item>
                    <el-form-item label="营业时间">
                      <span
                        v-if="selfRuleData.startTime && selfRuleData.endTime"
                      >
                        {{ selfRuleData.startTime }}-{{ selfRuleData.endTime }}
                      </span>
                      <span v-else>全天</span>
                      <span style="padding-left: 5px">
                        {{ selfRuleData.day.join(",") }}
                      </span>
                    </el-form-item>
                    <el-form-item label="自提点地址">
                      {{ selfRuleData.provinceName }}-{{
                        selfRuleData.cityName
                      }}-{{ selfRuleData.districtName }}-{{
                        selfRuleData.address
                      }}
                    </el-form-item>
                  </div>
                  <!--  收货信息-->
                  <div
                    v-if="
                      order_detail.receiveData &&
                      order_detail.deliveryType !== 2
                    "
                  >
                    <el-form-item label="收货人">
                      {{ order_detail.receiveData.realName || "--" }}
                    </el-form-item>
                    <el-form-item label="收货电话">
                      {{ order_detail.receiveData.mobile || "--" }}
                    </el-form-item>
                    <el-form-item
                      v-if="order_detail.receiveData.area"
                      label="收货地址"
                    >
                      {{ order_detail.receiveData.area.provinceName }}-{{
                        order_detail.receiveData.area.cityName
                      }}-{{ order_detail.receiveData.area.districtName }}-{{
                        order_detail.receiveData.address
                      }}
                    </el-form-item>
                  </div>
                </el-form>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="order_midden_right">
                <el-form label-width="80px">
                  <el-form-item label="业务员">
                    {{ order_detail.salesManName || "未分配" }}
                  </el-form-item>
                  <el-form-item label="所属店铺">
                    {{ order_detail.shopName }}
                  </el-form-item>
                  <el-form-item label="买家留言">
                    {{ order_detail.remark || "无" }}
                  </el-form-item>
                  <el-form-item
                    v-if="
                      order_detail.extends &&
                      order_detail.extends.cancelRejectReason
                    "
                    label="拒绝取消"
                  >
                    {{ order_detail.extends.cancelRejectReason }}
                  </el-form-item>
                  <el-form-item
                    v-if="
                      order_detail.orderStatus === 6 && order_detail.extends
                    "
                    label="退单原因"
                  >
                    {{ order_detail.extends.cancelReason || "无" }}
                  </el-form-item>
                  <div v-if="order_detail.logisticsData">
                    <el-form-item label="物流司机">
                      {{ order_detail.logisticsData.name || "--" }}
                    </el-form-item>
                    <el-form-item label="司机电话">
                      {{ order_detail.logisticsData.truckTel || "--" }}
                    </el-form-item>
                    <el-form-item label="车牌号">
                      {{ order_detail.logisticsData.truckName || "--" }}
                    </el-form-item>
                    <el-form-item label="备注">
                      {{ order_detail.logisticsData.remark || "--" }}
                    </el-form-item>
                  </div>
                  <div
                    v-if="
                      order_detail.extends &&
                      order_detail.extends.bankData &&
                      order_detail.extends.bankData.image
                    "
                  >
                    <el-form-item label="账户名称">
                      {{ order_detail.extends.bankData.name }}
                    </el-form-item>
                    <el-form-item label="支行名称">
                      {{ order_detail.extends.bankData.bankName }}
                    </el-form-item>
                    <el-form-item label="卡号">
                      {{ order_detail.extends.bankData.accountNumber }}
                    </el-form-item>
                    <el-form-item label="打款凭证">
                      <el-image
                        v-for="(item, index) in image"
                        :key="index"
                        style="width: 50px; height: 50px; margin-right: 20px"
                        :src="item"
                        :preview-src-list="[item]"
                      ></el-image>
                    </el-form-item>
                  </div>
                  <div
                    v-if="order_detail.reservoir && order_detail.reservoir.name"
                  >
                    <el-form-item label="分拣区">
                      {{ order_detail.reservoir.name }}
                    </el-form-item>
                  </div>
                </el-form>
              </div>
            </el-col>
          </el-row>
          <!--          v-if="order_detail.deliveryType === 1"-->
          <div v-if="order_detail.deliveryType === 1" class="order_bottom">
            <div class="text clearfix">
              <div class="float_left">发货信息</div>
              <div class="float_right">
                <el-button size="mini" type="primary" @click="editOrderExpress">
                  修改
                </el-button>
              </div>
            </div>
            <div style="padding: 0 28px 28px">
              <el-row class="de_from_row">
                <el-col :span="6">
                  <span class="de_label">运单号:</span>
                  <span class="de_val">
                    {{ order_detail.deliveryNo || "无" }}
                  </span>
                </el-col>
                <el-col :span="6">
                  <span class="de_label">国内承运人:</span>
                  <span class="de_val">
                    {{ order_detail.expressName || "无" }}
                  </span>
                </el-col>
                <el-col :span="6">
                  <span class="de_label">运费:</span>
                  <span class="de_val">¥{{ order_detail.expressMoney }}</span>
                </el-col>
              </el-row>
              <div
                v-if="
                  order_detail.expressData &&
                  order_detail.expressData.list &&
                  order_detail.expressData.list.length
                "
                class="timeline-div"
                :class="[more_express ? 'timeline-all' : '']"
              >
                <el-timeline :reverse="reverse">
                  <el-timeline-item
                    v-for="(activity, index) in order_detail.expressData.list"
                    :key="index"
                    :timestamp="activity.time"
                  >
                    {{ activity.context }}
                  </el-timeline-item>
                </el-timeline>
                <div
                  class="timeline-more-btn"
                  @click="more_express = !more_express"
                >
                  {{ more_express ? "收起" : "展开" }}
                  <i
                    :class="[
                      more_express ? 'el-icon-arrow-up' : 'el-icon-arrow-down',
                    ]"
                  ></i>
                </div>
              </div>
            </div>
          </div>
          <!--  订单详情  商品清单-->
          <div class="order_bottom">
            <p class="text">商品清单</p>
            <el-table :data="order_detail.goodsData" style="width: 100%">
              <el-table-column min-width="200" prop="name" label="商品">
                <template slot-scope="scope">
                  <div class="clearfix">
                    <div class="goods-img-div float_left">
                      <el-image
                        :src="scope.row.goodsImages"
                        fit="cover"
                        class="goods-img"
                      ></el-image>
                    </div>
                    <div class="float_left">
                      <p>
                        {{ scope.row.goodsName }}
                      </p>
                      <p>
                        {{ scope.row.goodsCode }}
                      </p>
                    </div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="规格">
                <template slot-scope="scope">
                  <div class="ui-btn">
                    <span>{{ scope.row.unitName }};</span>
                    <span
                      v-for="(item, index) in scope.row.specGroup"
                      :key="index"
                    >
                      <span v-if="index > 0">_</span>
                      {{ item.specValueName }}
                    </span>
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="单价">
                <template slot-scope="scope">
                  {{ $_common.formattedNumber(scope.row.price) }}
                </template>
              </el-table-column>
              <el-table-column label="购买数量">
                <template slot-scope="scope">
                  {{ $_common.formatNub(scope.row.buyNum) }}
                  <span v-if="scope.row.isEq === 5">
                    <span v-if="scope.row.u_1_buy">
                      （{{ scope.row.u_1_buy }}{{ scope.row.u_1 }}）
                    </span>
                    <span v-else>（{{ scope.row.otherNum }}）</span>
                  </span>
                </template>
              </el-table-column>
              <el-table-column label="已发货" prop="deliverNum">
                <template slot-scope="scope">
                  {{ $_common.formatNub(scope.row.outNum) }}
                </template>
              </el-table-column>
              <el-table-column label="未发货" prop="outOfNum">
                <template slot-scope="scope">
                  {{ $_common.formatNub(scope.row.outOfNum) }}
                </template>
              </el-table-column>
              <el-table-column label="商品总价" prop="totalMoney">
                <template slot-scope="scope">
                  {{ $_common.formattedNumber(scope.row.totalMoney) }}
                </template>
              </el-table-column>
              <el-table-column label="商品条码" prop="barCode">
                <template slot-scope="scope">
                  {{ scope.row.barCode || "--" }}
                </template>
              </el-table-column>
              <el-table-column label="货架编码" prop="storage">
                <template slot-scope="scope">
                  {{ scope.row.storage || "--" }}
                </template>
              </el-table-column>
            </el-table>
            <div>
              <p class="order_p">
                <span>商品总价:</span>
                <span class="order_p_money">
                  {{ $_common.formattedNumber(order_detail.totalMoney) }}
                </span>
                <span>- 订单优惠:</span>
                <span class="order_p_money">
                  {{ $_common.formattedNumber(order_detail.orderPreferential) }}
                  （
                  <span>优惠券优惠:</span>
                  <span class="order_p_money">
                    {{ $_common.formattedNumber(order_detail.preferential) }}
                  </span>
                  <span>+ 会员卡优惠:</span>
                  <span class="order_p_money">
                    {{ $_common.formattedNumber(order_detail.vipDiscount) }}
                  </span>
                  ）
                </span>

                <span v-if="Number(order_detail.retMoney) !== 0">
                  - 退款金额:
                </span>
                <span
                  v-if="Number(order_detail.retMoney) !== 0"
                  class="order_p_money"
                >
                  {{ $_common.formattedNumber(order_detail.retMoney) }}
                </span>
                <span>+ 运费:</span>
                <span class="order_p_money">
                  {{ $_common.formattedNumber(order_detail.expressMoney) }}
                </span>
                <span>= 实际订单金额:</span>
                <span class="order_p_money">
                  {{ $_common.formattedNumber(order_detail.payAmount) }}
                </span>
              </p>
            </div>
          </div>
        </el-tab-pane>
        <!--        出库详情-->
        <el-tab-pane
          v-if="
            ['待出库', '已出库', '部分出库', '已完成'].includes(
              order_detail.orderMsg
            ) && $accessCheck($Access.InventoryOutGetInventoryOutInfo)
          "
          label="出库详情"
          name="two"
        >
          <OutWarehouseInfo
            :audit-out="audit_out"
            :order-id="order_id"
            :order-type="order_detail.orderType"
            @getOutDetail="getOutDetail"
            @auditSuccess="getOrderInfoById"
          ></OutWarehouseInfo>
        </el-tab-pane>
        <el-tab-pane
          v-if="
            parseInt(order_detail.auditStatus) === 2 &&
            parseInt(order_detail.outStatus) !== 4 &&
            $accessCheck($Access.ReceivableList)
          "
          label="收款情况"
          name="three"
        >
          <ReceiveDetail
            :order-no="order_detail.no"
            @auditSuccess="getOrderInfoById"
          ></ReceiveDetail>
        </el-tab-pane>
        <el-tab-pane v-if="order_detail.orderLog" label="操作记录" name="four">
          <OrderLogs :order-log="order_detail.orderLog"></OrderLogs>
        </el-tab-pane>
      </el-tabs>
    </div>
    <LogisticsData
      v-if="logistics_show"
      :show="logistics_show"
      :num="false"
      :type="5"
      :order-id="out_detail.sourceId"
      :user-center-id="user_center_id"
      @cancel="logistics_show = false"
      @confirm="logisticsDataConfirm"
    ></LogisticsData>
    <OrderOut
      v-if="show_out"
      :receive-data="received_data"
      :out-id="out_id"
      :is-show="show_out"
      @cancel="show_out = false"
      @confirm="orderAuditConfirm"
    ></OrderOut>
    <vxe-modal v-model="cancel_tip" width="500" title="取消订单审核">
      <template #default>
        <p style="line-height: 30px">
          客户发起取消订单:{{ order_detail.extends.cancelReason }}
        </p>
        <p style="line-height: 30px">
          是否同意客户取消订单，如果拒绝，请输入拒绝原因
        </p>
        <vxe-input
          v-model="cancelRejectReason"
          style="width: 100%"
          placeholder="拒绝原因"
        ></vxe-input>
        <div slot="footer" style="text-align: right; padding-top: 20px">
          <el-button type="danger" @click="cancelReject">拒绝</el-button>
          <el-button type="primary" @click="cancelConfirm">同意</el-button>
        </div>
      </template>
    </vxe-modal>
  </div>
</template>

<script>
  import OutWarehouseInfo from "../components/OutWarehouseInfo";
  import OrderLogs from "../components/OrderLogs";
  import ReceiveDetail from "../components/ReceiveDetail";
  import LogisticsData from "../components/LogisticsData";
  import OrderOut from "../components/OrderOut.vue";
  import {
    getOrderInfoById,
    updateOrderStatus,
    updateAuditStatus,
    updateOrderPayData,
    revokeAudit,
    reStockOut,
    retAmount,
  } from "@/api/Order";
  export default {
    components: {
      OutWarehouseInfo,
      ReceiveDetail,
      OrderLogs,
      LogisticsData,
      OrderOut,
    },
    data() {
      return {
        cancelRejectReason: "",
        cancel_tip: false,
        more_express: false,
        reverse: true,
        logistics_show: false,
        show_out: false,
        audit_out: false,
        audit_loading: false,
        time_step: 0, // 步骤条
        activeName: "one", // tab 导航栏
        user_center_id: "",
        order_id: "",
        order_detail: {}, // 订单详情
        selfRuleData: {},
        admixPayData: [],
        out_detail: {}, // 出库单详情
        out_id: "", //出库单Id
        image: "",
        received_data: {},
      };
    },
    async created() {
      // 订单详情
      this.user_center_id = this.$route.params.userCenterId;
      this.order_id = this.$route.params.id;
      await this.getOrderInfoById();
    },
    activated() {
      if (this.$_isInit()) return;
      // 订单详情
      this.user_center_id = this.$route.params.userCenterId;
      this.order_id = this.$route.params.id;
      this.getOrderInfoById();
    },
    methods: {
      // 获取订单详情
      async getOrderInfoById() {
        const { data } = await getOrderInfoById(this.user_center_id, {
          orderId: this.order_id,
        });
        this.order_detail = data;
        if (
          data.extends &&
          data.extends.bankData &&
          data.extends.bankData.image.length
        ) {
          this.image = data.extends.bankData.image;
        }
        this.selfRuleData = JSON.parse(data.selfRuleData);
        // 订单进度
        if (data.orderStatus === 6) {
          // 已关闭
          this.time_step = 4;
          return;
        }
        if (data.auditStatus === 1) {
          // 待审核
          this.time_step = 0;
        } else if (data.auditStatus === 2 && data.orderStatus === 4) {
          // 已出库
          this.time_step = 2;
        } else if (data.auditStatus === 2 && data.orderStatus === 5) {
          // 已完成
          this.time_step = 3;
        } else if (data.auditStatus === 2) {
          // 待出库
          this.time_step = 1;
        } else if (data.orderStatus === 6) {
          // 已关闭
          this.time_step = 4;
        }
        // 是否是组合支付
        if (data.extends && data.extends.admixPayData) {
          this.admixPayData = data.extends.admixPayData;
        }
      },
      // 取消订单
      async updateOrderStatus() {
        this.$prompt("请输入取消订单原因", "取消订单", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
        }).then(async ({ value }) => {
          const data = await updateOrderStatus(this.order_detail.userCenterId, {
            orderId: this.$route.params.id,
            orderStatus: 6,
            cancelReason: value,
          });
          await this.getOrderInfoById();
          this.$message({
            type: "success",
            message: "取消订单成功,您的取消原因是: " + value,
          });
        });

        // this.$confirm("确定要取消该订单吗?", "提示", {
        //   confirmButtonText: "确定",
        //   cancelButtonText: "取消",
        //   type: "warning",
        // }).then(async () => {
        //   const data = await updateOrderStatus(this.order_detail.userCenterId, {
        //     orderId: this.$route.params.id,
        //   });
        //
        //   this.$message({
        //     type: "success",
        //     message: "操作成功",
        //   });
        //   this.getOrderInfoById();
        // });
      },
      // 审核订单
      async updateAuditStatus() {
        if (this.order_detail.payTypeMsg === "银行打款" && !this.image) {
          this.$message.warning("银行打款需要上传支付凭证才可以审核！");
          return;
        }
        this.$confirm("确定要审核通过该订单吗?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(async () => {
          this.audit_loading = true;
          try {
            const data = await updateAuditStatus(
              this.order_detail.userCenterId,
              {
                orderId: this.order_detail.id,
                auditStatus: 2,
                audit: this.userName,
              }
            );
            await this.getOrderInfoById();
            if (
              this.$accessCheck(this.$Access.InventoryOutGetInventoryOutInfo)
            ) {
              this.activeName = "two";
            }
            this.audit_loading = false;
          } catch {
            this.audit_loading = false;
          }
        });
      },
      // 驳回订单
      async deAudit() {
        this.$confirm("确定要驳回该订单吗?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(async () => {
          const data = await revokeAudit(this.order_detail.id);
          this.$message.success("订单驳回成功！");
          await this.getOrderInfoById();
        });
      },
      // 确认收货
      async confirmOrder() {
        this.$confirm("确定收货吗?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(async () => {
          const data = await updateOrderStatus(this.order_detail.userCenterId, {
            orderId: this.$route.params.id,
            orderStatus: 5,
          });

          this.$message({
            type: "success",
            message: "操作成功",
          });
          await this.getOrderInfoById();
        });
      },
      // 确认收款
      async confirmPay() {
        this.$confirm("确定收款吗?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(async () => {
          const data = await updateOrderPayData(
            this.order_detail.userCenterId,
            {
              orderId: this.$route.params.id,
            }
          );

          this.$message({
            type: "success",
            message: "操作成功",
          });
          await this.getOrderInfoById();
        });
      },
      // 再次出库
      async reStockOut(row) {
        this.$confirm("是否确认订单再次出库?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(async () => {
          const { data } = await reStockOut(this.order_detail.id);
          this.$message.success("再次出库成功");
          await this.getOrderInfoById();
        });
      },
      // 一键退款
      retAmount() {
        this.$confirm("确定退款?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(async () => {
          const { data } = await retAmount({
            orderId: this.order_detail.id,
          });
          this.$message({
            type: "success",
            message: data,
          });
          await this.getOrderInfoById();
        });
      },
      // 订单打印 新窗口打开
      openUrl(tag) {
        let path = "";
        if (tag === "order") {
          path = `/OrderPrinting/${this.$route.params.userCenterId}/${this.$route.params.id}`;
        } else {
          path = `/OutgoingPrinting/${this.out_detail.id}`;
        }
        let routeData = this.$router.resolve({
          path: path,
        });
        window.open(routeData.href, "_blank");
      },
      getOutDetail(obj) {
        this.out_detail = obj;
      },
      updateSaleOutStatus() {
        this.audit_out = !this.audit_out;
      },
      logisticsDataConfirm() {
        this.getOrderInfoById();
      },
      // 修改订单的发货信息
      editOrderExpress() {
        this.received_data = {
          ...this.order_detail.receiveData,
          orderId: this.order_detail.id,
          deliveryNo: this.order_detail.deliveryNo,
          expressId: this.order_detail.expressId,
          expressName: this.order_detail.expressName,
          page: "order",
        };
        this.show_out = true;
      },
      // 物流信息修改确定
      async orderAuditConfirm() {
        this.show_out = false;
        await this.getOrderInfoById();
      },
      async cancelReject() {
        if (!this.cancelRejectReason) {
          this.$message({
            type: "warning",
            message: "请输入拒绝原因",
          });
          return;
        }
        const data = await updateOrderStatus(this.order_detail.userCenterId, {
          orderId: this.order_detail.id,
          orderStatus: 7,
          cancelRejectReason: this.cancelRejectReason,
        });
        this.$message({
          type: "success",
          message:
            "您已拒绝客户的取消订单申请,原因是: " + this.cancelRejectReason,
        });
        this.cancel_tip = false;
        await this.getOrderInfoById();
      },
      async cancelConfirm() {
        const data = await updateOrderStatus(this.order_detail.userCenterId, {
          orderId: this.order_detail.id,
          orderStatus: 6,
          cancelReason: "工作人员同意客户主动的发起取消订单",
        });
        this.cancel_tip = false;
        this.$message({
          type: "success",
          message: "操作成功",
        });
        await this.getOrderInfoById();
      },
    },
  };
</script>
<style>
  .order .el-tabs__nav {
    margin-left: 28px;
  }
  .order .el-form-item--small.el-form-item {
    margin-bottom: 5px;
  }
  .order .el-tabs__item {
    height: 50px;
    line-height: 50px;
  }
  .order_top_content .el-step__title {
    font-size: 18px;
    font-weight: 400;
    color: #4f5e7b;
    padding-bottom: 8px;
  }
  .order_top_content .el-step__description p {
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
    color: #879bba !important;
  }
  .order_top_content .el-step__head.is-process {
    color: #2153d4;
    border-color: #2153d4;
  }
</style>
<style scoped lang="scss">
  .goods-img-div {
    margin-right: 10px;
    transform: translateY(5px);
    .goods-img {
      width: 34px;
      height: 34px;
      background: #d8d8d8;
      display: block;
    }
  }
  .timeline-div {
    height: 200px;
    padding-top: 20px;
    overflow: hidden;
    position: relative;
    transition: 0.2s;
    &.timeline-all {
      height: auto;
    }
  }
  .timeline-more-btn {
    position: absolute;
    width: 100%;
    text-align: center;
    height: 50px;
    bottom: 0;
    font-size: 14px;
    left: 0;
    background: linear-gradient(rgba(0, 0, 0, 0), #ffffff);
    color: $base-color-blue;
    line-height: 50px;
    cursor: pointer;
  }
  .de_from_row {
    font-size: 14px;
  }
  .sku-btn {
    width: 71px;
    height: 22px;
    line-height: 22px;
    background: #f5f5f5;
    border-radius: 4px;
    border: 1px solid #cad0d7;
    text-align: center;
    font-size: 12px;
    cursor: pointer;
  }
  .order {
    .order_midden_left_text {
      font-weight: bold;
      font-size: 14px;
    }
    .Warehouse {
      margin-top: 16px;
      width: 100%;
      height: 140px;
      background-color: #ffffff;
      margin-bottom: 22px;
      .txt {
        font-size: 16px;
        font-family: SourceHanSansCN-Medium, SourceHanSansCN;
        font-weight: 500;
        color: #2d405e;
        line-height: 64px;
        padding: 0px 28px;
      }
    }
    .order_top {
      //width: 1813px;
      width: 100%;
      height: 140px;
      background-color: #ffffff;
      border-radius: 3px;
      padding: 25px 70px;
      //position: fixed;
      //top: 80px;
      //left: 80px;
      //z-index: 99;
      .order_top-content {
        width: 70%;
        height: 50px;
        margin: 20px auto;
      }
    }
    .order_midden {
      margin-top: 16px;
      //margin-top: 156px;
      width: 100%;
      //height: 480px;
      background-color: #ffffff;
      border-radius: 3px;
      position: relative;
      .order_midden_top {
        position: absolute;
        top: 12px;
        right: 32px;
        z-index: 99;
        .salf-code {
          line-height: 32px;
          display: inline-block;
          font-size: 16px;
          font-weight: 500;
          color: #36b365;
          margin-right: 32px;
          vertical-align: middle;
        }
        .confirm {
          text-align: center;
          display: inline-block;
          width: 70px;
          height: 20px;
          //line-height: 20px;
          background-color: $base-color-blue;
          color: #ffffff;
          margin-right: 1px;
          margin-left: 10px;
          border-top-left-radius: 5px;
          border-bottom-left-radius: 5px;
        }
        .con {
          width: 20px;
          text-align: center;
          display: inline-block;
          line-height: 20px;
          background-color: $base-color-blue;
          color: #ffffff;
          border-top-right-radius: 5px;
          border-bottom-right-radius: 5px;
        }
      }
      .order_midden_left {
        margin-top: 16px;
        width: 95%;
        height: 350px;
        border-right: 1px solid #dee2ee;
      }
      .order_midden_m {
        margin-top: 16px;
        width: 95%;
        height: 350px;
        border-right: 1px solid #dee2ee;
      }
      .order_midden_right {
        margin-top: 16px;
      }
    }
    .order_bottom {
      border-top: 16px solid #f6f8f9;
      width: 100%;
      background-color: #ffffff;
      border-radius: 3px;
      .text {
        font-size: 16px;
        font-family: SourceHanSansCN-Medium, SourceHanSansCN;
        font-weight: 600;
        color: #2d405e;
        line-height: 64px;
        padding: 0px 28px;
      }
      .order_p {
        font-size: 14px;
        text-align: right;
        line-height: 58px;
        padding-right: 38px;
        color: #2d405e;
        .order_p_money {
          color: #fa6400;
          margin: 0 3px;
        }
      }
    }
  }
</style>
