<script lang="ts" setup>
import { onMounted, reactive, toRaw } from 'vue';
import { PageContainer } from '@ant-design-vue/pro-layout';
import saveAs from 'file-saver';
import useNeInfoStore from '@/store/modules/neinfo';
import {
  RESULT_CODE_ERROR,
  RESULT_CODE_SUCCESS,
} from '@/constants/result-constants';
import useI18n from '@/hooks/useI18n';
import { message, Form } from 'ant-design-vue/lib';
import {
  tcpdumpNeTask,
  tcpdumpNeUPFTask,
  tcpdumpPcapDownload,
} from '@/api/traceManage/pcap';
import { ref } from 'vue';
const { t } = useI18n();

/**对话框对象信息状态类型 */
type ModalStateType = {
  /**网元类型 */
  neType: string[];
  /**表单数据 */
  from: Record<string, any>;
  /**确定按钮 loading */
  confirmLoading: boolean;
  /**执行日志 */
  execLogMsg: string;
  /**文件名 */
  fileName: string;
  /**下载文件按钮 */
  downBtn: boolean;
};

/**对话框对象信息状态 */
let modalState: ModalStateType = reactive({
  neType: [],
  from: {
    ip: '',
    cmd: 'sctp or tcp port 8080 or 8088',
    timeout: 60,
    upfStart: 'pcap dispatch trace on max 100000',
    upfStop: 'pcap dispatch trace off',
  },
  confirmLoading: false,
  execLogMsg: '',
  fileName: '',
  downBtn: false,
});

/**网元类型选择对应修改 */
function fnNeChange(_: any, item: any) {
  modalState.from.ip = item[1].ip;
  modalState.execLogMsg = '';
  modalState.fileName = '';
  modalState.downBtn = false;
  runTime.value = 0;
}

/**对话框内表单属性和校验规则 */
const modalStateFrom = Form.useForm(
  modalState.from,
  reactive({
    cmd: [{ required: true, message: 'tcpdump any 参数!' }],
    timeout: [{ required: true, message: '执行时长，单位是秒!' }],
    upfStart: [{ required: true, message: 'upf start pacp 命令!' }],
    upfStop: [{ required: true, message: 'upf stop pacp 命令!' }],
  })
);

// 创建 AbortController 实例
let controller = new AbortController();
let timeoutId: any = 0;
let runTime = ref<number>(0);

/**普通抓包执行 */
function fnStart() {
  modalStateFrom
    .validate(['cmd', 'timeout'])
    .then(() => {
      modalState.confirmLoading = true;
      const from = toRaw(modalState.from);
      const hide = message.loading('正在执行...', 0);
      controller = new AbortController();
      const signal = controller.signal;
      timeoutId = setInterval(() => {
        runTime.value++;
        if (runTime.value > from.timeout + 5) {
          clearInterval(timeoutId);
          runTime.value = 0;
          message.warning({
            content: `执行超时`,
            duration: 2,
          });
          // 超时终止请求
          controller.abort();
        }
      }, 1000);

      tcpdumpNeTask(signal, {
        neType: modalState.neType[0],
        neId: modalState.neType[1],
        timeout: from.timeout,
        cmd: from.cmd,
      })
        .then(res => {
          if (res.code === RESULT_CODE_SUCCESS) {
            message.success({
              content: `执行完成`,
              duration: 3,
            });
            let logmsg = res.data.cmd + '\n\n' + res.data.msg;
            logmsg = logmsg.replace(' \n', '\n\n');
            modalState.execLogMsg = logmsg;
            modalState.fileName = res.data.fileName;
            modalState.downBtn = true;
          } else if (
            res.code === RESULT_CODE_ERROR &&
            res.msg.includes('timeout')
          ) {
            message.warning({
              content: `中断执行`,
              duration: 3,
            });
          } else {
            message.error({
              content: `执行失败`,
              duration: 3,
            });
          }
        })
        .finally(() => {
          hide();
          clearInterval(timeoutId);
          runTime.value = 0;
          modalState.confirmLoading = false;
        });
    })
    .catch(e => {
      message.error(t('common.errorFields', { num: e.errorFields.length }), 3);
    });
}

/**普通抓包中断 */
function fnStop() {
  controller.abort(); // 终止请求
  clearInterval(timeoutId);
  runTime.value = 0;
}

/**下载PCAP文件 */
function fnDownPCAP() {
  if (!modalState.fileName) {
    message.warning({
      content: `无效文件名`,
      duration: 2,
    });
    return;
  }
  const key = 'tcpdumpPcapDownload';
  message.loading({ content: '请稍等...', key });
  tcpdumpPcapDownload({
    neType: modalState.neType[0],
    neId: modalState.neType[1],
    fileName: modalState.fileName,
  }).then(res => {
    if (res.code === RESULT_CODE_SUCCESS) {
      message.success({
        content: `已完成`,
        key,
        duration: 2,
      });
      saveAs(res.data, modalState.fileName);
    } else {
      message.error({
        content: `${res.msg}`,
        key,
        duration: 2,
      });
    }
  });
}

/**UPF抓包执行 */
function fnUPF(runType: 'start' | 'stop') {
  let validateArr = ['upfStop'];
  if (runType === 'start') {
    validateArr = ['upfStart'];
  }
  modalStateFrom
    .validate(validateArr)
    .then(() => {
      modalState.confirmLoading = true;
      const from = toRaw(modalState.from);
      const hide = message.loading('请稍等...', 0);
      tcpdumpNeUPFTask({
        neType: modalState.neType[0],
        neId: modalState.neType[1],
        runType: runType,
        cmd: from.upfStart,
      })
        .then(res => {
          if (res.code === RESULT_CODE_SUCCESS) {
            let logmsg = res.data.cmd + '\n\n' + res.data.msg;
            logmsg = logmsg.replace(' \n', '\n\n');
            modalState.execLogMsg = logmsg;
            modalState.fileName = res.data.fileName;
            if (runType === 'start') {
              if (res.data.msg.includes('already')) {
                message.warning({
                  content: `已经执行, 请根据情况停止抓包`,
                  duration: 10,
                });
              } else {
                message.success({
                  content: `执行成功, 请根据情况停止抓包`,
                  duration: 10,
                });
              }
            }
            if (runType === 'stop') {
              if (res.data.msg.includes('already')) {
                message.warning({
                  content: `已经停止, 请根据情况开始抓包`,
                  duration: 10,
                });
              } else {
                message.success({
                  content: `执行成功, 抓包已停止`,
                  duration: 10,
                });
                modalState.downBtn = true;
              }
            }
          } else {
            message.error({
              content: `执行失败`,
              duration: 3,
            });
          }
        })
        .finally(() => {
          hide();
          modalState.confirmLoading = false;
        });
    })
    .catch(e => {
      message.error(t('common.errorFields', { num: e.errorFields.length }), 3);
    });
}

onMounted(() => {
  // 获取网元网元列表
  useNeInfoStore()
    .fnNelist()
    .then(res => {
      if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
        if (res.data.length > 0) {
          const info = res.data[0];
          modalState.neType = [info.neType, info.neId];
          modalState.from.ip = info.ip;
        }
      } else {
        message.warning({
          content: `暂无网元列表数据`,
          duration: 2,
        });
      }
    });
});
</script>

<template>
  <PageContainer>
    <a-card :title="t('views.trace.pcap.cardTitle')">
      <a-row :gutter="16">
        <a-col :lg="12" :md="12" :xs="24">
          <a-form
            name="modalState"
            :model="modalState"
            layout="horizontal"
            autocomplete="off"
            :label-col="{ span: 5 }"
            labelWrap
          >
            <a-form-item :label="t('views.trace.pcap.neType')" name="neType">
              <a-cascader
                v-model:value="modalState.neType"
                :options="useNeInfoStore().getNeCascaderOtions"
                @change="fnNeChange"
                :allow-clear="false"
                placeholder="请选择网元"
              />
            </a-form-item>
            <a-form-item :label="t('views.trace.pcap.neIp')" name="ip">
              <span style="font-weight: bold">{{ modalState.from.ip }}</span>
            </a-form-item>

            <template v-if="modalState.neType[0] === 'UPF'">
              <a-form-item
                :label="t('views.trace.pcap.capStart')"
                name="upfStart"
                v-bind="modalStateFrom.validateInfos.upfStart"
              >
                <a-input-group compact>
                  <a-input
                    v-model:value="modalState.from.upfStart"
                    allow-clear
                    placeholder="upf pacp 命令"
                    style="width: 75%"
                  />
                  <a-button
                    type="primary"
                    style="width: 25%"
                    :disabled="modalState.confirmLoading"
                    :loading="modalState.confirmLoading"
                    @click.prevent="fnUPF('start')"
                  >
                    {{ t('views.trace.pcap.runText') }}
                  </a-button>
                </a-input-group>
              </a-form-item>
              <a-form-item
                :label="t('views.trace.pcap.capStop')"
                name="upfStop"
                v-bind="modalStateFrom.validateInfos.upfStop"
              >
                <a-input-group compact>
                  <a-input
                    v-model:value="modalState.from.upfStop"
                    allow-clear
                    placeholder="upf pacp 命令"
                    style="width: 75%"
                  />
                  <a-button
                    type="primary"
                    style="width: 25%"
                    :disabled="modalState.confirmLoading"
                    :loading="modalState.confirmLoading"
                    @click.prevent="fnUPF('stop')"
                  >
                    {{ t('views.trace.pcap.runText') }}
                  </a-button>
                </a-input-group>
              </a-form-item>
            </template>
            <template v-else>
              <a-form-item
                :label="t('views.trace.pcap.capArg')"
                name="cmd"
                v-bind="modalStateFrom.validateInfos.cmd"
              >
                <a-input
                  v-model:value="modalState.from.cmd"
                  allow-clear
                  placeholder="tcpdump any 参数"
                >
                </a-input>
              </a-form-item>
              <a-form-item
                :label="t('views.trace.pcap.capTime')"
                name="timeout"
                v-bind="modalStateFrom.validateInfos.timeout"
              >
                <a-input-number
                  v-model:value="modalState.from.timeout"
                  placeholder="单位是秒's"
                  :min="5"
                  :max="120"
                />
              </a-form-item>
              <a-form-item :wrapperCol="{ offset: 5 }">
                <a-space :size="8">
                  <a-button
                    type="primary"
                    :disabled="modalState.confirmLoading"
                    :loading="modalState.confirmLoading"
                    @click.prevent="fnStart"
                  >
                    <template #icon><ApiOutlined /></template>
                    {{
                      runTime != 0
                        ? t('views.trace.pcap.runTimeText', { s: runTime })
                        : t('views.trace.pcap.runText')
                    }}
                  </a-button>
                  <a-button
                    type="dashed"
                    danger
                    :disabled="!modalState.confirmLoading"
                    @click.prevent="fnStop"
                  >
                    {{ t('views.trace.pcap.stopText') }}
                  </a-button>
                </a-space>
              </a-form-item>
            </template>
          </a-form>
        </a-col>
        <a-col :offset="2" :lg="10" :md="10" :xs="24">
          <a-form layout="vertical" autocomplete="off">
            <a-form-item
              :label="t('views.trace.pcap.capLog')"
              name="execLogMsg"
              v-show="!!modalState.execLogMsg"
            >
              <a-textarea
                v-model:value="modalState.execLogMsg"
                :auto-size="{ minRows: 10, maxRows: 15 }"
                :disabled="true"
                placeholder="输出执行日志..."
              />
            </a-form-item>
            <a-form-item v-show="modalState.downBtn">
              <a-button
                type="primary"
                :title="modalState.fileName"
                @click.prevent="fnDownPCAP"
              >
                <template #icon><DownloadOutlined /></template>
                {{ t('views.trace.pcap.capDownText') }}
              </a-button>
            </a-form-item>
          </a-form>
        </a-col>
      </a-row>
    </a-card>
  </PageContainer>
</template>

<style lang="less" scoped></style>
