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

        <!-- v-if="(clientEnvironmentId == 3 && item.singleReport == 0) ||  taskObj.type == 4 || clientEnvironmentId == 2" -->
        <div class="item rx-sc">
          <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"
                :disabled="isDetails"
                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"
                :disabled="isDetails"
                placeholder="请输入合格品重量"
              >
                <template slot="append">{{ item.weightUnit }}</template>
              </el-input>
            </div>
          </div>
        </div>
        <!-- v-if="(clientEnvironmentId == 3 && item.singleReport == 0) || taskObj.type == 4 || clientEnvironmentId == 2" -->
        <!-- v-for="(not, notIndex) in notFormedList" :key="notIndex" -->

        <div class="item rx-sc">
          <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.notFormedNum"
                :disabled="isDetails"
                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="item.workReportInfo.notFormedWeight"
                :disabled="isDetails"
                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 class="item rx-sc">
          <div
            class="rx ww43"
            v-if="
              Object.prototype.hasOwnProperty.call(item, 'product') &&
              clientEnvironmentId != 3
            "
          >
            <div class="lable lable100 rx-cc">报工备注</div>
            <div class="content content_num rx-sc">
              <el-input
                size="mini"
                :disabled="isDetails"
                v-model="item.workReportInfo.remark"
                placeholder="请输入报工备注"
              >
              </el-input>
            </div>
          </div>

          <div class="rx ww43" v-if="clientEnvironmentId == 2">
            <div class="lable lable100 rx-cc">批次号</div>
            <div class="content content_num rx-sc">
              {{ item.batchNo }}
              <el-input
                size="mini"
                v-model="item.workReportInfo.batchNo"
                placeholder="请输入批次号"
              ></el-input>
            </div>
          </div>
        </div>

        <div
          class="btn-margin"
          v-if="
            !isDetails &&
            item.currentTaskDiagram.isFirstTask == 1 &&
            item.semiProductList.length == 0 &&
            clientEnvironmentId == 3
          "
        >
          <div class="lable lable100 rx-cc"></div>
          <el-button class="" @click="singleQuery" type="primary">
            创建在制品
          </el-button>
        </div>

        <div
          class="btn-margin"
          v-else-if="
            !isDetails &&
            item.singleReport != 1 &&
            item.currentTaskDiagram.isFirstTask == 1 &&
            item.product.length == 0
          "
        >
          <div class="lable lable100 rx-cc"></div>
          <el-button class="" @click="singleBatch" type="primary">
            创建在制品
          </el-button>
        </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>
  import {
    createInProductBatchTG,
    createInProductBatch
  } from '@/api/produce/workOrder';

  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;
          console.log('更新notFormed', this.notFormedList);
        }
      },
      item: {
        immediate: true,
        deep: true,
        handler(newVal) {
          // this.$set(this.item, 'workReportInfo', newVal.workReportInfo);
          console.log(newVal, '修改后的数据');
          // this.set()
          // if(this.taskObj.type == 6 ){
          //   console.log('112334',newVal)
          // }
          // let weightValue=parseFloat((newVal.workReportInfo.formedWeight).toFixed(2))
          // this.$set(this.item.workReportInfo,'formedWeight',weightValue)
        }
      }
    },

    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
          };
        });
      }
      // if(item.semiProductList){
      //   let allReportWeight=0
      //    item.semiProductList.map(sitem=>{
      //     if(sitem.extInfo.batchReportInfo){
      //       sitem.extInfo.batchReportInfo.map(bitem=>{
      //         allReportWeight=allReportWeight+bitem.allReportWeight
      //       })
      //       this.item.workReportInfo.formedWeight=allReportWeight
      //     }
      //    })
      // }
    },

    mounted() {
      console.log(this.item, '传过来的item');
    },

    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.item.workReportInfo.notFormedNum);
        if (total > this.item.formingNum) {
          this.item.workReportInfo.formedNum = 0;
          this.$message.warning('合格品数量加不合格数量不能大于要求生产数量');
        }

        // let total =
        //   Number(this.item.workReportInfo.formedNum) +
        //   Number(this.notFormedList[0].notFormedNum);

        // console.log(total, '9****');

        // 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));
        // }

        // console.log(this.item, 'weight');

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

        this.$forceUpdate();
      },

      notForme() {
        console.log('0010001000100100');
        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() {
        let total =
          Number(this.item.workReportInfo.formedNum) +
          Number(this.item.workReportInfo.notFormedNum);
        if (total > this.item.formingNum) {
          this.item.workReportInfo.notFormedNum = 0;
          this.$message.warning('合格品数量加不合格数量不能大于要求生产数量');
        }
        // this.notForme();
        // this.blurNum()
      },

      singleBatch() {
        // console.log(this.item.workReportInfo);
        // return;
        if (!this.item.workReportInfo.formedNum)
          return this.$message.info('请输入合格品数');

        if (
          this.item.workReportInfo.notFormedNum === '' ||
          this.item.workReportInfo.notFormedNum == null
        )
          return this.$message.info('请输入不合格品数');

        const req = {
          formedNum: this.item.workReportInfo.formedNum,
          notFormedNum: this.item.workReportInfo.notFormedNum || 0,
          taskId: this.item.currentTaskDiagram.taskId,
          workOrderId: this.item.workReportInfo.workOrderId,
          formedWeight: this.item.workReportInfo.formedWeight,
          notFormedWeight: this.item.workReportInfo.notFormedWeight
        };

        createInProductBatch(req).then((res) => {
          if (res && res.length) {
            this.forValue = res[0];

            // const engrave = res.map((item, index) => {
            //   if (!item.extInfo.engrave) {
            //     item.extInfo.engrave = index + 1;
            //   }

            //   return item;
            // });

            // this.list = engrave;
            // this.item.product = engrave;

            // res.map((v) => {
            //   v.selected = true;
            //   v.extInfo.batchReportInfo = [
            //     {
            //       allFeedQuantity: '',
            //       allReportWeight: '',
            //       taskId: '',
            //       taskName: ''
            //     }
            //   ];

            //   v.extInfo.notBatchReportInfo = [
            //     {
            //       allFeedQuantity: '',
            //       notType: '',
            //       taskId: '',
            //       taskName: '',
            //       notReason: ''
            //     }
            //   ];
            // });
            this.list = res;
            this.item.product = res;
          }
        });
      },
      singleQuery() {
        console.log(this.item.workReportInfo);
        if (!this.item.workReportInfo.formedNum)
          return this.$message.info('请输入合格品数');

        if (
          this.item.workReportInfo.notFormedNum === '' ||
          this.item.workReportInfo.notFormedNum == null
        )
          return this.$message.info('请输入不合格品数');

        const req = {
          formedNum: this.item.workReportInfo.formedNum,
          notFormedNum: this.item.workReportInfo.notFormedNum || 0,
          taskId: this.item.currentTaskDiagram.taskId,
          workOrderId: this.item.workReportInfo.workOrderId,
          formedWeight: this.item.workReportInfo.formedWeight,
          notFormedWeight: this.item.workReportInfo.notFormedWeight
        };

        createInProductBatchTG(req).then((res) => {
          if (res && res.length) {
            this.forValue = res[0];

            res.map((v) => {
              v.selected = true;
              v.extInfo.batchReportInfo = [
                {
                  allFeedQuantity: '',
                  allReportWeight: '',
                  taskId: '',
                  taskName: ''
                }
              ];

              v.extInfo.notBatchReportInfo = [
                {
                  allFeedQuantity: '',
                  notType: '',
                  taskId: '',
                  taskName: '',
                  notReason: ''
                }
              ];
            });
            this.list = res;
            this.item.semiProductList = res;
          }
        });
      }
    }
  };
</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);
    }
  }
  .btn-margin {
    margin: 10px 0 10px 100px;
  }
</style>
