<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
      :default-expand-all="true"
    >
      <el-table-column type="expand" label="批量" width="80">
        <template slot-scope="{ row, $index }">
          <div class="material" :key="$index">
            <div class="btn_end">
              <el-button
                v-if="!isDetails"
                type="primary"
                size="mini"
                @click="handAddListPL($index)"
                style="margin-bottom: 4px"
                >分批</el-button
              >

              <div class="content_table2">
                <div class="head row rx-sc">
                  <div class="item ww30">合格品数量</div>
                  <div class="item ww30"
                    >报工总重量 /{{ row.extInfo.weightUnit }}
                  </div>
                  <div class="item ww30">处置</div>
                  <div class="item ww10">操作</div>
                </div>

                <div class="table">
                  <div
                    class="tr row rx-sc"
                    v-for="(it, yyIdx) in row.extInfo.batchReportInfo"
                    :key="$index + yyIdx"
                  >
                    <div class="item ww30">
                      <div v-if="isDetails">{{ it.allFeedQuantity }}</div>
                      <el-input
                        v-else
                        class="content_num"
                        size="mini"
                        v-model="it.allFeedQuantity"
                        @input="blurNum(it, $index, yyIdx)"
                        type="number"
                      ></el-input>
                    </div>

                    <div class="item ww30">
                      <div v-if="isDetails">{{ it.allReportWeight }}</div>
                      <el-input
                        v-else
                        class="content_num"
                        size="mini"
                        v-model="it.allReportWeight"
                        type="number"
                      ></el-input>
                    </div>

                    <div class="item ww30">
                      <el-select
                        size="mini"
                        class="content_num"
                        filterable
                        v-model="it.taskId"
                        placeholder="请选择"
                        @change="(e) => selectName(e, $index, yyIdx)"
                      >
                        <el-option
                          v-for="item in stepsList"
                          :label="item.taskTypeName"
                          :value="item.taskId"
                          :key="item.taskId"
                        >
                        </el-option>
                      </el-select>
                    </div>

                    <div
                      class="item ww10 rx-cc"
                      @click="handDel3($index, yyIdx)"
                    >
                      <el-link type="danger">删除</el-link>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="material" :key="'not' + $index">
            <div class="btn_end">
              <el-button
                v-if="!isDetails"
                type="primary"
                size="mini"
                @click="handAddListPL4($index)"
                style="margin-bottom: 4px"
                >分批</el-button
              >

              <div class="content_table2">
                <div class="head row rx-sc">
                  <div class="item ww20">不合格品数量</div>
                  <div class="item ww20">重量</div>
                  <div class="item ww20">类型 </div>
                  <div class="item ww30">处置/原因</div>
                  <div class="item ww10">操作</div>
                </div>

                <div class="table">
                  <div
                    class="tr row rx-sc"
                    v-for="(it, yyIdx) in row.extInfo.notBatchReportInfo"
                    :key="'not' + $index + yyIdx"
                  >
                    <div class="item ww20">
                      <div v-if="isDetails">{{ it.allFeedQuantity }}</div>
                      <el-input
                        v-else
                        class="content_num"
                        size="mini"
                        v-model="it.allFeedQuantity"
                        @input="blurNum2(it, $index, yyIdx)"
                        type="number"
                      ></el-input>
                    </div>

                    <div class="item ww20">
                      <div v-if="isDetails">{{ it.allReportWeight }}</div>
                      <el-input
                        v-else
                        class="content_num"
                        size="mini"
                        v-model="it.allReportWeight"
                        type="number"
                      ></el-input>
                    </div>

                    <div class="item ww20">
                      <el-select
                        size="mini"
                        class="content_num"
                        filterable
                        v-model="it.notType"
                        placeholder="请选择"
                        @change="handLoad()"
                        :disabled="isDetails"
                      >
                        <el-option
                          v-for="item in notTypeList"
                          :label="item.name"
                          :value="item.code"
                          :key="item.code"
                        >
                        </el-option>
                      </el-select>
                    </div>

                    <div class="item ww30" v-if="it.notType != 5">
                      <div v-if="isDetails">{{ it.notReason }}</div>
                      <el-input
                        v-else
                        class="content_num"
                        size="mini"
                        v-model="it.notReason"
                      ></el-input>
                    </div>

                    <div class="item ww30" v-if="it.notType == 5">
                      <el-select
                        size="mini"
                        class="content_num"
                        filterable
                        v-model="it.taskId"
                        placeholder="请选择"
                        :disabled="isDetails"
                        @change="(e) => selectName(e, $index, yyIdx)"
                      >
                        <el-option
                          v-for="item in stepsList"
                          :label="item.taskTypeName"
                          :value="item.taskId"
                          :key="item.taskId"
                        >
                        </el-option>
                      </el-select>
                    </div>

                    <div
                      class="item ww10 rx-cc"
                      @click="handDel4($index, yyIdx)"
                    >
                      <el-link type="danger">删除</el-link>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </template>
      </el-table-column>

      <el-table-column label="序号" width="85">
        <template slot-scope="{ row, $index }">
          {{ $index + 1 }}
          <div class="tag_box" v-if="row.isCache">缓</div>
        </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="140">
        <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="规格" prop="specification">
        <template slot-scope="{ row, $index }">
          {{ row.specification }}
        </template>
      </el-table-column>

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

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

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

      <el-table-column
        v-if="deviceList.length > 0"
        label="炉次号"
        width="90"
        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="90" prop="feedQuantity">
        <template slot-scope="{ row, $index }">
          <el-input
            size="mini"
            class="content_num"
            v-model="row.feedQuantity"
            placeholder="数量"
          />
        </template>
      </el-table-column>

      <el-table-column label="操作" width="60px">
        <template slot-scope="{ $index, row }">
          <el-link v-if="!isDetails" 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: () => []
      },
      equipmentList: {
        type: Array,
        default: () => []
      },

      item: {
        type: Object,
        default: () => {}
      },
      isDetails: {
        type: Boolean,
        default: false
      },
      singleReport: {
        default: null
      }
    },

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

    data() {
      return {
        deviceList: [],
        stepsList: [],

        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: '转试销'
          }
        ]
      };
    },

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

      changeHeatNumber() {
        this.deviceList.forEach((f) => {
          this.list.forEach((o) => {
            if (
              o.deviceId &&
              f.instanceId == o.deviceId &&
              this.deviceList.length > 1
            ) {
              o.extInfo.heatNumber = f.extInfo.heatNumber;
              this.$forceUpdate();
            } else if (this.deviceList.length == 1) {
              o.extInfo.heatNumber = this.deviceList[0].extInfo.heatNumber;
              this.$forceUpdate();
            }
          });
        });
      },

      getDelete(idx) {
        this.list.splice(idx, 1);
      },

      handAddListPL(idx) {
        this.list[idx].extInfo.batchReportInfo.push({
          allFeedQuantity: '',
          allReportWeight: '',
          taskId: '',
          taskName: ''
        });
      },

      blurNum(it, idx, yyIdx) {
        let value = it.allFeedQuantity;
        value = value.replace(/\./g, '');
        this.$set(
          this.list[idx].extInfo.batchReportInfo[yyIdx],
          'allFeedQuantity',
          value
        );

        let count = 0;
        this.list[idx].extInfo.batchReportInfo.forEach((m) => {
          count = count + Number(m.allFeedQuantity || 0);
        });

        let count2 = 0;
        this.list[idx].extInfo.notBatchReportInfo.forEach((m) => {
          count2 = count2 + Number(m.allFeedQuantity || 0);
        });

        if (Number(count + count2) > this.list[idx].feedQuantity) {
          this.$set(
            this.list[idx].extInfo.batchReportInfo[yyIdx],
            'allFeedQuantity',
            0
          );
          this.$forceUpdate();

          this.$message.info('投料数不能大于投料数量');
        }
      },

      blurNum2(it, idx, yyIdx) {
        let value = it.allFeedQuantity;
        value = value.replace(/\./g, '');
        this.$set(
          this.list[idx].extInfo.notBatchReportInfo[yyIdx],
          'allFeedQuantity',
          value
        );

        let count = 0;
        this.list[idx].extInfo.batchReportInfo.forEach((m) => {
          count = count + Number(m.allFeedQuantity || 0);
        });

        let count2 = 0;
        this.list[idx].extInfo.notBatchReportInfo.forEach((m) => {
          count2 = count2 + Number(m.allFeedQuantity || 0);
        });

        if (Number(count + count2) > this.list[idx].feedQuantity) {
          this.$set(
            this.list[idx].extInfo.notBatchReportInfo[yyIdx],
            'allFeedQuantity',
            0
          );
          this.$forceUpdate();

          this.$message.info('投料数不能大于投料数量');
        }
      },

      handDel3(idx, yyIdx) {
        this.list[idx].extInfo.batchReportInfo.splice(yyIdx, 1);
      },

      selectName(value, idx, yyIdx) {
        const taskObj = this.stepsList.find((item) => item.taskId === value);
        this.$set(
          this.list[idx].extInfo.batchReportInfo[yyIdx],
          'taskName',
          taskObj.taskTypeName
        );
        this.$forceUpdate();
      },

      handAddListPL4(idx) {
        this.list[idx].extInfo.notBatchReportInfo.push({
          allFeedQuantity: '',
          notType: '',
          taskId: '',
          taskName: '',
          notReason: ''
        });
        this.$forceUpdate();
      },

      handDel4(idx, yyIdx) {
        this.list[idx].extInfo.notBatchReportInfo.splice(yyIdx, 1);
      },

      handLoad() {
        this.$forceUpdate();
      }
    },

    created() {
      this.getTaskFn();
    }
  };
</script>

<style lang="scss" scoped>
  .tag_box {
    display: inline-block;
    padding: 1px 6px;
    margin-right: 6px;
    background: #e6a23c;
    font-size: 11px;
    color: #fff;
    border-radius: 2px;
  }

  .content_num {
    --input-background-color: #f0f8f2;
  }

  .numerate {
    font-size: 22rpx;
    color: #157a2c;
    cursor: pointer;
  }

  .material {
    width: 90%;
    margin: auto;
  }

  .btn_end {
    text-align: right;
    margin-bottom: 10px;
  }

  .content_table2 {
    width: 100%;

    .row {
      width: 100%;

      .item {
        color: #404446;
        font-size: 14px;
        padding-left: 6px;
        text-align: center;
      }

      .color157 {
        color: #157a2c;
      }

      .ww20 {
        width: 20%;
      }

      .ww30 {
        width: 30%;
      }

      .ww25 {
        width: 25%;
      }

      .ww35 {
        width: 35%;
      }

      .ww10 {
        width: 10%;
      }
    }

    .head {
      height: 32px;
      background: #f7f9fa;
      border-top: 1px solid #e3e5e5;
      border-left: 1px solid #e3e5e5;

      .item {
        height: 32px;
        line-height: 32px;
        border-right: 1px solid #e3e5e5;
        box-sizing: border-box;
      }
    }

    .tr {
      border-top: 1px solid #e3e5e5;
      border-left: 1px solid #e3e5e5;

      .item {
        font-size: 12px;
        min-height: 32px;
        display: flex;
        align-items: center;
        border-right: 1px solid #e3e5e5;
        box-sizing: border-box;
        white-space: normal;
        word-break: break-all;
      }

      &:last-child {
        border-bottom: 1px solid #e3e5e5;
      }
    }
  }

  .formula_box {
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    margin-top: 15px;
    color: #157a2c;
  }

  .reportWeight {
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    margin-top: 15px;
    color: #157a2c;
  }

  .content_num {
    display: flex;
    align-items: center;
    padding: 2px;
    --input-background-color: #f0f8f2;
  }
</style>
