<template>
  <div class="chart-summary-wrapper">
    <div class="btn-box" @mouseenter="handleSwitchAiContentShow(true)">
      <AiButton />
    </div>
    <div class="content-box" v-if="isShowAiContent" @mouseleave="handleSwitchAiContentShow(false)">
      <AiPane :aiContent="text" />
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import AiButton from '@/components/base/Ai/AiButton/index.vue'
import AiPane from '@/components/base/Ai/AiPane/index.vue'

defineProps({
  text: {
    type: String,
    required: true
  }
})

defineEmits(['more'])

const isShowAiContent = ref(false)

const handleSwitchAiContentShow = (isShow) => {
  isShowAiContent.value = isShow
}
</script>

<style lang="scss" scoped>
.chart-summary-wrapper {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: none;

  .btn-box {
    position: absolute;
    right: 0;
    bottom: 0;
    pointer-events: auto;
  }

  .content-box {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: auto;
  }
}
</style>
