<template>
  <div class="HomeFrame">
    <ElPopover trigger="manual" :value="activeIcon === 'Frame'" :visibleArrow="false" placement="left"
      popper-class="global-input-search-popover">

      <div slot="reference">
        <el-tooltip effect="light" content="图标含义" placement="left">
          <Button :class="['btn', { 'btn-active': activeIcon }]" @click.native="handleClick('Frame')">
            <img src="@screen/images/home-Frame/Frame.svg" />
          </Button>
        </el-tooltip>
      </div>

      <div class="body">
        <div class="title">图标含义</div>
        <span class="close" @click="() => { this.activeIcon = null; }">
          <i class="el-icon-close" />
        </span>
        <!-- <Form labelWidth="90px" column="1" class="form" ref="FormConfigRef" :formList="formList" /> -->
        <img class="image" src="@screen/images/home-Frame/logoMean.png" />
        <!-- <div class="footer">
        </div> -->
      </div>
    </ElPopover>
  </div>
</template>

<script>
import Button from "@screen/components/Buttons/Button.vue";
import Form from "@screen/components/FormConfig";
import * as PresetFormItems from "@screen/pages/control/event/event/FormEvent/PresetFormItems.js";
import { merge, cloneDeep } from "lodash";

export default {
  name: "HomeFrame",
  components: {
    Button,
    Form,
  },
  data() {
    return {
      activeIcon: null,
    };
  },
  methods: {
    handleClick(type) {
      this.activeIcon = this.activeIcon === type ? null : type;
    },
    filterEnd(data) {
      this.activeIcon = null;
      // this.filterData = data;
      this.$parent.$refs.RoadAndEventsRef?.setFilterData?.(data);
    },
  },
};
</script>

<style lang="scss">
div.el-popper.global-input-search-popover {
  background: rgba(6, 66, 88, 0.8);
  border: 1px solid rgba(42, 217, 253, 0.6);
  position: relative;
  padding-top: 36px;
  transform: translateY(24px);
  // margin-top: 6vh;

  .body {
    .title {
      background: linear-gradient(90deg,
          #237e9b 0%,
          rgba(23, 145, 184, 0) 100%);
      padding: 3px 9px;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
    }

    .close {
      padding: 3px 9px;
      cursor: pointer;
      position: absolute;
      top: 0;
      right: 0;
      width: fit-content;
    }

  }
}
</style>
<style lang="scss" scoped>
.image {
  width: 50vw;
  height: 65vh;
}

.HomeFrame {
  .btn {
    padding: 9px;
    background: linear-gradient(180deg, #152e3c 0%, #163a45 100%);
    border-radius: 4px;
    overflow: hidden;
    height: unset;
    border: 1px solid rgba(40, 144, 167, 1);
  }

  .btn-active {
    background: linear-gradient(180deg, #005c79 0%, #009bcc 100%);
  }
}
</style>