<template>
  <div class="control-tab" :class="{ 'control-tab_is-active': isOpen }">
    <div @click="handleOpenTab" class="control-tab-switch">
      <img
        class="control-tab-switch-img"
        :class="{ 'control-tab-switch-img_is-active': isOpen }"
        src="@/assets/images/institute-safety/control-tab-switch.png"
        alt=""
      />
    </div>
    <div class="control-tab-content">
      <div class="tab-button" @click="emit('open-surveillance-list')">
        <img src="@/assets/images/institute-safety/surveillance-area.png" alt="" />
        <div class="tab-text">重点监控区域</div>
      </div>
      <div class="tab-button" @click="emit('open-question-list')">
        <img src="@/assets/images/institute-safety/alert-white.png" alt="" />
        <div class="tab-text">今日异常告警</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue';

  const emit = defineEmits<{
    (e: 'open-surveillance-list'): void;
    (e: 'open-question-list'): void;
  }>();

  const isOpen = ref(false);

  const handleOpenTab = () => {
    isOpen.value = !isOpen.value;
  };
</script>

<style scoped lang="scss">
  .control-tab {
    position: absolute;
    bottom: 10px;
    right: -86px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition-duration: 0.3s;
    transition-property: all;
    background-image: url('@/assets/images/institute-safety/more-btn-bg.png');
    background-size: 100% 100%;
  }

  .control-tab_is-active {
    transform: translateX(-86px);
  }

  .control-tab-switch {
    width: 16px;
    height: 75px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;

    .control-tab-switch-img {
      width: 7px;
      height: 10px;
      transform: rotate(180deg);
      transition: all 0.3s;
    }

    .control-tab-switch-img_is-active {
      transform: rotate(0deg);
      transition: all 0.3s;
    }
  }

  .control-tab-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 28px;
    padding: 16px 7px;
  }

  .tab-button {
    cursor: pointer;
    text-align: center;
  }

  .tab-text {
    font-weight: 400;
    font-size: 12px;
    color: #ffffff;
  }
</style>
