<template>
  <ele-modal
    custom-class="ele-dialog-form long-dialog-form"
    :centered="true"
    v-if="visible"
    :visible.sync="visible"
    :title="title"
    :append-to-body="true"
    :close-on-click-modal="false"
    width="70%"
    @close="cancel"
  >
    <div class="switch">
      <div class="switch_left">
        <ul>
          <li
            v-for="item in tabOptions"
            :key="item.key"
            :class="{ active: activeComp == item.key }"
            @click="activeComp = item.key"
          >
            {{ item.name }}
          </li>
        </ul>
      </div>
    </div>
    <div v-if="activeComp==='main'">
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <headerTitle title="退货信息"></headerTitle>
        <el-row>
          <el-col :span="12">
            <el-form-item
              label="退货类型："
              >
              <el-select v-model="form.returnSourceType" disabled style="width: 100%">
                <el-option :value="3" label="销售发货单退货"></el-option>
                <el-option :value="1" label="售后退货"></el-option>
                <el-option :value="2" label="受托收货单退货"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              label="客户名称："
              prop="contactName">
              <el-input v-model="form.contactName"  disabled></el-input>
            </el-form-item>
            <el-form-item
              label="退货方式：">
              <el-input v-model="form.typeName"  disabled></el-input>
            </el-form-item>
            <el-form-item
              label="赔偿金额："
              prop="redressAmount"
              v-show="['30', '50'].includes(form.type)">
              <el-input v-model="form.redressAmount"  disabled>
                <template slot="append">元</template>
              </el-input>
            </el-form-item>
            <el-form-item
              label="赔偿总金额："
              prop="totalAmount">
              <el-input v-model="form.totalAmount"  disabled>
                <template slot="append">元</template>
              </el-input>
            </el-form-item>
            <el-form-item
              label="计价方式：">
              <el-select v-model="form.pricingWay" disabled style="width: 100%">
                <el-option :value="1" label="按数量计费"></el-option>
                <el-option :value="2" label="按重量计费"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              label="备注："
              prop="remark">
              <el-input :rows="4" type="textarea" v-model="form.remark"  disabled>
              </el-input>
            </el-form-item>
            <el-form-item
              label="回执附件："
              prop="sendFiles">
              <div
                v-if="detailData.repliedFiles && detailData.repliedFiles?.length">
                <el-link
                  v-for="link in detailData.repliedFiles"
                  :key="link.id"
                  type="primary"
                  :underline="false"
                  @click="downloadFile(link)">
                  {{ link.name }}
                </el-link
                >
              </div>
            </el-form-item>

          </el-col>
          <el-col :span="12">
            <el-form-item
              label="退货编码："
              prop="returnNo">
              <el-input v-model="form.returnNo"  disabled>
              </el-input>
            </el-form-item>
            <el-form-item
              label="受托收货编码："
              prop="entrustedReceiveCode">
              <el-input v-model="form.entrustedReceiveCode"  disabled>
              </el-input>
            </el-form-item>
            <el-form-item
              label="发货编码："
              prop="sendNo">
              <el-input v-model="form.sendNo"  disabled>
              </el-input>
            </el-form-item>
            <el-form-item prop="orderNo" label="订单编码：">
              <el-input v-model="form.orderNo"  disabled>
              </el-input>
            </el-form-item>

            <el-form-item
              label="审核状态："
              prop="reviewStatus">
              <el-select v-model="form.reviewStatus" disabled style="width: 100%">
                <el-option v-for="item in reviewStatusEnum" :value="item.value" :label="item.label"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              label="制单人："
              prop="makerName">
              <el-input v-model="form.makerName"  disabled>
              </el-input>
            </el-form-item>
            <el-form-item
              label="创建时间："
              prop="createTime">
              <el-input v-model="form.createTime"  disabled>
              </el-input>
            </el-form-item>
            <el-form-item
              label="退货附件："
              prop="returnFiles"
            >
              <div v-if="detailData.returnFiles && detailData.returnFiles?.length">
                <el-link
                  v-for="link in detailData.returnFiles"
                  :key="link.id"
                  type="primary"
                  :underline="false"
                  @click="downloadFile(link)">
                  {{ link.name }}
                </el-link>
              </div>
            </el-form-item>

          </el-col>
        </el-row>
      </el-form>

      <headerTitle
        title="产品清单"
      ></headerTitle>
      <ele-pro-table
        ref="table"
        :needPage="false"
        :columns="competAnalysisListcolumns"
        :toolkit="[]"
        :datasource="detailData.productList"
        row-key="id"
      >
        <!-- <template v-slot:toolbar>
          <div class="headbox">
          <span class="amount">总计：{{detailData.totalAmount}}元</span>
          <span class="amount">应付金额：{{detailData.payAmount}}元</span>
        </div>
        </template> -->
        <template v-slot:technicalDrawings="{ row }">
          <div v-if="row.technicalDrawings && row.technicalDrawings?.length">
            <el-link
              v-for="link in row.technicalDrawings"
              :key="link.id"
              type="primary"
              :underline="false"
              @click="downloadFile(link)"
            >
              {{ link.name }}
            </el-link
            >
          </div>
        </template>
      </ele-pro-table>
      <headerTitle
        title="实物赔偿清单"
        style="margin-top: 30px"
      ></headerTitle>
      <inventoryTabledetail
        ref="inventoryTabledetailRef"
        :isSinglePrice="false"

      ></inventoryTabledetail>
    </div>

    <bpmDetail :key="activeComp" v-if="activeComp==='bpm'&&form.processInstanceId" :id="form.processInstanceId"></bpmDetail>
    <customerReturnOrderDetail v-if="activeComp==='cMain'" :row='data'></customerReturnOrderDetail>
    <bpmDetail :key="activeComp" v-if="activeComp==='cBpm'&&data.processInstanceId" :id="data.processInstanceId"></bpmDetail>
    <div slot="footer" class="footer">
      <el-button @click="cancel">返回</el-button>
    </div>
  </ele-modal>
</template>

<script>
import {getReturnSaleOrderrecordDetail, saleReturnGetByIdAPI} from '@/api/saleManage/returnGoods';
import {getByCode} from '@/api/system/dictionary-data';
import {getFile} from '@/api/system/file';
import dictMixins from '@/mixins/dictMixins';
import {reviewStatusEnum} from '@/enum/dict';
import {copyObj} from '@/utils/util';
import bpmDetail from '@/views/bpm/processInstance/detail.vue';
import inventoryTabledetail from '@/views/contractManage/contractBook/components/inventoryTabledetail.vue';
import customerReturnOrderDetail
  from "@/views/saleManage/saleOrder/returnGoods/components/customerReturnOrderDetail.vue";


export default {
  mixins: [dictMixins],
  components: {
    bpmDetail, inventoryTabledetail,
    customerReturnOrderDetail
  },
  data() {
    return {
      activeComp: 'main',
      tabOptions: [
        {key: 'main', name: '退货单详情'},
        {key: 'bpm', name: '流程详情'},
        {key: 'cMain', name: '退货处理单详情'},
        {key: 'cBpm', name: '退货处理单流程详情'},
      ],
      codeData: [],
      reviewStatusEnum,
      visible: false,
      detailId: '',
      title: '详情',
      row: {},
      activeName: 'base',
      form: {
        orderFiles: [{name: '222'}]
      },
      data: {},
      rules: {},
      detailData: {},
      competAnalysisListcolumns: [
        {
          width: 45,
          type: 'index',
          columnKey: 'index',
          align: 'center',
          fixed: 'left'
        },
        {
          width: 200,
          prop: 'productName',
          label: '名称',
          slot: 'productName'
        },
        {
          width: 120,
          prop: 'productCode',
          label: '编码',
          slot: 'productCode'
        },
        {
          width: 200,
          prop: 'productCategoryName',
          label: '类型',
          slot: 'productCategoryName'
        },
        {
          width: 160,
          prop: 'productBrand',
          label: '牌号',
          slot: 'productBrand'
        },
        {
          width: 120,
          prop: 'modelType',
          label: '型号',
          slot: 'modelType'
        },
        {
          width: 120,
          prop: 'specification',
          label: '规格',
          slot: 'specification'
        },
        {
          width: 200,
          prop: 'customerMark',
          label: '客户代号',
          slot: 'customerMark'
        },
        {
          width: 120,
          prop: 'sendTotalCount',
          label: '发货数量',
          slot: 'sendTotalCount'
        },

        {
          width: 120,
          prop: 'totalCount',
          label: '退货数量',
          slot: 'totalCount'
        },
        {
          width: 80,
          prop: 'measuringUnit',
          label: '计量单位',
          slot: 'measuringUnit'
        },
        {
          width: 120,
          prop: 'singleWeight',
          label: '单重',
          slot: 'singleWeight',
          align: "center"
        },
        {
          width: 200,
          prop: 'receiveTotalWeight',
          label: '收货总重',
          slot: 'receiveTotalWeight',
          align: "center",
          headerSlot: 'headerSendTotalWeight'
        },
        {
          width: 200,
          prop: 'sendTotalWeight',
          label: '发货总重',
          slot: 'sendTotalWeight',
          align: "center"
        },
        {
          width: 100,
          prop: 'increaseTotalWeight',
          label: '增重重量',
          slot: 'increaseTotalWeight',
          align: "center"
        },
        {
          width: 160,
          prop: 'singlePrice',
          label: '单价',
          slot: 'singlePrice'
        },
        {
          width: 160,
          prop: 'discountSinglePrice',
          label: '折让单价',
          slot: 'discountSinglePrice',
          formatter: (_row, _column, cellValue) => {
            return _row.discountSinglePrice
              ? Number(_row.discountSinglePrice).toFixed(2)
              : '';
          }
        },
        {
          width: 120,
          prop: 'totalPrice',
          label: '合计',
          slot: 'totalPrice'
        },
        {
          width: 120,
          prop: 'discountTotalPrice',
          label: '折让合计',
          slot: 'discountTotalPrice',
          formatter: (_row, _column, cellValue) => {
            return _row.discountTotalPrice
              ? Number(_row.discountTotalPrice).toFixed(2)
              : '';
          }
        },

        {
          width: 200,
          prop: 'returnReason',
          label: '退货原因',
          slot: 'returnReason'
        },
        {
          width: 120,
          prop: 'deliveryDays',
          label: '交期(天)',
          slot: 'deliveryDays'
        },
        {
          width: 120,
          prop: 'technicalAnswerName',
          label: '技术答疑人',
          slot: 'technicalAnswerName'
        },
        {
          width: 220,
          prop: 'technicalParams',
          label: '技术参数',
          slot: 'technicalParams'
        },
        {
          width: 240,
          prop: 'technicalDrawings',
          label: '技术图纸',
          slot: 'technicalDrawings',
          formatter: (_row, _column, cellValue) => {
            return _row.guaranteePeriod + _row.guaranteePeriodUnitName;
          }
        },
        {
          width: 220,
          prop: 'remark',
          label: '备注',
          slot: 'remark'
        }
      ]
    };
  },
  created() {
  },
  methods: {
    async getcode(code) {
      const res = await getByCode(code);
      this.codeData = res.data;
    },
    async open(row) {
      //this.form = row;
      this.visible = true;
      this.getDetailData(row.id);
      this.detailId = row.id;
      if(row.handleReceiptId){
        this.data = await saleReturnGetByIdAPI(row.handleReceiptId)
        this.data = {
          processInstanceId:this.data.processInstanceId,
          handleReceiptId:this.data.id,
          sendNo:this.data.sendNo
        }
      }
    },

    cancel() {
      this.$nextTick(() => {
        // 关闭后，销毁所有的表单数据
        (this.form = copyObj(this.formDef)),
          (this.otherForm = copyObj(this.otherFormDef)),
          (this.tableBankData = []);
        this.tableLinkData = [];
        this.visible = false;
      });
    },
    downloadFile(file) {
      getFile({objectName: file.storePath}, file.name);
    },
    async getDetailData(id) {
      this.loading = true;
      await this.getcode('sale_return_type');
      const data = await getReturnSaleOrderrecordDetail(id);
      this.loading = false;
      this.form = data
      this.form.pricingWay = data?.saleOrder?.pricingWay
      if (data) {
        this.$nextTick(() => {
          this.$refs.inventoryTabledetailRef &&
          this.$refs.inventoryTabledetailRef.putTableValue(data);
        });

        this.detailData = data;
      }
    }
  }
};
</script>

<style scoped lang="scss">
.ele-dialog-form {
  .el-form-item {
    margin-bottom: 10px;
  }
}

.headbox {
  display: flex;
  justify-content: flex-start;
  align-items: center;

  .amount {
    font-size: 14px;
    font-weight: bold;
    margin-right: 20px;
  }
}
</style>
