<template>
  <div class="HomeFrame">
    <ElPopover
      trigger="manual"
      :value="activeIcon === 'Frame'"
      :visibleArrow="false"
      placement="left"
      popper-class="global-input-search-popover"
    >
      <Button
        :class="['btn', { 'btn-active': activeIcon }]"
        slot="reference"
        @click.native="handleClick('Frame')"
      >
        <img src="@screen/images/home-Frame/Frame.svg" />
      </Button>

      <div class="body">
        <div class="title">图标含义</div>
        <!-- <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%;
    }
  }
}
</style>
<style lang="scss" scoped>
.image {
  width: 60vw;
  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>
