<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"
                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>
        <!-- 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"
                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"
                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"
                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="item rx-sc">
          <div class="rx ww40">
            <div class="lable rx-cc">仓库</div>
            <div class="content content_num rx-sc">
              <el-select
                v-model="warehouseId"
                placeholder="请选择"
                style="width: 100%"
                @change="changeWarehouse(warehouseId)"
              >
                <el-option
                  v-for="item in warehouseDataList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </div>
          </div>

          <div class="rx ww43" v-if="clientEnvironmentId !== 3">
            <div class="lable lable100 rx-cc">请选择入库规格</div>
            <div class="content content_num rx-sc">
              <el-select
                v-model="inWarehouseSpecType"
                placeholder="请选择"
                style="width: 100%"
                @change="changeSpecType(inWarehouseSpecType)"
              >
                <el-option
                  v-for="item in WarehouseSpecTypeList"
                  :key="item.value"
                  :label="item.text"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
          </div>
        </div> -->
      </div>

      <!-- <view class="select_box" v-if="clientEnvironmentId !== 3">
						<zxz-uni-data-select :localdata="WarehouseSpecTypeList" placeholder="请选择入库规格"
							v-model="inWarehouseSpecType" dataValue='value' dataKey="text" filterable format='{text}'
							disabled></zxz-uni-data-select>
					</view> -->
    </div>

    <!-- <checkbox @click='singleQuery' v-if="item.currentTaskDiagram.isFirstTask"></checkbox> -->
  </div>
</template>
<script>
  import { createInProduct, getWarehouseList } 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: {
      item: {
        immediate: true,
        deep: true,
        handler(newVal) {
          console.log(newVal, '996633');

          if (newVal.semiProductList.length) {
            let formedNum = 0;
            let noFormingNum = 0;
            let formedWeight = 0;
            let notFormedWeight = 0;

            newVal.semiProductList.forEach((v) => {
              // 合格品数量
              if (v.extInfo.isQualified == 1) {
                formedNum += 1;
                formedWeight += Number(v.extInfo.reportWeight) || 0;
              } else {
                noFormingNum += 1;
                notFormedWeight += Number(v.extInfo.reportWeight) || 0;
              }
            });

            newVal.workReportInfo.formedNum = formedNum;
            newVal.workReportInfo.notFormedNum = noFormingNum;
            newVal.workReportInfo.formedWeight = parseFloat(
              formedWeight.toFixed(3)
            );
            newVal.workReportInfo.notFormedWeight = parseFloat(
              notFormedWeight.toFixed(3)
            );
            this.$forceUpdate();
          }

          //打包信息重量相加赋值给总重量
          let formedWeight = 0;
          if (newVal.toWarehouseList && newVal.toWarehouseList.length > 0) {
            newVal.toWarehouseList.map((titem) => {
              titem.extInfo.pickOutInList.map((pitem) => {
                formedWeight = formedWeight + pitem.extInfo.newWeight;
              });
            });
          }

          newVal.workReportInfo.formedWeight = parseFloat(
            formedWeight.toFixed(3)
          );
        }
      },

      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 {
        list: [],
        notFormedList: [],

        form: {
          warehouseId: '',
          inWarehouseSpecType: ''
        },
        warehouseDataList: [],

        visible: false,
        warehouseId: '',
        inWarehouseSpecType: '',
        WarehouseSpecTypeList: [
          {
            text: '按计量入库',
            value: '1'
          },
          {
            text: '最小包装入库',
            value: '2'
          },
          {
            text: '内包装入库',
            value: '3'
          },
          {
            text: '外包装入库',
            value: '4'
          }
        ]
      };
    },

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

      console.log(this.item, 'item');
      console.log(this.notFormedList, 'notFormedList');
    },

    // async mounted() {
    //   await this.getWarehouseData();
    // },

    methods: {
      getSemiProductList(newVal) {
        console.log(newVal);
        if (newVal.semiProductList.length) {
          newVal.semiProductList.map((v) => {
            v.selected = true;
          });
          this.arrDataStatistics(newVal.semiProductList);
          this.tableData = newVal.semiProductList;
        }
        if (newVal.pickOutInList.length) {
          newVal.pickOutInList.map((v) => {
            v.selected = true;
          });
          this.arrDataStatistics(newVal.pickOutInList);
          this.tableData = newVal.pickOutInList;
        }
      },

      changeWarehouse(val) {
        this.form.warehouseId = val;
      },

      changeSpecType(val) {
        this.form.inWarehouseSpecType = val;
      },

      async getWarehouseData() {
        console.log('22222');
        await getWarehouseList().then((res) => {
          this.warehouseDataList = res;
        });
      },

      tableDataFn(tableData) {
        console.log(tableData);
        let adultCount = 0;
        let noAdultCount = 0;

        this.arrDataStatistics(tableData);
        tableData.forEach((v) => {
          if (v.selected) {
            if (v.extInfo.isQualified == 1) {
              adultCount += 1;
            } else {
              noAdultCount += 1;
            }
          }
        });
        this.$set(this.item.workReportInfo, 'formedNum', adultCount);
        this.$set(this.notFormedList[0], 'notFormedNum', noAdultCount);
        // this.tableData = this.notFormedList;
        if (!(this.clientEnvironmentId == 3 || this.item.singleReport !== 1)) {
          this.item.semiProductList = tableData;
        }
      },

      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,
          taskId: this.item.workReportInfo.taskId,
          workOrderId: this.item.workReportInfo.workOrderId
        };

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

            res.map((v) => {
              v.selected = true;
            });
            this.list = res;
            this.item.semiProductList = res;
          }
        });
      },

      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() {
        console.log(this.notFormedList);
        console.log(this.product);
        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(this.notFormedList);
        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>
