<template>
  <PageWrapper dense>
    <!--引用表格-->
    <BasicTable @register="registerTable">
      <template #action="{ record }">
        <!-- <TableAction :actions="getTableAction(record)" /> -->
        <TableAction :actions="getTableAction(record)" />
      </template>
    </BasicTable>
    <BasicModal @register="registerSubmitProjectArchive" title="归档信息详情" width="1200px" :showOkBtn="false"
      :showCancelBtn="false">
      <SubmitProjectArchive :projectid="projectid" :showApprovalForm="showApprovalForm" @close="close" />
    </BasicModal>

  </PageWrapper>
</template>

<script lang="ts" name="system-user" setup>
//ts语法
import { ref } from 'vue';
import { ActionItem, BasicTable, TableAction, useTable } from '@/components/Table';
import { useModal, BasicModal } from '@/components/Modal';
import SubmitProjectArchive from './SubmitProjectArchive.vue'
import { PageWrapper } from '@/components/Page';

import { columns, searchFormSchema } from '../projectInfo/projectInfo.data';

import { projectArchivePageList } from './projectArchive.api';
import { useUserStore } from '@/store/modules/user';

const userStore = useUserStore();
const [registerSubmitProjectArchive, { openModal: openModalSubmitProjectArchive, closeModal }] = useModal();
let projectid = ref()
let showApprovalForm = ref<boolean>(false)
const [registerTable] = useTable({
  title: '项目归档信息',
  api: projectArchivePageList,
  columns: columns,
  useSearchForm: true,
  rowKey: "id",
  showIndexColumn: false,
  actionColumn: {
    width: 140,
    title: '操作',
    dataIndex: 'action',
    slots: { customRender: 'action' },
  },
  //表单查询项设置
  formConfig: {
    schemas: searchFormSchema,
  }
});


function getTableAction(record): ActionItem[] {
  return [
    {
      label: '详情',
      ifShow: () => {
        return record.stage >= 2
      },
      onClick: handleDetailpage.bind(null, record),
    },

  ];
}


function handleDetailpage(record) {
  projectid.value = record.id
  showApprovalForm.value = true
  openModalSubmitProjectArchive(true)

}

function close() {
  closeModal()
}

</script>

<style scoped>
.timeline {
  display: flex;
  width: 100%;
  margin-bottom: 100px;

  .lineitem {
    transform: translateX(50%);
    width: 25%;
  }
}

::v-deep .el-timeline-item__tail {
  border-left: none;
  width: 100%;
  border-top: 2px solid #e4e7ed;
  position: absolute;
  top: 6px;
}

::v-deep .el-timeline-item__wrapper {
  padding-left: 0;
  position: absolute;
  top: 20px;
  transform: translateX(-50%);
  text-align: center;
}

::v-deep .el-timeline-item__timestamp {
  font-size: 14px;
}

.nested-timeline {
  margin-left: 20px;
  border-left: 1px dashed #ccc;
  padding-left: 20px;
}

.nested-timeline-item {
  margin-bottom: 10px;
}


::v-deep .ant-table-expanded-row {
  height: auto !important;
  /* 其他样式 */
}
</style>