<!--
 * @Author: nxy
 * @Date: 2024-08-07 13:47:07
-->
<template>
  <!-- 新增编辑 -->
  <a-modal
    :width="900"
    :maskClosable="false"
    :visible="props.visible"
    :confirm-loading="loading"
    :forceRender="true"
    title="基础事件编辑器"
    :body-style="{ padding: '8px 12px' }"
    @update:visible="updateVisible"
    @ok="save"
    wrapClassName="guns-modal-movable"
    @close="updateVisible(false)"
  >
    <a-tabs v-model:activeKey="activeKey" type="card" size="small">
      <a-tab-pane :tab="`${props.EventTypeName[eventName]}-${eventName}`" v-for="(eventName, index) in props.BaseEvent" :key="index">
        <!-- 函数名称 -->
        <p class="pl-3">
          <span class="func-keyword">async function &nbsp;&nbsp;</span>
          <span class="func-keyNameWord">{{ eventName }}(mouseEvent,components)&nbsp;&nbsp;{</span>
        </p>
        <!-- 编辑主体 -->
        <monaco-code-editor v-model="baseEvent[eventName]" style="height: 480px;" language="javascript" />
        <!-- 函数结束 -->
        <p class="pl-3 func-keyNameWord">}</p>
      </a-tab-pane>
      <template #rightExtra>
        <span class="tool">提示: ECharts 组件会拦截鼠标事件</span>
      </template>
    </a-tabs>
  </a-modal>
</template>

<script setup name="BaseEventManage">
import { ref, onMounted } from 'vue';
import { useModalMovable } from '@/utils/common/modal-drag';

const props = defineProps({
  visible: Boolean,
  BaseEvent: Object,
  EventTypeName: Object,
  targetData: Object
});

const emits = defineEmits(['update:visible', 'done']);
// 弹框加载
const loading = ref(false);

const activeKey = ref('ON_CLICK');

// events 函数模板
let baseEvent = ref({ ...props.targetData.events.baseEvent });

onMounted(() => {
  useModalMovable();
});

// 更改弹框状态
const updateVisible = value => {
  emits('update:visible', value);
};

// 点击保存
const save = async () => {
  if (Object.values(baseEvent.value).join('').trim() === '') {
    // 清空事件
    emits('done', {
      [props.BaseEvent.ON_CLICK]: undefined,
      [props.BaseEvent.ON_DBL_CLICK]: undefined,
      [props.BaseEvent.ON_MOUSE_ENTER]: undefined,
      [props.BaseEvent.ON_MOUSE_LEAVE]: undefined
    });
  } else {
    emits('done', baseEvent.value);
  }
  updateVisible(false);
};
</script>

<style lang="less" scoped>
:deep(.ant-tabs-tab) {
  padding: 6px 12px !important;
}
.tool {
  color: #f0a020;
  font-size: 12px;
}
.func-keyword {
  color: #b478cf;
}
.func-keyNameWord {
  color: #70c0e8;
}
</style>
