<!-- 原始记录模板 -->
<script lang="ts" setup>
import { Delete } from '@element-plus/icons-vue'
import tableHeader from '../../notice/table.header.vue'
const searchQuery = reactive({
  code: '', // 编号
  name: '', // 名称
  director: '', // 负责人
  createTime: '', // 创建时间
  limit: 0,
  offset: 0,
}) // 查询参数
const loadingTable = ref<boolean>(false) // 表格loading
const total = ref<number>(0) // 数据总条数
const columns = ref([]) // 表格
const list = ref([]) // 表格数据
// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
const changePage = (val: { size?: number; page?: number }) => {
  if (val && val.size) {
    searchQuery.limit = val.size
  }
  if (val && val.page) {
    searchQuery.offset = val.page
  }
}
</script>

<template>
  <!-- 布局 -->
  <AppContainer>
    <!-- 筛选条件 -->
    <search-area>
      <search-item>
        <el-input v-model="searchQuery.code" placeholder="编号" clearable class="w-50 m-2 normal-input" />
      </search-item>
      <search-item>
        <el-input v-model="searchQuery.name" placeholder="名称" clearable class="w-50 m-2 normal-input" />
      </search-item>
      <search-item>
        <el-input v-model="searchQuery.director" placeholder="负责人" clearable class="w-50 m-2 normal-input" />
      </search-item>
      <template #btns>
        <el-button class="filter-item" type="info" :icon="Delete" :style="{ marginTop: '-10px' }">
          重置
        </el-button>
      </template>
    </search-area>
    <!-- 表头区域 -->
    <tableHeader title="数据列表">
      <template #btns>
        <el-button type="primary">新建</el-button>
        <el-button type="primary">导出</el-button>
        <el-button type="primary">打印</el-button>
      </template>
    </tableHeader>
    <!-- 表格区域 -->
    <normal-table :data="list" :total="total" :columns="columns as any" :query="searchQuery"
      :list-loading="loadingTable" @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="80">
          <template #default="scope">
            <el-button>
              查看
            </el-button>
          </template>
        </el-table-column>
      </template>
    </normal-table>
  </AppContainer>
</template>

<style lang="scss" scoped>
.normal-input {
  width: 180px !important;
  margin-right: 15px !important;
}

:deep(.el-table__header) {
  background-color: #bbb;
}
</style>