<template>
  <div class="app-container">
    <h1 style="text-align: center">智能货架列表</h1>
    <div class="shelves-list">
      <div :class="['shelves-info',statusInfo[shelves.fStatus]&&statusInfo[shelves.fStatus].style]" v-for="shelves in shelvesList">
        <el-tooltip effect="light" :content="statusInfo[shelves.fStatus]&&statusInfo[shelves.fStatus].name" placement="top">
          <div
            class="content"
            @click="toStorage(shelves)"
          >
            {{ shelves.fShelf }}
          </div>
        </el-tooltip>
      </div>
    </div>

  </div>
</template>

<script>
  import { shelfListInfo,listInfo, getInfo, delInfo, addInfo, updateInfo, exportInfo } from "@/api/shelf/info";
  export default {
    name: "produce-manage-index",
    data(){
        return{
          shelvesList: [],
          statusInfo:{
            0: {
              name: "离线",
              style: "leave"
            },
            1: {
              name: "就绪",
              style: "ready"
            }
          },
          // 查询参数
          queryParams: {
            fType: 1,
            fShelf: null,
            fStatus: null
          },
        }
    },
    created(){
      this.getList();
    },
    methods:{
      getList() {
        shelfListInfo(this.queryParams).then(res => {
          this.shelvesList = res.data;
        });
      },
      toStorage(shelves){
        if(shelves.fStatus == 1 && shelves.fShelfId){
          this.$router.push({ path: "/producemange/produceshelflocation",query: { shelfId: shelves.fShelfId,shelf: shelves.fShelf } });
        }
      }
    }
  }
</script>

<style scoped lang="scss">
  .app-container{
    padding: 30px;
  }
  .shelves-list{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 25px;
  }


  .shelves-info {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s, box-shadow 0.3s;
    aspect-ratio: 1/1;
  }

  .content{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
  }

  .leave{
    background-color: #cccccc;
    color: white;
  }

  .ready{
    background-color: #13ce66;
    color: white;
  }


</style>
