<template>
  <div>
    <n-card :bordered="false" class="proCard">
      <BasicTable
        :columns="columns"
        :request="loadDataTable"
        :row-key="(row) => row.id"
        ref="actionRef"
        :actionColumn="actionColumn"
        :scroll-x="1090"
        :flex-height="false"
        :pagination="{ pageSize: 5 }"
        :resizeHeightOffset="-5000000"
      />

      <n-modal
        v-model:show="showStdout"
        style="width: 95%"
        :show-icon="false"
        preset="dialog"
        :title="data.id > 0 ? '日志详情(' + data.id + ')' : '正在加载'"
      >
        <n-form ref="formRef" label-placement="left" :label-width="0" class="py-4">
          <n-form-item path="log" style="height: 720px; width: 100%">
            <n-code
              id="n-code"
              :word-wrap="true"
              :code="data.stdout ?? ''"
              language="html"
              style="
                height: 720px;
                width: 100%;
                overflow: auto;
                background: #2f3129;
                color: wheat;
                padding: 10px;
              "
            />
          </n-form-item>
        </n-form>
      </n-modal>
    </n-card>
  </div>
</template>

<script lang="ts" setup>
  import { h, reactive, ref } from 'vue';
  import { BasicTable, TableAction } from '@/components/Table';
  import { getDeployLogList, getDeployLogView } from '@/api/deploy/deploy';
  import { columns } from './columns';
  interface Props {
    deploy_id?: number;
  }

  const props = withDefaults(defineProps<Props>(), { deploy_id: 0 });
  const showStdout = ref(false);
  const data = ref({});
  const actionRef = ref();
  const actionColumn = reactive({
    width: 120,
    title: '操作',
    key: 'action',
    render(record) {
      return h(TableAction as any, {
        style: 'button',
        actions: [
          {
            label: '查看日志',
            onClick: handleEdit.bind(null, record),
          },
        ],
      });
    },
  });

  async function handleEdit(record: Recordable) {
    showStdout.value = true;
    data.value = {};
    data.value = await getDeployLogView(record);
  }

  const loadDataTable = async (res) => {
    return getDeployLogList({ ...res, ...{ deployId: props.deploy_id } });
  };
</script>

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