<template>
  <ele-modal
    custom-class="ele-dialog-form long-dialog-form"
    :centered="true"
    :visible.sync="detailDialogFlag"
    :title="title"
    :append-to-body="false"
    :close-on-click-modal="false"
    width="70%"
    :before-close="cancel"
    :maxable="true"
    :resizable="true"
  >
    <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>
      <el-form v-if="activeComp === 'cMain'" ref="formRef" :model="form">
        <el-row style="margin-bottom: 10px">
          <el-col :span="6">
            <el-descriptions class="margin-top" :column="3" size="mini" border>
              <el-descriptions-item>
                <template slot="label"> 退货单 </template>
                {{ form.returnNo }}
              </el-descriptions-item>
            </el-descriptions>
          </el-col>
        </el-row>

        <header-title title="退货物品明细" size="16px"></header-title>

        <ele-pro-table
          ref="table"
          :needPage="false"
          :columns="columns"
          :toolkit="[]"
          :datasource="form.detailList"
          cache-key="customerReturnOrderDialog"
          class="time-form"
        >
          <!-- 表头工具栏 -->
          <template v-slot:toolbar>
            <el-button
              size="small"
              type="primary"
              icon="el-icon-plus"
              class="ele-btn-icon"
              @click="handleSelectGoods"
              v-if="dialogType !== 'view' && form.returnNo"
            >
              选择退货物品
            </el-button>
          </template>
          <template v-slot:action="{ row, $index }">
            <el-popconfirm
              class="ele-action"
              title="确定要删除吗？"
              @confirm="remove(row, $index)"
            >
              <template v-slot:reference>
                <el-link type="danger" :underline="false" icon="el-icon-delete">
                  删除
                </el-link>
              </template>
            </el-popconfirm>
          </template>

          <template v-slot:packageCount="{ row, $index }">
            <el-form-item
              :prop="'detailList.' + $index + '.packageCount'"
              :rules="{
                required: row.outboundType != 2 ? true : false,
                trigger: 'blur',
                message: '请输入'
              }"
            >
              <el-input
                v-if="dialogType !== 'view' && row.outboundType != 2"
                v-model="row.packageCount"
              ></el-input>
              <div v-else>{{ row.packageCount }}</div>
            </el-form-item>
          </template>

          <template v-slot:measurementCount="{ row, $index }">
            <el-form-item
              :prop="'detailList.' + $index + '.measurementCount'"
              :rules="{ required: true, trigger: 'blur', message: '请输入' }"
            >
              <el-input
                v-if="dialogType !== 'view'"
                v-model="row.measurementCount"
              ></el-input>
              <div v-else>{{ row.measurementCount }}</div>
            </el-form-item>
          </template>

          <template v-slot:weight="{ row, $index }">
            <el-form-item
              :prop="'detailList.' + $index + '.weight'"
              :rules="{ required: true, trigger: 'blur', message: '请输入' }"
            >
              <el-input
                v-if="dialogType !== 'view'"
                v-model="row.weight"
              ></el-input>
              <div v-else>{{ row.weight }}</div>
            </el-form-item>
          </template>

          <template v-slot:carveCode="{ row, $index }">
            <el-form-item
              :prop="'detailList.' + $index + '.carveCode'"
              :rules="{ required: true, trigger: 'blur', message: '请输入' }"
            >
              <el-input
                v-if="dialogType !== 'view'"
                v-model="row.carveCode"
              ></el-input>
              <div v-else>{{ row.carveCode }}</div>
            </el-form-item>
          </template>

          <!--  ///  发起人展示字段 -->
          <template v-slot:reason="{ row, $index }">
            <el-form-item
              :prop="'detailList.' + $index + '.reason'"
              :rules="{ required: true, trigger: 'blur', message: '请输入' }"
            >
              <el-input
                v-if="dialogType !== 'view'"
                v-model="row.reason"
              ></el-input>
              <div v-else>{{ row.reason }}</div>
            </el-form-item>
          </template>
          <template v-slot:feedbackDate="{ row, $index }">
            <el-form-item
              :prop="'detailList.' + $index + '.feedbackDate'"
              :rules="{ required: true, trigger: 'change', message: '请选择' }"
            >
              <el-date-picker
                v-if="dialogType !== 'view'"
                v-model="row.feedbackDate"
                style="width: 100%"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期"
              >
              </el-date-picker>
              <div v-else>{{ row.feedbackDate }}</div>
            </el-form-item>
          </template>
          <template v-slot:sendDate="{ row, $index }">
            <el-form-item
              :prop="'detailList.' + $index + '.sendDate'"
              :rules="{ required: true, trigger: 'change', message: '请选择' }"
            >
              <el-date-picker
                v-if="dialogType !== 'view'"
                v-model="row.sendDate"
                style="width: 100%"
                value-format="yyyy-MM-dd"
                type="date"
                placeholder="选择日期"
              >
              </el-date-picker>
              <div v-else>{{ row.sendDate }}</div>
            </el-form-item>
          </template>
          <!--////-->
        </ele-pro-table>
      </el-form>
    </div>
    <bpmDetail
      v-if="activeComp === 'cBpm' && currentRow.processInstanceId"
      :id="currentRow.processInstanceId"
    ></bpmDetail>
    <div slot="footer" class="footer">
      <el-button @click="cancel">返回</el-button>
    </div>
  </ele-modal>
</template>

<script>
  import {
    getOutInBySourceBizNoAPI,
    saleReturnGetByIdAPI
  } from '@/api/saleManage/returnGoods';
  import dictMixins from '@/mixins/dictMixins';
  import bpmDetail from '@/views/bpm/processInstance/detail.vue';
  import customerReturnOrderDetail from './addOrEditDialog.vue';
  import { deepClone } from '@/utils';

  export default {
    mixins: [dictMixins],
    props: ['detailDialogFlag'],
    components: {
      bpmDetail,
      customerReturnOrderDetail
    },
    data() {
      return {
        activeComp: 'cMain',
        tabOptions: [
          { key: 'cMain', name: '退货处理单详情' },
          { key: 'cBpm', name: '退货处理单流程详情' }
        ],
        title: '详情',
        warehousingMaterialList: [],
        materialCodeReqList: [],
        metaList: [],
        currentRow: {},
        form: {
          detailList: [],
          returnNo: ''
        },
        dialogType: ''
      };
    },
    computed: {
      columns() {
        return [
          {
            width: 45,
            type: 'index',
            columnKey: 'index',
            align: 'center',
            fixed: 'left'
          },
          {
            minWidth: 160,
            prop: 'productCode',
            label: '编码',
            showOverflowTooltip: true,
            align: 'center'
          },
          {
            minWidth: 120,
            prop: 'productName',
            label: '名称',
            showOverflowTooltip: true,
            align: 'center'
          },

          {
            minWidth: 160,
            prop: 'batchNo',
            label: '批次号',
            showOverflowTooltip: true,
            slot: 'batchNo',
            align: 'center'
          },
          {
            minWidth: 160,
            prop: 'barcodes',
            label: '发货条码',
            showOverflowTooltip: true,
            slot: 'barcodes',
            align: 'center'
          },
          {
            minWidth: 120,
            prop: 'materielDesignation',
            label: '物料代号',
            showOverflowTooltip: true,
            align: 'center'
          },
          {
            minWidth: 120,
            prop: 'clientCode',
            label: '客户代号',
            showOverflowTooltip: true,
            align: 'center'
          },
          {
            minWidth: 120,
            prop: 'engrave',
            label: '刻码',
            showOverflowTooltip: true,
            align: 'center'
          },
          {
            minWidth: 160,
            prop: 'packageNo',
            align: 'center',
            label: '包装编码',
            showOverflowTooltip: true
          },
          {
            minWidth: 100,
            prop: 'packingQuantity',
            align: 'center',
            label: '包装数量',
            showOverflowTooltip: true
          },
          {
            minWidth: 120,
            prop: 'packingUnit',
            align: 'center',
            label: '包装单位',
            showOverflowTooltip: true
          },
          {
            minWidth: 100,
            prop: 'measurementCount',
            label: '计量数量',
            showOverflowTooltip: true,
            align: 'center'
          },
          {
            minWidth: 150,
            prop: 'measurementUnit',
            label: '计量单位',
            showOverflowTooltip: true,
            align: 'center'
          },
          // {
          //   width: 100,
          //   prop: 'singlePrice',
          //   label: '单价',
          //   slot: 'singlePrice',
          //   align: 'center'
          // },
          // {
          //   width: 100,
          //   prop: 'totalPrice',
          //   label: '合计',
          //   align: 'center'
          // },

          {
            minWidth: 80,
            prop: 'weight',
            label: '重量',
            slot: 'weight',
            showOverflowTooltip: true,
            align: 'center'
          },
          {
            minWidth: 100,
            prop: 'weightUnit',
            label: '重量单位',
            showOverflowTooltip: true,
            align: 'center'
          },
          {
            width: 240,
            prop: 'technologyRouteName',
            label: '工艺路线',
            slot: 'technologyRouteName',
            align: 'center'
          },
          {
            width: 240,
            prop: 'technicalDrawings',
            label: '技术图纸',
            slot: 'technicalDrawings',
            align: 'center'
          },
          {
            prop: 'provenance',
            label: '产地',
            slot: 'provenance',
            align: 'center',
            // show:this.contractBookType==2,
            minWidth: 200,
            showOverflowTooltip: true,
            formatter: (row, column) => {
              return row.provenance && row.provenance.length
                ? row.provenance
                    .map((item) => this.getDictValue('产地', item))
                    .join(',')
                : '';
            }
          },
          {
            minWidth: 140,
            prop: 'reason',
            label: '客户退货理由',
            align: 'center',
            slot: 'reason',
            headerSlot: 'headerReason'
          },
          {
            minWidth: 180,
            prop: 'feedbackDate',
            label: '客户反馈日期',
            align: 'center',
            slot: 'feedbackDate'
          },
          {
            minWidth: 180,
            prop: 'sendDate',
            label: '客户发出日期',
            slot: 'sendDate',
            align: 'center',
            headerSlot: 'headerSendDate'
          }
        ];
      }
    },
    created() {
      this.requestDict('产地');

    },
    methods: {
      async init(type, row) {
        this.dialogType = type;
        await this.getReturnInfo(row);
        this.currentRow = row;
      },
      //获取详情
      async getReturnInfo(row) {
        this.form = await saleReturnGetByIdAPI(row.id);
        //拼接信息
        const data = await getOutInBySourceBizNoAPI(row.sendNo);
        this.infoData = deepClone(data);
        //出库物料明细
        this.warehousingMaterialList = this.infoData?.outInDetailVOList || [];
        //出库包装明细
        if (this.warehousingMaterialList.length) {
          this.materialCodeReqList = [];
          this.warehousingMaterialList.forEach((item) => {
            if (item.outInDetailRecordVOList?.length) {
              item.outInDetailRecordVOList = item.outInDetailRecordVOList.map(
                (i) => {
                  return {
                    ...i,
                    outInCode: this.infoData.bizNo,
                    outInId: item.outInId,
                    measurementCount: i.totalCount,
                    outboundDetailId: i.id,
                    outboundType: 1,
                    packageCount: i.packingCount,
                    packingUnit: i.packingUnit,
                    weight: i.weight,
                    specification: item.specification,
                    name: i.name,
                    carveCode: i.carveCode,
                    categoryCode: i.categoryCode,
                    id: ''
                  };
                }
              );
              this.materialCodeReqList.push(...item.outInDetailRecordVOList);
            }
          });
          //出库物料明细
          if (this.materialCodeReqList.length) {
            this.metaList = [];
            this.materialCodeReqList.forEach((item) => {
              if (item.outInDetailRecordMaterialDetailVOList?.length) {
                item.outInDetailRecordMaterialDetailVOList =
                  item.outInDetailRecordMaterialDetailVOList.map((i) => {
                    return {
                      ...i,
                      outInId: item.outInId,
                      outInCode: item.outInCode,
                      measurementCount: 1,
                      outboundDetailId: i.id,
                      outboundType: 2,
                      packageCount: i.packingCount,
                      packingUnit: i.packingUnit,
                      weight: i.weight,
                      weightUtil: i.weightUnit,
                      specification: item.specification,
                      categoryCode: i.assetCode,
                      name: i.assetName,
                      carveCode: i.carveCode,
                      id: ''
                    };
                  });
                this.metaList.push(
                  ...item.outInDetailRecordMaterialDetailVOList
                );
              }
            });
          }
        }

        // this.form.detailList.forEach(item => {
        //   if (item.outboundType == 1) {
        //     let find = this.materialCodeReqList.find(i => i.outboundDetailId == item.outboundDetailId) || {}
        //     item.name = find.name
        //     item.categoryCode = find.categoryCode
        //     item.specification = find.specification
        //     item.weightUtil = find.weightUtil
        //     item.packingUnit = find.packingUnit
        //     item.measuringUnit = find.measuringUnit
        //   } else {
        //     let find = this.metaList.find(i => i.outboundDetailId == item.outboundDetailId) || {}
        //     item.name = find.name
        //     item.categoryCode = find.categoryCode
        //     item.specification = find.specification
        //     item.weightUtil = find.weightUtil
        //     item.packingUnit = find.packingUnit
        //     item.measuringUnit = find.measuringUnit
        //   }
        // })
        this.$nextTick(() => {
          this.$refs.table.reRenderTable();
        });
      },
      cancel() {
        this.$emit('update:detailDialogFlag', false);
      }
    }
  };
</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>
