<template>
  <div class="main-container">
    <section class="container-title" style="margin-top: 10px; display: flex; align-items: center">
      <div class="brand-color-line"></div>
      <span style="line-height: 20px">料仓料位</span>
    </section>
    <section class="container-content">
      <div class="dialy-storage" v-if="dailyStorage.length">
        <h3
        class=""
        style="
            position: relative;
            background: #eeee;
            color: #666;
            line-height: 2;
            width: calc(100% + 32px);
            padding-left: 16px;
            top: 10px;
            left: -16px;
          "
        >
          日料仓
        </h3>
        <div class="storage-list" style="padding: 12px 0; display: flex; flex-wrap: wrap">
          <storage-box
            v-for="(st, index) in dailyStorage"
            :key="index"
            :qty="st.qty ?? 0"
            :storage="st.name"
            color="#8899ff"
            :material="st.material ?? '默认物料'"
            :total="2"
            />
          </div>
        </div>
        <div class="middle-storage" v-if="middleStorage.length">
          <h3
          class=""
          style="
            position: relative;
            background: #eeee;
            color: #666;
            line-height: 2;
            width: calc(100% + 32px);
            padding-left: 16px;
            top: 10px;
            left: -16px;
          "
        >
          中间仓
        </h3>
        <div class="middle-list" style="padding: 12px 0; display: flex; flex-wrap: wrap">
          <storage-box
            v-for="(st, index) in middleStorage"
            :key="index"
            :qty="st.qty ?? 0"
            :storage="st.name"
            color="#99aa11"
            :material="st.material ?? '默认物料'"
            :total="2"
          />
        </div>
      </div>
      <div class="unknown-storage" v-if="unknownStorage.length">
        <h3
          class=""
          style="
            position: relative;
            background: #eeee;
            color: #666;
            line-height: 2;
            width: calc(100% + 32px);
            padding-left: 16px;
            top: 10px;
            left: -16px;
          "
        >
          未知仓
        </h3>
        <div class="unknown-list" style="padding: 12px 0; display: flex; flex-wrap: wrap">
          <storage-box
            v-for="(st, index) in unknownStorage"
            :key="index"
            :qty="st.qty ?? 0"
            color="#3388ff"
            :storage="st.name"
            :material="st.material ?? '默认物料'"
            :total="2"
          />
        </div>
      </div>
    </section>
  </div>
</template>

<script>
import StorageBox from "./components/storageBox.vue";

export default {
  name: "MaterialStorageQty",
  components: { StorageBox },
  props: {},
  data() {
    return {
      middleStorage: [],
      dailyStorage: [],
      unknownStorage: [],
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    resetAllStorages() {
      this.middleStorage.splice(0);
      this.dailyStorage.splice(0);
      this.unknownStorage.splice(0);
    },

    getList(storageType) {
      this.resetAllStorages();
      const params = storageType ? { limit: this.limit, page: this.page, typeDictValue: storageType } : { limit: this.limit, page: this.page };
      this.$http.get("/pms/materialStorageQty/page", { params }).then(({ data: res }) => {
        if (res.code === 0) {
          if ("list" in res.data) {
            res.data.list.forEach((item) => {
              if (item.typeDictValue === "1") {
                this.dailyStorage.push(item);
              } else if (item.typeDictValue === "0") {
                this.middleStorage.push(item);
              } else {
                this.unknownStorage.push(item);
              }
            });
          }
        } else {
          this.$message({
            message: `${res.code}: ${res.msg}`,
          });
        }
      });
    },
  },
};
</script>

<style scoped>
.main-container {
  background: white;
  /* height: 100%; */
  min-height: inherit;
  border-radius: 6px;
  padding: 16px;
  box-shadow: 0 0 1.125px 0.125px rgba(0, 0, 0, 0.125);
}

.brand-color-line {
  display: inline-block;
  height: 20px;
  width: 6px;
  margin-right: 8px;
  border-radius: 2px;
  background: #0b58ff;
  /* position: absolute; */
}
</style>
