<template>
  <PageWrapper dense contentFullHeight fixedHeight>
    <div class="table-box">
      <BasicTable @register="registerTable">
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'action'">
            <TableAction
              :actions="[
                {
                  label: '编辑',
                  onClick: () => {
                    getCaseDetail(record)
                  },
                },
                {
                  label: '历史记录',
                  onClick: () => {
                    getHistoryList(record)
                  },
                },
              ]"
            />
          </template>
        </template>
      </BasicTable>
    </div>
    <a-modal
      width="70%"
      v-model:open="infoModal" 
      title="图斑详情"
      :destroyOnClose="true"
      @ok="submit" 
      @cancel="closeInfoModal">
        <InfoModal :infoData="infoData" :infoResult="infoResult"/>
    </a-modal>
    <a-modal
      width="50%"
      v-model:open="historyModal" 
      title="历史记录"
      :destroyOnClose="true"
      @ok="closeHistoryModal" 
      @cancel="closeHistoryModal">
        <HistoryModal :caseId="historyCaseId"/>
    </a-modal>
  </PageWrapper>
</template>
<script lang="ts" setup>
import { PageWrapper } from '@/components/Page';
import { onMounted, ref } from 'vue';
import { LoadCaseInfoListForUpdate,LoadCaseInfoById,UpdateCaseInfo,LoadCaseHistoryInfoList } from '@/api/demo/system';
import { BasicTable,useTable,TableAction } from '@/components/Table';
import { columns, searchFormSchema } from './casemodification.data';
import InfoModal from './InfoModal/index.vue'
import HistoryModal from './HistoryModal/index.vue'
import { message } from 'ant-design-vue'

const infoModal = ref(false)
const historyModal = ref(false)
const historyCaseId = ref()
const infoData = ref({})
const infoResult = ref({})
const [registerTable, { setTableData, reload, clearSelectedRowKeys, setPagination, setLoading }] =
  useTable({
    title: '图斑汇总',
    api: LoadCaseInfoListForUpdate,
    columns,
    rowKey: 'id',
    formConfig: {
      labelWidth: 120,
      schemas: searchFormSchema,
    },
    // 使用搜索表单
    useSearchForm: true,
    showTableSetting: true,
    bordered: true,
    actionColumn: {
      width: 180,
      title: '操作',
      dataIndex: 'action',
      fixed: 'right',
    },
  });
const getCaseDetail = (record) => {
  LoadCaseInfoById({id: record.id}).then(res => {
    // console.log(res)
    // infoResult.value = {}
    infoData.value = res
    infoModal.value = true
  })
}
const getHistoryList = (record) => {
  // LoadCaseHistoryInfoList({key:record.id}).then(res => {
    historyCaseId.value = record.id
    historyModal.value = true

  //   console.log(res)
  // })
  
}
const submit = () => {
  console.log('submit',infoResult.value)
  UpdateCaseInfo(infoResult.value).then(res => {
    console.log(res)
    message.success('修改成功')
    closeInfoModal()
    reload()
  })
}
const closeInfoModal = () => {
  infoModal.value = false
  infoResult.value = {}
}
const closeHistoryModal = () => {
  historyModal.value = false
}
</script>
<style lang="less" scoped>
</style>
