<template>
  <div>
    <div class="title_box rx-bc mt6">
      <div class="name">报工信息({{ list.length || 0 }})个 </div>
      <div class="rx-bc"> </div>
    </div>

    <el-table
      ref="oneJobQualityBom"
      class="table_content"
      :max-height="600"
      :data="list"
      tooltip-effect="dark"
      style="width: 100%"
      stripe
      border
    >
      <el-table-column label="序号" type="index" width="55">
        <template slot-scope="{ row, $index }">
          {{ $index + 1 }}
        </template>
      </el-table-column>

      <el-table-column label="编码" prop="code" minWidth="110">
        <template slot-scope="{ row, $index }">
          {{ row.code }}
        </template>
      </el-table-column>

      <el-table-column label="名称" prop="name" minWidth="110">
        <template slot-scope="{ row, $index }">
          {{ row.name }}
        </template>
      </el-table-column>

      <el-table-column label="型号" prop="modelType">
        <template slot-scope="{ row, $index }">
          {{ row.modelType }}
        </template>
      </el-table-column>

      <!-- <el-table-column label="外观" width="120" prop="appearance">
        <template slot-scope="{ row, $index }">
          <el-select
            size="mini"
            class="content_num"
            filterable
            v-model="row.extInfo.appearance"
            placeholder="请选择"
            :disabled="isDetails"
          >
            <el-option
              v-for="item in qualityList"
              :label="item.name"
              :value="item.value"
              :key="item.value"
            >
            </el-option>
          </el-select>
        </template>
      </el-table-column> -->

      <!-- <el-table-column label="尺寸" width="120" prop="dimension">
        <template slot-scope="{ row, $index }">
          <el-select
            size="mini"
            class="content_num"
            filterable
            v-model="row.extInfo.dimension"
            placeholder="请选择"
            :disabled="isDetails"
          >
            <el-option
              v-for="item in qualityList"
              :label="item.name"
              :value="item.value"
              :key="item.value"
            >
            </el-option>
          </el-select>
        </template>
      </el-table-column> -->

      <el-table-column label="是否合格" width="110" prop="isQualified">
        <template slot-scope="{ row, $index }">
          <el-select
            size="mini"
            class="content_num"
            v-model="row.extInfo.isQualified"
            filterable
            placeholder="请选择"
            :disabled="isDetails"
          >
            <el-option
              v-for="item in isQualifiedList"
              :label="item.name"
              :value="item.code"
              :key="item.code"
            >
            </el-option>
          </el-select>
        </template>
      </el-table-column>

      <el-table-column label="类型" width="110" prop="notType">
        <template slot-scope="{ row, $index }">
          <el-select
            v-if="row.extInfo.isQualified && row.extInfo.isQualified == 2"
            size="mini"
            class="content_num"
            v-model="row.extInfo.notType"
            filterable
            placeholder="请选择"
            :disabled="isDetails"
          >
            <el-option
              v-for="item in notTypeList"
              :label="item.name"
              :value="item.code"
              :key="item.code"
            >
            </el-option>
          </el-select>
        </template>
      </el-table-column>

      <el-table-column label="处置" width="130" prop="taskName">
        <template slot-scope="{ row, $index }">
          <div
            v-if="
              row.extInfo.isQualified != 1 &&
              row.extInfo.notType &&
              row.extInfo.notType != 5
            "
          >
            <span v-if="isDetails">{{ row.extInfo.notReason }}</span>
            <el-input
              v-else
              size="mini"
              class="content_num"
              v-model="row.extInfo.notReason"
              placeholder="原因"
            />
          </div>
          <div v-if="![1, 2, 3, 4].includes(Number(row.extInfo.notType))">
            <span v-if="isDetails">{{ row.extInfo.taskName }}</span>
            <el-select
              v-else
              size="mini"
              class="content_num"
              v-model="row.extInfo.taskId"
              filterable
              placeholder="请选择"
              @change="(e) => selectName(e, $index)"
            >
              <el-option
                v-for="item in stepsList"
                :label="item.taskTypeName"
                :value="item.taskId"
                :key="item.taskId"
              >
              </el-option>
            </el-select>
          </div>
        </template>
      </el-table-column>

      <el-table-column label="规格" prop="specification">
        <template slot-scope="{ row, $index }">
          {{ row.specification }}
        </template>
      </el-table-column>

      <el-table-column label="牌号" type="brandNum">
        <template slot-scope="{ row, $index }">
          {{ row.brandNum }}
        </template>
      </el-table-column>

      <el-table-column label="包装库存" prop="brandNum">
        <template slot-scope="{ row, $index }">
          {{ row.packingCountBase }}/ {{ row.minUnit }}
        </template>
      </el-table-column>

      <el-table-column label="重量" prop="weightUnit">
        <template slot-scope="{ row, $index }">
          <div v-if="row.extInfo.newWeight">
            {{ row.extInfo.newWeight || 0 }} {{ row.extInfo.weightUnit }}</div
          >
          <div v-else>
            {{ row.extInfo.weight || 0 }}
            {{ row.extInfo.weightUnit }}</div
          >
        </template>
      </el-table-column>

      <el-table-column label="刻码" prop="engrave">
        <template slot-scope="{ row, $index }">
          {{ row.extInfo.engrave }}
        </template>
      </el-table-column>

      <el-table-column label="物料代号" prop="materielCode">
        <template slot-scope="{ row, $index }">
          {{ row.extInfo.materielCode }}
        </template>
      </el-table-column>

      <el-table-column width="140" label="设备" prop="deviceId">
        <template slot-scope="{ row, $index }">
          {{ row.deviceName }}
        </template>
      </el-table-column>

      <el-table-column label="炉次号" width="120" prop="heatNumber">
        <template slot-scope="{ row, $index }">
          <el-input
            size="mini"
            class="content_num"
            v-model="row.extInfo.heatNumber"
            placeholder="请输入炉次号"
          />
        </template>
      </el-table-column>

      <el-table-column label="位置" width="110" prop="feedQuantity">
        <template slot-scope="{ row, $index }">
          {{ row.extInfo.position }}
        </template>
      </el-table-column>

      <el-table-column
        label="操作"
        fixed="right"
        width="60px"
        v-if="!isDetails"
      >
        <template slot-scope="{ $index, row }">
          <el-link type="danger" @click="getDelete($index)">删除</el-link>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  import { getTaskInstanceList } from '@/api/produce/job';

  export default {
    name: 'semiProductJobBom',

    props: {
      list: {
        type: Array,
        default: () => []
      },

      item: {
        type: Object,
        default: () => {}
      },
      equipmentList: {
        type: Array,
        default: () => []
      },

      isDetails: {
        type: Boolean,
        default: false
      }
    },

    data() {
      return {
        // qualityList: [
        //   {
        //     name: '合格',
        //     value: 1
        //   },
        //   {
        //     name: '不合格',
        //     value: 2
        //   }
        // ]

        stepsList: [],

        isQualifiedList: [
          {
            code: 1,
            name: '合格'
          },
          {
            code: 2,
            name: '不合格'
          }
        ],

        notTypeList: [
          {
            code: 1,
            name: '返工'
          },
          {
            code: 2,
            name: '返修'
          },
          {
            code: 3,
            name: '报废'
          },
          {
            code: 4,
            name: '降级使用'
          },
          {
            code: 5,
            name: '让步接收'
          },
          {
            code: 6,
            name: '留样'
          },
          {
            code: 7,
            name: '消耗'
          },
          {
            code: 8,
            name: '回用'
          },
          {
            code: 9,
            name: '转试销'
          }
        ]
      };
    },

    created() {
      this.getTaskFn();
    },

    methods: {
      getTaskFn() {
        getTaskInstanceList(this.item.workOrderId).then((res) => {
          this.stepsList = res;
        });
      },

      getDelete(index) {
        this.list.splice(index, 1);
      }
    }
  };
</script>

<style lang="scss" scoped>
  .materialBor {
    border: 1px solid #157a2c;
  }

  .content_num {
    --input-background-color: #f0f8f2;
  }
</style>
