<!-- 信访举报管理 -->
<template>
  <div class="pricemoitorrecord">
    <a-card :bordered="false">
      <a-space class="search">
        <div class="silt-title">
          <span style="width: 70px; margin-right: 8px; text-align: right; display: block; line-height: 30px">{{
            '信件标题'
          }}</span>
          <a-input style="width: 220px" v-model:value="SearchFormDel.complaintNumber" placeholder="请输入" />
        </div>
        <div class="btnBox">
          <a-button type="primary" class="primarySele" @click="Search"> 查询 </a-button>
          <a-button class="primarySele snowy-buttom-left" @click="onReset"> 重置 </a-button>
        </div>
      </a-space>
    </a-card>
    <div class="list" style="margin-top: 10px">
      <a-table :data-source="tableData" :pagination="pagination" :columns="tableColumns" :row-key="(record) => record">
        <template #bodyCell="{ column, record }">
          <template v-if="column.dataIndex === 'isResponded'">
            <div>
              {{ record.isResponded == 0 ? '未回复' : '已回复' }}
            </div>
          </template>
          <template v-if="column.key === '操作'">
            <a-button type="link" @click="onView('view', record)">查看</a-button>
            <a-button v-if="record.isResponded == 0" type="link" @click="onView('edit', record)">回复</a-button>
          </template>
        </template>
      </a-table>
    </div>
    <Form ref="formRef" @successful="tableRef.refresh()" @change="change" />
  </div>
</template>
<script setup name="petition">
import business from '@/api/interaction.info/petitionApi.js'
import { listPagination } from '@/hook/listlistPagination.js'
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import { defineComponent } from 'vue'
import { message } from 'ant-design-vue'
import Form from './form.vue'
const router = useRouter()

const tableColumns = [
  {
    title: '序号',
    dataIndex: 'INDEX',
    align: 'center',
    customRender: ({ text, record, index }) => {
      return `${index + 1}`
    }
  },
  { title: '投诉编号', align: 'center', dataIndex: 'complaintNumber' },
  { title: '被举报人', align: 'center', dataIndex: 'reportedPerson' },
  { title: '提交时间', align: 'center', dataIndex: 'createTime' },
  { title: '是否回复', align: 'center', dataIndex: 'isResponded' },
  { title: '回复人', align: 'center', dataIndex: 'respondent' },
  { title: '办结日期', align: 'center', dataIndex: 'completionDate' },
  { title: '操作', align: 'center', key: '操作' }
]
// 初始数据存放
const state = reactive({
  selectedRowKeys: [],
  loading: false
})

// 封装传递的数据
const { change, tableData, onSearch, handlePageChange, pagination, Search, onReset, SearchFormDel } =
  listPagination({ complaintNumber: '', }, business.complaintPage, {
    sortOrder: 'ASCEND'
  })

// 查看表单数据
const formRef = ref(null)
// 新增 查看 编辑 删除 等功能按钮
const onView = (record, row) => {
  switch (record) {
    case 'view':
      formRef.value.onOpen(record, true, true, row)
      break
    case 'edit':
      formRef.value.onOpen(record, true, false, row)
      break
    default:
      break
  }
}
</script>
<style lang="less" scoped>
.search {
  padding-top: 20px;
  // padding-left: 50px;
  margin-bottom: 32px;

  .btnBox {
    width: 100%;
    display: inline-block;
    display: flex;
    justify-content: space-around;
    align-items: center;

    .primarySele {
      margin-left: 20px;
      margin-right: 20px;
    }
  }
}

.silt-title {
  display: flex;
}

.switch_del {
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>