<template>
  <div>
    <BasicForm :showResetButton="false" :showSubmitButton="false" @register="register">
      <template #authScriptId="{ model, field }">
        <div style="display: flex; align-items: center">
          <div>
            <Select
              @change="handleAuthChange"
              placeholder="请选择"
              v-model:value="model[field]"
              style="width: 305px"
              show-search
              :options="selectAuthOptions"
              :filter-option="handleAuthSearch"
              allowClear
            />
          </div>
          <div>
            <span
              @click="handleCreateOrEditAuth('add')"
              class="ml-2"
              style="color: #409eff; cursor: pointer"
              size="small"
              >新建转换脚本</span
            >
          </div>
        </div>
        <a-button @click="handleCreateOrEditAuth('test')" class="mt-4" type="primary"
          >测试脚本</a-button
        >
      </template>
      <template #upScriptId="{ model, field }">
        <div style="display: flex; align-items: center">
          <div>
            <Select
              @change="handleUpChange"
              placeholder="请选择"
              v-model:value="model[field]"
              style="width: 305px"
              show-search
              :options="selectUpOptions"
              :filter-option="handleSearch"
              allowClear
            />
          </div>
          <div>
            <span
              @click="handleCreateOrEdit('add')"
              class="ml-2"
              style="color: #409eff; cursor: pointer"
              size="small"
              >新建转换脚本</span
            >
          </div>
        </div>
        <a-button @click="handleCreateOrEdit('test')" class="mt-4" type="primary"
          >测试脚本</a-button
        >
      </template>
    </BasicForm>
    <ConverScriptModal @register="registerModal" @success="handleSuccess" />
    <ConverScriptModal @register="registerAuthModal" @success="handleAuthSuccess" />
  </div>
</template>
<script lang="ts" setup name="index">
  import { ref, Ref, onMounted } from 'vue';
  import { BasicForm, useForm } from '/@/components/Form';
  import { tcpSchemas } from './config';
  import { SelectTypes } from 'ant-design-vue/es/select';
  import { Select } from 'ant-design-vue';
  import { useModal } from '/@/components/Modal';
  import { getScriptManageMeList } from '/@/api/scriptmanage/scriptManager';
  import ConverScriptModal from '/@/views/scriptmanage/converscript/ConverScriptModal.vue';
  import { useMessage } from '/@/hooks/web/useMessage';

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

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

  const { createMessage } = useMessage();

  const upScriptIdStr = ref('');

  const authScriptIdStr = ref('');

  onMounted(async () => {
    selectUpOptions.value = await getAllScriptType('TRANSPORT_TCP_UP');
    selectAuthOptions.value = await getAllScriptType('TRANSPORT_TCP_AUTH');
  });

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

  const handleSuccess = async ({ res, text }) => {
    if (text !== 'test') {
      const rest = await getAllScriptType('TRANSPORT_TCP_UP');
      selectUpOptions.value = rest;
      setFieldsValue({ upScriptId: res?.id });
      upScriptIdStr.value = res?.id;
    }
  };

  const handleAuthSuccess = async ({ res, text }) => {
    if (text !== 'test') {
      const rest = await getAllScriptType('TRANSPORT_TCP_AUTH');
      selectAuthOptions.value = rest;
      setFieldsValue({ authScriptId: res?.id });
      authScriptIdStr.value = res?.id;
    }
  };

  const [register, { validate, resetFields, setFieldsValue }] = useForm({
    labelWidth: 180,
    schemas: tcpSchemas,
    actionColOptions: {
      span: 14,
    },
  });

  const handleUpChange = (v) => (upScriptIdStr.value = v);

  const handleAuthChange = (v) => (authScriptIdStr.value = v);

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

  const [registerAuthModal, { openModal: openAuthModel }] = useModal();

  //TODO: 待优化

  const handleCreateOrEditAuth = (c) => {
    if (c === 'add') {
      openAuthModel(true, {
        isUpdate: true,
        isView: false,
        isTest: false,
        isText: 'confirm',
        isTitle: 'add',
      });
    } else {
      if (!authScriptIdStr.value) return createMessage.error('请先选择对应脚本');
      openAuthModel(true, {
        isUpdate: false,
        isTest: true,
        record: authScriptIdStr.value,
        isText: 'test',
        isTitle: 'test',
      });
    }
  };

  const handleCreateOrEdit = (c) => {
    if (c === 'add') {
      openModal(true, {
        isUpdate: true,
        isView: false,
        isTest: false,
        isText: 'confirm',
        isTitle: 'add',
      });
    } else {
      if (!upScriptIdStr.value) return createMessage.error('请先选择对应脚本');
      openModal(true, {
        isUpdate: false,
        isTest: true,
        record: upScriptIdStr.value,
        isText: 'test',
        isTitle: 'test',
      });
    }
  };

  const getFormData = async () => {
    const values = await validate();
    if (!values) return;
    return {
      ...values,
      type: 'TCP',
    };
  };

  const resetFormData = () => {
    resetFields();
  };

  const setFormData = (v) => {
    setFieldsValue(v);
    upScriptIdStr.value = v?.upScriptId;
    authScriptIdStr.value = v?.authScriptId;
  };

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

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

  defineExpose({
    getFormData,
    resetFormData,
    setFormData,
  });
</script>
<style lang="less" scoped></style>