<template>
  <div class="chart-event">
    <a-collapse v-model:activeKey="activeKey" ghost expandIconPosition="right">
      <div class="mb-10">
        组件id: <span>{{ targetData.id }}</span>
      </div>
      <a-collapse-panel key="1" header="基础事件配置" style="margin-bottom: 20px;">
        <template #extra>
          <a-button type="primary" size="small" class="small-btn" @click.stop="baseEventClick"> <edit-outlined /> 编辑 </a-button>
        </template>
        <a-card :bordered="false">
          <div v-for="eventName in BaseEvent" :key="eventName">
            <p>
              <span class="func-annotate">// {{ EventTypeName[eventName] }}</span>
              <br />
              <span class="func-keyword">async {{ eventName }}</span> (mouseEvent,components) {
            </p>
            <p class="ml-4">
              <guns-code :code="(targetData.events.baseEvent || {})[eventName] || ''"></guns-code>
            </p>
            <p>}<span>,</span></p>
          </div>
        </a-card>
      </a-collapse-panel>
      <a-collapse-panel key="2" header="高级事件配置">
        <template #extra>
          <a-button type="primary" size="small" class="small-btn" @click.stop="seniorEventClick"> <edit-outlined /> 编辑 </a-button>
        </template>
        <a-card :bordered="false">
          <div v-for="eventName in EventLife" :key="eventName">
            <p>
              <span class="func-annotate">// {{ EventLifeName[eventName] }}</span>
              <br />
              <span class="func-keyword">async {{ eventName }}</span> (e, components, echarts, node_modules) {
            </p>
            <p class="ml-4">
              <guns-code :code="(targetData.events.advancedEvents || {})[eventName] || ''"></guns-code>
            </p>
            <p>}<span>,</span></p>
          </div>
        </a-card>
      </a-collapse-panel>
    </a-collapse>
    <BaseEventManage
      v-if="showBaseEvent"
      v-model:visible="showBaseEvent"
      :BaseEvent="BaseEvent"
      :EventTypeName="EventTypeName"
      :targetData="targetData"
      @done="closeBaseEvent"
    />
    <SeniorEventManage
      v-if="showSeniorEvent"
      v-model:visible="showSeniorEvent"
      :EventLife="EventLife"
      :EventLifeName="EventLifeName"
      :targetData="targetData"
      @done="closeSeniorEvent"
    />
  </div>
</template>

<script setup name="ChartEvent">
import { ref } from 'vue';
import { useTargetData } from '../hooks/useTargetData.hook';
import BaseEventManage from '../components/base-event-manage.vue';
import SeniorEventManage from '../components/senior-event-manage.vue';

const activeKey = ref('1');

const { targetData } = useTargetData();

const BaseEvent = {
  // 点击
  ON_CLICK: 'click',
  // 双击
  ON_DBL_CLICK: 'dblclick',
  // 移入
  ON_MOUSE_ENTER: 'mouseenter',
  // 移出
  ON_MOUSE_LEAVE: 'mouseleave'
};

const EventTypeName = {
  [BaseEvent.ON_CLICK]: '单击',
  [BaseEvent.ON_DBL_CLICK]: '双击',
  [BaseEvent.ON_MOUSE_ENTER]: '鼠标进入',
  [BaseEvent.ON_MOUSE_LEAVE]: '鼠标移出'
};

// 基础事件类型(vue不加 on)
const EventLife = {
  // 渲染之后
  VNODE_MOUNTED: 'vnodeMounted',
  // 渲染之前
  VNODE_BEFORE_MOUNT: 'vnodeBeforeMount'
};

const EventLifeName = {
  [EventLife.VNODE_BEFORE_MOUNT]: '渲染之前',
  [EventLife.VNODE_MOUNTED]: '渲染之后'
};

const showBaseEvent = ref(false);
const showSeniorEvent = ref(false);

const baseEventClick = () => {
  showBaseEvent.value = true;
};

const closeBaseEvent = data => {
  targetData.value.events.baseEvent = { ...data };
};

const seniorEventClick = () => {
  showSeniorEvent.value = true;
};

const closeSeniorEvent = data => {
  targetData.value.events.advancedEvents = { ...data };
};
</script>

<style lang="less" scoped>
:deep(.ant-collapse-header) {
  padding: 0 !important;
}
.mb-10 {
  margin-bottom: 20px;
}
:deep(.anticon-right) {
  top: 12px !important;
  right: 220px !important;
}
.small-btn {
  font-size: 12px !important;
  height: 28px;
  line-height: 8px;
  padding: 0px 4px;
  border-radius: 4px;
}
:deep(.ant-collapse-content-box) {
  margin: 20px 0;
  padding: 0 !important;
}
.func-keyword {
  color: #b478cf;
}

.func-annotate {
  color: #70c0e8;
}
.func-keyNameWord {
  color: #70c0e8;
}
.ml-4 {
  margin-left: 1.5em;
}
</style>
