<template>
  <div class="app-container">
    <el-page-header @back="goBack" content="订单详情"></el-page-header>
    <div class="order-refund-main">
      <el-row style="padding: 15px 15px 10px">
        <el-col :span="24">
          <div class="order-refund-main-title">
            <span>订单编号：{{ orderDetail.orderId }}</span>
            <span>申请退款时间：{{ orderDetail.createTime }}</span>
            <span>商户：{{ orderDetail.companyWechatName || '无' }}</span>
            <div class="fr">
              <el-link type="primary" :underline="false" @click="showRemark('remark')">修改订单备注</el-link>
            </div>
          </div>
        </el-col>
      </el-row>
      <div style="width: 100%; padding: 10px 15px 15px 15px">
        <el-row>
          <el-col :span="8" style="border-right: 1px solid #e8e8e8">
            <div class="order-refund-main-status">
              <span>{{ orderDetail.orderStatus | ORDER_REFUND_CURRENT_STATUS_FILTER }}</span>
            </div>
            <div class="order-refund-main-opt-btn">
              <template v-if="orderDetail.orderStatus === 'DSJCL'">
                <el-button
                  v-if="orderDetail.refundType == 'REFUND_GOODS'"
                  @click="changeExamineStatus('OK', orderDetail.refundType)"
                  slot="reference"
                  size="small"
                  type="primary"
                  >同意</el-button
                >
                <el-popconfirm v-else title="确定同意吗？" @confirm="changeExamineStatus('OK')">
                  <el-button slot="reference" size="small" type="primary">同意</el-button>
                </el-popconfirm>
                <el-popconfirm title="确定拒绝吗？" @confirm="changeExamineStatus('FAIL')" style="margin-left: 10px">
                  <el-button slot="reference" size="small" type="warning">拒绝</el-button>
                </el-popconfirm>
              </template>
              <template v-if="orderDetail.orderStatus === 'DSJSH'">
                <el-popconfirm title="确定要收货吗？" @confirm="receiveProd()">
                  <el-button slot="reference" size="small" type="primary">确认收货</el-button>
                </el-popconfirm>
                <el-button
                  type="success"
                  size="small"
                  @click="queryLogistics(orderDetail.logisticsNo)"
                  v-if="orderDetail.logisticsNo"
                  style="margin-left: 10px"
                  >查看物流</el-button
                >
              </template>
            </div>
          </el-col>
          <el-col :span="16" style="padding: 0 15px">订单备注：{{ orderDetail.remark }}</el-col>
        </el-row>
      </div>
    </div>
    <div class="order-refund-receive-info">
      <el-row :gutter="30">
        <el-col :xs="24" :sm="12" :lg="12">
          <div class="main-detail">
            <div class="title">订单信息</div>
            <div class="item">
              <div class="label">收货人信息：</div>
              <div class="value">{{ orderDetail.receUserName }} ({{ orderDetail.recePhone }})</div>
            </div>
            <div class="item">
              <div class="label">收货人地址：</div>
              <div class="value">
                {{
                  orderDetail.province +
                  orderDetail.city +
                  orderDetail.area +
                  orderDetail.street +
                  orderDetail.receAddress
                }}
              </div>
            </div>
            <div class="item">
              <div class="label">销售员信息：</div>
              <div class="value">{{ orderDetail.workerName }} ({{ orderDetail.workerPhone }})</div>
            </div>
            <div class="item">
              <div class="label">下单渠道：</div>
              <div class="value">{{ orderDetail.source }}</div>
            </div>
            <div class="item">
              <div class="label">支付方式：</div>
              <div class="value">{{ orderDetail.payType }}</div>
            </div>
            <div class="item">
              <div class="label">是否开票：</div>
              <div class="value">{{ orderDetail.tax ? '是' : '否' }}</div>
            </div>
          </div>
        </el-col>
        <el-col :xs="24" :sm="12" :lg="12">
          <div class="main-detail">
            <div class="title">维权信息</div>
            <div class="item">
              <div class="label">退款方式：</div>
              <div class="value">{{ orderDetail.refundType | REFUND_CURRENT_TYPE_FILTER }}</div>
            </div>
            <div class="item">
              <div class="label">退款原因：</div>
              <div class="value">{{ orderDetail.refundReason }}</div>
            </div>
            <div class="item">
              <div class="label">退款说明：</div>
              <div class="value">{{ orderDetail.refundExplain }}</div>
            </div>
            <div class="item">
              <div class="label">退款凭证：</div>
              <div class="value" style="display: flex">
                <div v-for="(item, index) in orderDetail.tkFiles" :key="index" style="margin-right: 10px">
                  <el-image
                    :src="$showImgUrl(item.url)"
                    style="width: 50px; height: 50px"
                    :preview-src-list="[$showImgUrl(item.url)]"
                  ></el-image>
                </div>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="order-refund-detail">
      <el-table :data="orderDetail.orderDetails" style="width: 100%" border>
        <el-table-column label="商品信息" min-width="200">
          <template slot-scope="scope">
            <el-row>
              <el-col :span="6">
                <el-image style="width: 40px; height: 40px" :src="$showImgUrl(scope.row.imgUrl)">
                  <div slot="error" class="image-slot">
                    <i class="el-icon-picture-outline"></i>
                  </div>
                </el-image>
              </el-col>
              <el-col :span="18">
                <div>{{ scope.row.goodsName }}</div>
              </el-col>
            </el-row>
          </template>
        </el-table-column>
        <el-table-column prop="goodsSpecName" label="规格" align="center"></el-table-column>
        <el-table-column prop="price" label="单价" align="center"></el-table-column>
        <el-table-column prop="num" label="数量" align="center"></el-table-column>
        <el-table-column prop="shareAmount" label="分销金额" align="center"></el-table-column>
        <el-table-column prop="profitAmount" label="预计盈利" align="center"></el-table-column>
        <el-table-column prop="totalPrice" label="商品总金额" align="center" min-width="100"></el-table-column>
        <el-table-column prop="userRefundNum" label="用户维权数量" align="center"></el-table-column>
        <el-table-column prop="userRefundAmount" label="用户维权金额" align="center"></el-table-column>
        <el-table-column prop="refundAmount" label="退款金额" align="center"></el-table-column>
        <el-table-column prop="refundNum" label="退款数量" align="center"></el-table-column>
        <el-table-column prop="refundBy" label="退款人" align="center"></el-table-column>
        <el-table-column prop="refundTime" label="退款时间" align="center" min-width="160"></el-table-column>
        <!-- <el-table-column label="退款时间" align="center" min-width="160">
          <template>
            {{ orderDetail.examineTime || '' }}
          </template>
        </el-table-column> -->
      </el-table>
      <div class="order-amount-info">
        <el-row>
          <el-col :span="19"><div style="width: 1px; height: 1px"></div></el-col>
          <el-col :span="5">
            <div style="padding-bottom: 10px">商品总价：¥ {{ totalAmountCompute }}</div>
            <div style="padding-bottom: 10px">运费：¥ {{ orderDetail.freight }}</div>
            <div style="padding-bottom: 10px">优惠：¥ {{ orderDetail.discountAmount }}</div>
            <div style="font-size: 14px">
              <span style="padding-right: 15px">实际收款</span
              ><span style="color: red; font-size: 18px">¥ {{ orderDetail.payAmount }}</span>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <el-dialog
      :title="'订单备注'"
      :visible.sync="remarkVisible"
      :show-close="false"
      width="50%"
      :close-on-click-modal="false"
    >
      <el-input
        type="textarea"
        :autosize="{ minRows: 8, maxRows: 16 }"
        placeholder="请输入备注内容"
        v-model="orderDetail.remark"
        maxlength="100"
        show-word-limit
      >
      </el-input>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="saveRemark">保 存</el-button>
        <el-button @click="cancelRemark">取 消</el-button>
      </div>
    </el-dialog>
    <el-dialog
      :title="'物流信息'"
      :visible.sync="logisticsVisible"
      :show-close="false"
      width="80%"
      :close-on-click-modal="false"
    >
      <el-table :data="logistics" style="width: 100%" size="mini">
        <el-table-column prop="logisticsNo" label="快递单号" align="center"></el-table-column>
        <el-table-column prop="comName" label="物流公司" align="center"></el-table-column>
        <el-table-column prop="time" label="物流时间" align="center"></el-table-column>
        <el-table-column prop="state" label="物流状态" align="center">
          <template slot-scope="scope">
            {{ scope.row.state | EXPRESS_CURRENT_STATE_FILTER }}
          </template>
        </el-table-column>
        <el-table-column prop="context" label="物流详情" align="center"></el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="logisticsVisible = false">关 闭</el-button>
      </div>
    </el-dialog>
    <!-- 退货确认 -->
    <el-dialog
      :title="'退货确认'"
      :visible.sync="returnGoodsVisible"
      :show-close="false"
      width="80%"
      :close-on-click-modal="false"
    >
      <el-form
        :model="returnGoodsForm"
        :rules="returnGoodsFormRules"
        ref="returnGoodsForm"
        label-width="80px"
        label-position="left"
      >
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="卖家留言" prop="refundMessage">
              <el-input
                type="textarea"
                :rows="5"
                v-model="returnGoodsForm.refundMessage"
                placeholder="请输入卖家留言"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-card class="box-card">
              <el-tabs v-model="typeIndex" @tab-click="changeType">
                <el-tab-pane label="发货数量" name="1"></el-tab-pane>
                <el-tab-pane v-if="joinCode" label="退货条码" name="2"></el-tab-pane>
              </el-tabs>
              <br />
              <el-button size="small" v-show="typeIndex == 2 && joinCode" type="primary" @click="addCode()"
                >新增</el-button
              >
              <el-button
                size="small"
                v-show="typeIndex == 1 && joinCode"
                type="primary"
                @click="handleDownload('导入条码模板')"
                >导入条码模板下载</el-button
              >
              <div class="table">
                <!-- 发货数量 -->
                <el-form
                  v-show="typeIndex == 1"
                  ref="formData1"
                  :model="formData1"
                  label-width="0"
                  size="small"
                  label-position="left"
                >
                  <el-table
                    :data="formData1.list"
                    element-loading-text="Loading"
                    border
                    fit
                    highlight-current-row
                    stripe
                  >
                    <el-table-column prop="brandName" align="center" label="品牌"></el-table-column>
                    <el-table-column prop="mainName" align="center" label="大类"></el-table-column>
                    <el-table-column prop="smallName" align="center" label="小类"></el-table-column>
                    <el-table-column prop="goodsName" align="center" label="商品名称"></el-table-column>
                    <el-table-column prop="goodsMaterialName" align="center" label="物料名称"></el-table-column>
                    <el-table-column prop="goodsMaterialSpecsName" align="center" label="规格型号"></el-table-column>
                    <el-table-column prop="goodsMaterialUnit" align="center" label="单位">
                      <template slot-scope="scope">
                        {{
                          scope.row.goodsMaterialUnit == 'C' ? '整套' : scope.row.goodsMaterialUnit == 'I' ? '单个' : ''
                        }}
                      </template>
                    </el-table-column>
                    <el-table-column prop="num" align="center" label="数量"></el-table-column>
                    <el-table-column prop="insideNum" align="center" label="内机数量"></el-table-column>
                    <el-table-column prop="outNum" align="center" label="外机数量"></el-table-column>
                    <el-table-column prop="partNum" align="center" label="配件数量"></el-table-column>
                    <el-table-column
                      prop="refundInsideCodeQty"
                      align="center"
                      label="导入内机条码数量"
                      width="140"
                    ></el-table-column>
                    <el-table-column
                      prop="refundOutCodeQty"
                      align="center"
                      label="导入外机条码数量"
                      width="140"
                    ></el-table-column>
                    <el-table-column
                      prop="refundPartsCodeQty"
                      align="center"
                      label="导入配件条码数量"
                      width="140"
                    ></el-table-column>
                    <el-table-column label="操作" align="center" width="140" fixed="right">
                      <template slot-scope="scope" v-if="joinCode">
                        <el-upload action="_" :show-file-list="false" :http-request="importCode">
                          <el-button @click="orderDetailId = scope.row.orderDetailId" size="mini" type="text"
                            >导入条码</el-button
                          >
                        </el-upload>
                      </template>
                    </el-table-column>
                  </el-table>
                </el-form>
                <!-- 发货条码 -->
                <el-form ref="formData2" :model="formData2">
                  <el-table
                    v-show="typeIndex == 2"
                    :data="formData2.list"
                    element-loading-text="Loading"
                    border
                    fit
                    highlight-current-row
                    stripe
                  >
                    <el-table-column label="品牌" align="center">
                      <template slot-scope="scope">
                        <el-form-item>
                          <el-input
                            type="text"
                            v-model="scope.row.brandName"
                            :disabled="true"
                            placeholder="请输入"
                          ></el-input>
                        </el-form-item>
                      </template>
                    </el-table-column>
                    <el-table-column label="商品大类" align="center">
                      <template slot-scope="scope">
                        <el-form-item>
                          <el-input
                            type="text"
                            v-model="scope.row.mainName"
                            :disabled="true"
                            placeholder="请输入"
                          ></el-input>
                        </el-form-item>
                      </template>
                    </el-table-column>
                    <el-table-column label="商品小类" align="center">
                      <template slot-scope="scope">
                        <el-form-item>
                          <el-input
                            type="text"
                            v-model="scope.row.smallName"
                            :disabled="true"
                            placeholder="请输入"
                          ></el-input>
                        </el-form-item>
                      </template>
                    </el-table-column>
                    <el-table-column prop="" align="center" label="商品名称">
                      <template slot-scope="scope">
                        <el-form-item>
                          <el-input
                            type="text"
                            v-model="scope.row.goodsMaterialName"
                            :disabled="true"
                            placeholder="请输入"
                          ></el-input>
                        </el-form-item>
                      </template>
                    </el-table-column>
                    <el-table-column label="规格型号" align="center">
                      <template slot-scope="scope">
                        <el-form-item
                          :prop="'list.' + scope.$index + '.specs'"
                          :rules="[{ required: true, message: `请选择规格型号`, trigger: 'blur' }]"
                        >
                          <el-select
                            v-model="scope.row.specs"
                            @change="
                              e => {
                                changeSpecs(e, scope.row)
                              }
                            "
                            value-key="orderDetailId"
                            :disabled="isEdit2 != scope.$index"
                            placeholder="请选择"
                            style="width: 100%"
                          >
                            <el-option
                              v-for="(item, ind) in formData1.list"
                              :key="ind"
                              :label="item.goodsMaterialSpecsName"
                              :value="item"
                            >
                            </el-option>
                          </el-select>
                        </el-form-item>
                      </template>
                    </el-table-column>
                    <el-table-column label="物料类型" align="center">
                      <template slot-scope="scope">
                        <el-form-item
                          :prop="'list.' + scope.$index + '.goodsMaterialItemType'"
                          :rules="[{ required: true, message: `请选择物料类型`, trigger: 'blur' }]"
                        >
                          <el-select
                            v-model="scope.row.goodsMaterialItemType"
                            @change="
                              e => {
                                changeMaterial(e, scope.row)
                              }
                            "
                            :disabled="isEdit2 != scope.$index"
                            placeholder="请选择"
                            style="width: 100%"
                          >
                            <el-option
                              v-for="(item, ind) in [
                                { name: '内机', id: 'INSIDE' },
                                { name: '外机', id: 'OUT' },
                                { name: '配件', id: 'PARTS' }
                              ]"
                              :key="ind"
                              :label="item.name"
                              :value="item.id"
                            >
                            </el-option>
                          </el-select>
                        </el-form-item>
                      </template>
                    </el-table-column>
                    <el-table-column label="物料名称" align="center">
                      <template slot-scope="scope">
                        <el-form-item
                          :prop="'list.' + scope.$index + '.material'"
                          :rules="[{ required: true, message: `请选择物料名称`, trigger: 'blur' }]"
                        >
                          <el-select
                            v-model="scope.row.material"
                            @focus="
                              e => {
                                if (!scope.row.goodsMaterialItemType) {
                                  return $message.warning('请先选择物料类型！')
                                }
                              }
                            "
                            @change="
                              e => {
                                scope.row.materialName = e.name
                                scope.row.stockQty = e.uniqueCode == 'YES' ? 1 : null
                                scope.row.uniqueCode = e.uniqueCode
                                scope.row.goodsMaterialItemId = e.itemId
                              }
                            "
                            value-key="name"
                            :disabled="isEdit2 != scope.$index"
                            placeholder="请选择"
                            style="width: 100%"
                          >
                            <el-option
                              v-for="(item, ind) in scope.row.materialList"
                              :key="ind"
                              :label="item.name"
                              :value="item"
                            >
                            </el-option>
                          </el-select>
                        </el-form-item>
                      </template>
                    </el-table-column>
                    <el-table-column prop="" align="center" label="是否一物一码">
                      <template slot-scope="scope">
                        <el-form-item>
                          {{ scope.row.uniqueCode == 'YES' ? '是' : scope.row.uniqueCode == 'NO' ? '否' : '' }}
                        </el-form-item>
                      </template>
                    </el-table-column>
                    <el-table-column prop="" align="center" label="条码">
                      <template slot-scope="scope">
                        <el-form-item
                          :prop="'list.' + scope.$index + '.materialCode'"
                          :rules="[{ required: true, message: `请输入条码`, trigger: 'blur' }]"
                        >
                          <el-input
                            type="text"
                            v-model="scope.row.materialCode"
                            :disabled="isEdit2 != scope.$index"
                            placeholder="请输入"
                          ></el-input>
                        </el-form-item>
                      </template>
                    </el-table-column>
                    <el-table-column prop="" align="center" label="数量">
                      <template slot-scope="scope">
                        <el-form-item
                          :prop="'list.' + scope.$index + '.stockQty'"
                          :rules="[{ required: true, message: `请输入数量`, trigger: 'blur' }]"
                        >
                          <el-input
                            type="number"
                            v-model="scope.row.stockQty"
                            :disabled="isEdit2 != scope.$index || scope.row.uniqueCode == 'YES'"
                            placeholder="请输入"
                          ></el-input>
                        </el-form-item>
                      </template>
                    </el-table-column>
                    <el-table-column label="操作" align="right" width="140" fixed="right">
                      <template slot-scope="scope">
                        <el-button
                          size="mini"
                          type="primary"
                          v-if="scope.$index == isEdit2"
                          @click="saveCode(scope.row)"
                          >保存</el-button
                        >
                        <el-button
                          size="mini"
                          type="primary"
                          v-if="scope.$index != isEdit2"
                          @click="isEdit2 = scope.$index"
                          >编辑</el-button
                        >
                        <el-popconfirm
                          title="确定删除吗？"
                          @confirm="delCode(scope.row.orderDetailCodeId, scope.$index)"
                        >
                          <el-button slot="reference" size="mini" type="danger">删除</el-button>
                        </el-popconfirm>
                      </template>
                    </el-table-column>
                  </el-table>
                </el-form>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="returnGoodsVisible = false">关 闭</el-button>
        <el-button type="primary" @click="saveReturnGoods()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  changeExamineStatus,
  getOrderRefundDetail,
  receiveProd,
  saveRefundRemark,
  getOrderDetail,
  getCodeDetail2,
  getMaterialList,
  listImport2,
  saveCode2,
  delCode2
} from '@/api/order'
import { getExpress } from '@/api/common'

export default {
  name: 'orderRefundDetail',
  data() {
    return {
      orderRefundId: '',
      orderDetail: {},
      remarkVisible: false,
      logisticsVisible: false,
      logistics: [],
      returnGoodsVisible: false,
      typeIndex: '1',
      formData1: {
        list: []
      },
      formData2: {
        list: []
      },
      isEdit1: 0,
      isEdit2: 0,
      joinCode: JSON.parse(localStorage.getItem('greemall_user')).joinCode === 'CODE',
      orderDetailId: '',
      returnGoodsFormRules: {
        // refundMessage: [{ required: true, message: '请填写卖家留言', trigger: 'blur' }],
      },
      returnGoodsForm: {
        refundMessage: ''
      }
    }
  },
  created() {
    this.orderRefundId = this.$route.query.orderRefundId || this.$route.query.orderId
    this.getDetail()
  },
  methods: {
    getDetail() {
      getOrderRefundDetail({ orderRefundId: this.orderRefundId }).then(res => {
        this.orderDetail = res.data
        this.orderDetail.workerName = this.orderDetail.workerName ? this.orderDetail.workerName : '暂无'
        this.orderDetail.workerPhone = this.orderDetail.workerPhone ? this.orderDetail.workerPhone : ''
      })
    },
    goBack() {
      // this.$router.go(-1);
      this.$router.push({
        name: 'order_pr',
        params: {}
      })
    },
    showRemark() {
      this.remarkVisible = true
    },
    cancelRemark() {
      this.remarkVisible = false
    },
    saveRemark() {
      const params = {
        orderRefundId: this.orderRefundId,
        remark: this.orderDetail.remark
      }
      saveRefundRemark(params).then(() => {
        this.cancelRemark()
        this.getDetail()
        this.$successMsg('保存成功')
      })
    },
    // 变更维权处理状态
    changeExamineStatus(examineStatus, refundType) {
      console.log(refundType)
      const orderRefundId = this.orderRefundId
      if (refundType == 'REFUND_GOODS') {
        this.getOrderDetail()
        this.getCodeDetail2()
        this.returnGoodsVisible = true
      } else {
        changeExamineStatus({ orderRefundId, examineStatus }).then(() => {
          this.getDetail()
          this.$successMsg('操作成功')
        })
      }
    },
    saveReturnGoods() {
      changeExamineStatus({
        orderRefundId: this.orderRefundId,
        examineStatus: 'OK',
        refundMessage: this.returnGoodsForm.refundMessage
      }).then(() => {
        this.getDetail()
        this.$successMsg('操作成功')
      })
    },
    // 确认收货
    receiveProd() {
      const orderRefundId = this.orderRefundId
      receiveProd({ orderRefundId }).then(() => {
        this.getDetail()
        this.$successMsg('确认收货成功')
      })
    },
    // 查看物流
    queryLogistics(logisticsNo) {
      this.logisticsVisible = true
      getExpress({ logisticsNo }).then(res => {
        this.logistics = res.data
      })
    },

    getOrderDetail() {
      getOrderDetail({ orderId: this.orderDetail.orderId }).then(res => {
        let arr = []
        res.data.orderDetails.forEach(item => {
          // arr.push(item)
          if (item.refund) {
            arr.push(item)
          }
        })
        this.formData1.list = arr
      })
    },
    changeType() {
      this.getOrderDetail()
      this.getCodeDetail2()
    },
    async getCodeDetail2() {
      getCodeDetail2({ orderId: this.orderRefundId }).then(async res => {
        for (var item of res.data) {
          item.specs = { goodsMaterialSpecsName: item.specsName, orderDetailId: item.orderDetailId }
          item.material = { name: item.materialName }
          item.materialList = await this.getMaterialList(item.specsName, item.goodsMaterialItemType)
        }
        this.formData2.list = res.data
      })
    },
    async getMaterialList(specsName, type) {
      return new Promise((resolve, reject) => {
        getMaterialList({
          pageNum: 1,
          pageSize: -1,
          specsName,
          type
        }).then(async res => {
          resolve(res.data.records)
        })
      })
    },
    async changeSpecs(e, row) {
      row.brandName = e.brandName
      row.brandId = e.brandId
      row.mainName = e.mainName
      row.mainId = e.mainNumber
      row.smallName = e.smallName
      row.smallId = e.smallNumber
      row.specsName = e.goodsMaterialSpecsName
      row.goodsMaterialName = e.goodsName
      row.goodsMaterialId = e.goodsMaterialId
      row.material = null
      row.materialName = ''
      row.stockQty = ''
      row.uniqueCode = ''
      row.materialList = await this.getMaterialList(row.specsName, row.goodsMaterialItemType)
      row.orderDetailId = e.orderDetailId
    },
    async changeMaterial(e, row) {
      if (!row.specs) {
        return this.$message.warning('请先选择规格型号！')
      }
      row.material = null
      row.materialName = ''
      row.stockQty = ''
      row.uniqueCode = ''
      row.materialList = await this.getMaterialList(row.specsName, row.goodsMaterialItemType)
    },
    //发货新增条码
    addCode() {
      this.$refs.formData2.validate(valid => {
        if (valid) {
          this.isEdit2 = 0
          this.formData2.list.unshift({
            brandId: '',
            brandName: '',
            mainId: '',
            mainName: '',
            stockQty: '',
            smallId: '',
            smallName: '',
            goodsMaterialItemType: '',
            goodsMaterialName: '',
            goodsMaterialId: '',
            materialCode: '',
            uniqueCode: '',
            specs: null,
            specsName: '',
            materialName: '',
            material: null,
            materialList: [],
            orderDetailId: '',
            goodsMaterialItemId: ''
          })
        }
      })
    },
    delCode(orderDetailCodeId, index) {
      if (orderDetailCodeId) {
        delCode2({
          orderDetailCodeId
        }).then(res => {
          if (res.code == 200) {
            this.$message({ type: 'success', message: '删除成功!' })
            this.getOrderDetail()
            this.getCodeDetail2()
          } else {
            this.$message.error(res.msg)
          }
        })
      } else {
        this.formData2.list.splice(index, 1)
      }
    },
    saveCode(orderDetailCodes) {
      const that = this
      let params = [
        {
          ...orderDetailCodes,
          orderId: this.orderRefundId
        }
      ]
      delete params[0].material
      delete params[0].specs
      this.$refs.formData2.validate((valid, invalidFields, errLabels) => {
        if (valid) {
          saveCode2(params).then(res => {
            if (res.code == 200) {
              that.$message.success('保存成功!')
              this.getOrderDetail()
              this.getCodeDetail2()
            }
          })
        }
      })
    },
    importCode(data) {
      const loading = this.$loading({
        lock: true,
        text: '正在导入',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      var formdata = new FormData()
      formdata.append('file', data.file)
      let params = {
        orderDetailId: this.orderDetailId
      }
      if (!!params) {
        for (const key in params) {
          if (Object.hasOwnProperty.call(params, key)) {
            formdata.append(key, params[key])
          }
        }
      }
      listImport2({ formdata })
        .then(res => {
          this.getOrderDetail()
          this.getCodeDetail2()
          loading.close()
          this.$message({
            type: 'success',
            message: '导入成功!'
          })
        })
        .catch(err => {
          loading.close()
          this.$message({
            type: 'error',
            message: err.message || '导入失败'
          })
        })
    },

    // 下载导入模版
    handleDownload(title) {
      commonTemplateDownload({ name: '导入条码.xlsx' }, title)
        .then(res => {
          this.$message({
            message: '下载成功',
            type: 'success'
          })
        })
        .catch(err => {
          this.$message.error('下载失败')
        })
    }
  },
  computed: {
    totalAmountCompute() {
      if (!this.orderDetail.totalAmount) {
        return 0
      }
      const totalAmount = parseFloat(this.orderDetail.totalAmount)
      const freight = parseFloat(this.orderDetail.freight)
      return (totalAmount - freight).toFixed(2)
    }
  }
}
</script>

<style scoped lang="scss">
.order-refund-main {
  margin-top: 15px;
  border: 1px solid #e5e5e5;
  .order-refund-main-title {
    font-size: 14px;
  }
  .order-refund-main-title span {
    margin-right: 15px;
  }
  .order-refund-main-status {
    color: #409eff;
    padding: 15px 0;
    font-size: 24px;
  }
  .order-refund-main-opt-btn {
    padding: 15px 0;
  }
}
.order-refund-receive-info {
  margin: 15px 0;
  padding: 15px;
  background: #f5f7fa;
  :first-child div span {
    padding-right: 15px;
  }
  .el-row {
    padding-top: 15px;
  }
}

.order-refund-detail {
  background: #f5f7fa;
  .order-amount-info {
    padding: 15px 0;
    font-size: 12px;
    font-weight: bold;
  }
}

.main-detail {
  .title {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 20px;
  }
  .item {
    display: flex;
    font-size: 14px;
    color: #666;
    padding-bottom: 12px;
    .label {
      white-space: nowrap;
    }
  }
}
</style>
<style lang="scss">
.order-refund-detail {
  .el-table tr,
  .el-table th {
    background-color: #f5f7fa;
  }
}
</style>
