<template>
  <div style="height: 100%">
    <vxe-grid
      ref="tableRef"
      v-bind="gridOptions"
      :loading="loading"
      :check-config="{ highlight: true }"
      :column-config="{ resizable: true }"
      :row-config="{ isCurrent: true, isHover: true }"
    >
      <template #content_default="{ row }">
        <div class="cell-content">{{ row.content }}</div>
      </template>
      <template #item_default="{ row }">
        <div class="cell-content">{{ row.item }}</div>
      </template>
      <template #fileName_default="{ row }">
        <vxe-button mode="text" size="small" status="primary" @click="showFileContent(row)">
          <div class="cell-content"> {{ row.fileName }}</div>
        </vxe-button>
      </template>
      <template #caName_default="{ row }">
        {{ row.caNames }}
      </template>
    </vxe-grid>
  </div>

  <FileViewerModal @register="registerShowFileContentModal" :useStaticPrefixForDocx="true" />
</template>

<script lang="ts" setup>
  import { ref, reactive } from 'vue';
  import { useModal } from '/@/components/Modal';

  import { getAllCheckMethodByItem } from '../api/AuditCheckMethodItem.api';
  import FileViewerModal from '/@/components/onlinePreview/FileViewerModal.vue';

  const [registerShowFileContentModal, { openModal: openFileContentModel }] = useModal();

  const loading = ref(false);

  const gridOptions = reactive({
    border: true,
    showOverflow: false,
    loading: false,
    checkboxConfig: { checkStrictly: true },
    cellConfig: {
      height: 100,
    },
    columnConfig: {
      useKey: false,
      resizable: true,
    },

    columns: [
      { field: 'content', title: '检查项', showOverflow: 'title', sortable: true, slots: { default: 'content_default' } },
      { field: 'item', title: '条目', showOverflow: 'title', sortable: true, width: '20%', slots: { default: 'item_default' } },
      { field: 'fileName', title: '参考文件', showOverflow: 'title', sortable: true, width: '25%', slots: { default: 'fileName_default' } },
      { field: 'caNames', title: '控制项', width: '20%', sortable: true, slots: { default: 'caName_default' } },
    ],
    data: [],
  });
  const emit = defineEmits(['callBackAct']);
  async function iniData(rowData) {
    const retData = await getAllCheckMethodByItem(rowData);
    gridOptions.data = retData;
  }

  function showFileContent(row) {
    if (row.filePath) {
      openFileContentModel(true, {
        record: row,
        isUpdate: false,
        showFooter: true,
      });
    }
  }
  defineExpose({
    iniData,
  });


</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; /* 设置伸缩盒子的排列方向为垂直 */
    -webkit-line-clamp: 3; /* 限制行数为 3 行 */
    overflow: hidden; /* 隐藏超出部分 */
  }
</style>
