<template>
  <div>
    <BasicDrawer
      v-bind="$attrs"
      :title="getTitle"
      @register="register"
      width="500px"
      showFooter
      @ok="handleSubmit"
    >
      <BasicForm @register="registerForm">
        <template #function>
          <Card title="转换函数" :bodyStyle="{ padding: 0, height: '280px' }">
            <template #extra>
              <Tag color="blue">Transform Function</Tag>
              <a-button @click="handleFormat" size="small">格式化</a-button>
            </template>
            <div class="ml-8">function Transform(msg, metadata) {</div>
            <div ref="aceRef" class="overflow-hidden"></div>
            <div class="ml-7">}</div>
          </Card>
          <a-button type="primary" class="mt-4" @click="testTransformFunc">测试转换功能</a-button>
        </template>
      </BasicForm>
    </BasicDrawer>
  </div>
</template>

<script lang="ts" setup>
  import { ref, computed } from 'vue';
  import { useDrawerInner, BasicDrawer } from '/@/components/Drawer/index';
  import { useForm, BasicForm } from '/@/components/Form/index';
  import { formSchema } from '../config/config.data.ts';
  import { Card, Tag } from 'ant-design-vue';
  import { createOrEditTransformScriptApi } from '/@/api/device/TransformScriptApi';
  import { useMessage } from '/@/hooks/web/useMessage';
  import ace from 'ace-builds';
  import 'ace-builds/src-noconflict/theme-chrome'; // 默认设置的主题
  import 'ace-builds/src-noconflict/mode-javascript'; // 默认设置的语言模式
  import { beautify } from 'ace-builds/src-noconflict/ext-beautify.js';

  const emit = defineEmits(['register', 'isStatus', 'success']);
  const isUpdate = ref(false);
  const aceEditor = ref();
  const aceRef = ref();
  const getTitle = computed(() => (isUpdate.value ? '编辑转换脚本' : '新增转换脚本'));
  const [register, { closeDrawer }] = useDrawerInner((data) => {
    resetFields();
    isUpdate.value = data.isUpdate;
    initEditor(data.record?.configuration.jsScript);
    if (isUpdate.value) {
      setFieldsValue(data.record);
    }
  });
  const [registerForm, { getFieldsValue, setFieldsValue, resetFields }] = useForm({
    showActionButtonGroup: false,
    colProps: { span: 24 },
    schemas: formSchema,
  });

  const initEditor = (jsScript?: string) => {
    aceEditor.value = ace.edit(aceRef.value, {
      maxLines: 12, // 最大行数，超过会自动出现滚动条
      minLines: 12, // 最小行数，还未到最大行数时，编辑器会自动伸缩大小
      fontSize: 14, // 编辑器内字体大小
      theme: 'ace/theme/chrome', // 默认设置的主题
      mode: 'ace/mode/javascript', // 默认设置的语言模式
      tabSize: 2, // 制表符设置为 4 个空格大小
    });

    aceEditor.value.setOptions({
      enableBasicAutocompletion: true,
      enableLiveAutocompletion: true,
    });
    aceEditor.value.setValue(jsScript ?? 'return {msg: msg, metadata: metadata};');
    beautify(aceEditor.value.session);
  };

  const testTransformFunc = () => {
    closeDrawer();
    const jsCode = aceEditor.value.getValue();
    emit('isStatus', { status: 1, jsCode });
  };
  const handleSubmit = async () => {
    const fieldsValue = getFieldsValue();
    try {
      await createOrEditTransformScriptApi({
        configuration: {
          jsScript: aceEditor.value.getValue(),
        },
        type: 'org.thingsboard.rule.engine.transform.TbTransformMsgNode',
        ...fieldsValue,
      });
      closeDrawer();
      emit('success');
      const { createMessage } = useMessage();
      createMessage.success('保存成功');
    } catch (e) {
      const { createMessage } = useMessage();
      createMessage.success('保存失败');
    }
  };
  const handleFormat = () => {
    beautify(aceEditor.value.session);
  };
  defineExpose({ aceEditor });
</script>