<template>
  <a-table :columns="columns.col" :data-source="columns.data" size="small" height="500" bordered :pagination="pagination.pagination">
    <template #bodyCell="{ column, record }">
      <template v-if="column.dataIndex === 'action'">
        <a @click="viewDetail(record)">详情</a>
      </template>
    </template>
    </a-table>

    <BasicModal
      v-bind="$attrs"
      @register="registerModal"
      title="图斑详情"
      :canFullscreen="false"
      :defaultFullscreen="true"
      :showCancelBtn="false"
      :showOkBtn="false"
      :draggable="false"
    >
      <!-- <CaseView :caseId="caseId"></CaseView> -->
    </BasicModal>

</template>
<script lang="ts" setup>
import { reactive,ref,defineProps,watch } from 'vue';
import { BasicModal, useModal } from '@/components/Modal';
// import { getCaseInfoList } from '@/api/demo/system';
import { getCaseInfoList } from '@/api/monitor/index';
// import { CaseView } from '@/views/demo/monitor/index';
const [registerModal, { openModal, setModalProps }] = useModal();

const props = defineProps<{
  tablist:Object,
  currentListQuery:Object
}>()
const caseId = ref('');
let columns = reactive({data:[],col:[{
    title: '图斑编号',
    dataIndex: 'caseNo',
  },
  {
    title: '社区/村',
    dataIndex: 'communityName',
  },
  {
    title: '图斑描述',
    dataIndex: 'caseDescription',
  },{
    title: '所属类型',
    dataIndex: 'typeName',
  },{
    title: '处理人',
    dataIndex: 'dealUsername',
  },{
    title: '处理时间',
    dataIndex: 'dealTime',
  },{
    title: '审核人',
    dataIndex: 'verifyUser',
  },{
    title: '审核时间',
    dataIndex: 'verifyTime',
  },{
    title: '图斑状态',
    dataIndex: 'handleStatusName',
  }]});
let total = ref(0)

function viewDetail(record) {
  console.log(record);
  caseId.value = record.id;
  openModal();
}

let current = ref(1)
let pageSize = ref(10)



let pagination = reactive({
  pagination: {
        pageSize:pageSize, // 每页显示的条数
        showSizeChanger: true, // 是否可以改变每页显示的条数
        pageSizeOptions: ['10', '50', '80', '100'], // 可选的每页显示条数
        showQuickJumper: true, // 是否可以快速跳转到指定页
        showTotal:total=>`共${total}条`,
        current: current, // 当前页数
        total: total, // 总条数
        onChange:handlePageChange
      }
})

function handlePageChange(page,pageSize){
  props.currentListQuery.page = page;
  props.currentListQuery.limit = pageSize;
  pagination.pagination.pageSize = pageSize;
  pagination.pagination.current = page;

}

watch(()=>props.currentListQuery,(newValue,oldValue)=>{
  pagination.pagination.pageSize = newValue.limit;
  pagination.pagination.current = newValue.page;
  handleGetList();
},{immediate:true,deep:true})

function handleGetList(){
  getCaseInfoList(props.currentListQuery).then(res=>{
      columns.data = res.items;
      total.value = res.total;
  })
}

</script>
<style scoped>
.editable-row-operations a {
  margin-right: 8px;
}

::v-deep .ant-table {
  height: calc( 100vh - 230px)!important;
  overflow-x: auto !important;
}
</style>
