<template>
  <div>
    <div class="title_box rx-bc mt6">
      <div class="name">产品信息 </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">
              <div class="content_table2">
                <div class="head row rx-sc">
                  <div class="item ww25">合格品数量</div>
                  <div class="item ww25"
                    >报工总重量 /{{ row.extInfo.weightUnit }}
                  </div>
                  <div class="item ww25">处置</div>
                  <div class="item ww25">取样</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 ww25">
                      <div>{{ it.allFeedQuantity }}</div>
                    </div>

                    <div class="item ww25">
                      <div>{{ it.allReportWeight }}</div>
                    </div>

                    <div class="item ww25">
                      <el-select
                        size="mini"
                        class="content_num"
                        filterable
                        v-model="it.taskId"
                        placeholder="请选择"
                        disabled
                      >
                        <el-option
                          v-for="item in stepsList"
                          :label="item.taskTypeName"
                          :value="item.taskId"
                          :key="item.taskId"
                        >
                        </el-option>
                      </el-select>
                    </div>

                    <div class="item ww25">
                      <div v-if="isDetails">{{ it.sample }}</div>
                      <el-input
                        v-else
                        class="content_num"
                        size="mini"
                        v-model="it.sample"
                        type="number"
                        @input="blurNum2(it, $index, yyIdx)"
                      ></el-input>
                    </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="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 width="140" label="设备" prop="deviceId">
        <template slot-scope="{ row, $index }">
          {{ row.deviceName || row.extInfo.deviceName }}
        </template>
      </el-table-column>

      <el-table-column label="炉次号" width="90" prop="heatNumber">
        <template slot-scope="{ row, $index }">
          {{ row.extInfo.heatNumber }}
        </template>
      </el-table-column>

      <el-table-column label="投料数量" width="90" prop="feedQuantity">
        <template slot-scope="{ row, $index }">
          {{ row.feedQuantity }}
        </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
      style="display: flex; justify-content: center; margin: 12px auto"
      v-if="!isDetails"
    >
      <el-button
        size="mini"
        style="background-color: #157a2c; color: #fff; width: 180px"
        @click="handSample()"
        >取样</el-button
      >
    </div>

    <div class="title_box rx-bc mt6">
      <div class="name">样品列表 </div>

      <div class="rx-bc"> </div>
    </div>

    <el-table
      ref="oneJobQualityBomPL"
      class="table_content"
      :data="item.sampleQuality"
      tooltip-effect="dark"
      style="width: 100%"
      stripe
      border
      :default-expand-all="true"
      v-if="item.sampleQuality && item.sampleQuality.length > 0"
    >
      <el-table-column type="expand" label="取样" width="80">
        <template slot-scope="{ row, $index }">
          <div
            class="material"
            :key="$index"
            v-if="row.extInfo.batchReportInfo?row.extInfo.batchReportInfo.length > 0:false"
          >
            <div class="btn_end">
              <div class="content_table2">
                <div class="head row rx-sc">
                  <div class="item ww33">合格品数量</div>
                  <div class="item ww33"
                    >报工总重量 /{{ row.extInfo.weightUnit }}
                  </div>
                  <div class="item ww33">处置</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 ww33">
                      <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 ww33">
                      <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 ww33 rx-cc">
                      <div v-if="isDetails">{{ it.taskName }}</div>
                      <el-select
                        v-else
                        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>
                </div>
              </div>
            </div>
          </div>

          <div
            class="material"
            :key="$index"
            v-if="row.extInfo.batchReportInfo?row.extInfo.batchReportInfo.length == 0:false"
          >
            <div style="display: flex; align-items: center">
              质检结果: &nbsp;&nbsp;&nbsp;
              <el-select
                size="mini"
                class="content_num"
                filterable
                v-model="row.extInfo.appearance"
                placeholder="请选择"
                style="width: 300px"
                :disabled="isDetails"
              >
                <el-option
                  v-for="item in qualityList"
                  :label="item.name"
                  :value="item.value"
                  :key="item.value"
                >
                </el-option>
              </el-select>

              <span style="display: inline-block; margin-left: 26px">
                处置:
              </span>
              <el-select
                size="mini"
                class="content_num"
                filterable
                v-model="row.extInfo.taskId"
                placeholder="请选择"
                style="width: 300px"
                @change="(e) => selectName2(e, $index)"
                :disabled="isDetails"
              >
                <el-option
                  v-for="item in stepsList"
                  :label="item.taskTypeName"
                  :value="item.taskId"
                  :key="item.taskId"
                >
                </el-option>
              </el-select>
            </div>

            <div class="btn_start" v-if="row.extInfo.qualityParam.length > 0">
              <div class="content_table2" style="margin-top: 6px">
                <div class="head row rx-sc">
                  <div class="item ww15"> 质检类型</div>
                  <div class="item ww15"> 质检名称</div>
                  <div class="item ww20"> 工艺参数</div>
                  <div class="item ww20"> 工艺要求</div>
                  <div class="item ww20">质检结果参数</div>
                  <div class="item ww10">质检结果</div>
                </div>

                <div class="table">
                  <div
                    class="tr row rx-sc"
                    v-for="(quaItem, quaItemIdx) in  row.extInfo.qualityParam"
                    :key="quaItemIdx"
                  >
                    <div class="item ww15">
                      {{ quaItem.categoryLevelName }}</div
                    >
                    <div class="item ww15"> {{ quaItem.inspectionName }}</div>
                    <div class="item ww20">
                      <div style="display: flex">
                        <div
                          v-if="quaItem.textType == 3"
                          style="display: flex; align-items: center"
                        >
                          {{ quaItem.minValue }} {{ quaItem.unit }}
                          <span>&nbsp;&nbsp;-&nbsp;&nbsp;</span>
                          {{ quaItem.maxValue }} {{ quaItem.unit }}
                        </div>

                        <div v-else>
                          {{ quaItem.defaultValue }} {{ quaItem.unit }}
                        </div>
                      </div>
                    </div>
                    <div class="item ww20">
                      {{ quaItem.symbol }}{{ quaItem.inspectionStandard
                      }}{{ quaItem.unit }}</div
                    >

                    <div class="item ww20 rx-cc">
                      <div v-if="isDetails">{{ quaItem.qualityResultValue }}</div>
                      <el-input
                        v-else
                        class="content_num"
                        size="mini"
                        v-model="quaItem.qualityResultValue"
                      ></el-input>
                    </div>

                    <div class="item ww10">
                      <el-select
                        size="mini"
                        class="content_num"
                        filterable
                        v-model="quaItem.qualityResult"
                        placeholder="请选择"
                        style="width: 95%"
                        :disabled="isDetails"
                      >
                        <el-option
                          v-for="item in qualityList"
                          :label="item.name"
                          :value="item.value"
                          :key="item.value"
                        >
                        </el-option>
                      </el-select>
                    </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="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 width="140" label="设备" prop="deviceId">
        <template slot-scope="{ row, $index }">
          {{ row.deviceName || row.extInfo.deviceName }}
        </template>
      </el-table-column>

      <el-table-column label="炉次号" width="90" prop="heatNumber">
        <template slot-scope="{ row, $index }">
          {{ row.extInfo.heatNumber }}
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

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

  export default {
    name: 'oneJobQualityBomPL',

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

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

    data() {
      return {
        stepsList: [],

        qualityList: [
          {
            name: '合格',
            value: 1
          },
          {
            name: '不合格', 
            value: 2
          },
          {
            name: '让步接受',
            value: 3
          }
        ]
      };
    },

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

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

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

      blurNum2(it, idx, yyIdx) {
        let value = it.sample;
        value = value.replace(/\./g, '');

        if (
          Number(value) >
          Number(this.list[idx].extInfo.batchReportInfo[yyIdx].allFeedQuantity)
        ) {
          this.$set(this.list[idx].extInfo.batchReportInfo[yyIdx], 'sample', 0);
          this.$forceUpdate();
        }
      },

      handSample() {
        let param = {
          taskId: this.taskObj.id,
          workOrderId: this.list[0].workOrderId,
          dispose: this.list
        };

        sample(param).then((res) => {
          this.item.sampleQuality = res || [];
          this.$forceUpdate();
        });
      },

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

      selectName2(value, idx) {
        console.log(value, idx);

        const taskObj = this.stepsList.find((item) => item.taskId === value);
        this.$set(
          this.item.sampleQuality[idx].extInfo,
          'taskName',
          taskObj.taskTypeName
        );
        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;
  }

  .btn_start {
    text-align: left;
    margin-top: 6px;
  }

  .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%;
      }

      .ww33 {
        width: 33.333%;
      }

      .ww25 {
        width: 25%;
      }

      .ww35 {
        width: 35%;
      }

      .ww10 {
        width: 10%;
      }
      .ww15 {
        width: 15%;
      }
    }

    .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;
        height: 100%;
        min-height: 32px;
        display: flex;
        align-items: center;
        border-right: 1px solid #e3e5e5;
        box-sizing: border-box;
        white-space: normal;
        word-break: break-all;
        position: relative;
      }

      &: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>
