<!-- 依申请公开管理 -->
<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.name" placeholder="请输入" />
        </div>
        <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.identificationNumber" 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 === 'requestType'">
            <div>
              {{ record.requestType == 1 ? '公民' : '法人/其他组织' }}
            </div>
          </template>
          <template v-if="column.dataIndex === 'informationUsage'">
            <div>
              {{ record.informationUsage == 1 ? '自身生活需要' : record.informationUsage == 2 ? '自身生产需要' :
                record.informationUsage == 3 ? '自身科研需要' : '查验自身信息' }}
            </div>
          </template>
          <template v-if="column.dataIndex === 'replyStatus'">
            <div>
              {{ record.replyStatus == 0 ? '未回复' : '已回复' }}
            </div>
          </template>
          <template v-if="column.key === '操作'">
            <a-button type="link" @click="onView('view', record)">查看</a-button>
            <a-button v-if="record.replyStatus == 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="publicitySystem">
import business from '@/api/policy.info/applicationDisclosureApi.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: 'requestType' },
  { title: '姓名', align: 'center', dataIndex: 'name' },
  { title: '证件号码', align: 'center', dataIndex: 'identificationNumber' },
  { title: '联系电话', align: 'center', dataIndex: 'contactNumber' },
  { title: '联系地址', align: 'center', dataIndex: 'contactAddress' },
  { title: '所需信息名称', align: 'center', dataIndex: 'informationName' },
  { title: '所需信息的信息用途', align: 'center', dataIndex: 'informationUsage' },
  { title: '查询码', align: 'center', dataIndex: 'queryCode' },
  { title: '是否回复', align: 'center', dataIndex: 'replyStatus' },
  { title: '操作', align: 'center', key: '操作' }
]
// 初始数据存放
const state = reactive({
  selectedRowKeys: [],
  loading: false
})

// 封装传递的数据
const { change, tableData, onSearch, handlePageChange, pagination, Search, onReset, SearchFormDel } =
  listPagination({ name: '', identificationNumber: '' }, business.requestPage, {
    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>