<template>
  <div>
    <div class="top_fixed">
      <el-button type="primary" size="mini" @click="save">一键报工</el-button>
    </div>

    <div class="warehousing_box">
      <div v-for="(item, index) in List" :key="index" class="card_box">
        <div class="title_box rx-bc">
          <div class="name">工单信息 </div>
        </div>
        <workOrderBom :item="item" v-if="item"></workOrderBom>

        <div
          v-if="
            clientEnvironmentId == 3 &&
            item.toWarehouseList &&
            item.toWarehouseList.length > 0
          "
        >
          <div style="margin-top: 6px">
            <el-select
              v-model="item.warehouseId"
              filterable
              clearable
              placeholder="请选择仓库"
              size="mini"
              class="content_num"
            >
              <el-option
                v-for="item in warehouseList"
                :key="item.id"
                :value="item.id"
                :label="item.name"
              ></el-option>
            </el-select>
          </div>

          <div v-for="(it, idx) in item.toWarehouseList" :KEY="idx">
            <packingTgBom
              :list="it.extInfo.pickOutInList"
              :isWarehousing="true"
              :item="it"
            ></packingTgBom>
          </div>
        </div>

        <div v-else>
          <el-empty :image-size="30" description="暂无数据"></el-empty>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import workOrderBom from '../feeding/components/workOrderBom.vue';
  import packingTgBom from '../jobBooking/components/packingTgBom.vue';

  import { getWarehouseList } from '@/api/produce/index.js';
  import { listByIdsReport } from '@/api/produce/job';
  import { listPcToWarehouseTG } from '@/api/produce/workOrder';

  import { jobSave } from '@/api/produce/workOrder';

  export default {
    components: {
      workOrderBom,
      packingTgBom
    },
    props: {
      workListIds: {
        type: Array,
        default() {
          return [];
        }
      }
    },
    data() {
      return {
        isLoad: false,
        List: [],

        idsList: [],
        warehouseList: []
      };
    },

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

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

    watch: {
      workListIds: {
        handler(val) {
          this.getList(val);
        },
        deep: true,
        immediate: true
      }
    },

    created() {
      this.getWarehouseListFn();
    },

    methods: {
      getList(ids) {
        this.idsList = ids || [];
        let param = {
          ids: ids,
          taskId: this.taskObj.id,
          type: 0
        };
        this.isLoad = false;
        listByIdsReport(param)
          .then((res) => {
            this.List = res.map((obj) => {
              obj.workReportInfo = {
                formingNum: null,
                formingWeight: null,
                formedNum: null,
                formedWeight: null,
                taskId: this.taskObj.id
              };

              return {
                ...obj
              };
            });
          })
          .finally(() => {
            this.isLoad = true;

            this.getTgWarehouse();
          });
      },

      getTgWarehouse() {
        const param = {
          workOrderIds: this.idsList,
          taskId: this.taskObj.id
        };
        listPcToWarehouseTG(param).then((res) => {
          // 创建一个映射，以便快速查找
          const workOrderMap = new Map(res.map((it) => [it.workOrderId, it]));

          // 更新List中的每个项目
          this.List.forEach((item) => {
            if (workOrderMap.has(item.workOrderId)) {
              // 直接从映射中获取数据，避免嵌套循环
              this.$set(item, 'toWarehouseList', [
                JSON.parse(JSON.stringify(workOrderMap.get(item.workOrderId)))
              ]);
            } else {
              this.$set(item, 'toWarehouseList', []);
            }
          });
        });
      },

      getWarehouseListFn() {
        getWarehouseList().then((res) => {
          this.warehouseList = res.data;
        });
      },

      save() {
        let _arr = [];
        _arr = this.List.filter((item) => {
          return item.toWarehouseList.length > 0;
        });

        let bol = true;
        bol = _arr.every((e, i) => {
          return e.warehouseId;
        });

        if (!bol) {
          this.$message.warning(`仓库不能为空`);
          return false;
        }

        let _arr2 = JSON.parse(JSON.stringify(_arr));

        _arr2.map((m) => {
          m.storageInfo = {
            warehouseId: m.warehouseId,
            toWarehouseList: m.toWarehouseList
          };
          delete m.warehouseId
          delete  m.toWarehouseList
          return {
            ...m
          };
        });

        jobSave(_arr2).then((res) => {
          console.log(res);
          this.$message.success('入库成功');
          this.getList(this.idsList);
        });
      }
    }
  };
</script>

<style scoped lang="scss">
  .top_fixed {
    width: 100%;
    height: 40px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }

  .title_box {
    .name {
      font-size: 14px;
      font-style: normal;
      font-weight: 400;
      color: #157a2c;
      padding-left: 5px;
      position: relative;

      &:before {
        position: absolute;
        content: '';
        left: 0px;
        top: 0px;
        bottom: 0px;
        width: 2px;
        height: 14px;
        background: #157a2c;
        margin: auto;
      }
    }
  }

  .warehousing_box {
    margin-top: 6px;
    width: 100%;
    height: calc(100vh - 70px - 50px - 80px - 60px);
    overflow-y: scroll;
    overflow-x: hidden;
  }

  .card_box {
    background: #fff;
    padding: 8px;
    border-radius: 2px;
  }

  .content_num {
    --input-background-color: #f0f8f2;
  }
</style>
