<template>
  <div class="flex">
    <div>
      <Select
        v-bind="$attrs"
        placeholder="请选择脚本"
        @change="handleChange"
        v-model:value="scriptId"
        style="width: 305px"
        show-search
        :options="selectOptions"
        :filter-option="handleSearch"
        allowClear
      />
    </div>
    <div>
      <span
        @click="handleBusinessModal(BusinessConvertScriptTextEnum.BUSINESS_ADD_TEXT)"
        class="ml-2"
        style="color: #409eff; cursor: pointer"
        size="small"
        >新建转换脚本</span
      >
    </div>
  </div>
  <a-button
    @click="handleBusinessModal(BusinessConvertScriptTextEnum.BUSINESS_TEST_TEXT)"
    class="mt-4"
    type="primary"
    >测试脚本</a-button
  >
  <ConverScriptModal @register="registerModal" @success="handleSuccess" />
</template>
<script lang="ts" setup name="ScriptSelectItem">
  import { ref, Ref, onMounted } from 'vue';
  import { SelectTypes } from 'ant-design-vue/es/select';
  import { Select } from 'ant-design-vue';
  import {
    BusinessConvertScriptTextEnum,
    ScriptTypeEnum,
  } from '/@/views/rule/script/TcpConversionScript/config';
  import { getScriptManageMeList } from '/@/api/scriptmanage/scriptManager';
  import { useModal } from '/@/components/Modal';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { ConverScriptModal } from '/@/views/rule/script/TcpConversionScript/components';

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

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

  const { createMessage } = useMessage();

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

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

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

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

  const getAllScriptType = async (type) => {
    const rest = await getScriptManageMeList({ scriptType: type });
    return rest.map((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 handleBusinessModal = (text) => {
    const modalParams = {
      text,
      record:
        text !== BusinessConvertScriptTextEnum.BUSINESS_ADD_TEXT ? { id: scriptId.value } : null,
      scriptType: props.scriptType,
    };
    if (!scriptId.value) return createMessage.error('请先选择对应脚本');
    openModal(true, modalParams);
  };

  const handleSuccess = () => {
    getSelectOptions();
  };

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

  const setValue = (value) => {
    scriptId.value = value;
  };
  defineExpose({
    setValue,
  });
</script>