<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="productSequence" minWidth="110">
        <template slot-scope="{ row, $index }">
          {{ row.extInfo.productSequence }}
        </template>
      </el-table-column>

      <el-table-column label="刻码" prop="engrave">
        <template slot-scope="{ row, $index }">
          <span v-if="isDetails">{{ row.extInfo.engrave }}</span>
          <el-input
            v-else
            size="mini"
            class="content_num"
            v-model="row.extInfo.engrave"
            placeholder="刻码"
          />
        </template>
      </el-table-column>

      <el-table-column
        v-if="item.currentTaskDiagram.type == 4"
        label="发货码"
        prop="materielCode"
      >
        <template slot-scope="{ row, $index }">
          <span v-if="isDetails">{{ row.extInfo.materielCode }}</span>
          <el-input
            v-else
            size="mini"
            class="content_num"
            v-model="row.extInfo.materielCode"
            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"
            disabled
            placeholder="数量"
          />
        </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>

    <el-dialog
      title="工序计算列表"
      :visible.sync="show"
      :before-close="cancel"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      append-to-body
      width="800px"
    >
      <div class="material">
        <div class="btn_end">
          <el-button type="primary" size="mini" @click="handAddParam"
            >添加</el-button
          >
        </div>
        <div class="content_table2">
          <div class="head row rx-sc">
            <div class="item ww30">工序名称</div>
            <div class="item ww20">坯体密度</div>
            <div class="item ww20">密度系数</div>
            <div class="item ww20">重量</div>
            <div class="item ww20">操作</div>
          </div>

          <div class="table">
            <div class="tr row rx-sc" v-for="(it, idx) in paramList" :key="idx">
              <div class="item ww30">
                <el-select
                  size="mini"
                  class="content_num"
                  filterable
                  v-model="it.taskId"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in stepsList"
                    :label="item.taskTypeName"
                    :value="item.taskId"
                    :key="item.taskId"
                  >
                  </el-option>
                </el-select>
              </div>

              <div class="item ww20">
                <el-input
                  class="content_num"
                  size="mini"
                  v-model="it.billet"
                  type="digit"
                  @input="changeInp(it, idx)"
                ></el-input>
              </div>

              <div class="item ww20">
                <el-input
                  class="content_num"
                  size="mini"
                  v-model="it.density"
                  type="digit"
                  @input="changeInp(it, idx)"
                ></el-input>
              </div>

              <div
                class="item ww20"
                v-if="idx == 0 || idx != paramList.length - 1"
              >
                < {{ it.CVIWeight }}
              </div>

              <div
                class="item ww20"
                v-if="paramList.length > 1 && idx == paramList.length - 1"
              >
                ≥ {{ it.CVIWeight }}
              </div>

              <div class="item ww20 rx-cc" @click="getDelete2(idx)">
                <el-link type="danger">删除</el-link>
              </div>
            </div>
          </div>
        </div>

        <div class="formula_box">计算公式： 物料重量/坯体密度*密度系数 </div>

        <div class="reportWeight rx-sc">
          物料重量: {{ weight }} ; 报工重量: {{ reportWeight }}
        </div>
      </div>

      <template slot="footer">
        <el-button size="mini" type="primary" @click="paramSave"
          >保存并计算</el-button
        >
        <el-button size="mini" type="primary" @click="save">计算</el-button>
        <el-button size="mini" @click="cancel">取消</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
  import {
    getTaskInstanceList,
    getComputeParam,
    saveParam
  } 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: [],

        weight: 0,
        reportWeight: 0,

        paramList: [],

        resultObj: {},
        resultIdx: 0,

        show: false,

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

    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();
            }
          });
        });
      },

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

      openNumerate(row, idx) {
        if (!row.extInfo.reportWeight) {
          this.$message({ message: '请先输入报工重量', type: 'warning' });
          return false;
        }
        this.weight = row.extInfo.weight;
        this.reportWeight = row.extInfo.reportWeight;
        this.resultIdx = idx;

        this.show = true;
      },

      getCompute() {
        getComputeParam(
          this.item.workOrderId,
          this.item.currentTaskDiagram.taskId
        ).then((res) => {
          this.paramList = [];
          this.paramList = (res && res.paramList) || [];
          this.paramObj = res || {};
        });
      },

      handAddParam() {
        this.paramList.push({
          taskId: null,
          taskName: null
        });
      },
      getDelete(idx) {
        this.list.splice(idx, 1);
      },

      getDelete2(idx) {
        this.paramList.splice(idx, 1);
      },

      changeInp(item, index) {
        if (Number(item.billet) && Number(item.density)) {
          this.paramList[index].CVIWeight = (
            (Number(this.weight) / item.billet) *
            item.density
          ).toFixed(2);
        }
      },

      cancel() {
        this.show = false;
        this.reportWeight = 0;
        this.weight = 0;
      },

      paramSave() {
        if (this.paramList.length > 0) {
          let bol;
          let _i;
          bol = this.paramList.every((e, i) => {
            _i = i + 1;
            return e.taskId && e.billet && e.density;
          });

          if (!bol) {
            this.$message({ message: `第${_i}行数据不全`, type: 'warning' });

            return false;
          }

          if (this.paramList.length < 1) {
            this.$message({
              message: '请输入二个以上计算数据',
              type: 'warning'
            });

            return false;
          }
        }
        let param = {};

        if (!Object.prototype.hasOwnProperty.call(this.paramObj, 'id')) {
          param = {
            paramList: this.paramList,
            workOrderId: this.item.workOrderId,
            taskId: this.item.currentTaskDiagram.taskId
          };
        } else {
          this.paramObj.paramList = this.paramList;
          param = this.paramObj;
        }

        saveParam(param).then((res) => {
          this.$message({ message: '保存成功', type: 'success' });
          this.getCompute();

          this.save();
        });
      },

      save() {
        if (this.item.currentTaskDiagram.isFirstTask == 1) {
          this.resultObj = {};

          if (Number(this.reportWeight) < Number(this.paramList[0].CVIWeight)) {
            this.resultObj = this.paramList[0];
            this.setDataSave();
            return false;
          }

          if (
            Number(this.reportWeight) >=
            this.paramList[this.paramList.length - 1].CVIWeight
          ) {
            this.resultObj = this.paramList[this.paramList.length - 1];
            this.setDataSave();
            return false;
          }

          for (let i = 1; i < this.paramList.length; i++) {
            console.log(
              11,
              Number(this.paramList[i - 1].CVIWeight),
              Number(this.reportWeight)
            );
            if (
              Number(this.paramList[i - 1].CVIWeight) <
                Number(this.reportWeight) &&
              Number(this.reportWeight) < Number(this.paramList[i].CVIWeight)
            ) {
              this.resultObj = this.paramList[i];
              break;
            }
          }
          this.setDataSave();
        }
      },

      setDataSave() {
        this.$set(
          this.list[this.resultIdx].extInfo,
          'taskId',
          this.resultObj.taskId
        );
        this.$set(
          this.list[this.resultIdx].extInfo,
          'density',
          this.resultObj.density
        );
        this.$set(
          this.list[this.resultIdx].extInfo,
          'billet',
          this.resultObj.billet
        );
        this.$set(
          this.list[this.resultIdx].extInfo,
          'taskName',
          this.resultObj.taskName
        );

        this.cancel();
      }
    },

    created() {
      this.getTaskFn();
      this.getCompute();
    }
  };
</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_num2 {
    --input-background-color: #f0f8f2;
  }

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

  .material {
    width: 100%;
  }

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

  .content_table2 {
    width: 100%;

    .row {
      width: 100%;

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

      .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>
