<script setup lang="ts">
import { inject, onMounted, reactive, ref, useTemplateRef } from 'vue';
import { message } from 'ant-design-vue';

import ConfirmModal from '@/components/ConfirmModal.vue';
import SvgIcon from '@/components/SvgIcon.vue';
import { useRequest } from '@/hooks/request';
import { t } from '@/i18n';
import {
  gatewayLinkDelete,
  gatewayLinkGetList,
  gatewayLinkList,
  gatewayLinkProtocolReset,
  gatewayLinkUpdate,
  getDictTypeData,
  postProtocolCandidatesList,
} from '@/api';
import { DictCode, ProtocolType } from '@/constants';
import { IS_USED_IN_MODAL_GUIDANCE } from '@/constants/inject-key';

import type { FormInstance } from 'ant-design-vue';
import type { Rule } from 'ant-design-vue/es/form';
import type { Key } from 'ant-design-vue/es/table/interface';
import type {
  AgreementData,
  AgreementForm,
  InterfaceData,
  OptionItem,
  ProtocolItem,
  ProtocolList,
  ProtocolsItem,
  RegisterGatewayForm,
  UseGuideStepItemProps,
  VerificationAgreement,
} from '@/types';

const { handleRequest } = useRequest();
const isUsedInModalGuidance = inject(IS_USED_IN_MODAL_GUIDANCE, false);

const props = defineProps<UseGuideStepItemProps<RegisterGatewayForm>>();

const interfaceData = ref<InterfaceData[]>([]);

const agreementForm = ref<AgreementForm>({
  baudRate: undefined,
  dataBit: '',
  parityBit: '',
  stopBit: '',
  readTimeout: 0,
  nextDataReadDelay: 0,
  nextRoundDataReadDelay: 0,
});

const open = ref<boolean>(false);
const open1 = ref<boolean>(false);
const open2 = ref<boolean>(false);
const isModbusRtuProtocol = ref<boolean>(false);
const agreementData = ref<AgreementData[]>([]);

const baudRatelist = ref<OptionItem<number>[]>([]);
const slaveStationIndex = ref<number>(0);
const protocolList = ref<ProtocolItem[]>([]);
const protocolQuery = ref<ProtocolList>({
  pageIndex: 1,
  pageSize: 10,
  searchContent: '',
  protocolType: '',
});

const protocolTotal = ref<number>(0);

const formRef = ref<FormInstance>();
const formSettingsRef = ref<FormInstance>();
const protocolsItem = reactive<AgreementData>({
  protocolType: '',
  station: '',
  name: '',
  protocolName: '',
  deviceName: '',
  dataSendInterval: 180,
  highFreqSendInterval: 2,
  protocolId: 0,
  isStandard: '0',
});

let agreementIndex: number;

let protocolItem: ProtocolItem;

let agreementId: number;
let interfaceIndex: number;
let advancedIndex: number;

let verificationAgreement: VerificationAgreement[] = [];

const modalInterfaceComponentRef = useTemplateRef('modalInterfaceComponent');
const modalComponentRef = useTemplateRef('modalComponent');

let data: ProtocolsItem[] = [];

const columns = [
  {
    title: t('setupProtocol.protocolType'),
    dataIndex: 'protocolType',
    key: 'protocolType',
    ellipsis: true,
    width: 160,
  },
  {
    title: t('registerGateway.fromStationNumber'),
    dataIndex: 'station',
    key: 'station',
    ellipsis: true,
  },
  // {
  //   title: t('registerGateway.electricMeter'),
  //   dataIndex: 'name',
  //   key: 'name',
  //   ellipsis: true,
  // },
  {
    title: t('registerGateway.communicationProtocol'),
    key: 'protocolName',
    dataIndex: 'protocolName',
  },
  // {
  //   title: t('registerGateway.associatedEquipment'),
  //   key: 'deviceName',
  //   dataIndex: 'deviceName',
  //   ellipsis: true,
  // },
  {
    title: t('common.operation'),
    key: 'action',
    width: 90,
  },
];

const protocolColumns = [
  {
    title: t('setupProtocol.deviceType'),
    dataIndex: 'deviceType',
    key: 'deviceType',
  },
  // {
  //   title: t('registerGateway.agreementNumber'),
  //   dataIndex: 'protocolNumber',
  //   key: 'protocolNumber',
  // },
  {
    title: t('setupProtocol.protocolName'),
    dataIndex: 'protocolName',
    key: 'protocolName',
  },
];

const postGetList = () => {
  handleRequest(async () => {
    interfaceData.value = await gatewayLinkGetList(props.form.id);
  });
};

const confirmInterface = () => {
  handleRequest(async () => {
    await gatewayLinkDelete(agreementId);
    postGetList();
  });
  modalInterfaceComponentRef.value?.hideView();
};

const confirm = () => {
  agreementData.value.splice(slaveStationIndex.value, 1);
  modalComponentRef.value?.hideView();
};

const addDelete = (value: number) => {
  agreementId = value;
  modalInterfaceComponentRef.value?.showView();
};

const addSlave = () => {
  agreementData.value.push({
    protocolType: '',
    station: '',
    name: '',
    protocolName: '',
    deviceName: '',
    dataSendInterval: 180,
    highFreqSendInterval: 2,
    protocolId: undefined,
    isStandard: '0',
  });
};

const offAgreement = () => {
  open.value = false;
};

const bindingAgreement = () => {
  data = [];
  formRef.value
    ?.validate()
    .then(() => {
      if (!agreementData.value.length) {
        return message.warning(t('registerGateway.prompt'));
      }

      if (agreementData.value.some((item) => item.protocolId == undefined)) {
        return message.warning(t('registerGateway.pleaseCommunicationProtocol'));
      }

      const hasDuplicates =
        new Set(agreementData.value.map((item) => item.station)).size !== agreementData.value.length;
      if (hasDuplicates) {
        return message.warning(t('registerGateway.repeatStation'));
      }

      handleRequest(async () => {
        agreementData.value.forEach((item) => {
          const { protocolId, station, isStandard, dataSendInterval, highFreqSendInterval } = item;
          data.push({
            protocolId,
            station,
            isStandard,
            dataSendInterval,
            highFreqSendInterval,
          });
        });

        await gatewayLinkProtocolReset({
          linkId: agreementId,
          protocols: data,
        });

        const { linkName, interfaceId, gatewayId, bindState } = interfaceData.value[interfaceIndex];
        const { dataBit, parityBit, stopBit, baudRate, readTimeout, nextDataReadDelay, nextRoundDataReadDelay } =
          agreementForm.value;

        await gatewayLinkUpdate({
          id: agreementId,
          linkName,
          interfaceId,
          gatewayId,
          bindState,
          dataBit,
          parityBit,
          stopBit,
          baudRate,
          readTimeout,
          nextDataReadDelay,
          nextRoundDataReadDelay,
        });

        open.value = false;

        postGetList();
      });
    })
    .catch(() => {});
};

const deleteAgreement = (value: number) => {
  modalComponentRef.value?.showView();
  slaveStationIndex.value = value;
};

const advancedSettings = (value: AgreementData, index: number) => {
  advancedIndex = index;
  const { dataSendInterval, highFreqSendInterval } = value;
  protocolsItem.dataSendInterval = dataSendInterval;
  protocolsItem.highFreqSendInterval = highFreqSendInterval;
  open2.value = true;
};

const replaceAgreement = (value: number) => {
  agreementIndex = value;
  open1.value = true;
  getProtocolCandidatesList();
};

const getProtocolCandidatesList = () => {
  handleRequest(async () => {
    const { records, total } = await postProtocolCandidatesList(protocolQuery.value, props.form.id);
    protocolTotal.value = total;
    protocolList.value = records;
  });
};

const agreementReset = () => {
  protocolQuery.value = {
    pageIndex: 1,
    pageSize: 10,
    searchContent: '',
    protocolType: protocolQuery.value.protocolType,
  };
  getProtocolCandidatesList();
};

const agreementQuery = () => {
  getProtocolCandidatesList();
};
const switchPages = () => {
  getProtocolCandidatesList();
};

const rules1: Record<string, Rule[]> = {
  dataSendInterval: [{ required: true, message: t('common.cannotEmpty'), trigger: 'change' }],
  highFreqSendInterval: [{ required: true, message: t('common.cannotEmpty'), trigger: 'change' }],
};

const rules: Record<string, Rule[]> = {
  baudRate: [{ required: true, message: t('common.cannotEmpty'), trigger: 'change' }],
  dataBit: [{ required: true, message: t('common.cannotEmpty'), trigger: 'change' }],
  parityBit: [{ required: true, message: t('common.cannotEmpty'), trigger: 'change' }],
  stopBit: [{ required: true, message: t('common.cannotEmpty'), trigger: 'change' }],
  readTimeout: [{ required: true, message: t('common.cannotEmpty'), trigger: 'change' }],
  nextDataReadDelay: [{ required: true, message: t('common.cannotEmpty'), trigger: 'change' }],
  nextRoundDataReadDelay: [{ required: true, message: t('common.cannotEmpty'), trigger: 'change' }],
};

const rowSelectedChange = (selectedRowKeys: Key[], selectedRows: ProtocolItem[]) => {
  protocolItem = selectedRows[0];
};

// 根据条件显示背景
const interfaceShow = (value: string) => {
  return value === 'LAN' ? 'background-color: rgba(54, 207, 201, 1);' : 'background-color: rgba(89, 126, 247, 1);';
};

// 显示绑定/编辑弹框
const addEditor = (value: number, index: number, bindState: number, protocolType: string) => {
  agreementForm.value = {
    baudRate: undefined,
    dataBit: '',
    parityBit: '',
    stopBit: '',
    readTimeout: 0,
    nextDataReadDelay: 0,
    nextRoundDataReadDelay: 0,
  };
  agreementId = value;
  isModbusRtuProtocol.value = protocolType.includes(ProtocolType.ModbusRTU);
  protocolQuery.value.protocolType = protocolType;

  interfaceIndex = index;
  open.value = true;
  Object.assign(agreementForm.value, interfaceData.value[index]);
  if (agreementForm.value.baudRate) {
    agreementForm.value.baudRate = String(interfaceData.value[index].baudRate);
  } else {
    agreementForm.value.baudRate = undefined;
  }

  agreementData.value = [];
  handleRequest(async () => {
    const data = await getDictTypeData({
      dictCode: DictCode.BaudRate,
    });

    if (data.length) {
      baudRatelist.value = data[0].dictTypeDataList.map((item) => ({
        value: item.dictValueId,
        label: item.dictValue,
      }));
      if (!agreementForm.value.baudRate) {
        agreementForm.value.baudRate = String(data[0].dictTypeDataList[0].dictValue);
      }
    }

    if (bindState === 1) {
      verificationAgreement = await gatewayLinkList(agreementId);

      verificationAgreement.forEach((item) => {
        const {
          protocolType,
          station,
          protocolName,
          dataSendInterval,
          highFreqSendInterval,
          protocolId,
          isStandard,
          deviceName,
        } = item;
        agreementData.value.push({
          name: '',
          protocolType,
          station: String(station),
          protocolName,
          dataSendInterval,
          highFreqSendInterval,
          protocolId,
          isStandard: String(isStandard),
          deviceName,
        });
      });
    }
  });
};

const handleOk = () => {
  formSettingsRef.value
    ?.validate()
    .then(() => {
      agreementData.value[advancedIndex].dataSendInterval = protocolsItem.dataSendInterval;
      agreementData.value[advancedIndex].highFreqSendInterval = protocolsItem.highFreqSendInterval;
      open2.value = false;
    })
    .catch(() => {});
};

const handleOk1 = () => {
  if (protocolItem) {
    // if (agreementData.value.some((item) => item.protocolId === protocolItem.id)) {
    //   return message.warning(t('registerGateway.cannotAddAgain'));
    // }
    const { protocolName, dataSendInterval, highFreqSendInterval, id, protocolType } = protocolItem;
    agreementData.value[agreementIndex] = {
      protocolType,
      station: '',
      name: '',
      protocolName,
      deviceName: '',
      dataSendInterval,
      highFreqSendInterval,
      protocolId: id,
      isStandard: '0',
    };
    open1.value = false;
  } else {
    return message.warning(t('registerGateway.pleaseSelectAgreement'));
  }
};

onMounted(() => {
  postGetList();
});
</script>

<template>
  <div class="renegotiation-agreement">
    <div v-if="!isUsedInModalGuidance" class="use-guide-title">{{ $t('registerGateway.interfaceList') }}</div>
    <AFlex :justify="isUsedInModalGuidance ? 'space-between' : ''" wrap="wrap">
      <AFlex
        v-for="(item, index) in interfaceData"
        :key="item.id"
        :class="isUsedInModalGuidance ? 'interface-modal' : 'interface-list'"
        align="center"
      >
        <AFlex align="center">
          <ABadge>
            <template #count v-if="item.bindState === 1">
              <SvgIcon class="agreement-circle" name="check-circle" />
            </template>
            <AFlex class="interface-div" justify="space-between" align="center">
              <AFlex align="center">
                <AFlex
                  class="interface-div1"
                  :style="interfaceShow(item.interfaceType)"
                  justify="center"
                  align="center"
                >
                  <span class="interface-div1-span">{{ item.interfaceType }}</span>
                </AFlex>
                <div class="interface-div2">{{ item.linkName }}</div>
              </AFlex>

              <AFlex align="center">
                <div class="interface-agreement">{{ item.protocolType }}</div>
              </AFlex>
            </AFlex>
          </ABadge>

          <div @click="addEditor(item.id, index, item.bindState, item.protocolType)">
            <AFlex class="interface-but" justify="center" align="center">
              <SvgIcon v-if="item.bindState" class="interface-but-color" name="edit-o" />
              <SvgIcon v-else class="interface-but-color" name="binding-o" />
            </AFlex>
          </div>

          <div @click="addDelete(item.id)">
            <AFlex class="interface-but" justify="center" align="center">
              <SvgIcon class="interface-but-icon" name="delete" />
            </AFlex>
          </div>
        </AFlex>
      </AFlex>
    </AFlex>
    <AModal
      v-model:open="open"
      :title="$t('registerGateway.bindingAgreement')"
      width="920px"
      :footer="null"
      :mask-closable="false"
      :keyboard="false"
    >
      <AForm
        ref="formRef"
        class="protocol-class"
        :model="agreementForm"
        label-align="left"
        layout="vertical"
        :rules="rules"
        :wrapper-col="{ span: 21 }"
      >
        <!-- <ARow v-if="isModbusRtuProtocol">
          <ACol :span="6">
            <AFormItem :label="$t('setupProtocol.baudRate')" name="baudRate">
              <ASelect
                v-model:value="agreementForm.baudRate"
                class="protocol-select"
                :placeholder="$t('common.plzSelect')"
              >
                <ASelectOption v-for="item in baudRatelist" :key="item.value" :value="item.label">
                  {{ item.label }}
                </ASelectOption>
              </ASelect>
            </AFormItem>
          </ACol>
          <ACol :span="6">
            <AFormItem :label="$t('setupProtocol.dataBit')" name="dataBit">
              <ARadioGroup v-model:value="agreementForm.dataBit">
                <ARadio :value="5">5</ARadio>
                <ARadio :value="6">6</ARadio>
                <ARadio :value="7">7</ARadio>
                <ARadio :value="8">8</ARadio>
              </ARadioGroup>
            </AFormItem>
          </ACol>
          <ACol :span="6">
            <AFormItem :label="$t('setupProtocol.stopBit')" name="stopBit">
              <ARadioGroup v-model:value="agreementForm.stopBit">
                <ARadio value="1">1</ARadio>
                <ARadio value="1.5">1.5</ARadio>
                <ARadio value="2">2</ARadio>
              </ARadioGroup>
            </AFormItem>
          </ACol>
          <ACol :span="6">
            <AFormItem :label="$t('setupProtocol.parityBit')" name="parityBit">
              <ARadioGroup v-model:value="agreementForm.parityBit">
                <ARadio value="N">N</ARadio>
                <ARadio value="O">O</ARadio>
                <ARadio value="E">E</ARadio>
              </ARadioGroup>
            </AFormItem>
          </ACol>
        </ARow>
        <ARow>
          <ACol :span="6">
            <AFormItem :label="$t('setupProtocol.readTimeout')" name="readTimeout">
              <AInputNumber v-model:value="agreementForm.readTimeout">
                <template #addonAfter>ms</template>
              </AInputNumber>
            </AFormItem>
          </ACol>
          <ACol :span="6">
            <AFormItem :label="$t('registerGateway.nextDelayExtraction')" name="nextDataReadDelay">
              <AInputNumber v-model:value="agreementForm.nextDataReadDelay">
                <template #addonAfter>ms</template>
              </AInputNumber>
            </AFormItem>
          </ACol>
          <ACol :span="6">
            <AFormItem :label="$t('registerGateway.nextRoundDelayExtraction')" name="nextRoundDataReadDelay">
              <AInputNumber v-model:value="agreementForm.nextRoundDataReadDelay">
                <template #addonAfter>ms</template>
              </AInputNumber>
            </AFormItem>
          </ACol>
        </ARow> -->
      </AForm>
      <ATable :columns="columns" :data-source="agreementData" :pagination="false">
        <template #bodyCell="{ column, record, index }">
          <template v-if="column.key === 'protocolType'">
            <AInput disabled v-model:value="record.protocolType" />
          </template>
          <template v-else-if="column.key === 'station'">
            <AInputNumber v-model:value="record.station" :min="1" />
          </template>
          <!-- <template v-else-if="column.key === 'name'">
            <AInput disabled v-model:value="record.name" />
          </template> -->
          <template v-else-if="column.key === 'protocolName'">
            <AFlex justify="space-between" align="center" class="protocol-name">
              <div class="protocol-text">{{ record.protocolName }}</div>
              <div @click="replaceAgreement(index)">
                <AFlex justify="center" align="center" class="agreement-button">
                  {{ $t('registerGateway.renegotiationAgreement') }}
                </AFlex>
              </div>
            </AFlex>
            <!-- <AInputSearch disabled v-model:value="record.protocolName">
              <template #enterButton>
                <AButton class="button-color" @click="replaceAgreement(index)">{{
                  $t('registerGateway.renegotiationAgreement')
                }}</AButton>
              </template>
            </AInputSearch> -->
          </template>
          <!-- <template v-else-if="column.key === 'deviceName'">
            <AFlex justify="center" align="center" class="device-name-tag">
              {{ record.deviceName }}
            </AFlex>
          </template> -->

          <template v-else-if="column.key === 'action'">
            <SvgIcon
              class="agreement-icon agreement-icon-right"
              name="setting"
              @click="advancedSettings(record as AgreementData, index)"
            />
            <SvgIcon class="agreement-icon" name="delete" @click="deleteAgreement(index)" />
          </template>
        </template>
      </ATable>

      <AFlex justify="space-between">
        <AButton class="icon-button but-text" type="text" @click="addSlave">
          <SvgIcon name="plus" />
          {{ $t('registerGateway.addStation') }}
        </AButton>

        <div class="footer-margin">
          <AButton class="off-but" @click="offAgreement">{{ $t('common.turnOff') }}</AButton>
          <AButton class="off-but-width" type="primary" @click="bindingAgreement">{{ $t('common.save') }}</AButton>
        </div>
      </AFlex>
    </AModal>

    <AModal
      v-model:open="open1"
      :title="$t('registerGateway.renegotiationAgreement')"
      :ok-text="$t('common.certain')"
      :cancel-text="$t('common.cancel')"
      width="920px"
      @ok="handleOk1"
      :mask-closable="false"
      :keyboard="false"
    >
      <AFlex class="flex-query">
        <AInput
          v-model:value="protocolQuery.searchContent"
          class="own-input"
          :placeholder="$t('registerGateway.pleaseProtocolName')"
          allow-clear
        >
          <template #prefix>
            <SvgIcon class="search-svg" name="search-o" />
          </template>
        </AInput>

        <AButton class="button-margin" type="primary" @click="agreementQuery"> {{ $t('common.query') }} </AButton>
        <AButton @click="agreementReset">{{ $t('common.reset') }}</AButton>
      </AFlex>
      <ATable
        :row-selection="{
          type: 'radio',
          onChange: rowSelectedChange,
        }"
        row-key="id"
        :columns="protocolColumns"
        :data-source="protocolList"
        :pagination="false"
      />
      <AFlex justify="flex-end" class="footer-pagination">
        <APagination
          v-model:current="protocolQuery.pageIndex"
          v-model:page-size="protocolQuery.pageSize"
          :total="protocolTotal"
          :show-size-changer="true"
          @change="switchPages"
          show-quick-jumper
          :show-total="(total) => $t('common.pageTotal', { total })"
        />
      </AFlex>
    </AModal>

    <AModal
      v-model:open="open2"
      :title="$t('registerGateway.advancedSettingsAgreement')"
      :ok-text="$t('common.certain')"
      :cancel-text="$t('common.cancel')"
      width="480px"
      @ok="handleOk"
      :mask-closable="false"
      :keyboard="false"
    >
      <AForm ref="formSettingsRef" :model="protocolsItem" layout="vertical" :rules="rules1">
        <AFormItem :label="$t('registerGateway.dataReportingFrequency')" name="dataSendInterval">
          <AInputNumber
            v-model:value="protocolsItem.dataSendInterval"
            :placeholder="t('common.pleaseEnter')"
            :min="1"
            :max="255"
            style="width: 100%"
          />
        </AFormItem>
        <AFormItem :label="$t('registerGateway.highDataFrequencyReportingFrequency')" name="highFreqSendInterval">
          <AInputNumber
            v-model:value="protocolsItem.highFreqSendInterval"
            :placeholder="t('common.pleaseEnter')"
            :min="1"
            :max="255"
            style="width: 100%"
          />
        </AFormItem>
      </AForm>
    </AModal>

    <ConfirmModal
      ref="modalInterfaceComponent"
      :title="$t('common.deleteConfirmation')"
      :description-text="$t('registerGateway.deleteInterface')"
      :icon="{ name: 'delete' }"
      :icon-bg-color="'#F56C6C'"
      @confirm="confirmInterface"
    />

    <ConfirmModal
      ref="modalComponent"
      :title="$t('common.deleteConfirmation')"
      :description-text="$t('common.confirmDeletion')"
      :icon="{ name: 'delete' }"
      :icon-bg-color="'#F56C6C'"
      @confirm="confirm"
    />
  </div>
</template>

<style lang="scss" scoped>
.protocol-text {
  width: calc(100% - 72px);
  margin-left: 12px;
  overflow: hidden;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 22px;
  color: #333;
  text-align: left;
  white-space: nowrap;
}

.agreement-button {
  width: 72px;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 22px;
  color: var(--antd-color-primary-hover);
  text-align: left;
  cursor: pointer;
}

.protocol-name {
  width: 100%;
  height: 32px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.flex-query {
  margin: 16px 0;
}

.button-margin {
  margin: 0 12px 0 16px;
}

.footer-margin {
  margin-top: 24px;
}

.button-color {
  color: var(--antd-color-primary-hover) !important;
}

.device-name-tag {
  width: 100%;
  height: 32px;
  color: #000;
  background: #e1f5f6;
  border-radius: 4px;
}

.agreement-circle {
  font-size: 24px;
  color: var(--antd-color-primary-hover);
}

.search-svg {
  width: 12px;
  height: 12px;
  margin-right: 5px;
  margin-bottom: 2px;
  color: #b2b2b2;
}

.own-input {
  width: 256px;
  border: 1px solid #d6d6d6;
  border-radius: 4px;
}

.footer-pagination {
  margin-top: 24px;
  margin-bottom: 24px;
}

:deep(.renegotiation-agreement) {
  .ant-tabs-nav::before {
    border: 0;
  }
}

.agreement-icon-right {
  margin-right: 15px;
}

.agreement-icon {
  font-size: 21px;
  color: var(--antd-color-primary-hover);
  cursor: pointer;
}

.use-guide-title {
  margin-top: 40px;
  margin-bottom: 16px;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px;
  color: rgb(0 0 0 / 85%);
  text-align: left;
}

.interface-but {
  width: 32px;
  height: 32px;
  margin-left: 16px;
  cursor: pointer;
  background: #fff;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
}

.interface-but-icon {
  font-size: 14px;
  color: #f56e6e;
}

.interface-but-color {
  font-size: 14px;
}

.interface-agreement {
  margin-top: 6px;
  margin-right: 24px;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 22px;
  color: #666;
  text-align: right;
}

.interface-list {
  margin-right: 80px;
  margin-bottom: 16px;
}

.interface-content {
  width: 570px;
  margin-top: 24px;
}

.interface-div {
  width: 458px;
  height: 72px;
  background: #f5f7fa;
  border-radius: 8px;
}

.modal-guidance-modal {
  .interface-div {
    width: 414px;
  }
}

.interface-div1 {
  width: 48px;
  height: 48px;
  margin-left: 20px;
  border-radius: 4px;
}

.interface-div1-span {
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 18px;
  color: rgb(255 255 255 / 97%);
}

.interface-div2 {
  margin-left: 20px;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 17px;
  color: var(--antd-color-text-secondary);
  text-align: left;
}

.protocol-class .ant-form-item {
  margin-bottom: 24px !important;
}

.dev-list {
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  width: 80px;
  height: 32px;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 22px;
  color: #333;
  text-align: left;
  background-color: #e1f5f6;
}

.but-text {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 108px;
  height: 32px;
  margin-top: 8px;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  color: var(--antd-color-primary-hover);
  text-align: left;
  cursor: pointer;
}

.off-but {
  width: 76px;
  margin-right: 16px;
  color: var(--antd-color-primary-hover);
  border-color: var(--antd-color-primary-hover);
}

.off-but-width {
  width: 76px;
}

.interface-modal {
  margin-bottom: 16px;
}
</style>
