<script lang="ts" setup name="Expire">
// 表头
const columns = ref([
  { text: '提醒名称', value: 'labelId' },
  { text: '提醒时间', value: 'useState' },
])
const list = ref([])
const total = ref(20)
const listLoading = ref(false)
</script>

<template>
  <div class="expire">
    <app-container>
      <!-- 查询结果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
                    v-if="proxy.hasPerm('/sys/expire/edit')"
                    type="primary"
                    link
                    size="small"
                    class="table-text-button"
                    @click="handleEdit(scope.row, 'edit')"
                  >
                    编辑
                  </el-button>
                  <el-button type="primary" link size="small" class="table-text-button" @click="handleEdit(scope.row, 'detail')">
                    详情
                  </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>