<template>
  <div>
    <BasicTable  @register="registerTable" :searchInfo="searchInfo">
      <template #bodyCell="{ column, record }">
        <!-- 乡镇 -->
        <template v-if="column.key === 'xmcount'">
          <a class="cursor" @click="getCaseInfoList(column,record)">{{record.xmcount}}</a>
        </template>   
      </template>
    </BasicTable>
    <a-modal
      v-model:open="showRecordList"
      width="1710px"
      :closable="true"
      :footer="null"
      title="详情明细"
    >
      <RecordList :currentListQuery="currentListQuery.listQuery" />
    </a-modal>
  </div>
</template>
<script lang="ts" setup>
  import { ref,reactive } from 'vue';

  import { BasicTable, useTable, TableAction } from '@/components/Table';
  import { getCaseOffenceForSsnyList, getCaseOffenceInfoList } from '@/api/demo/system';

  import { RecordList } from './page';

  import { columns,searchFormSchema } from './statistical.data';

  
  defineOptions({ name: 'statisticalanalysis' });

  const searchInfo = reactive<Recordable>({
    countyid:null
  });

  const showRecordList = ref<boolean>(false);
  let currentListQuery = reactive({listQuery:{}});

  const searchParams = ref();
  const [registerTable, { reload, getSelectRows, clearSelectedRowKeys, updateTableData}] = useTable({
    // 表格名称
    title: '统计分析',
    // 获取数据的接口
    api: getCaseOffenceForSsnyList,
    // 表单列信息 BasicColumn[]
    columns,
    rowKey: 'id',
    formConfig: {
      labelWidth: 120,
      schemas: searchFormSchema,
    },
    // 使用搜索表单
    useSearchForm: true,
    // 显示表格设置工具
    showTableSetting: true,
    // 是否显示分页
    pagination:false,
    // 是否显示表格边框
    bordered: true,
    // 序号列
    showIndexColumn: false,
    // 勾选列
    rowSelection: false,
    // 搜索
    handleSearchInfoFn(info) {
      searchParams.value = info;
      return info;
    },
  });
  // 查询条件
  interface searchListSchema{
    AreaId?:string;
    StartTime?:string;
    EndTime?:string;
    page?:number;
    limit?:number;
    CaseType?:string;
    key?:string;
    tubanlaiyuan?:string;
  }

  function getCaseInfoList(column,record:Recordable){
    const searchForm = reactive<searchListSchema>({
      StartTime:searchParams.value?.startTime,
      EndTime:searchParams.value?.endTime,
      tubanlaiyuan:searchParams.value?.tubanlaiyuan,
      page:1,
      limit:10,
      AreaId: record.countyid
    })
    showRecordList.value = true;
    currentListQuery.listQuery = searchForm
  }
</script>
<style>
.cursor{
  cursor: pointer;
}
</style>
