<template>
  <div class="feedback-page">
    <div class="feedback-head">
      <div class="search-input">
        <el-form :inline="true" :model="listFilter" class="demo-form-inline">
          <el-form-item label="审核状态:">
            <el-select v-model="listFilter.authStatus" placeholder="请选择审核状态" @change="getList">
              <el-option label="全部" :value="COMMENT_STATUS.ALL" />
              <el-option label="已通过" :value="COMMENT_STATUS.PASSED" />
              <el-option label="未通过" :value="COMMENT_STATUS.REJECTED" />
            </el-select>
          </el-form-item>
          <el-form-item label="回复状态:">
            <el-select v-model="listFilter.replyStatus" placeholder="请选择审核状态" @change="getList">
              <el-option label="全部" :value="REPLY_STATUS.ALL" />
              <el-option label="已回复" :value="REPLY_STATUS.REPLIED" />
              <el-option label="未回复" :value="REPLY_STATUS.UN_REPLIED" />
            </el-select>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="problem-list">
      <SingleComment
        v-for="(item, index) in commentsList"
        :key="index"
        :problem-data="item"
        @reFreshList="getList"
        style="margin-top: 22px; margin-bottom: 2px"
      />
    </div>

    <el-pagination
      v-model:current-page="pageNumber"
      v-model:page-size="pageSize"
      background
      layout="prev, pager, next,sizes,jumper"
      :page-sizes="[5, 10, 20, 40]"
      :total="totalRow"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      class="flex justify-end"
    />
  </div>
</template>

<script setup lang="ts">
  import SingleComment from './component/SingleComment.vue';
  import useComments from './use-comments.ts';
  import { REPLY_STATUS, COMMENT_STATUS } from '@/types/comments/constant.ts';

  const useCommentsList = useComments();
  const { commentsList, pageNumber, pageSize, totalRow, getList, listFilter } = useCommentsList;

  const handleSizeChange = () => {
    pageNumber.value = 1;
    getList();
  };
  const handleCurrentChange = () => {
    getList();
  };
</script>

<style scoped>
  .feedback-page {
    position: relative;
    height: calc(100vh - 64px - 12px);
    background-color: #ffffff;
    padding-top: 20px;
    padding-left: 20px;
    padding-right: 20px;
  }

  :deep(.el-radio-button .el-radio-button__inner) {
    width: 188px;
    background-color: #00000005;
  }

  .feedback-head {
    display: flex;
    flex-direction: column;
  }

  .search-input {
    margin-top: 24px;
  }

  .problem-list {
    height: calc(100vh - 270px);
    overflow: auto;
    margin-bottom: 4px;
    padding: 0 2px;
  }

  :deep(.el-pagination .el-select) {
    width: 92px;
  }
  .demo-form-inline .el-select {
    --el-select-width: 220px;
  }
</style>
./use-comments.ts @/types/comments/constant.ts
