<template>
  <div class="flex items-center">
    <Select
      v-bind="$attrs"
      placeholder="请选择脚本"
      @change="handleChange"
      v-model:value="scriptId"
      class="flex-1"
      show-search
      :options="selectOptions"
      :filter-option="handleSearch"
      allowClear
      @focus="handleFocus"
    />
    <div
      @click="handleBusinessModal"
      class="ml-2 flex-shrink-0 cursor-pointer text-blue-400"
      type="link"
    >
      新建脚本
    </div>
  </div>
  <a-button @click="handleOpenTestModal" class="mt-4" type="primary"> 测试脚本 </a-button>
  <ConvertScriptModal @register="registerModal" @complete="handleSuccess" />

  <JavaScriptTestModal
    @register="registerTestModal"
    onlyTest
    :language="testScriptLanguage"
    :messageValue="{
      params: '010304026C00883BF0',
    }"
    :javaScriptEditorProps="{
      functionName: 'Transform',
      paramsName: ['msg', 'metadata', 'msgType'],
      scriptType: 'update',
    }"
    :beforeTest="beforeTest"
  />
</template>
<script lang="ts" setup name="ScriptSelectItem">
  import { ref, Ref, watch, unref } from 'vue';
  import { SelectTypes } from 'ant-design-vue/es/select';
  import { Select } from 'ant-design-vue';
  import { ScriptTypeEnum } from '/@/views/rule/script/TcpConversionScript/config';
  import { getScriptManageMeList } from '/@/api/scriptmanage/scriptManager';
  import { useModal } from '/@/components/Modal';
  import ConvertScriptModal from '/@/views/rule/script/TcpConversionScript/components/ConvertScriptModal.vue';
  import { DataActionModeEnum } from '/@/enums/toolEnum';
  import JavaScriptTestModal from '/@/views/rule/designer/src/components/JavaScriptFilterModal/JavaScriptTestModal.vue';
  import { ScriptLanguageEnum } from '/@/enums/scriptEnum';
  import { TransportScriptRecordType } from '/@/api/scriptmanage/model/scriptModel';

  const props = defineProps({
    scriptType: {
      type: String,
      default: ScriptTypeEnum.TRANSPORT_TCP_AUTH,
    },
    modelValue: {
      type: String,
      default: '',
    },
    serviceType: {
      type: String,
      default: '',
    },
  });

  const emits = defineEmits(['update:modelValue', 'change']);

  const selectOptions: Ref<SelectTypes['options']> = ref([]);

  //如果是空字符串，placeholder没提示文字
  const scriptId = ref<any>(null);

  // onMounted(() => {
  // getSelectOptions();
  // });

  const getSelectOptions = async () => {
    selectOptions.value = await getAllScriptType(props.scriptType, props.serviceType);
  };

  const getAllScriptType = async (type, serviceType) => {
    const rest = await getScriptManageMeList({ scriptType: type, serviceType });
    return rest.map((m) => ({ ...m, label: m.name, value: m.id }));
  };

  const handleSearch = (inputValue: string, option: Record<'label' | 'value', string>) => {
    return option.label.includes(inputValue);
  };

  const [registerModal, { openModal }] = useModal();
  const [registerTestModal, { openModal: openTestModal }] = useModal();

  const testScriptLanguage = ref<string>(ScriptLanguageEnum.JavaScript);

  // 业务弹窗
  const handleBusinessModal = () => {
    openModal(true, { mode: DataActionModeEnum.CREATE });
  };

  const handleOpenTestModal = () => {
    const option = unref(selectOptions)?.find((item) => item.value === props.modelValue);
    const {
      scriptLanguage = ScriptLanguageEnum.JavaScript,
      convertJs,
      convertTbel,
    } = (option || {}) as TransportScriptRecordType;
    testScriptLanguage.value = scriptLanguage;
    openTestModal(true, {
      mode: DataActionModeEnum.CREATE,
      record: scriptLanguage === ScriptLanguageEnum.JavaScript ? convertJs : convertTbel,
    } as ModalParamsType<string>);
  };

  const handleSuccess = () => {
    getSelectOptions();
    // 默认禁用
    // const { id } = rest;
    // scriptId.value = id;
  };

  const handleChange = (value: string) => {
    emits('update:modelValue', value);
    emits('change', value);
  };
  const handleFocus = () => {
    getSelectOptions();
  };

  const getValue = () => {
    return scriptId.value;
  };

  const setValue = async (value) => {
    const scriptOption = await getAllScriptType(props.scriptType, props.serviceType);
    selectOptions.value = scriptOption;
    if (props.modelValue && !unref(selectOptions)?.some((item) => item.id === props.modelValue)) {
      emits('update:modelValue', null);
    }
    if (!scriptOption.map((item) => item.value).includes(value)) {
      scriptId.value = null;
    } else scriptId.value = value;
  };

  const beforeTest = (params: Recordable) => {
    return { ...params, needMetadataAndMsgType: true };
  };

  watch(
    () => props.modelValue,
    (value) => {
      setValue(value);
    },
    {
      immediate: true,
    }
  );

  defineExpose({
    setValue,
    getValue,
  });
</script>