<template>
  <div>
    <BasicForm :showResetButton="false" :showSubmitButton="false" @register="register">
      <template #script>
        <div style="display: flex; align-items: center">
          <div>
            <Select
              placeholder="请选择转换脚本"
              v-model:value="selectScript.script"
              style="width: 305px"
              :options="selectOptions"
              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" />
  </div>
</template>
<script lang="ts" setup>
  import { ref, Ref, reactive, 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 { useMessage } from '/@/hooks/web/useMessage';
  import { getScriptManageMeList } from '/@/api/scriptmanage/scriptManager';
  import ConverScriptModal from '/@/views/scriptmanage/converscript/ConverScriptModal.vue';

  const { createMessage } = useMessage();
  const selectScript = reactive<Record<'script', Nullable<string>>>({
    script: null,
  });
  const selectOptions: Ref<SelectTypes['options']> = ref([]);
  onMounted(async () => {
    const res = await getScriptManageMeList();
    selectOptions.value = res.map((m) => {
      return {
        label: m.name,
        value: m.id,
      };
    });
  });
  const handleSuccess = async (opt) => {
    if (opt.text !== 'test') {
      selectScript.script = opt?.res?.id;
      const res = await getScriptManageMeList();
      selectOptions.value = res.map((m) => {
        return {
          label: m.name,
          value: m.id,
        };
      });
    }
  };

  const [register] = useForm({
    labelWidth: 180,
    schemas: tcpSchemas,
    actionColOptions: {
      span: 14,
    },
  });
  const [registerModal, { openModal }] = useModal();

  // 新增或编辑
  const handleCreateOrEdit = (c) => {
    if (c === 'add') {
      openModal(true, {
        isUpdate: true,
        isView: false,
        isTest: false,
        isText: 'confirm',
        isTitle: 'add',
      });
    } else {
      openModal(true, {
        isUpdate: false,
        isTest: true,
        isText: 'test',
        isTitle: 'test',
      });
    }
  };

  const getFormData = () => {
    if (!selectScript.script) {
      createMessage.error('请选择转换脚本');
      throw '请选择转换脚本';
    }
    const value = {
      ...{
        scriptId: selectScript.script,
        dataFormat: 'HEX',
        type: 'TCP',
      },
    };
    return value;
  };
  const resetFormData = () => {
    selectScript.script = null;
  };
  const setFormData = (v) => {
    selectScript.script = v?.scriptId;
  };
  defineExpose({
    getFormData,
    resetFormData,
    setFormData,
  });
</script>
<style lang="less" scoped></style>