<template>
  <BasicModal v-bind="$attrs" @register="registerModal" destroyOnClose :title="title" :width="1500" @ok="handleSubmit">
    <a-layout class="layout">
      <a-layout-sider :width="siderWidth" class="resizable-sider">
        <div class="sider-content">
          <DocTree ref="registerLeftTree" @select-tree-node="setTreeNodeId" />
        </div>
        <div class="resizer" @mousedown="onMouseDown"></div>
      </a-layout-sider>
      <a-layout-content class="content">
        <BasicTable @register="registerTable" :rowSelection="rowSelection">
          <!--插槽:table标题-->
          <template #tableTitle>
            <a-button type="primary" @click="handleMutiAdd" preIcon="ant-design:cloud-upload-outlined">上传</a-button>
          </template>
          <!--操作栏-->
          <template #action="{ record }">
            <TableAction :actions="getTableAction(record)" :dropDownActions="getDropDownAction(record)" />
          </template>
          <!--字段回显插槽-->
          <template #htmlSlot="{ text }">
            <div v-html="text"></div>
          </template>
        </BasicTable>
      </a-layout-content>
    </a-layout>
    <DocMutiFilesModal @register="registerMutiModal" @success="handleSuccess" />
  </BasicModal>
</template>

<script lang="ts" setup>
  import { Modal } from 'ant-design-vue';
  import { useModal } from '/@/components/Modal';
  import { computed, ref, unref } from 'vue';
  import { saveOrUpdate } from '../StComplianeInfo.api';
  import { list, deleteOne, batchDelete, queryAllList } from '/@/views/doc/DocFiles.api';
  import { formSchema, columns, searchFormSchema } from '/@/views/doc/DocFiles.data';
  import { BasicForm, useForm } from '/@/components/Form/index';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { BasicTable, TableAction } from '/@/components/Table';
  import { useListPage } from '/@/hooks/system/useListPage';
  import DocTree from '/@/views/doc/components/DocTree.vue';
  import DocMutiFilesModal from '/@/views/doc/components/DocMutiFilesModal.vue';

  const [registerMutiModal, { openModal: openMutiModal }] = useModal();

  const ctp = ref();
  const fileList = ref([]);
  const lineData = ref({});

  const siderWidth = ref(375); // 初始宽度
  const maxSiderWidth = 480; // 最大宽度
  const minSiderWidth = 250; // 最小宽度
  const onMouseDown = (e: MouseEvent) => {
    const startX = e.clientX;
    const startWidth = siderWidth.value;

    const onMouseMove = (e: MouseEvent) => {
      const newWidth = startWidth + e.clientX - startX;
      if (newWidth >= minSiderWidth && newWidth <= maxSiderWidth) {
        siderWidth.value = newWidth;
      }
    };

    const onMouseUp = () => {
      document.removeEventListener('mousemove', onMouseMove);
      document.removeEventListener('mouseup', onMouseUp);
    };

    document.addEventListener('mousemove', onMouseMove);
    document.addEventListener('mouseup', onMouseUp);
  };
  //注册table数据
  const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({
    tableProps: {
      title: '文档管理',
      api: list,
      columns,
      canResize: false,
      size: 'small',
      striped: true,
      scroll: { y: 400 },
      formConfig: {
        //labelWidth: 120,
        schemas: searchFormSchema,
        autoSubmitOnEnter: true,
        showAdvancedButton: true,
        fieldMapToNumber: [],
        fieldMapToTime: [],
      },
      showActionColumn: false,
      actionColumn: {
        width: 120,
        fixed: 'right',
      },
      rowSelection: { type: 'radio' },
      beforeFetch(params) {
        if (ctp.value) {
          params['ctp'] = ctp.value;
        }
      },
    },
  });

  const [registerTable, { reload }, { rowSelection, selectedRowKeys }] = tableContext;
  // Emits声明
  const emit = defineEmits(['register', 'success', 'goItem']);
  const isUpdate = ref(true);
  const isDetail = ref(false);
  const props = defineProps({
    showfotterflag: { type: Boolean, default: true },
  });
  //表单配置
  const [registerForm, { setProps, resetFields, setFieldsValue, validate, updateSchema }] = useForm({
    //labelWidth: 150,
    // schemas: formSchema,
    // showActionButtonGroup: false,
    // baseColProps: { span: 24 },
  });
  //表单赋值
  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
    //重置表单
    // await resetFields();
    lineData.value = data.record;
    // setModalProps({ confirmLoading: false, showCancelBtn: !!data?.showFooter, showOkBtn: !!data?.showFooter });
    // isUpdate.value = !!data?.isUpdate;
    // isDetail.value = !data?.showFooter;
    // if (unref(isUpdate)) {
    //   //表单赋值
    //   await setFieldsValue({
    //     ...data.record,
    //   });
    // } else {
    //   await setFieldsValue({ complianeClass: data?.complianeClass });
    // }
  });
  //设置标题
  const title = computed(() => (!unref(isUpdate) ? '选择附件' : unref(isDetail) ? '选择附件' : '选择附件'));

  function setTreeNodeId(data) {
    if (data != null) {
      ctp.value = data.key;
      reload();
    }
  }

  function handleMutiAdd() {
    openMutiModal(true, {
      record: { ctp: ctp.value },
      isUpdate: false,
      showFooter: false,
    });
  }
  //表单提交事件
  async function handleSubmit(v) {
    try {
      lineData.value.fileUploadPath = rowSelection.selectedRows[0].filePath;
      await saveOrUpdate(lineData.value, isUpdate.value);
      // let values = await validate();
      // setModalProps({ confirmLoading: true });
      //提交表单
      // let complianeNo = await saveOrUpdate(values, isUpdate.value);
      // gotoItem(complianeNo, values);
      //关闭弹窗
      closeModal();
      //刷新列表
      emit('success');
    } finally {
      setModalProps({ confirmLoading: false });
    }
  }

  /**
   * 成功回调
   */
  function handleSuccess() {
    (selectedRowKeys.value = []) && reload();
  }
  /**
   * 操作栏
   */
  function getTableAction(record) {
    return [];
  }
  /**
   * 下拉操作栏
   */
  function getDropDownAction(record) {
    return [];
  }
</script>

<style lang="less" scoped>
  /** 时间和数字输入框样式 */
  :deep(.ant-input-number) {
    width: 100%;
  }

  :deep(.ant-calendar-picker) {
    width: 100%;
  }
  :deep(.ant-layout-sider) {
    background: #fff;
  }
  .layout {
    background: #fff;
    // height: calc(90vh - 85px);
    // overflow-y: auto;
    // margin: 10px 10px 1px 10px;
  }
  .sider-content {
    background: #fff;
    // padding: 16px;
    width: 375px;
    height: calc(90vh - 100px);
    overflow-y: auto;
  }
  .content {
    background: #fff;
    padding: 24px;
    /* height: calc(90vh - 100px);
    overflow-y: auto; */
  }
</style>
