<script lang="ts" setup>
  import { Button, Tag } from 'ant-design-vue';
  import { h, onMounted, ref, unref, Ref } from 'vue';
  import { DeviceRecord } from '/@/api/device/model/deviceModel';
  import { getScriptManageMeList } from '/@/api/scriptmanage/scriptManager';
  import { Description, useDescription } from '/@/components/Description';
  import { useModal } from '/@/components/Modal';
  import { ConverScriptModal } from '/@/views/rule/script/TcpConversionScript/components';
  import { SelectTypes } from 'ant-design-vue/es/select';
  import { BusinessConvertScriptTextEnum } from '/@/views/rule/script/TcpConversionScript/config';

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

  const authScriptIdStr = ref('');

  const upScriptIdStr = ref('');

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

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

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

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

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

  const findScriptAuthName = (scriptId) => {
    authScriptIdStr.value = scriptId;
    return selectAuthOptions.value?.find((it) => it.value === scriptId)?.label;
  };

  const [register, { setDescProps }] = useDescription({
    layout: 'vertical',
    column: 2,
    data: props.record,
    schema: [
      {
        field: 'type',
        label: '接入协议',
        span: 2,
      },
      {
        field: 'authScriptId',
        label: '鉴权脚本',
        render: (value: string) => {
          return (
            value &&
            h('div', [
              h(Tag, { color: 'blue' }, () => findScriptAuthName(value)),
              h(Button, { type: 'link', onClick: handleTestAuthScript }, () => '测试脚本'),
            ])
          );
        },
      },
      {
        field: 'upScriptId',
        label: '上行脚本',
        render: (value: string) => {
          return (
            value &&
            h('div', [
              h(Tag, { color: 'blue' }, () => findScriptUpName(value)),
              h(Button, { type: 'link', onClick: handleTestUpScript }, () => '测试脚本'),
            ])
          );
        },
      },
    ],
  });

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

  const handleTestAuthScript = () => {
    const modalParams = {
      text: BusinessConvertScriptTextEnum.BUSINESS_TEST_TEXT,
      record: { id: unref(authScriptIdStr) },
    };
    openModal(true, modalParams);
  };

  const handleTestUpScript = () => {
    const modalParams = {
      text: BusinessConvertScriptTextEnum.BUSINESS_TEST_TEXT,
      record: { id: unref(upScriptIdStr) },
    };
    openModal(true, modalParams);
  };
</script>

<template>
  <section>
    <Description @register="register" />
    <ConverScriptModal @register="registerModal" />
  </section>
</template>