<script lang="ts" setup>
  import { Button, Tag } from 'ant-design-vue';
  import { h, onMounted, ref, unref } from 'vue';
  import { DeviceProfileModel } from '/@/api/device/model/deviceModel';
  import { getScriptManageMeList } from '/@/api/scriptmanage/scriptManager';
  import { Description, useDescription } from '/@/components/Description';
  import { useModal } from '/@/components/Modal';
  import { TCPProtocolTypeEnum, TCPProtocolTypeNameEnum } from '/@/enums/deviceEnum';
  import ConvertScriptModal from '/@/views/rule/script/TcpConversionScript/components/ConvertScriptModal.vue';
  import { ScriptLanguageEnum } from '/@/enums/scriptEnum';
  import { DataActionModeEnum } from '/@/enums/toolEnum';
  import JavaScriptTestModal from '/@/views/rule/designer/src/components/JavaScriptFilterModal/JavaScriptTestModal.vue';

  const props = defineProps<{
    record: DeviceProfileModel['profileData']['transportConfiguration'];
  }>();

  const upScriptIdStr = ref('');

  const selectUpOptions: any = ref([]);

  onMounted(async () => {
    selectUpOptions.value = await getAllScriptType('TRANSPORT_TCP_UP');
    setDescProps({
      data: Object.assign(props.record),
    });
  });

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

  const findScriptUpName = (scriptId) => {
    upScriptIdStr.value = scriptId;
    return selectUpOptions.value?.find((it) => it.value === scriptId)?.label;
  };

  const [register, { setDescProps }] = useDescription({
    layout: 'vertical',
    column: 2,
    data: props.record,
    schema: [
      {
        field: 'type',
        label: '接入协议',
        span: 2,
        render: (value: string) => {
          return h('div', { class: 'flex' }, [
            h('div', { class: 'mr-2' }, value),
            h(Tag, { color: 'blue' }, () =>
              props.record.protocol === TCPProtocolTypeEnum.MODBUS_RTU
                ? TCPProtocolTypeNameEnum.MODBUS_RTU
                : TCPProtocolTypeNameEnum.CUSTOM
            ),
          ]);
        },
      },

      {
        field: 'upScriptId',
        label: '上行脚本',
        show: () => props.record.protocol !== TCPProtocolTypeEnum.MODBUS_RTU,
        render: (value: string) => {
          return (
            value &&
            h('div', [
              h(Tag, { color: 'blue' }, () => findScriptUpName(value)),
              h(Button, { type: 'link', onClick: handleTestUpScript }, () => '测试脚本'),
            ])
          );
        },
      },
    ],
  });

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

  const testScriptLanguage = ref<string>(ScriptLanguageEnum.JavaScript);
  const handleTestUpScript = () => {
    // const modalParams = {
    //   record: { id: unref(upScriptIdStr) },
    // };
    const record = selectUpOptions.value?.find((it) => it.value === unref(upScriptIdStr));
    const { scriptLanguage = ScriptLanguageEnum.JavaScript, convertJs, convertTbel } = record;
    testScriptLanguage.value = scriptLanguage!;
    openModal(true, {
      mode: DataActionModeEnum.CREATE,
      record: scriptLanguage === ScriptLanguageEnum.JavaScript ? convertJs : convertTbel,
    } as ModalParamsType<string>);

    // openModal(true, modalParams);
  };

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

<template>
  <section>
    <Description @register="register" />
    <ConvertScriptModal @register="registerModal" />
    <JavaScriptTestModal
      onlyTest
      @register="registerModal"
      :language="testScriptLanguage"
      :messageValue="{
        params: '010304026C00883BF0',
      }"
      :javaScriptEditorProps="{
        functionName: 'Transform',
        paramsName: ['msg', 'metadata', 'msgType'],
        scriptType: 'update',
      }"
      :beforeTest="beforeTest"
    />
  </section>
</template>