<template>
  <div>
    <BasicModal v-bind="$attrs" width="110rem" :height="heightNum" @register="register" title="调度日志"
      @cancel="handleCancel" :showOkBtn="false" destroyOnClose>
      <div>
        <BasicTable @register="registerTable">
          <template #toolbar>
            <Popconfirm title="您确定要清空全部数据" ok-text="确定" cancel-text="取消" @confirm="handleClear">
              <a-button type="primary"> 清空 </a-button>
            </Popconfirm>
            <Popconfirm title="您确定要批量删除数据" ok-text="确定" cancel-text="取消">
              <a-button type="primary" color="error" :disabled="hasBatchDelete">
                批量删除
              </a-button>
            </Popconfirm>
          </template>
          <template #action="{ record }">
            <TableAction :actions="[
              {
                label: '查看',
                icon: 'clarity:note-edit-line',
                onClick: handleView.bind(null, record),
              },
              {
                label: '删除',
                icon: 'ant-design:delete-outlined',
                color: 'error',
                popConfirm: {
                  title: '是否确认删除',
                  confirm: handleDeleteOrBatchDelete.bind(null, record),
                },
              },
            ]" />
          </template>
        </BasicTable>
        <ScheduleLogViewModal @register="registerModalScheduleLogView" />
      </div>
    </BasicModal>
  </div>
</template>
<script setup lang="ts">
import { ref, nextTick } from 'vue';
import { BasicModal, useModalInner } from '/@/components/Modal';
import { BasicTable, useTable, TableAction } from '/@/components/Table';
import { columnSchedue, searchSchedueFormSchema } from './config.data';
import { useBatchDelete } from '/@/hooks/web/useBatchDelete';
import {
  deleteSchedueLogManage,
  schedueLogPage,
  schedueLogCleanPage,
} from '/@/api/schedue/schedueManager';
import { Popconfirm } from 'ant-design-vue';
import { useMessage } from '/@/hooks/web/useMessage';
import ScheduleLogViewModal from './ScheduleLogViewModal.vue';
import { useModal } from '/@/components/Modal';

const { createMessage } = useMessage();
const heightNum = ref(800);
const [registerTable, { setProps, reload, getForm, setTableData }] = useTable({
  title: '调度日志列表',
  // api: schedueLogPage,
  columns: columnSchedue,
  showIndexColumn: false,
  clickToRowSelect: false,
  useSearchForm: true,
  ellipsis: true,
  showTableSetting: true,
  bordered: true,
  formConfig: {
    labelWidth: 120,
    schemas: searchSchedueFormSchema,
    fieldMapToTime: [['sendTime', ['startTime', 'endTime'], 'YYYY-MM-DD HH:mm:ss']],
  },
  rowKey: 'id',
  actionColumn: {
    width: 200,
    title: '操作',
    dataIndex: 'action',
    slots: { customRender: 'action' },
    fixed: 'right',
  },
});
// 刷新
const handleSuccess = () => {
  reload();
};
const { hasBatchDelete, handleDeleteOrBatchDelete, selectionOptions } = useBatchDelete(
  deleteSchedueLogManage,
  handleSuccess,
  setProps
);

const [register] = useModalInner(async (data) => {
  console.log(data.record)
  const res: any = await schedueLogPage({ jobId: data.record.id, page: 1, pageSize: 10 })
  nextTick(() => {
    console.log(res)
    setTableData(res.items)
    setProps(selectionOptions);
    setProps({
      rowKey: 'id',
    });
    //重置清空搜索表单
    const { resetFields } = getForm();
    resetFields();
  });
});
const handleCancel = () => { };
const handleClear = async () => {
  await schedueLogCleanPage();
  createMessage.success(`清空成功`);
  handleSuccess();
};
const [registerModalScheduleLogView, { openModal: openModalLogView }] = useModal();
const handleView = (record: Recordable) => {
  openModalLogView(true, {
    isUpdate: true,
    record,
  });
};
</script>
<style lang="less" scoped>
</style>