<!-- 系统管理-到期提醒 -->
<script lang="ts" setup name="Expire">
import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
import editDialog from './edit.vue'
import { delRemind, getList } from '@/api/system/expire'
// 表头
const columns = ref([
  { text: '提醒名称', value: 'remindName', align: 'center' },
  { text: '设备提醒名称', value: 'equipmentNames', align: 'center' },
  { text: '任务提醒名称', value: 'taskNames', align: 'center' },
  { text: '提醒时间(天)', value: 'remindTime', align: 'center' },
])
const list = ref([])
const total = ref(20)
const listLoading = ref(false)
const listQuery = reactive({
  remindName: '',
  limit: 20,
  offset: 1,
})
// 获取列表
const fetchData = () => {
  getList(listQuery).then((res) => {
    list.value = res.data.rows
    total.value = Number(res.data.total)
  })
}
fetchData()
const reset = () => {
  listQuery.limit = 20
  listQuery.offset = 1
  listQuery.remindName = ''
  fetchData()
}
// 编辑
const editDialogRef = ref()
const handleEdit = (row: any, status: string) => {
  editDialogRef.value.initDialog(row, status)
}
// 删除
const handleDel = (row: any) => {
  ElMessageBox.confirm(
    `确认删除${row.remindName}吗？`,
    '提示',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    },
  )
    .then(() => {
      delRemind(row.id).then((res) => {
        if (res.code === 200) {
          ElMessage.success('删除成功')
          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" />
      <search-area :need-clear="true" @search="fetchData" @clear="reset">
        <search-item>
          <el-input v-model="listQuery.remindName" placeholder="提醒名称" clearable />
        </search-item>
      </search-area>
      <!-- 查询结果Table显示 -->
      <table-container>
        <template #btns-right>
          <icon-button icon="icon-add" title="新增" @click="handleEdit({} as any, 'create')" />
        </template>
        <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, 'update')"
                  >
                    编辑
                  </el-button>
                  <el-button
                    type="danger"
                    link
                    size="small"
                    class="table-text-button"
                    @click="handleDel(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>