<template>
  <BasicModal
    v-bind="$attrs"
    @register="registerModal"
    destroyOnClose
    :title="title"
    @cancel="handleCancel"
    :centered="true"
    :useWrapper="true"
    :footer="null"
  >
    <div style="background-color: #ececec; padding: 5px; overflow-y: auto">
      <a-row :gutter="8">
        <a-col :span="!isCollapsedLeft ? 8 : 4">
          <div :style="{ overflow: 'hidden', height: '87vh' }">
            <FileViewer 
              ref="refShowFileCotent" 
              @toggle-collapse="toggleCollapseLeft" 
              :showToggleCollapse="true"
            />
          </div>
        </a-col>
        <a-col :span="isCollapsed ? (isCollapsedLeft ? 17 : 13) : isCollapsedLeft ? 13 : 9">
          <div :style="{ overflow: 'hidden', height: '87vh' }">
            <a-card :bordered="false" :loading="loading" contentFullHeight="true" style="height: 100%; overflow-y: auto">
              <template #extra>
                <a-button type="link" @click="handleSubmit()">保存</a-button>
              </template>
              <BasicForm @register="registerForm" />
            </a-card>
          </div>
        </a-col>
        <a-col :span="!isCollapsed ? 7 : 3">
          <div :style="{ overflow: 'hidden', height: '87vh', background: '#fff' }">
            <a-card
              :bordered="false"
              contentFullHeight="true"
              :loading="loading"
              style="height: 100%; overflow-y: hidden"
              :bodyStyle="{ height: '100%', padding: '10px 0px', margin: '0px 10px' }"
            >
              <template #title><span>已添加风险事件</span></template>
              <template #extra
                ><a href="#" @click="toggleCollapse">{{ isCollapsed ? '<展开' : '收起>' }}</a></template
              >
              <vxe-table
                :data="tableData"
                ref="tableRef"
                size="small"
                show-overflow
                :show-radio="true"
                :row-config="{ isCurrent: true, isHover: true }"
                @current-change="currentChangeEvent"
                :columnConfig="{ resizable: true }"
                :scroll-y="{ enabled: true, gt: 50 }"
                :radio-config="{ highlight: true }"
                height="90%"
              >
                <vxe-column type="seq" width="60" />
                <vxe-column field="riskEventName" width="40%" title="事件" />
                <vxe-column field="riskEventDesc" title="描述" />
                <vxe-column title="操作" width="100" show-overflow>
                  <template #default="{ row }">
                    <vxe-button mode="text" icon="vxe-icon-delete" @click="handleDelete(row)" />
                  </template>
                </vxe-column>
              </vxe-table>
            </a-card>
          </div>
        </a-col>
      </a-row>
    </div>
  </BasicModal>
</template>

<script lang="ts" setup>
  import { ref, computed, unref } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { BasicForm, useForm } from '/@/components/Form/index';
  import { formSchema } from '../data/AuditRiskEvent.data';
  import { deleteOne, saveOrUpdate } from '../api/AuditRiskEvent.api';
  import FileViewer from '/@/components/onlinePreview/FileViewer.vue';
  // Emits声明
  const emit = defineEmits(['register', 'success']);
  const isDetail = ref(false);
  const isUpdate = ref(true);
  const tableData = ref([]);
  //表单配置
  const [registerForm, { setProps, resetFields, setFieldsValue, validate }] = useForm({
    //labelWidth: 150,
    schemas: formSchema,
    showActionButtonGroup: false,
    baseColProps: { span: 24 },
  });
  //表单赋值
  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
    //重置表单
    await resetFields();
    setModalProps({ confirmLoading: false, defaultFullscreen: true });
    isDetail.value = data?.isDetail;
    isUpdate.value = !!data?.isUpdate;
    tableData.value = [];

    if (unref(isUpdate)) {
      data.record['scid'] = data.record['scid'] + '';
      await setFieldsValue({
        ...data.record,
      });
    }
    if (!isUpdate.value) {
      tableData.value = data.allData;
    } else {
      if (data.allData) {
        if (data.record.fileId) {
          tableData.value = data.allData.filter((item) => item.fileId == data.record.fileId);
        } else {
          tableData.value = data.allData;
        }
      }
    }
    // fileId.value = data.docFile?.fileId || data.docFile?.id;
    // refShowFileCotent.value.setDocFile(data?.docFile);
    // 隐藏底部时禁用整个表单
    // setProps({ disabled: !data?.isDetail });
  });
  //设置标题
  const title = computed(() => (!unref(isUpdate) ? '新增' : '编辑'));
  //表单提交事件
  async function handleSubmit() {
    try {
      let values = await validate();
      setModalProps({ confirmLoading: true });
      //提交表单
      await saveOrUpdate(values, isUpdate.value);
      //关闭弹窗
      closeModal();
      //刷新列表
      emit('success', isUpdate.value, values);
    } finally {
      setModalProps({ confirmLoading: false });
    }
  }
  function handleCancel() {
    emit('success', isUpdate.value);
    closeModal();
  }
  const isCollapsed = ref(false);
  const isCollapsedLeft = ref(false);
  function toggleCollapse() {
    isCollapsed.value = !isCollapsed.value;
  }
  function toggleCollapseLeft() {
    isCollapsedLeft.value = !isCollapsedLeft.value;
  }
  function handleSuccess() {
    reload();
  }
  async function handleDelete(record) {
    await deleteOne({ id: record.id }, handleSuccess);
  }
  const curSelRowIndex = ref();
  const currentChangeEvent = async ({ rowIndex }) => {
    curSelRowIndex.value = rowIndex;
    const row = JSON.parse(JSON.stringify(tableData.value[rowIndex]));
    if (!row['labels'] || !row['labelNames']) {
      await resetFields();
    }
    await setFieldsValue({
      ...row,
    });
  };
</script>

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

  :deep(.ant-calendar-picker) {
    width: 100%;
  }
</style>
