<template>
  <div @click.stop="open">
    <InputModel
      :value="getTypeName(props?.modelValue?.type)"
      :placeholder="t('配置脚本引擎')"
      style="width: 100%; min-width: 100px"
    />
    <ModalPanel
      :visible="visible"
      :width="800"
      :title="t('脚本引擎配置')"
      @submit="submit"
      @close="close"
    >
      <NodeHead :nodeName="t('脚本引擎信息')" class="ml-4 my-4" />
      <div class="item-box">
        <div class="label">脚本语言</div>
        <div class="value">
          <a-select
            v-model:value="data.config.type"
            :placeholder="t('请选择脚本语言')"
            style="width: 100%"
          >
            <a-select-option v-for="item in typeOptions" :key="item.id" :value="item.id">
              {{ item.name }}
            </a-select-option>
          </a-select>
        </div>
      </div>
      <NodeHead :nodeName="t('引擎代码配置')" class="ml-4 my-4" />
      <CodeEditor
        v-model:value="data.config.value"
        language="js"
        style="height: 438px; border: 1px solid #efefef; margin: 10px"
      />
    </ModalPanel>
  </div>
</template>

<script setup lang="ts">
  import { reactive, ref } from 'vue';
  import { NodeHead, ModalPanel } from '/@/components/ModalPanel/index';
  import { InputModel } from '/@/components/ApiConfig';
  import { cloneDeep } from 'lodash-es';
  import { CodeEditor } from '/@/components/CodeEditor';
  import { useI18n } from '/@/hooks/web/useI18n';

  const { t } = useI18n();
  const props = withDefaults(defineProps<{ modelValue }>(), {
    modelValue: () => {
      return {
        value: '',
        type: 1,
      };
    },
  });
  const emit = defineEmits(['update:modelValue']);
  let typeOptions = [
    {
      id: 1,
      name: t('JAVA脚本引擎'),
    },
    {
      id: 2,
      name: 'Groovy脚本引擎',
    },
    {
      id: 3,
      name: 'Javascript脚本引擎',
    },
    {
      id: 4,
      name: 'QLExpress脚本引擎',
    },
    {
      id: 5,
      name: 'Python脚本引擎',
    },
    {
      id: 6,
      name: 'Lua脚本引擎',
    },
    {
      id: 7,
      name: 'Aviator脚本引擎',
    },
    {
      id: 8,
      name: 'Kotlin脚本引擎',
    },
  ];
  let data = reactive({
    config: {
      type: 1,
      value: '',
    },
  });

  const visible = ref<boolean>(false);
  function open() {
    data.config = cloneDeep(props.modelValue);
    visible.value = true;
  }
  function close() {
    visible.value = false;
  }
  function getTypeName(type) {
    let temp = typeOptions.filter((ele) => {
      return ele.id == type;
    });
    if (temp && temp.length > 0) {
      return temp[0].name;
    }
  }
  function submit() {
    emit('update:modelValue', cloneDeep(data.config));
    close();
  }
</script>

<style lang="less" scoped>
  .item-box {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 20px;

    .label {
      width: 60px;
    }

    .value {
      flex: 1;
    }
  }
</style>
