<template>
  <a-layout class="layout">
    <a-layout-sider
      :width="siderWidth"
      style="background: #fff; height: 80vh"
      class="resizable-sider"
      :style="{ maxWidth: `${maxSiderWidth}px`, minWidth: `${minSiderWidth}px` }"
    >
      <div class="sider-content">
        <RuleListLeft ref="refRuleListLeft" @rowChangeEvent="leftRowChangeEvent" />
      </div>
      <div class="resizer" @mousedown="onMouseDown"></div>
    </a-layout-sider>
    <a-layout-content class="content">
      <vxe-grid
        size="small"
        ref="tableRef"
        auto-resize
        keep-source
        height="auto"
        v-bind="gridOptions"
        :loading="loading"
        :check-config="{ highlight: true }"
        :columnConfig="{ resizable: true }"
        :row-config="{ isCurrent: true, isHover: true }"
      >
        <template #item_default="{ row }">
          <vxe-button mode="text" status="primary" @click="handleShowDrawer(row)">
            <span class="cell-content">{{ row.item }}</span>
          </vxe-button>
        </template>
        <template #fileName_default="{ row }">
          <vxe-button mode="text" size="small" status="primary" @click="showFileContent(row)">
            <span class="cell-content"> {{ row.fileName }}</span>
          </vxe-button>
        </template>
        <template #caName_default="{ row }">
          <template v-for="(item, ind) in row.caNames?.split(',')" :key="ind">
            <a-popover placement="topRight">
              <template #content>
                <a-row style="max-width: 300px; text-align: center; overflow: auto; max-height: 30vh">
                  <a-col v-for="(ite, idx) in row.caNames?.split(',')" :key="idx" style="">
                    <vxe-button mode="text" @click="handleClickCaName(ite)">{{ ite }}</vxe-button>
                  </a-col>
                </a-row>
              </template>
              <vxe-button mode="text" @click="handleClickCaName(item)">{{ item }}</vxe-button>
            </a-popover>
          </template>
        </template>
      </vxe-grid>
    </a-layout-content>
    <a-drawer
      title="详情"
      placement="bottom"
      height="60%"
      :visible="showDrawer"
      :get-container="false"
      @close="closeDrawer"
      :style="{ position: 'absolute' }"
    >
      <a-descriptions title="" bordered :column="1">
        <a-descriptions-item label="条目">{{ desData?.item }}</a-descriptions-item>
        <a-descriptions-item label="内容">{{ desData?.content }}</a-descriptions-item>
        <a-descriptions-item label="控制项">{{ desData?.caNames }}</a-descriptions-item>
        <a-descriptions-item label="参考文件">
          <a @click="showFileContent(desData)">{{ desData?.fileName }}</a>
        </a-descriptions-item>
      </a-descriptions>
    </a-drawer>
  </a-layout>
  <FileViewerModal @register="registerShowFileContentModal" :useStaticPrefixForDocx="true" />
</template>

<script lang="ts" setup>
  import { ref, nextTick, reactive } from 'vue';
  import { useRouter } from 'vue-router';
  import { VXETable } from 'vxe-table';
  import { useModal } from '/@/components/Modal';
  import RuleListLeft from './components/RuleListLeft.vue';
  import { getAllCheckMethodByItem } from './components/api/AuditCheckMethodItem.api';
  import FileViewerModal from '/@/components/onlinePreview/FileViewerModal.vue';

  const [registerShowFileContentModal, { openModal: openFileContentModel }] = useModal();
  const refRuleListLeft = ref();
  const loading = ref(false);
  const showDrawer = ref(false);
  const desData = ref();

  const siderWidth = ref(760); // 初始宽度
  const maxSiderWidth = 900; // 最大宽度
  const minSiderWidth = 600; // 最小宽度

  const gridOptions = reactive({
    border: true,
    showOverflow: false,
    loading: false,
    checkboxConfig: { checkStrictly: true },
    columnConfig: {
      useKey: false,
      resizable: true,
    },
    toolbarConfig: {
      export: true,
      custom: true,
    },
    columns: [
      { type: 'seq', width: '50' },
      { field: 'content', title: '检查项', sortable: true },
      { field: 'item', title: '条目', showOverflow: 'title', sortable: true, width: '25%', slots: { default: 'item_default' } },
      { field: 'fileName', title: '参考文件', showOverflow: 'title', sortable: true, width: '25%', slots: { default: 'fileName_default' } },
      { field: 'caNames', title: '控制项', sortable: true, width: '20%', slots: { default: 'caName_default' } },
    ],
    data: [],
  });
  const emit = defineEmits(['callBackAct']);

  function handleSearch() {}

  function refresh() {}

  function iniLeftData() {
    refRuleListLeft.value.iniData();
  }

  async function leftRowChangeEvent(rowData) {
    closeDrawer();
    let retData = await getAllCheckMethodByItem(rowData);
    gridOptions.data = retData;
  }

  function handleClickCaName(caName) {
    emit('callBackAct', caName, 2);
  }

  function handleShowDrawer(row) {
    desData.value = {
      item: row.item,
      content: row.complineContent,
      caNames: row.caNames,
      fileName: row.fileName,
      filePath: row.filePath,
      fileId: row.fileId,
      fileTp: row.fileTp,
    };
    showDrawer.value = true;
  }

  function closeDrawer() {
    showDrawer.value = false;
  }

  function showFileContent(row) {
    if (row.filePath) {
      openFileContentModel(true, {
        record: row,
        isUpdate: false,
        showFooter: true,
      });
    }
  }
  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);
  };

  defineExpose({
    iniLeftData,
    handleSearch,
    refresh,
  });
</script>

<style scope>
  .layout {
    background: #fff;
    height: calc(90vh - 120px);
    margin: 0px 0px 0px 0px;
    overflow: hidden;
    min-height: 400px;
  }
  .ant-descriptions-item-label {
    width: 150px;
  }

  .cell-content {
    text-align: left;
    white-space: normal; /* 允许文本换行 */
    word-wrap: break-word; /* 按单词折行 */
    overflow-wrap: break-word; /* 按单词折行 */
    max-width: 100%; /* 根据需要设置最大宽度 */
    display: -webkit-box; /* 使元素成为一个伸缩盒子模型 */
    -webkit-box-orient: vertical; /* 设置伸缩盒子的排列方向为垂直 */

  }
  
  .resizable-sider {
    position: relative;
    background: #f0f2f5;
  }

  .sider-content {
    background-color: #fff;
    padding: 0 16px;
    height: calc(90vh - 88px);
    overflow-y: auto;
  }

  .resizer {
    position: absolute;
    top: 0;
    right: 0;
    width: 5px;
    height: 100%;
    cursor: ew-resize;
    background-color: #d9d9d9;
  }
  .content {
    background: #fff;
    padding: 0 16px;
    /* height: calc(90vh - 100px);
    overflow-y: auto; */
  }
  ::-webkit-scrollbar {
    /* 隐藏滚动条 */
    display: none;
  }
</style>
