<template>
  <div class="flex items-center">
    <div>
      <Select
        v-bind="$attrs"
        :placeholder="t('common.chooseText')"
        @change="handleChange"
        v-model:value="scriptId"
        class="flex-1"
        show-search
        :options="selectOptions"
        :filter-option="handleSearch"
        allowClear
        @focus="handleFocus"
      />
    </div>
    <div>
      <span
        @click="handleBusinessModal()"
        class="ml-2"
        style="color: #409eff; cursor: pointer"
        size="small"
      >
        {{ t('deviceManagement.product.createCoversionScriptText') }}
      </span>
    </div>
  </div>
  <a-button @click="handleOpenTestModal()" class="mt-4" type="primary">
    {{ t('deviceManagement.product.testScriptText') }}
  </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 { 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';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { ScriptTestParams } from '/@/api/ruleChainDesigner/model';
  import ConvertScriptModal from '/@/views/rule/script/TcpConversionScript/components/ConvertScriptModal.vue';

  const { t } = useI18n();

  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(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 as ScriptLanguageEnum;
    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: ScriptTestParams) => {
    return { ...params, needMetadataAndMsgType: true };
  };

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

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