<template>
  <div>
    <div class="title_box rx-bc mt6">
      <div class="name">报工信息 </div>

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

    <div class="material">
      <div class="content_table">
        <div class="item rx-sc">
          <div class="rx ww33" v-if="Object.prototype.hasOwnProperty.call(item, 'product') && clientEnvironmentId != 3">
            <div class="lable rx-cc">投料数量</div>
            <div class="content">
              {{ item.product[0] && item.product[0].feedQuantity }}
            </div>
          </div>

          <div class="rx ww33">
            <div class="lable lable100 rx-cc">要求生产数量</div>
            <div class="content">{{ item.formingNum }} {{ item.unit }}</div>
          </div>

          <div class="rx ww33">
            <div class="lable rx-cc">重量</div>
            <div class="content">{{ item.formingWeight }}{{ item.weightUnit }}</div>
          </div>
        </div>
       
    

        <div class="item rx-sc" v-if="(clientEnvironmentId == 3 && item.singleReport == 0) ||  taskObj.type == 4 || clientEnvironmentId == 2">
          <div class="rx ww40">
            <div class="lable lable100 rx-cc">合格品数量</div>
            <div class="content content_num rx-sc">
              <el-input size="mini" v-model="item.workReportInfo.formedNum" placeholder="请输入合格品数量" @input="blurNum">
                <template slot="append">{{ item.unit }}</template>
              </el-input>
            </div>
          </div>

          <div class="rx ww40">
            <div class="lable rx-cc">重量</div>
            <div class="content content_num rx-sc">
              <el-input size="mini" v-model="item.workReportInfo.formedWeight" placeholder="请输入合格品重量">
                <template slot="append">{{ item.weightUnit }}</template>
              </el-input>
            </div>
          </div>
        </div>

        <div class="item rx-sc" v-for="(not, notIndex) in notFormedList" :key="notIndex" v-if="(clientEnvironmentId == 3 && item.singleReport == 0) ||  taskObj.type == 4 || clientEnvironmentId == 2">
          <div class="rx ww40">
            <div class="lable lable100 rx-cc">不合格数量</div>
            <div class="content content_num rx-sc">
              <el-input size="mini" v-model="not.notFormedNum" placeholder="请输入不合格数量" @input="changeNum">
                <template slot="append">{{ item.unit }}</template>
              </el-input>
            </div>
          </div>

          <div class="rx ww40">
            <div class="lable rx-cc">重量</div>
            <div class="content content_num rx-sc">
              <el-input size="mini" v-model="not.notFormedWeight" placeholder="请输入不合格品重量">
                <template slot="append">{{ item.weightUnit }}</template>
              </el-input>
            </div>
          </div>

          <div class="rw ww20 rx-cc">
            <div class="penalize" v-if="!isDetails" :style="{ background: not.warehouseId ? '#FFA07A' : '' }"
              @click="penalize">
              处置</div>
            <div class="penalize" v-if="isDetails" :style="{ background: not.warehouseId ? '#FFA07A' : '' }" @click="
              handleView(isDetails ? not.warehouseName : item.warehouseName)
              ">
              查看</div>
          </div>
        </div>
      </div>
    </div>

    <el-dialog title="仓库处置" :visible.sync="visible" :before-close="handleClose" :close-on-click-modal="false"
      :close-on-press-escape="false" append-to-body width="500px">
      <el-form size="mini" :model="form" label-width="96px">
        <el-form-item label="仓库" prop="warehouseList">
          <el-select v-model="form.warehouseId" placeholder="请选择仓库" filterable>
            <el-option v-for="item in warehouseList" :label="item.name" :value="item.id" :key="item.id">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>

      <template slot="footer">
        <el-button size="mini" @click="visible = false">取 消</el-button>
        <el-button size="mini" type="primary" @click="warehouseSave">保 存</el-button>
      </template>
    </el-dialog>
  </div>
</template>
<script>
export default {
  props: {
    item: {
      type: Object,
      default: () => { }
    },
    notFormed: {
      type: Array,
      default: () => []
    },
    isDetails: {
      type: Boolean,
      default: false
    },
    warehouseList: {
      type: Array,
      default: () => []
    }
  },

  watch: {
    notFormed: {
      immediate: true,
      deep: true,
      handler(newVal) {
        this.notFormedList = newVal;
      }
    }
  },

  computed: {

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

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


  data() {
    return {
      notFormedList: [],

      form: {
        warehouseId: null
      },

      visible: false
    };
  },

  created() {
    if (this.isDetails) {
      this.notFormedList = this.notFormedList.map((m) => {
        return {
          notFormedNum: Number(m.quantity),
          notFormedWeight: m.weight,
          ...m
        };
      });
    }
  },

  methods: {
    penalize() {
      this.visible = true;
    },

    handleClose() {
      this.visible = false;
    },

    warehouseSave() {
      this.$set(this.item.notFormedList[0], 'warehouseId', this.form.warehouseId || null)

      this.handleClose()
      this.$forceUpdate()
    },

    handleView(name) {
      this.$message.info(name || '未设置');
    },

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

    blurNum() {
      let total =
        Number(this.item.workReportInfo.formedNum) +
        Number(this.notFormedList[0].notFormedNum);
      this.$emit('modeNum', total);

      if (
        this.item.product[0] &&
        this.item.product[0].feedQuantity > 0 &&
        Number(this.item.workReportInfo.formedNum)
      ) {
        this.$set(
          this.notFormedList[0],
          'notFormedNum',
          this.item.product[0].feedQuantity -
          Number(this.item.workReportInfo.formedNum)
        );
        this.notForme();
      }

      let weight =
        Number(this.item.workReportInfo.formedNum) *
        Number(this.item.singleWeight) *
        Number(this.item.weightMultiple);

      if (['G', 'g', '克'].includes(this.item.singleWeightUnit)) {
        weight = parseFloat((weight / 1000).toFixed(2));
      } else {
        weight = parseFloat(weight.toFixed(2));
      }

      this.$set(this.item.workReportInfo, 'formedWeight', weight);

      this.$forceUpdate();
    },


    notForme() {

      let weight = Number(this.notFormedList[0].notFormedNum) * Number(this.item.singleWeight) * Number(this
        .item.weightMultiple)
      if (this.item.singleWeightUnit == 'G' || this.item.singleWeightUnit == 'g' || this.item.singleWeightUnit ==
        '克') {
        weight = parseFloat((weight / 1000).toFixed(2))
      } else {
        weight = parseFloat(weight.toFixed(2))
      }
      this.$set(this.notFormedList[0], 'notFormedWeight', weight)


      if (  this.item.product[0] && this.item.product[0].feedQuantity > 0 && Number(this.notFormedList[0].notFormedNum)) {
        this.$set(this.item.workReportInfo, 'formedNum', this.item.product[0].feedQuantity - Number(this
          .notFormedList[0]
          .notFormedNum))


        let weight = Number(this.item.workReportInfo.formedNum) * Number(this.item.singleWeight) * Number(this
          .item.weightMultiple)
        if (this.item.singleWeightUnit == 'G' || this.item.singleWeightUnit == 'g' || this.item
          .singleWeightUnit == '克') {
          weight = parseFloat((weight / 1000).toFixed(2))
        } else {
          weight = parseFloat(weight.toFixed(2))
        }
        this.$set(this.item.workReportInfo, 'formedWeight', weight)

      }



      this.$forceUpdate()

    },



    changeNum() {
      this.notForme();
      // this.blurNum()
    }
  }
};
</script>

<style lang="scss" scoped>
.lable {
  width: 200px;
}

.penalize {
  width: 80px;
  line-height: 30px;
  background: #157a2c;
  font-size: 12px;
  text-align: center;
  color: #fff;
  cursor: pointer;
}


.content_table {
    width: 100%;
    border: 1px solid #e3e5e5;
    position: relative;

    .item {
      display: flex;
      border-bottom: 1px solid #e3e5e5;

      .lable {
        width: 72px;
        text-align: center;
        background-color: #f7f9fa;
        font-size: 12px;
        border-right: 1px solid #e3e5e5;
        flex-shrink: 0;
      }

      .lable80 {
        width: 80px !important;
        font-size: 12px;
      }

      .lable90 {
        width: 90px !important;
      }

      .lable100 {
        width: 100px !important;
      }


      .ww60 {
        width: 60px;
      }

      .content {
        width: 250px;
        min-height: 32px;
        font-size: 14px;
        line-height: 14px;
        font-style: normal;
        font-weight: 400;
        padding: 9px 4px;
        box-sizing: border-box;
        word-wrap: break-word;
        flex-grow: 1 !important;

        .unit {
          padding: 0 2px;
          font-size: 12px;
          color: #404446;
        }
      }

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

      .pd2 {
        padding: 2px 4px;
      }

      &:last-child {
        border-bottom: none;
      }
    }

    .ww55 {
      width: 55%;
    }

    .ww50 {
      width: 50%;
    }

    .ww45 {
      width: 45%;
    }

    .ww40 {
      width: 40%;
    }

    .ww30 {
      width: 30%;
    }

    .ww33 {
      width: 33.33%;
    }

    .ww20 {
      width: 20%;
    }

    .del_box {
      position: absolute;
      right: 2px;
      top: 2px;
    }

    .sort_index {
      position: absolute;
      left: 2px;
      top: 2px;
      width: 14px;
      height: 14px;
      line-height: 14px;
      text-align: center;
      color: #fff;
      font-size: 12px;
      border-radius: 50%;
      background: rgb(21, 122, 44);
    }
  }
</style>
