<!-- 系统管理-到期提醒 -->
<script lang="ts" setup name="Expire">
import editDialog from './edit.vue'
import { getList, updateRemind } from '@/api/system/expire'
// 表头
const columns = ref([
  { text: '提醒名称', value: 'remindName', align: 'center' },
  { text: '提醒时间', value: 'remindTime', align: 'center' },
])
const list = ref([])
const total = ref(20)
const listLoading = ref(false)
const listQuery = reactive({
  limit: 20,
  offset: 1,
})
// 编辑
const editDialogRef = ref()
const handleEdit = (row: any) => {
  editDialogRef.value.initDialog(row)
}
// 获取列表
const fetchData = () => {
  getList(listQuery).then((res) => {
    list.value = res.data.rows
    total.value = Number(res.data.total)
  })
}
fetchData()
// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
const changePage = (val: { size: number; page: number }) => {
  if (val && val.size) {
    listQuery.limit = val.size
  }
  if (val && val.page) {
    listQuery.offset = val.page
  }
  fetchData()
}
</script>

<template>
  <div class="expire">
    <app-container>
      <edit-dialog ref="editDialogRef" @close-refresh="fetchData" />
      <!-- 查询结果Table显示 -->
      <table-container>
        <div class="table-area">
          <normal-table
            :data="list"
            :total="total"
            :columns="columns"
            :query="listQuery"
            :list-loading="listLoading"
            @change="changePage"
          >
            <template #preColumns>
              <el-table-column label="序号" width="55" align="center">
                <template #default="scope">
                  {{ (listQuery.offset - 1) * listQuery.limit + scope.$index + 1 }}
                </template>
              </el-table-column>
            </template>
            <template #columns>
              <el-table-column label="操作" width="160" align="center" fixed="right">
                <template #default="scope">
                  <el-button
                    type="primary"
                    link
                    size="small"
                    class="table-text-button"
                    @click="handleEdit(scope.row)"
                  >
                    编辑
                  </el-button>
                </template>
              </el-table-column>
            </template>
          </normal-table>
        </div>
      </table-container>
    </app-container>
  </div>
</template>

<style lang="scss" scoped>
.expire {
  .table-area {
    background-color: #fff;
    padding: 10px;
    margin-top: 10px;
    border-radius: 7px;
  }
}
</style>

<style lang="scss">
  .list-login-log {
    .el-button + .el-button {
      margin-top: -10px;
    }
  }

  .el-message-box {
    overflow: auto;
  }
</style>