<!-- 表格记录 -->
<script lang="ts" setup>
interface columnsType {
  text: string
  value: string
  width?: string
  align?: string
}
const props = defineProps({
  name: {
    type: String,
    required: true,
  },
})
const list = ref([])
const total = ref(0)
const columns = ref<columnsType[]>([])
const searchQuery = ref({
  limit: 10,
  offset: 1,
})
const loadingTable = ref(false)
// 记录表格数据
const tableData = ref([
  {
    name: '周检记录',
    list: [],
    columns: [
      {
        text: '记录表编号',
        value: '',
        align: 'center',
      },
      {
        text: '记录人',
        value: '',
        align: 'center',
      },
      {
        text: '检定日期',
        value: '',
        align: 'center',
      },
      {
        text: '有效日期',
        value: '',
        align: 'center',
      },
      {
        text: '送检人',
        value: '',
        align: 'center',
      },
      {
        text: '计量确认结论',
        value: '',
        align: 'center',
      },
    ],
  },
  {
    name: '状态变更记录',
    list: [],
    columns: [
      {
        text: '状态类型',
        value: '',
        align: 'center',
      },
      {
        text: '开始日期',
        value: '',
        align: 'center',
      },
      {
        text: '结束日期',
        value: '',
        align: 'center',
      },
      {
        text: '申请人',
        value: '',
        align: 'center',
      },
    ],
  },
  {
    name: '使用记录',
    list: [],
    columns: [
      {
        text: '使用人',
        value: '',
        align: 'center',
      },
      {
        text: '使用部门',
        value: '',
        align: 'center',
      },
      {
        text: '使用类型',
        value: '',
        align: 'center',
      },
      {
        text: '使用开始日期',
        value: '',
        align: 'center',
      },
      {
        text: '使用结束日期',
        value: '',
        align: 'center',
      },
    ],
  },
  {
    name: '检定证书',
    list: [],
    columns: [
      {
        text: '证书编号',
        value: '',
        align: 'center',
      },
      {
        text: '证书名称',
        value: '',
        align: 'center',
      },
      {
        text: '证书类型',
        value: '',
        align: 'center',
      },
      {
        text: '证书出具日期',
        value: '',
        align: 'center',
      },
      {
        text: '证书有效期',
        value: '',
        align: 'center',
      },
    ],
  },
])
// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
const changePage = (val: { size?: number; page?: number }) => {
  if (val && val.size) {
    searchQuery.value.limit = val.size
  }
  if (val && val.page) {
    searchQuery.value.offset = val.page
  }
}
watch(() => props.name, (newVal) => {
  console.log(newVal, 'newVal')
  // 挑选需要展示的数据
  list.value = tableData.value.filter(item => item.name === props.name)[0].list
  columns.value = tableData.value.filter(item => item.name === props.name)[0].columns
}, {
  deep: true,
  immediate: true,
})
</script>

<template>
  <!-- 表格区域 -->
  <normal-table
    id="print"
    :data="list" :total="total" :columns="columns as any"
    :is-showmulti-select="true"
    :query="{ limit: searchQuery.limit, offset: searchQuery.offset }"
    :list-loading="loadingTable"
    style="padding-top: 20px;background-color: #fff;"
    @change="changePage"
  >
    <template #preColumns>
      <el-table-column label="序号" width="55" align="center">
        <template #default="scope">
          {{ (searchQuery.offset - 1) * searchQuery.limit + scope.$index + 1 }}
        </template>
      </el-table-column>
    </template>
    <!-- <template #columns>
      <el-table-column label="操作" align="center" width="200">
        <template #default="{ row }">
          <el-button size="small" type="primary" link @click="update(row)">
            编辑
          </el-button>
          <el-button size="small" type="primary" link @click="detail(row)">
            详情
          </el-button>
          <el-button size="small" type="danger" link @click="remove(row)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </template> -->
  </normal-table>
</template>

<style lang="scss" scoped>
// 样式
</style>