<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="`semiProductBom`"
      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="编码" type="code" minWidth="110">
        <template slot-scope="{ row, $index }">
          {{ row.categoryCode }}
        </template>
      </el-table-column>
      <el-table-column label="批次号" type="code" minWidth="110">
        <template slot-scope="{ row, $index }">
          <el-input v-model="row.batchNo" size="mini" class="content_num" :disabled="isDetails" style="width: 100%"></el-input>
        </template>
      </el-table-column>
      <el-table-column label="序列号" type="productSequence" minWidth="110">
        <template slot-scope="{ row, $index }">
          {{ row.extInfo.productSequence }}
        </template>
      </el-table-column>
      <el-table-column label="名称" type="name" minWidth="110">
        <template slot-scope="{ row, $index }">
          {{ row.name }}
        </template>
      </el-table-column>
      <el-table-column label="物品分类" type="rootCategoryLevelId" minWidth="110">
        <template slot-scope="{ row, $index }">
            {{
              row.rootCategoryLevelId == 2
                ? '在制品'
                : row.rootCategoryLevelId == 23
                ? '半成品'
                : row.rootCategoryLevelId == 9
                ? '产品'
                : item.rootCategoryLevelId == 28
                ? '废品'
                : ''
            }}
        </template>
      </el-table-column>

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

      <el-table-column label="规格" type="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="包装库存" type="brandNum">
        <template slot-scope="{ row, $index }">
          {{ row.packingCountBase }}/ {{ row.minUnit }}
        </template>
      </el-table-column> -->

      <el-table-column
         v-if="clientEnvironmentId == 3 && workInfo.singleReport == 1"
        :label="currentTaskDiagram.isFirstTask == 1 ? '物料重量' : '上道工序重量'"
        type="weightUnit"
        width="120"
      >
        <template slot-scope="{ row, $index }">
          <div v-if="currentTaskDiagram.isFirstTask == 1">
            {{ row.extInfo.weight || 0 }} {{ row.extInfo.weightUnit }}</div
          >
          <div v-if="currentTaskDiagram.isFirstTask == 0">
            {{ row.extInfo.newWeight || 0 }}
            {{ row.extInfo.weightUnit }}</div
          >
        </template>
      </el-table-column>

      <el-table-column 
        v-if="workInfo.singleReport == 1"
       label="刻码" type="engrave">
        <template slot-scope="{ row, $index }">
          {{ row.extInfo.engrave }}
        </template>
      </el-table-column>

      <el-table-column
       v-if="workInfo.singleReport == 1"
        label="物料代号"
        type="materielCode"
      >
        <template slot-scope="{ row, $index }">
          {{ row.extInfo.materielCode }}
        </template>
      </el-table-column>

      <el-table-column
        v-if="deviceList.length > 0"
        width="140"
        label="设备"
        type="deviceId"
      >
        <template slot-scope="{ row, $index }">
          <el-select
            v-model="row.deviceId"
            filterable
            placeholder="请选择"
            @change="(e) => selectVal(e, row, $index)"
            size="mini"
            :disabled="isDetails"
          >
            <el-option
              v-for="item in deviceList"
              :label="item.name + '-' + item.codeNumber"
              :value="item.id"
              :key="item.id"
            >
            </el-option>
          </el-select>
        </template>
      </el-table-column>

      <el-table-column
        v-if="deviceList.length > 0"
        label="炉次号"
        width="90"
        type="heatNumber"
      >
        <template slot-scope="{ row, $index }">
          <el-input
            size="mini"
            v-model="row.extInfo.heatNumber"
            placeholder="请输入炉次号"
            :disabled="isDetails"
          />
        </template>
      </el-table-column>

      <el-table-column
      
        label="数量"
        width="90"
        type="feedQuantity"
      >
        <template slot-scope="{ row, $index }">
          <el-input size="mini"  class="content_num" v-model="row.feedQuantity" placeholder="数量" :disabled="isDetails"/>
        </template>
      </el-table-column>

      <el-table-column
        v-if="clientEnvironmentId == 3 && workInfo.singleReport == 0"
        label="投料类型"
        type="materielCode"
      >
        <template slot-scope="{ row, $index }">
          <span style="color: #157a2c">
            {{ workInfo.singleReport == 0 ? '批量投料' : '' }}</span
          >
        </template>
      </el-table-column>

      <el-table-column
        v-if="clientEnvironmentId == 3 && workInfo.singleReport ==1"
        label="位置"
        width="110"
        type="feedQuantity"
      >
        <template slot-scope="{ row, $index }">
          <el-input size="mini" v-model="row.extInfo.position" placeholder="位置" :disabled="isDetails"/>
        </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>
  export default {
    props: {
      list: {
        type: Array,
        default: () => []
      },
      equipmentList: {
        type: Array,
        default: () => []
      },

      currentTaskDiagram: {
        type: Object,
        default: () => {}
      },
      isDetails: {
        type: Boolean,
        default: false
      },

      workInfo: {
        type: Object,
        default: () => {}
      }
    },

    computed: {
      clientEnvironmentId() {
        return this.$store.state.user.info.clientEnvironmentId;
      }
    },

    watch: {
      equipmentList: {
        immediate: true,
        deep: true,
        handler(newVal) {
          this.deviceList = newVal;
          this.changeHeatNumber();
        }
      }
    },

    data() {
      return {
        deviceList: []
      };
    },

    methods: {
      getDelete(index) {
        this.list.splice(index, 1);
      },

      selectVal(e, item, idx) {
        let obj = this.deviceList.find((f) => f.id == e);

        this.$set(
          this.list[idx],
          'deviceName',
          obj.name + '-' + obj.codeNumber
        );
        this.$set(
          this.list[idx]['extInfo'],
          'heatNumber',
          obj.extInfo.heatNumber
        );
      },

      changeHeatNumber() {
        console.log(this.deviceList,'aahashasoshaiuhuigwsiu');

        this.deviceList.forEach((f) => {
          this.list.forEach((o,index) => {
            if (
              o.deviceId &&
              f.id == o.deviceId &&
              this.deviceList.length > 1
            ) {
              // o.extInfo.heatNumber = f.extInfo.heatNumber;
              o['workstationName'] = f.workstationName;
              this.$set(this.list[index].extInfo,'heatNumber',f.extInfo.heatNumber)
              this.$forceUpdate();
            } else if (this.deviceList.length == 1) {
              o['deviceName'] = this.deviceList[0].name;
              o['deviceId'] = this.deviceList[0].id;
              o['workstationName'] = this.deviceList[0].workstationName;
              // o.extInfo.heatNumber = this.deviceList[0].extInfo.heatNumber;
              this.$set(this.list[index].extInfo,'heatNumber',this.deviceList[0].extInfo.heatNumber)
              this.$forceUpdate();
            }
          });
        });
      }
    }
  };
</script>

<style lang="scss" scoped>
  .mb4 {
    margin-bottom: 4px;
  }

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