<template>
  <el-card>
    <template #header>
      <div style="text-align: center; font-size: 18px; font-weight: bold; margin-bottom: 10px;">
        表单详细信息
      </div>
    </template>
    <el-table :data="tableData" :pagination="tablePagination" border>
      <el-table-column prop="formId" label="表单ID" width="250"/>
      <el-table-column prop="formTitle" label="标题" width="150"/>
      <el-table-column prop="formContent" label="内容" width="150"/>
      <el-table-column prop="formStatus" label="状态" width="100"/>
      <el-table-column prop="issueUserFullPathName" label="拟稿人" width="300"/>
      <el-table-column prop="createTime" label="拟稿时间" width="180"/>
    </el-table>
  </el-card>
</template>

<script setup lang="ts">
import { onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'
import { useLoading, useComplexTable, SuccessResultCode, type Result} from '@cacp/ui'

import * as apis from '@/apis/government'
import config from '@/config'
import type { GovernmentInfo } from '@/types/government'

const { setLoading } = useLoading()
const route = useRoute()
const { query:{formId} } = route
const { tableData, tablePagination, setData } = useComplexTable(config)

onMounted(async () => {
  await onQuery()
})

async function onQuery(): Promise<void> {
  setLoading(true)

  const res: Result<GovernmentInfo> = await apis.get(formId.toString())
  if (res.code === SuccessResultCode && res.data) {
    setData([res.data])
  } else {
    ElMessage.error({
      message: res.message,
      showClose: true
    })
  }
  setLoading(false)
}

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