<template>
  <BasicTable class="w-4/4 xl:w-5/5" @register="registerTable">
    <template #toolbar>
      <a-button type="primary" @click="openFeedbackDrawer">设备定损与反馈</a-button>
      <a-button type="primary" @click="openDeviceBindingModal">设备绑定码</a-button>
    </template>
    <template #bodyCell="{ column, record }">
      <template v-if="column.key === 'action'">
        <TableAction
          :actions="[
            {
              icon: 'ant-design:file-search-outlined',
              onClick: () => {
              },
            },
            {
              icon: 'carbon:calendar-tools',
              onClick: () => {
              },
            },
          ]"
        />
      </template>
    </template>
  </BasicTable>
  <a-drawer class="feedback-drawer" v-model:open="feedbackDrawer" width="80%" :closable="false">
    <FeedbackDrawer />
  </a-drawer>
  <a-modal v-model:open="deviceBindingModal" title="设备绑定码" @ok="handleOk">
    <DeviceBindModal />
  </a-modal>
</template>

<script setup lang="ts">
import { ref } from "vue"
import { BasicTable, useTable, TableAction } from '@/components/Table';
import { columns, dataSource, searchFormSchema } from './utils'
import FeedbackDrawer from './FeedbackDrawer/index.vue'
import DeviceBindModal from './DeviceBindModal/index.vue'

const feedbackDrawer = ref(false)
const deviceBindingModal = ref(false)
const [registerTable, { reload, expandAll, getForm}] = useTable({
  title: '机场',
  // api: (params) => LoadCaseInfoLists(type,params),
  dataSource,
  columns,
  rowKey: 'id',
  formConfig: {
    labelWidth: 100,
    schemas: searchFormSchema,
  },
  striped: false,
  // 序号列
  showIndexColumn: false,
  // 使用搜索表单
  useSearchForm: true,
  // 显示表格设置工具
  showTableSetting: true,
  bordered: true,
  beforeFetch(data) {
    let params = {...data}
    if(!params.nowStatus){
      params.nowStatus = '复提待审核'
    }
    return params
  },
  afterFetch(data) {
    console.log('afterFetch', data);
  },
  actionColumn: {
    width: 100,
    title: '操作',
    dataIndex: 'action',
  },
  handleSearchInfoFn(info) {
    return info;
  },
});
const openFeedbackDrawer = () => {
  feedbackDrawer.value = true
}
const openDeviceBindingModal = () => {
  deviceBindingModal.value = true
}
</script>

<style lang="scss" scoped>
// .feedback-drawer{
//   :deep(.ant-drawer-body){
//     padding: 0px;
//   }
// }
// </style>
// <style lang="scss">
// .feedback-drawer{
//   .ant-drawer-body{
//     padding: 0px;
//   }
// }
</style>
