<template>
  <div class="after-sales-order-details">
    <el-tabs v-model="activeName">
      <el-tab-pane label="售后申请" name="1">
        <h3><span></span>售后单信息</h3>
        <el-descriptions :column="2" labelClassName="all-class">
          <el-descriptions-item label="售后单编号"
            >{{ afterSalesData.afterSalesNo || "--"
            }}<i
              v-if="afterSalesData.afterSalesNo"
              class="el-icon-document-copy"
              @click="copyText(afterSalesData.afterSalesNo)"
            ></i
          ></el-descriptions-item>
          <el-descriptions-item label="平台售后单编号"
            >{{ afterSalesData.afterSalesPlatformCode || "--"
            }}<i
              v-if="afterSalesData.afterSalesPlatformCode"
              class="el-icon-document-copy"
              @click="copyText(afterSalesData.afterSalesPlatformCode)"
            ></i
          ></el-descriptions-item>
          <el-descriptions-item label="平台订单号"
            >{{ afterSalesData.platformCode || "--"
            }}<i
              v-if="afterSalesData.platformCode"
              class="el-icon-document-copy"
              @click="copyText(afterSalesData.platformCode)"
            ></i
          ></el-descriptions-item>
          <el-descriptions-item label="店铺">{{
            afterSalesData.shopName || "--"
          }}</el-descriptions-item>
          <el-descriptions-item label="管易订单号"
            >{{ afterSalesData.erpcode || "--"
            }}<i
              v-if="afterSalesData.erpcode"
              class="el-icon-document-copy"
              @click="copyText(afterSalesData.erpcode)"
            ></i
          ></el-descriptions-item>
          <el-descriptions-item label="管易退款单编号"
            >{{ afterSalesData.erpRefundNo || "--"
            }}<i
              v-if="afterSalesData.erpRefundNo"
              class="el-icon-document-copy"
              @click="copyText(afterSalesData.erpRefundNo)"
            ></i
          ></el-descriptions-item>
          <el-descriptions-item
            label="售后单类型"
            contentClassName="state-color1"
          >
            {{
              afterSalesData.afterSalesType
                ? typefilter(afterSalesData.afterSalesType, orderTypeList)
                : "--"
            }}
          </el-descriptions-item>
          <el-descriptions-item label="售后原因">{{
            afterSalesData.refundReason || "--"
          }}</el-descriptions-item>
          <el-descriptions-item label="售后数量(件)">{{
            afterSalesData.allNum || "--"
          }}</el-descriptions-item>
          <el-descriptions-item label="售后金额(元)">{{
            afterSalesData.allMoney
              ? `￥${$numFormat(afterSalesData.allMoney)}`
              : "--"
          }}</el-descriptions-item>
          <el-descriptions-item
            label="售后单状态"
            contentClassName="state-color1"
          >
            {{
              afterSalesData.afterSalesStatus
                ? typefilter(afterSalesData.afterSalesStatus, orderStateList)
                : "--"
            }}
          </el-descriptions-item>
          <el-descriptions-item label="购买会员">{{
            afterSalesData.vipName || "--"
          }}</el-descriptions-item>
          <el-descriptions-item label="收货人手机">{{
            afterSalesData.userMobile || "--"
          }}</el-descriptions-item>
          <el-descriptions-item label="收货人">{{
            afterSalesData.userName || "--"
          }}</el-descriptions-item>
          <el-descriptions-item label="对接客服人员">{{
            afterSalesData.customerService || "--"
          }}</el-descriptions-item>
          <el-descriptions-item label="退款申请时间">{{
            afterSalesData.auditTime || "--"
          }}</el-descriptions-item>
          <el-descriptions-item
            label="是否代发"
            contentClassName="state-color1"
            >{{ afterSalesData.hasSupplier == 0
              ? "否"
              : afterSalesData.hasSupplier == 1
              ? "是"
              : "--" }}</el-descriptions-item
          >
          <el-descriptions-item
            label="代发供货商"
            contentClassName="state-color1"
            >{{ afterSalesData.supplierName || "--" }}</el-descriptions-item
          >
          <el-descriptions-item
            label="退货包裹回寄地"
            contentClassName="state-color1"
            >{{ typefilter(afterSalesData.refundAddressType, sendBackLandList) }}</el-descriptions-item
          >
          <!-- <el-descriptions-item label="售后单状态">{{
            afterSalesData.afterSalesStatus || "--"
          }}</el-descriptions-item> -->
          <el-descriptions-item label="备注">
            <!-- <el-input
              v-model.trim="afterSalesData.remark"
              clearable
              type="textarea"
              maxlength="100"
              placeholder="填写备注，不超过100个字"
              resize="none"
              rows="3"
              readonly
            /> -->{{ afterSalesData.remark || "--" }}
          </el-descriptions-item>
        </el-descriptions>

        <h3 style="margin-top: 36px"><span></span>售后商品列表</h3>
        <el-table :data="afterSalesData.items" border stripe class="w100">
          <el-table-column prop="skuNo" min-width="160" label="售后商品信息">
            <template slot-scope="scope">
              {{ scope.row.skuNo }}/{{ scope.row.skuName }}
            </template>
          </el-table-column>
          <el-table-column prop="num" label="销售数量(件)" align="center" />
          <el-table-column prop="costPrice" label="成本价(元)" align="center">
            <template slot-scope="scope">
              ￥{{ $numFormat(scope.row.costPrice) }}
            </template>
          </el-table-column>
          <el-table-column prop="salePrice" label="销售单价(元)" align="center">
            <template slot-scope="scope">
              ￥{{ $numFormat(scope.row.salePrice) }}
            </template>
          </el-table-column>
          <el-table-column
            label="销售金额(元)"
            align="center"
            prop="totalAmount"
          >
            <template slot-scope="scope">
              ￥{{ $numFormat(scope.row.totalAmount) }}
            </template>
          </el-table-column>
          <el-table-column
            label="实付单价(元)"
            align="center"
            prop="actualPrice"
          >
            <template slot-scope="scope">
              ￥{{ $numFormat(scope.row.actualPrice) }}
            </template>
          </el-table-column>
          <el-table-column
            label="实付金额(元)"
            align="center"
            prop="actualAmount"
          >
            <template slot-scope="scope">
              ￥{{ $numFormat(scope.row.actualAmount) }}
            </template>
          </el-table-column>
          <el-table-column
            label="已申请售后数量"
            align="center"
            prop="alreadyAfterSalesNum"
          >
          </el-table-column>
          <el-table-column
            label="已申请售后金额"
            align="center"
            prop="alreadyAfterSalesAmount"
          >
            <template slot-scope="scope">
              ￥{{ $numFormat(scope.row.alreadyAfterSalesAmount) }}
            </template>
          </el-table-column>
          <el-table-column
            label="申请售后数量(件)"
            align="center"
            prop="requestedRefundQuantity"
          >
          </el-table-column>
          <el-table-column
            label="申请售后金额(元)"
            align="center"
            prop="requestedRefundAmount"
          >
            <template slot-scope="scope">
              ￥{{ $numFormat(scope.row.requestedRefundAmount) }}
            </template>
          </el-table-column>
        </el-table>
        <div class="after-sales-products-total">
          <span style="margin-right: 10px"
            >总售后数量：{{ afterSalesData.allNum }}件</span
          >
          <span
            >总售后金额：<span class="state-color2">
              ￥{{ $numFormat(afterSalesData.allMoney) }}</span
            >元</span
          >
        </div>
      </el-tab-pane>
      <el-tab-pane label="退货信息" name="2">
        <div
          v-for="(item, index) in returnInformation"
          :key="index"
          style="margin-bottom: 36px"
        >
          <h3><span></span>签收退货信息-{{ index + 1 }}</h3>
          <el-descriptions :column="2" labelClassName="all-class">
            <el-descriptions-item label="退货单编号"
              >{{ item.refundCode || "--"
              }}<i
                v-if="item.refundCode"
                class="el-icon-document-copy"
                @click="copyText(item.refundCode)"
              ></i
            ></el-descriptions-item>
            <el-descriptions-item label="管易退货单编号"
              >{{ item.erpRefundCode || "--"
              }}<i
                v-if="item.erpRefundCode"
                class="el-icon-document-copy"
                @click="copyText(item.erpRefundCode)"
              ></i
            ></el-descriptions-item>
            <el-descriptions-item label="退货物流单号"
              >{{ item.expressNo || "--"
              }}<i
                v-if="item.expressNo"
                class="el-icon-document-copy"
                @click="copyText(item.expressNo)"
              ></i
            ></el-descriptions-item>
            <el-descriptions-item label="退货物流公司">{{
              item.expressComName
                ? typefilter(item.expressComName, returnLogisticsCompanyList)
                : "--"
            }}</el-descriptions-item>
            <el-descriptions-item label="退入仓库">{{
              item.warehouseName || "--"
            }}</el-descriptions-item>
            <el-descriptions-item label="退货包裹寄回地">{{
              item.refundAddress || "--"
            }}</el-descriptions-item>
            <el-descriptions-item
              label="签收退货数量(件)"
              contentClassName="state-color1"
              >{{ item.num || "--" }}</el-descriptions-item
            >
            <el-descriptions-item label="签收退货金额(元)">{{
              item.amount ? `￥${$numFormat(item.amount)}` : "--"
            }}</el-descriptions-item>
            <el-descriptions-item label="退货签收人">{{
              item.signUser || "--"
            }}</el-descriptions-item>
            <el-descriptions-item label="退货签收时间">{{
              item.signTime || "--"
            }}</el-descriptions-item>
            <el-descriptions-item label="管易采购退货单"
              >{{ item.erpCgRefundCode || "--"
              }}<i
                v-if="item.erpCgRefundCode"
                class="el-icon-document-copy"
                @click="copyText(item.erpCgRefundCode)"
              ></i
            ></el-descriptions-item>
          </el-descriptions>
          <el-table :data="item.signItemDTOList" border stripe class="w100">
            <el-table-column prop="sku" min-width="160" label="订单商品">
              <template slot-scope="scope">
                <span>{{ scope.row.sku }}</span>
                <span>{{ scope.row.skuName }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="price" label="成本价(元)" align="center">
              <template slot-scope="scope">
                ￥{{ $numFormat(scope.row.price) }}
              </template>
            </el-table-column>
            <el-table-column
              prop="salePrice"
              label="销售单价(元)"
              align="center"
            >
              <template slot-scope="scope">
                ￥{{ $numFormat(scope.row.salePrice) }}
              </template>
            </el-table-column>
            <el-table-column
              prop="saleAmount"
              label="销售金额(元)"
              align="center"
            >
              <template slot-scope="scope">
                ￥{{ $numFormat(scope.row.saleAmount) }}
              </template>
            </el-table-column>
            <el-table-column
              prop="payAmount"
              label="实付金额(元)"
              align="center"
            >
              <template slot-scope="scope">
                ￥{{ $numFormat(scope.row.payAmount) }}
              </template>
            </el-table-column>
            <el-table-column
              label="申请售后数量(件)"
              align="center"
              prop="afterNum"
            >
            </el-table-column>
            <el-table-column
              label="申请售后单价(元)"
              align="center"
              prop="qqqq"
            >
              <template slot-scope="scope">
                ￥{{ $numFormat((scope.row.afterAmount/scope.row.afterNum).toFixed(2)) }}
              </template>
            </el-table-column>
            <el-table-column
              label="申请售后金额(元)"
              align="center"
              prop="afterAmount"
            >
              <template slot-scope="scope">
                ￥{{ $numFormat(scope.row.afterAmount) }}
              </template>
            </el-table-column>
            <el-table-column
              label="签收退货数量(件)"
              align="center"
              prop="signNum"
            >
            </el-table-column>
            <el-table-column
              label="签收退货金额(元)"
              align="center"
              prop="signAmount"
            >
              <template slot-scope="scope">
                ￥{{ $numFormat(scope.row.signAmount) }}
              </template>
            </el-table-column>
            <el-table-column
              label="签收退货商品串码"
              align="center"
              prop="snNos"
            >
            </el-table-column>
            <el-table-column prop="isDf" label="是否代发" align="center">
              <template slot-scope="scope">
                <span>{{
                  scope.row.isDf == 0 ? "否" : scope.row.isDf == 1 ? "是" : ""
                }}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="supplierName"
              label="代发供应商"
              align="center"
            >
            </el-table-column>
          </el-table>
          <div class="after-sales-products-total">
            <span style="margin-right: 10px"
              >签收退货数量：{{ returnInformationTotal[index].signNum }}件</span
            >
            <span
              >签收退货金额：<span class="state-color2">{{
                `￥${$numFormat(returnInformationTotal[index].signAmount)}`
              }}</span
              >元</span
            >
          </div>
        </div>
        <div v-if="!returnInformation || returnInformation.length == 0">
          <el-table :data="[]" border stripe class="w100">
            <el-table-column prop="sku" min-width="160" label="订单商品">
              <template slot-scope="scope">
                <span>{{ scope.row.sku }}</span>
                <span>{{ scope.row.skuName }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="price" label="成本价(元)" align="center">
              <template slot-scope="scope">
                ￥{{ $numFormat(scope.row.price) }}
              </template>
            </el-table-column>
            <el-table-column
              prop="salePrice"
              label="销售单价(元)"
              align="center"
            >
              <template slot-scope="scope">
                ￥{{ $numFormat(scope.row.salePrice) }}
              </template>
            </el-table-column>
            <el-table-column
              prop="saleAmount"
              label="销售金额(元)"
              align="center"
            >
              <template slot-scope="scope">
                ￥{{ $numFormat(scope.row.saleAmount) }}
              </template>
            </el-table-column>
            <el-table-column
              prop="payAmount"
              label="实付金额(元)"
              align="center"
            >
              <template slot-scope="scope">
                ￥{{ $numFormat(scope.row.payAmount) }}
              </template>
            </el-table-column>
            <el-table-column
              label="申请售后数量(件)"
              align="center"
              prop="afterNum"
            >
            </el-table-column>
            <el-table-column
              label="申请售后单价(元)"
              align="center"
              prop="qqqq"
            >
              <template slot-scope="scope">
                ￥{{ $numFormat((scope.row.afterAmount/scope.row.afterNum).toFixed(2)) }}
              </template>
            </el-table-column>
            <el-table-column
              label="申请售后金额(元)"
              align="center"
              prop="afterAmount"
            >
              <template slot-scope="scope">
                ￥{{ $numFormat(scope.row.afterAmount) }}
              </template>
            </el-table-column>
            <el-table-column
              label="签收退货数量(件)"
              align="center"
              prop="signNum"
            >
            </el-table-column>
            <el-table-column
              label="签收退货金额(元)"
              align="center"
              prop="signAmount"
            >
              <template slot-scope="scope">
                ￥{{ $numFormat(scope.row.signAmount) }}
              </template>
            </el-table-column>
            <el-table-column
              label="签收退货商品串码"
              align="center"
              prop="snNos"
            >
            </el-table-column>
            <el-table-column prop="isDf" label="是否代发" align="center">
              <template slot-scope="scope">
                <span>{{
                  scope.row.isDf == 0 ? "否" : scope.row.isDf == 1 ? "是" : ""
                }}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="supplierName"
              label="代发供应商"
              align="center"
            >
            </el-table-column>
          </el-table>
        </div>
      </el-tab-pane>
      <el-tab-pane label="换货信息" name="3">
        <h3><span></span>换货商品列表</h3>
        <el-table
          :data="exchangeInformationData.goodsList"
          border
          stripe
          class="w100"
        >
          <el-table-column
            prop="skuName"
            min-width="160"
            label="换货商品信息"
          >
            <template slot-scope="scope">
              {{ scope.row.skuNo }}/{{ scope.row.skuName }}
            </template>
          </el-table-column>
          <el-table-column prop="price" label="成本价(元)" align="center">
            <template slot-scope="scope">
              ￥{{ $numFormat(scope.row.price) }}
            </template>
          </el-table-column>
          <el-table-column prop="num" label="换货数量(件)" align="center" />
          <el-table-column
            prop="salePrice"
            label="换货销售单价(元)"
            align="center"
          >
            <template slot-scope="scope">
              ￥{{ $numFormat(scope.row.salePrice) }}
            </template>
          </el-table-column>
          <el-table-column
            prop="saleAmount"
            label="换货销售金额(元)"
            align="center"
          >
            <template slot-scope="scope">
              ￥{{ $numFormat(scope.row.saleAmount) }}
            </template>
          </el-table-column>
          <el-table-column
            prop="diffAmount"
            label="补差价金额(元)"
            align="center"
          >
            <template slot-scope="scope">
              ￥{{ $numFormat(scope.row.diffAmount) }}
            </template>
          </el-table-column>
        </el-table>
        <div class="after-sales-products-total">
          <span
            >总补差价金额：<span class="state-color2">{{
              `￥${$numFormat(totalAmount)}`
            }}</span
            >元</span
          >
        </div>
        <h3 style="margin-top: 36px"><span></span>换货销售订单发货信息</h3>
        <el-table
          :data="exchangeInformationData.changeSendDTOS"
          border
          stripe
          class="w100"
        >
          <el-table-column
            prop="erpCode"
            min-width="160"
            label="管易销售订单号"
          >
            <template slot-scope="scope">
              {{ scope.row.erpCode
              }}<i
                class="el-icon-document-copy"
                @click="copyText(scope.row.erpCode)"
              ></i>
            </template>
          </el-table-column>
          <el-table-column prop="skuName" label="发货商品信息" align="center" />
          <el-table-column prop="num" label="发货件数" align="center" />
          <el-table-column prop="sendOrderNo" label="发货单号" align="center">
            <template slot-scope="scope">
              {{ scope.row.sendOrderNo
              }}<i
                class="el-icon-document-copy"
                @click="copyText(scope.row.sendOrderNo)"
              ></i>
            </template>
          </el-table-column>
          <el-table-column
            prop="warehouseName"
            label="发货仓库"
            align="center"
          />
          <el-table-column
            prop="warehouseSend"
            label="仓库发货"
            align="center"
          />
          <el-table-column
            prop="shopSend"
            label="电商平台发货"
            align="center"
          />
          <el-table-column prop="sendTime" label="发货时间" align="center" />
          <el-table-column prop="isDf" label="是否代发" align="center" />
          <el-table-column
            prop="supplierName"
            label="代发供应商"
            align="center"
          />
          <el-table-column
            prop="expressComName"
            label="物流信息"
            align="center"
          >
            <template slot-scope="scope">
              {{ scope.row.expressComName }}
              {{ scope.row.expressNo
              }}<i
                class="el-icon-document-copy"
                @click="copyText(scope.row.expressNo)"
              ></i>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="内部便签" name="4">
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button type="primary" plain size="mini" @click="handleAdd"
              >新增内部便签</el-button
            >
          </el-col>
        </el-row>
        <el-table :data="internalNotesData" border stripe class="w100">
          <el-table-column prop="operUser" label="操作人" align="center" />
          <el-table-column prop="createdTime" label="操作时间" align="center" />
          <el-table-column prop="content" label="便签内容" align="center" />
          <el-table-column prop="goodName" label="操作" align="center">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                @click="handleUpdate(scope.row)"
                >编辑</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="操作日志" name="5">
        <el-table :data="operationLogData" border stripe class="w100">
          <el-table-column
            prop="operationName"
            label="操作步骤"
            align="center"
          />
          <el-table-column
            prop="operationMsg"
            label="操作备注"
            align="center"
          />
          <el-table-column prop="createdBy" label="操作人" align="center" />
          <el-table-column prop="createdTime" label="操作时间" align="center" />
        </el-table>
      </el-tab-pane>
    </el-tabs>

    <el-dialog
      :title="`${internalNots == 'add' ? '新增' : '编辑'}内部便签`"
      :visible.sync="internalNotsDialog"
      width="400px"
      append-to-body
    >
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="便签内容" prop="notesContent">
              <el-input
                v-model="form.notesContent"
                type="textarea"
                placeholder="请输入内容"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="confirmFnc">确 定</el-button>
        <el-button @click="internalNotsDialog = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  afterSalesChangeQuery,
  afterSalesLabelQuery,
  afterSalesLogQuery,
  afterSalesQuery,
  afterSalesRefundQuery,
  afterSalesLabelAdd,
  afterSalesLabelUpdate,
} from "@/api/afterSalesOrder/index";
import { formatDate } from "@/utils/index";

export default {
  props: {},
  components: {},
  name: "afterSalesOrderDetails",
  data() {
    return {
      afterSalesNo: "",
      activeName: "1",
      orderDetail: {},
      SignForReturnInformation: [{}, {}],
      sendBackLandList: [
        { label: "自有仓库", value: "SELF_WAREHOUSE" },
        { label: "代发供货商", value: "SUPPLIER" },
      ],
      internalNots: "add",
      internalNotsDialog: false,
      form: {
        notesContent: "",
      },
      rules: {
        notesContent: [
          { required: true, message: "便签内容不能为空", trigger: "blur" },
        ],
      },
      // 换货信息
      exchangeInformationData: {
        // 商品列表
        goodsList: [],
        // 换货销售订单发货信息
        changeSendDTOS: [],
      },
      totalAmount: 0,
      // 内部便签列表
      internalNotesData: [],
      // 操作日志列表
      operationLogData: [],
      // 申请售后信息
      afterSalesData: {
        exchangeItems: [],
        afterSalesNo: "",
        afterSalesStatus: "",
        afterSalesType: "",
        auditTime: "",
        changeItems: [],
        customerService: "",
        deliveryStatus: "",
        erpCode: "",
        hasRefundUser: "",
        hasSupplier: "",
        items: [],
        platformCode: "",
        platformName: "",
        platformNo: "",
        refundAddressType: "",
        refundAmount: "",
        refundExpressComName: "",
        refundExpressNo: "",
        refundReason: "",
        refundType: "",
        remark: "",
        returnLogisticsExpressComName: "",
        returnLogisticsExpressNo: "",
        shopCode: "",
        shopName: "",
        supplierCode: "",
        supplierName: "",
        userMobile: "",
        userName: "",
        vipName: "",
        orderItems: [],
      },
      // 退货信息
      returnInformation: [],
      orderStateList: [
        { label: "待客服主管复核", value: "AWAITING_SUPERVISOR_APPROVAL" },
        { label: "待接收退货包裹", value: "PENDING_RETURN_PACKAGES" },
        { label: "部分退货", value: "PART_SIGN" },
        { label: "待财务复核", value: "AWAITING_FINANCE_APPROVAL" },
        { label: "待换货", value: "PENDING_CHANGE" },
        { label: "已换货", value: "CONFIRM_SEND_CALLBACK" },
        { label: "待回传发货信息", value: "CONFIRM_SEND" },
        { label: "待退款", value: "PENDING_REFUNDS" },
        { label: "已退款/已处理", value: "REFUNDED" },
        { label: "打回退货包裹", value: "REJECT_PACKAGE" },
        { label: "取消", value: "CANCEL" },
      ],
      orderTypeList: [
        { label: "极速退款", value: "FIRST_REFUND" },
        { label: "仅退款", value: "ONLY_REFUND" },
        { label: "退货退款", value: "REFUND_MONEY_GOODS" },
        { label: "换货", value: "EXCHANGE_GOOD" },
        { label: "补偿退款", value: "COMPENSATION_REFUND" },
      ],
      returnLogisticsCompanyList: [
        { label: "顺丰速运", value: "SF_EXPRESS" },
        { label: "圆通速递", value: "YTO_EXPRESS" },
        { label: "中通快递", value: "ZTO_EXPRESS" },
        { label: "申通快递", value: "STO_EXPRESS" },
      ],
      returnInformationTotal: [],
    };
  },
  created() {},
  mounted() {
    this.afterSalesNo = this.$route.query.afterSalesNo;
    this.getDetails();
  },
  activated() {
    if (this.afterSalesNo != this.$route.query.afterSalesNo) {
      this.afterSalesNo = this.$route.query.afterSalesNo;
      this.getDetails();
    }
  },
  methods: {
    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,
          });
        });
    },
    handleAdd() {
      this.form.notesContent = "";
      this.form.id = "";
      this.internalNots = "add";
      this.internalNotsDialog = true;
      this.$nextTick(() => {
        this.$refs["form"].resetFields();
      });
    },
    handleUpdate(row) {
      this.form.notesContent = row.content;
      this.form.id = row.id;
      this.internalNots = "edit";
      this.internalNotsDialog = true;
    },
    getDetails() {
      const data = {
        afterSalesPlatformCode: this.afterSalesNo,
      };
      // 申请售后查询
      afterSalesQuery(data)
        .then((response) => {
          if (response.status == 200) {
            let items = response.data.items;
            let num = 0,
              money = 0;
            this.afterSalesData = response.data;
            items.forEach((item) => {
              num += Number(item.requestedRefundQuantity);
              money += Number(item.requestedRefundAmount);
            });
            this.afterSalesData["allNum"] = num;
            this.afterSalesData["allMoney"] = money.toFixed(2);
          }
        })
        .catch((err) => {
          // this.$message.error(err);
        });
      // 退货信息查询
      afterSalesRefundQuery(data)
        .then((response) => {
          if (response.status == 200) {
            const listBak = JSON.parse(JSON.stringify(response.data));
            this.returnInformation = response.data;
            this.returnInformationTotal = listBak.map((item) => {
              if (item.signItemDTOList && item.signItemDTOList.length > 0) {
                let signNum = 0,
                  signAmount = 0;
                item.signItemDTOList.forEach((i) => {
                  signNum += parseFloat(i.signNum);
                  signAmount += parseFloat(i.signAmount);
                });
                return {
                  signNum,
                  signAmount: signAmount.toFixed(2),
                };
              } else {
                return {
                  signNum: 0,
                  signAmount: 0,
                };
              }
            });
            // signNum signAmount
          }
        })
        .catch((err) => {
          // this.$message.error(err);
        });
      // 换货信息查询
      afterSalesChangeQuery(data)
        .then((response) => {
          if (response.status == 200) {
            this.exchangeInformationData = response.data;
            this.totalAmount = 0;
            this.exchangeInformationData.goodsList.forEach((item) => {
              this.totalAmount += Number(item.diffAmount);
            });
            this.totalAmount = this.totalAmount.toFixed(2);
          }
        })
        .catch((err) => {
          // this.$message.error(err);
        });
      // 内部便签查询
      afterSalesLabelQuery(data)
        .then((response) => {
          if (response.status == 200) {
            this.internalNotesData = response.data;
          }
        })
        .catch((err) => {
          // this.$message.error(err);
        });
      // 日志查询
      afterSalesLogQuery(data)
        .then((response) => {
          if (response.status == 200) {
            this.operationLogData = response.data;
          }
        })
        .catch((err) => {
          // this.$message.error(err);
        });
    },
    getInternalNotes() {
      const data = {
        afterSalesPlatformCode: this.afterSalesNo,
      };
      // 内部便签查询
      afterSalesLabelQuery(data)
        .then((response) => {
          if (response.status == 200) {
            this.internalNotesData = response.data;
          }
        })
        .catch((err) => {
          // this.$message.error(err);
        });
    },
    confirmFnc() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          const loading = this.$loading({
            lock: true,
            text: "执行中",
            spinner: "el-icon-loading",
            background: "rgba(0, 0, 0, 0.7)",
          });

          let fnc =
            this.internalNots == "add"
              ? afterSalesLabelAdd
              : afterSalesLabelUpdate;
          const params = {
            content: this.form.notesContent,
            afterSalesPlatformCode: this.afterSalesNo,
            id: this.form.id,
            // createdTime: formatDate(Date.now()),
            // id: 0,
            // operUser: "string",
          };
          // 内部便签新增/编辑
          fnc(params)
            .then((response) => {
              loading.close();
              console.log(response);
              if (response.status == 200) {
                this.internalNotsDialog = false;
                this.getInternalNotes();
                this.$message.success(
                  `${this.internalNots == "add" ? "新增" : "编辑"}成功`
                );
              }
            })
            .catch((err) => {
              loading.close();
              // this.$message.error(err);
            });
        }
      });
    },
    typefilter(value, list) {
      const data = list.find((item) => {
        return item.value == value;
      });
      return data ? data.label : "";
    },
  },
  computed: {},
};
</script>
<style lang='scss' scoped>
.after-sales-order-details {
  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;
  font-size: 14px;
  span {
    display: block;
    width: 2px;
    height: 14px;
    background: #f56c6c;
    margin-right: 6px;
  }
}
.color-r {
  color: #f56c6c;
}
.color-y {
  color: #fbc576;
}
.after-sales-products-total {
  display: flex;
  justify-content: flex-end;
  margin: 15px 0;
}
</style>
<style lang="scss">
.after-sales-order-details {
  .el-timeline-item__content {
    .el-card__body {
      padding: 0 16px;
    }
  }
  .el-descriptions-item__label {
    display: flex;
    align-items: center;
  }
  .all-class {
    width: 120px;
  }
  .state-color1 {
    color: #67c23a;
    font-weight: bold;
  }
  .state-color2 {
    color: red;
  }
  .el-descriptions--medium:not(.is-bordered) .el-descriptions-item__cell {
    padding-bottom: 18px;
  }
}
</style>