<script setup lang="ts">
import { reactive, watch, ref } from 'vue';
import { ProModal } from 'antdv-pro-modal';
import TerminalSSHView from '@/components/TerminalSSHView/index.vue';
import useI18n from '@/hooks/useI18n';
const { t } = useI18n();
const emit = defineEmits(['ok', 'cancel', 'update:open']);
const props = defineProps({
  open: {
    type: Boolean,
    default: false,
    required: true,
  },
  /**文件地址 */
  filePath: {
    type: String,
    default: '',
    required: true,
  },
  /**网元类型 */
  neType: {
    type: String,
    default: '',
    required: true,
  },
  /**网元ID */
  neId: {
    type: String,
    default: '',
    required: true,
  },
});

/**对话框对象信息状态类型 */
type StateType = {
  /**框是否显示 */
  open: boolean;
  /**标题 */
  title: string;
  /**查看命令 */
  form: Record<string, any>;
};

/**对话框对象信息状态 */
let state: StateType = reactive({
  open: false,
  title: '文件查看',
  form: {
    follow: true,
    showType: 'lines', // lines/char
    lines: 10,
    char: 0,
  },
});

function onClose() {
  state.open = false;
  emit('cancel');
  emit('update:open', false);
}

/**监听是否显示，初始数据 */
watch(
  () => props.open,
  val => {
    if (val) {
      if (props.neType && props.neId) {
        const filePath = props.filePath;
        const fileName = filePath.substring(filePath.lastIndexOf('/') + 1);
        state.title = fileName;
        state.open = true;
      }
    }
  }
);

/**终端实例 */
const viewTerminal = ref();

/**终端初始连接 */
function fnInit() {
  setTimeout(fnReload, 1_500);
}

/**重载查看方式 */
function fnReload() {
  if (!viewTerminal.value) return;
  viewTerminal.value.ctrlC();
  if (state.form.showType !== 'lines') {
    state.form.lines = 10;
  } else {
    state.form.char = 0;
  }
  viewTerminal.value.clear();
  setTimeout(() => {
    viewTerminal.value.send('tail', {
      filePath: props.filePath,
      lines: state.form.lines,
      char: state.form.char,
      follow: state.form.follow,
    });
  }, 1000);
}
</script>

<template>
  <ProModal
    :drag="true"
    :fullscreen="true"
    :borderDraw="true"
    :min-width="800"
    :min-height="500"
    :center-y="true"
    :destroyOnClose="true"
    :keyboard="false"
    :mask-closable="false"
    :open="state.open"
    :title="state.title"
    :body-style="{ overflow: 'hidden' }"
    :footer="null"
    @cancel="onClose"
  >
    <TerminalSSHView
      ref="viewTerminal"
      :id="`V${Date.now()}`"
      prefix="tail"
      url="/ws/view"
      :ne-type="neType"
      :ne-id="neId"
      style="height: calc(100% - 36px)"
      @connect="fnInit()"
    ></TerminalSSHView>
    <!-- 命令控制属性 -->
    <a-form name="form" layout="horizontal">
      <a-row>
        <a-col :lg="12" :md="12" :xs="24">
          <a-form-item :label="t('views.logManage.neFile.viewAs')">
            <a-input-group compact>
              <a-select v-model:value="state.form.showType" style="width: 50%">
                <a-select-option value="lines">
                  {{ t('views.logManage.neFile.tailLines') }}
                </a-select-option>
                <a-select-option value="char">
                  {{ t('views.logManage.neFile.tailChar') }}
                </a-select-option>
              </a-select>
              <a-input-number
                style="width: 25%"
                v-model:value="state.form[state.form.showType]"
                :min="0"
                :max="1000"
                :placeholder="t('common.inputPlease')"
              ></a-input-number>
              <a-button type="primary" style="width: 25%" @click="fnReload()">
                {{ t('views.logManage.neFile.reload') }}
              </a-button>
            </a-input-group>
          </a-form-item>
        </a-col>
        <a-col :lg="6" :md="12" :xs="24">
          <a-form-item
            :label="t('views.logManage.neFile.follow')"
            name="follow"
          >
            <a-switch v-model:checked="state.form.follow" />
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </ProModal>
</template>

<style lang="less" scoped>
.ant-form :deep(.ant-form-item) {
  margin-bottom: 0;
}
</style>
