<template>
  <div>
    <el-form ref="form" :model="form" label-width="120px" class="el-form-box">
      <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>
    </el-form>

    <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" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </template>
      <template v-slot:exceptionDetermine="scope">
        <el-select v-model="scope.row.exceptionDetermine" placeholder="请选择">
          <el-option
            v-for="item in options1"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </template>
    </ele-pro-table>
  </div>
</template>

<script>
  import dictMixins from '@/mixins/dictMixins';
  import {
    getById,
    update
  } from '@/api/bpm/components/saleManage/exceptionManagement.js';
  import { relationType } from '@/enum/dict.js';

  export default {
    mixins: [dictMixins],
    props: {
      businessId: {
        default: ''
      },
      taskDefinitionKey: {}
    },
    data() {
      return {
        options: [
          { label: '退货入库', value: 1 },
          { label: '返工返修', value: 2 },
          { label: '报损', value: 3 },
          { label: '报废', value: 4 }
        ],
        options1: [
          { 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: 'exceptionDetermine',
            label: '异常类型',
            slot: 'exceptionDetermine',
            fixed: 'left',
            align: 'center',
            headerSlot: 'headerExceptionDispose'
          },
          {
            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'
          },
          {
            width: 120,
            prop: 'specification',
            label: '规格',
            slot: 'specification',
            align: 'center'
          },
          {
            width: 120,
            prop: 'modelType',
            label: '型号',
            slot: 'modelType',
            align: 'center'
          },

          // {
          //   minWidth: 100,
          //   prop: 'saleCount',
          //   label: '发货数量',
          //   showOverflowTooltip: true,
          //   align: 'center'
          // },
          {
            minWidth: 100,
            prop: 'totalCount',
            slot: 'totalCount',
            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: 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'
          }
        ]
      };
    },
    created() {
      this.getById(this.businessId);
    },
    methods: {
      //获取订单详情
      async getById(id) {
        this.loading = true;
        let data = await getById(id);
        data['relationTypeName'] = relationType[data.relationType];

        if (data) {
          this.form = data;
        }
      },
      async getTableValue() {
        let is = false;
        this.form.detailList.forEach((item) => {
          if (!item.exceptionDispose) {
            is = true;
          }
        });
        if (is) {
          this.$message.error('处置方式不能为空');
          return;
        }
        return this.form;
      }
    }
  };
</script>
<style scoped lang="scss"></style>
