<!--
 * @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.EventLifeName[eventName]}-${eventName}`" v-for="(eventName, index) in props.EventLife" :key="index">
        <!-- 函数名称 -->
        <p class="pl-3">
          <span class="func-keyword">async function &nbsp;&nbsp;</span>
          <span class="func-keyNameWord">{{ eventName }}(e, components, echarts, node_modules)&nbsp;&nbsp;{</span>
        </p>
        <!-- 编辑主体 -->
        <monaco-code-editor v-model="advancedEvents[eventName]" style="height: 480px" language="javascript" />
        <!-- 函数结束 -->
        <p class="pl-3 func-keyNameWord">}</p>
      </a-tab-pane>
    </a-tabs>
  </a-modal>
</template>

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

const props = defineProps({
  visible: Boolean,
  EventLife: Object,
  EventLifeName: Object,
  targetData: Object
});

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

const activeKey = ref('VNODE_MOUNTED');

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

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

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

// 点击保存
const save = async () => {
  if (Object.values(advancedEvents.value).join('').trim() === '') {
    // 清空事件
    emits('done', {
      vnodeBeforeMount: undefined,
      vnodeMounted: undefined
    });
  } else {
    emits('done', advancedEvents.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>
