<template>
  <div>
    <div class="top_fixed">
      <el-button type="primary" size="mini" @click="save(2, 'all')">一键报工</el-button>
      <el-button type="primary" size="mini" @click="removeCacheFn('all')">清空缓存</el-button>
      <el-button type="primary" size="mini" @click="save(1, 'all')">缓存</el-button>
    </div>

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

          <div class="rx-bc">
            <el-button type="text" size="mini" @click="openPicking(item.id, item)">添加物料</el-button>
            <el-button type="text" size="mini" @click="removeCacheFn(item.id)">清空缓存</el-button>
            <el-button type="text" size="mini" @click="save(1, index)">缓存</el-button>
          </div>
        </div>

        <workOrderBom :item="item"></workOrderBom>
        <paramBom v-if="item.paramDetailList.length != 0" :list="item.paramDetailList"></paramBom>

        <jobBom :item="item" :notFormed="item.notFormedList" :warehouseList="warehouseList"></jobBom>

        <deviceBom v-if="item.equipmentList.length != 0" :list="item.equipmentList"></deviceBom>

        <modelBom v-if='item.modelList.length != 0' :list='item.modelList' pattern='job' ref='modelRef'></modelBom>
      </div>
    </div>
  </div>
</template>

<script>
import { listByIdsReport } from '@/api/produce/job';
import { getWarehouseList } from '@/api/produce/index';

import workOrderBom from '../feeding/components/workOrderBom.vue';
import paramBom from '../feeding/components/paramBom.vue';
import jobBom from './components/jobBom.vue';
import deviceBom from '../feeding/components/deviceBom.vue';
import modelBom from '../feeding/components/modelBom.vue'
export default {
  components: {
    workOrderBom,
    paramBom,
    jobBom,
    deviceBom
  },
  props: {
    workListIds: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  data() {
    return {
      List: [],
      idsList: [],
      isLoad: false,

      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) => {
            if (!Object.prototype.hasOwnProperty.call(obj, 'turnover')) {
              obj['turnover'] = [];
            }
            if (
              !Object.prototype.hasOwnProperty.call(obj, 'aridRegionList')
            ) {
              obj['aridRegionList'] = [];
            }

            if (!Object.prototype.hasOwnProperty.call(obj, 'instanceList')) {
              obj['instanceList'] = [];
            }

            if (!Object.prototype.hasOwnProperty.call(obj, 'palletList')) {
              obj['palletList'] = [];
            }

            if (
              !Object.prototype.hasOwnProperty.call(obj, 'revolvingDiskList')
            ) {
              obj['revolvingDiskList'] = [];
            }

            if (obj.palletList.length > 0) {
              obj.palletList = obj.palletList.map((m) => {
                return {
                  hideKc: true, // 不显示库存
                  quantity: m.feedQuantity,
                  ...m
                };
              });
            }

            if (this.taskObj.type == 6 && this.clientEnvironmentId == 3) {
              obj.semiProductList = obj.pickOutInList;
            }

            obj.workReportInfo = {
              formingNum: null,
              formingWeight: null,
              formedNum: null,
              formedWeight: null,
              taskId: this.taskObj.id
            };

            obj.notFormedList = [
              {
                notFormedNum: null,
                notFormedWeight: null,
                weightUnit: obj.weightUnit,
                unit: obj.unit,
                warehouseId: null // 处置 仓库id
              }
            ];

            if (obj.semiProductList.length > 0) {
              // 预制体报工
              obj.workReportInfo.formedNum = obj.semiProductList.length;
            }

            obj.workReportInfo.formingNum = obj.formingNum;
            obj.workReportInfo.formingWeight = obj.formingWeight;
            obj.workReportInfo.unit = obj.unit;
            obj.workReportInfo.weightUnit = obj.weightUnit;
            obj.workReportInfo.workOrderId = obj.workOrderId;

            obj.paramDetailList.map((m) => {
              if (m.extInfo.textType == 5) {
                m.remainingTime = m.extInfo.remainingTime;
              }
              return {
                ...m.extInfo
              };
            });

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

          if (this.taskObj.id == 1) {
            this.getCacheFn();
          }
        });
    },
    async save(type, index) { },

    getCacheFn() { },

    removeCacheFn(type) { },

    getWarehouseListFn() {
      getWarehouseList().then((res) => {
        this.warehouseList = res.data;
      });
    }
  }
};
</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;
    }
  }
}

.job_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;
}
</style>
