<template>
  <ele-modal
    custom-class="ele-dialog-form long-dialog-form"
    :centered="true"
    :visible.sync="addOrEditDialogFlag"
    :title="title"
    :close-on-click-modal="false"
    width="70%"
    :before-close="cancel"
    :maxable="true"
    :resizable="true"
  >

    <div class="switch" v-if="title!='处置'">
      <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>

    <el-form ref="form" :model="form" label-width="120px" class="el-form-box" v-if="activeComp=='main'">
      <headerTitle title="基本信息"></headerTitle>

      <el-row :gutter="12">
        <el-col :span="8">
          <el-form-item label="编码" prop="code">
            <el-input
              v-model="form.code"
              placeholder="请输入"
              :disabled="true"
            />
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="名称" prop="name">
            <el-input clearable v-model="form.name" :disabled="true" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="来源类型" prop="relationType">
            <el-input
              clearable
              v-model="form.relationTypeName"
              :disabled="true"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="来源编码" prop="relationCode">
            <el-input clearable v-model="form.relationCode" :disabled="true" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="来源名称" prop="relationName">
            <el-input clearable v-model="form.relationName" :disabled="true" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="创建人" prop="createUserName">
            <el-input
              clearable
              v-model="form.createUserName"
              :disabled="true"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="创建时间" prop="createTime">
            <el-input clearable v-model="form.createTime" :disabled="true" />
          </el-form-item>
        </el-col>
      </el-row>
      <headerTitle title="物品清单" style="margin-top: 30px"></headerTitle>
    <ele-pro-table
      ref="table"
      :needPage="false"
      :columns="columns"
      :toolkit="[]"
      :datasource="form.detailList"
      row-key="id"
    >
      <template v-slot:headerExceptionDispose="{ column }">
        <span class="is-required">{{ column.label }}</span>
      </template>
      <template v-slot:exceptionDispose="scope">
        <el-select v-model="scope.row.exceptionDispose" 
        :disabled="title!='处置'"
        placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </template>
    </ele-pro-table>
    </el-form>



    <div slot="footer" class="footer">
      <el-button
        type="primary"
        @click="save"
        v-click-once
        v-if="title == '处置'"
        >保存</el-button
      >
      <el-button
        type="primary"
        @click="save('sub')"
        v-click-once
        v-if="title == '处置'"
        >提交</el-button
      >

      <el-button @click="cancel">返回</el-button>
    </div>
    <bpmDetail
      :key="activeComp"
      v-if="activeComp === 'bpm' && form.processInstanceId"
      :id="form.processInstanceId"
    ></bpmDetail>
    <process-submit-dialog
      :isNotNeedProcess="false"
      :processSubmitDialogFlag.sync="processSubmitDialogFlag"
      v-if="processSubmitDialogFlag"
      ref="processSubmitDialogRef"
      @reload="reload"
    ></process-submit-dialog>
  </ele-modal>
</template>

<script>
  import dictMixins from '@/mixins/dictMixins';
  import { getById, update } from '@/api/exceptionManagement/index';
  import processSubmitDialog from '@/BIZComponents/processSubmitDialog/processSubmitDialog.vue';
  import { relationType } from '@/enum/dict.js';
  import bpmDetail from '@/views/bpm/processInstance/detail.vue';
  export default {
    mixins: [dictMixins],
    components: {
      processSubmitDialog,bpmDetail
    },
    data() {
      return {
        activeComp: 'main',
        tabOptions: [
          { key: 'main', name: '处置详情' },
          { key: 'bpm', name: '流程详情' },
       
        ],
        title: '',
        addOrEditDialogFlag: false,
        fullscreen: false,
        processSubmitDialogFlag: false,
        options: [
          { label: '退货入库', value: 1 },
          { label: '返工返修', value: 2 },
          { label: '报损', value: 3 },
          { label: '报废', value: 4 }
        ],
        form: {},
        columns: [
          {
            width: 45,
            type: 'index',
            columnKey: 'index',
            align: 'center',
            fixed: 'left'
          },
          {
            width: 220,
            prop: 'exceptionDispose',
            label: '处置方式',
            slot: 'exceptionDispose',
            fixed: 'left',
            align: 'center',
            headerSlot: 'headerExceptionDispose'
          },
          {
            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: 'totalCount',
            label: '计量数量',
            showOverflowTooltip: true,
            align: 'center'
          },
          {
            minWidth: 150,
            prop: 'measuringUnit',
            label: '计量单位',
            showOverflowTooltip: true,
            align: 'center'
          },
          {
            width: 160,
            prop: 'pricingWay',
            label: '计价方式',
            slot: 'pricingWay',
            align: 'center',
            formatter: (row, column) => {
              return row.pricingWay == 1
                ? '按数量计费'
                : row.pricingWay == 2
                ? '按重量计费'
                : '';
            }
          },
          {
            width: 100,
            prop: 'singlePrice',
            label: '单价',
            slot: 'singlePrice',
            align: 'center'
          },

          {
            width: 100,
            prop: 'totalPrice',
            label: '合计',
            align: 'center'
          },

          {
            minWidth: 80,
            prop: 'receiveTotalWeight',
            label: '重量',
            showOverflowTooltip: true,
            align: 'center'
          },
          {
            minWidth: 100,
            prop: 'weightUnit',
            label: '重量单位',
            showOverflowTooltip: true,
            align: 'center'
          },

          {
            width: 220,
            prop: 'describes',
            label: '描述',
            slot: 'describes',
            align: 'center'
          }
        ]
      };
    },

    methods: {
      //打开新增编辑弹框
      async open(type, row) {
        console.log(type,'type')
        this.title = type == 'edit' ? '处置' : '详情';

        this.addOrEditDialogFlag = true;
        if (row && row?.id) {
          await this.getById(row?.id);
        }
      },

      //获取订单详情
      async getById(id) {
        this.loading = true;
        let data = await getById(id);
        data['relationTypeName'] = relationType[data.relationType];

        this.loading = false;
        if (data) {
          this.form = data;
        }
      },
      async save(type) {
        try {
          this.loading = true;
          let is = false;
          this.form.detailList.forEach((item) => {
            if (!item.exceptionDispose) {
              is = true;
            }
          });
          if (is) {
            this.$message.error('处置方式不能为空');
            return;
          }
          update(this.form)
            .then((res) => {
              this.loading = false;
              this.$message.success('操作成功');
              if (type === 'sub') {
                this.submit(res);
                return;
              }
              this.cancel();
            })
            .catch((e) => {
              this.loading = false;
            });
        } catch (error) {
          console.log(error);
          // 表单验证未通过，不执行保存操作
        }
      },
      async submit() {
        this.processSubmitDialogFlag = true;

        this.$nextTick(() => {
          let params = {
            businessId: this.form.id,
            businessKey: 'eom_exception_approve',
            formCreateUserId: this.form.createUserId,
            variables: {
              businessCode: this.form.code,
              businessName: this.form.name,
              businessType: this.form.relationName
            }
          };
          this.$refs.processSubmitDialogRef.init(params);
        });
      },
      reload() {
        this.cancel();
      },
      cancel() {
        this.addOrEditDialogFlag = false;
        this.$emit('done');
      }
    }
  };
</script>
<style scoped lang="scss">
  .TotalAmount {
    font-size: 16px;
    padding-right: 30px;
  }

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

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