<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 { getCaseOffenceForSsnyList, getCaseOffenceInfoList } from '@/api/demo/system';
const [registerModal, { openModal, setModalProps }] = useModal();

const props = defineProps<{
  currentListQuery:Object
}>()
const caseId = ref('');
let columns = reactive({data:[],col:[{
    title: '项目编号',
    dataIndex: 'xiangmu_no',
  },
  {
    title: '项目名称',
    dataIndex: 'xiangmu_name',
  },
  {
    title: '项目用途',
    dataIndex: 'xiangmu_yt',
  },
  {
    title: '行政区划',
    dataIndex: 'xingzhengquhua',
  },{
    title: '所属街道/乡镇',
    dataIndex: 'streetname',
  },{
    title: '所属社区',
    dataIndex: 'communityname',
  },{
    title: '权利人',
    dataIndex: 'quanliren',
  },{
    title: '操作状态',
    dataIndex: 'handle_status_name',
  },{
    title: '申请地区',
    dataIndex: 'shenqing_area',
  },{
    title: '生产地区',
    dataIndex: 'shengchan_area',
  },{
    title: '辅助地区',
    dataIndex: 'fuzhu_area',
  },{
    title: '备案号',
    dataIndex: 'beian_no',
  },{
    title: '开始时间',
    dataIndex: 'start_time',
  },{
    title: '结束时间',
    dataIndex: 'end_time',
  },{
    title: '下发时间',
    dataIndex: 'xiafatime',
  }]});
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: {
        limit:pageSize, // 每页显示的条数
        showSizeChanger: true, // 是否可以改变每页显示的条数
        pageSizeOptions: ['10', '50', '80', '100'], // 可选的每页显示条数
        showQuickJumper: true, // 是否可以快速跳转到指定页
        showTotal:total=>`共${total}条`,
        page: current, // 当前页数
        total: total, // 总条数
        onChange:handlePageChange
      }
})

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

}

watch(()=>props.currentListQuery,(newValue,oldValue)=>{
  handleGetList();
},{immediate:true,deep:true})

function handleGetList(){
  getCaseOffenceInfoList(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>
