<template>
  <div style="padding: 10px;">
    <BasicTable @register="registerTable" class="import-data-table">
      <!-- <template #toolbar>
        <a-button type="primary" @click="openCloudQuery">云查询</a-button>
      </template> -->
    </BasicTable>
    <div style="display: flex; justify-content: flex-end; margin-top: 30px;margin-bottom:10px">
      <a-button type="primary" @click="openCloudQuery">执行云查询并导入</a-button>
    </div>
    
    <a-modal v-model:open="openAllocationModal" title="导入数据配置" :destroyOnClose="true" :footer="null" :maskClosable="false">
      <AllocationModal :picihao="props.picihao" :selectKeys="getSelectRowKeys" @closeCloudQuery="closeCloudQuery"/>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import { defineProps, ref, defineEmits } from "vue"
import { BasicTable, useTable } from "@/components/Table";
import AllocationModal from './AllocationModal/index.vue';
import { LoadDataBaseInfo } from '@/api/audit/index'

const openAllocationModal = ref(false)
const props = defineProps(["picihao"])
const emits = defineEmits(["closeImportModal"])
const columns = [
  {
    title: "图斑编号",
    dataIndex: "case_no",
  },
  {
    title: "图斑描述",
    dataIndex: "case_description",
  },
  {
    title: "图斑类型",
    dataIndex: "typename",
  },
  {
    title: "图斑面积",
    dataIndex: "area",
  },
]
const [registerTable, { getSelectRowKeys }] = useTable({
  columns,
  rowKey: "id",
  api: LoadDataBaseInfo,
  beforeFetch(params) {
    params.picihao = props.picihao
    return params
  },
  showIndexColumn: false,
  showTableSetting: false,
  pagination: { pageSize: 10 },
  useSearchForm: false,
  formConfig: {
    labelWidth: 120,
    schemas: [
      {
        field: 'typename',
        label: '原始图斑编号',
        component: 'Input',
        colProps: { span: 5 },
        componentProps: {
          placeholder: '请输入原始编号',
        },
      },
    ],
  },
  handleSearchInfoFn(info) {
    console.log(info)
    return info;
  },
  // rowSelection: {
  //   //多选框
  //   type: 'checkbox',
  // },
  // actionColumn: {
  //   width: 80,
  //   title: "操作",
  //   dataIndex: "action",
  //   slots: { customRender: "action" },
  // },
})

const openCloudQuery = () => {
  openAllocationModal.value = true
}
const closeCloudQuery = () => {
  openAllocationModal.value = false
  emits("closeImportModal")
}
</script>

<style lang="scss" scoped>
.import-data-table{
  :deep(.ant-table-body){
    height: 530px !important;

  }
}
</style>
