<template>
  <div :class="['legend', open ? 'open' : '']">
    <div class="legend-detail">
      <div class="content">
        <slot></slot>
      </div>
    </div>
    <div class="legend-menu" @click="toggleMenu">
      {{open?"隐藏":"列表"}}
    </div>
  </div>
</template>

<script>
export default {
  data: function () {
    return {
      open: true,
    };
  },
  methods: {
    //获取设备列表
    getList() {
      this.$axios({
        method: "POST",
        url: "/api/api_gateway?method=device.device_manage.device_info",
        data: this.qs.stringify({
          device_id: this.queryInfo.f_id,
          page: this.queryInfo.page,
          page_size: 12,
          device_type_id: '',
          start_time: '',
          end_time: ''
        }),
      }).then((res) => {
        if (res.data.message == "") {
          this.dataList = res.data.data.data;
          this.totalNum = res.data.data.counts;
        }
      });
    },
    toggleMenu() {
      this.open = !this.open;
    },
  },
};
</script>
<style lang='less' scoped>

.legend {
  position: absolute;
  top: 1.2rem;
  bottom: 20px;
  left: .375rem;
  display: flex;
  align-items: flex-start;
  z-index: 151;
  align-items: flex-end;
  .legend-menu {
    background: #242424;
    color: #fff;
    opacity: .7;
    width: .2875rem;
    border-top-right-radius: .05rem;
    border-bottom-right-radius: .05rem;
    font-size: .175rem;
    line-height: .25rem;
    text-align: center;
    cursor: pointer;
    padding: .075rem;
    i {
      transition: 0.5s;
    }
  }
  .legend-menu:hover{
    opacity: 1;
  }
  .legend-detail {
    transition: 0.8s;
    width: 0px;
    background: rgba(12, 20, 44, 0.8);
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    border-radius: .075rem;
    color: #212121;
    .content {
      box-sizing: border-box;
      height: 100%;
    }
  }
}
.legend.open {
  .legend-menu{
    opacity: 1;
    border-radius: .05rem;
  }
  .legend-detail {
    width: 4rem;
  }
}
/deep/.el-loading-mask{
  background-color: rgba(12, 20, 44, 0.8);
}
</style>