<template>
  <div>
    <a-form
      ref="formRef"
      :model="scriptForm"
      name="basic"
      :label-col="{ span: 3 }"
      :wrapper-col="{ span: 17 }"
      autocomplete="off"
    >
      <a-form-item
        :label="ifAdd ? '名称' : '输入参数'"
        :name="ifAdd ? 'scriptName' : 'inputParams'"
        :rules="[{ required: true, message: ifAdd ? '请输入脚本名称' : '请输入参数' }]"
      >
        <a-input v-if="ifAdd" v-model:value="scriptForm.scriptName" placeholder="请输入脚本名称" />
        <a-input v-else v-model:value="scriptForm.inputParams" placeholder="请输入参数" />
      </a-form-item>
      <a-form-item
        label="脚本内容"
        name="scriptContent"
        :rules="[{ required: true, message: '请输入脚本内容' }]"
      >
        <Card title="脚本内容" :bodyStyle="{ padding: 0, height: '280px' }">
          <template #extra>
            <a-button @click="handleFormat" size="small">格式化</a-button>
          </template>
          <div ref="aceRef" class="overflow-hidden"></div>
        </Card>
        <Button @click="handleCopy" class="mt-4">
          <template #icon>
            <CopyOutlined />
          </template>
          copy
        </Button>
      </a-form-item>
      <a-form-item
        :label="ifAdd ? '备注' : '输出参数'"
        :name="ifAdd ? 'scriptRemark' : 'outputParams'"
      >
        <a-textarea
          :rows="5"
          v-if="ifAdd"
          v-model:value="scriptForm.scriptRemark"
          placeholder="请输入备注"
        />
        <a-textarea
          :rows="5"
          v-else
          v-model:value="scriptForm.outputParams"
          placeholder="请输入输出参数"
        />
      </a-form-item>
    </a-form>
  </div>
</template>
<script setup lang="ts">
  import { ref, unref, reactive } from 'vue';
  import ace from 'ace-builds';
  import { Card, Button } from 'ant-design-vue';
  import 'ace-builds/src-noconflict/theme-chrome'; // 默认设置的主题
  import 'ace-builds/src-noconflict/mode-javascript'; // 默认设置的语言模式
  import { beautify } from 'ace-builds/src-noconflict/ext-beautify.js';
  import { CopyOutlined } from '@ant-design/icons-vue';
  import { useCopyToClipboard } from '/@/hooks/web/useCopyToClipboard';
  import { useMessage } from '/@/hooks/web/useMessage';

  defineEmits(['register']);
  defineProps({
    ifAdd: { type: Boolean, default: true },
  });
  const scriptForm = reactive({
    scriptName: '',
    scriptRemark: '',
    scriptContent: '',
    inputParams: '',
    outputParams: '',
  });
  const { createMessage } = useMessage();
  const { clipboardRef, copiedRef } = useCopyToClipboard();
  const aceEditor = ref();
  const aceRef = ref();
  // 初始化编辑器
  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 ??
        `
    var trimSource =source.replaceAll(" ","");
    if(trimSource.length==26 && trimSource.startsWith("020308")){
      var str = "";
      for(var i = 6;i<20;i+=2){
        str += String.fromCharCode(parseInt(trimSource[i]+trimSource[i+1],16));
      }
    }
      `
    );
    beautify(aceEditor.value.session);
    scriptForm.scriptContent = aceEditor.value.getValue();
  };
  const handleCopy = () => {
    const valueRef = aceEditor.value.getValue();
    const value = unref(valueRef);
    if (!value) {
      createMessage.warning('请输入要拷贝的内容！');
      return;
    }
    clipboardRef.value = value;
    if (unref(copiedRef)) {
      createMessage.success('复制成功！');
    }
  };
  const formRef = ref();
  const getFormData = async () => {
    const value = await formRef.value.validateFields();
    if (!value) return;
    return value;
  };
  const setFormData = (v) => {
    for (let i in scriptForm) {
      Reflect.set(scriptForm, i, v[i]);
    }
  };
  const resetFormData = () => {
    for (let i in scriptForm) {
      Reflect.set(scriptForm, i, '');
    }
  };
  const handleFormat = () => beautify(aceEditor.value.session);

  defineExpose({
    initEditor,
    getFormData,
    resetFormData,
    setFormData,
  });
</script>
<style lang="less" scoped>
  @import url('./ConverScriptModal.less');
</style>