<template>
  <el-row class="wrapper layout-grid-line">
    <el-col :span="span">
      <pre>
        {{
          `
import AiButton from '@/components/base/AiButton/index.vue'
import AiPane from '@/components/base/AiPane/index.vue'
  <div class="chart-box">
    <div class="btn-box" @mouseenter="handleSwitchAiContentShow(true)">
      <AiButton />
    </div>
    <div class="content-box" v-if="isShowAiContent" @mouseleave="handleSwitchAiContentShow(false)">
      <AiPane :aiContent="aiContent" />
    </div>
  </div>
`
        }}
      </pre>
      <div class="chart-box">
        <div class="btn-box" @mouseenter="handleSwitchAiContentShow(true)">
          <AiButton />
        </div>
        <div class="content-box" v-if="isShowAiContent" @mouseleave="handleSwitchAiContentShow(false)">
          <AiPane :aiContent="aiContent" />
        </div>

      </div>

    </el-col>
  </el-row>
</template>

<script setup>
import { ref } from 'vue'
import '@/styles/common.scss'
import AiButton from '@/components/base/Ai/AiButton/index.vue'
import AiPane from '@/components/base/Ai/AiPane/index.vue'
const span = 12

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

const isShowAiContent = ref(false)

const aiContent = ref(`整个立法过程反映了美国政治的高度极化特点。民主党全员反对该法案，批评其"劫贫济富"。而共和党内部也有分歧，特别是在财政赤字问题上。马斯克多次公开批评该法案是"疯狂的支出计划"。整个立法过程反映了美国政治的高度极化特点。民主党全员反对该法案，批评其"劫贫济富"。而共和党内部也有分歧，特别是在财政赤字问题上。马斯克多次公开批评该法案是"疯狂的支出计划"。`)


</script>

<style lang="scss" scoped>
.chart-box {
  width: 520px;
  height: 300px;
  border: 1px solid var(--bg-black-5);
  position: relative;

  .btn-box {
    position: absolute;
    right: 0;
    bottom: 18px;
  }

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