<template>
  <div>
    <a-drawer
      title="查看详情"
      placement="right"
      width="100%"
      style="margin: 10px"
      :visible="showDrawer"
      @close="closeDrawer"
      :style="{ position: 'absolute' }"
    >
      <template #extra>
        <a-button style="margin-right: 8px" type="link" @click="closeDrawer">关闭</a-button>
      </template>
      <div style="background-color: #ececec; padding: 10px; height: 100%">
        <a-row :gutter="16" style="height: 100%">
          <a-col :span="8">
            <div style="height: 100%; background: #fff">
              <a-descriptions
                title=""
                bordered
                :column="1"
                :labelStyle="{ color: 'blue' }"
                layout="vertical"
                style="width: 100%; max-height: 80vh; overflow-y: auto"
              >
                <a-descriptions-item label="检查项">
                  <div v-html="curCheckMethod?.content"></div>
                </a-descriptions-item>
                <a-descriptions-item label="合规条目">
                  <div v-html="curCheckMethod?.item"></div>
                </a-descriptions-item>
                <a-descriptions-item label="合规内容">
                  <div style="max-height: 30vh; overflow-y: auto">
                    <span v-html="curCheckMethod?.complineContent"></span>
                  </div>
                </a-descriptions-item>
                <a-descriptions-item label="控制项">
                  <template v-if="curCheckMethod?.actNames">
                    <span v-for="item in curCheckMethod.actNames.split(',')" :key="item">
                      <span v-html="item"></span>
                    </span>
                  </template>
                </a-descriptions-item>
                <a-descriptions-item label="参考文件">
                  <a-button type="link" @click="handleShowFile()">
                    <span v-html="curCheckMethod?.fileName"></span>
                  </a-button>
                </a-descriptions-item>
                <a-descriptions-item label="说明">
                  <span v-html="curCheckMethod?.checkDes"></span>
                </a-descriptions-item>
              </a-descriptions>
            </div>
          </a-col>
          <a-col :span="16">
            <a-card title="检查项包含的检查点" :bordered="false" style="height: 100%; display: flex; flex-direction: column">
              <template #extra>
                <a-button type="primary" @click="saveData" style="margin-right: 10px">保存</a-button>
              </template>
              <vxe-table
                keep-source
                ref="tableRef"
                :data="list"
                max-height="750"
                :show-radio="true"
                :row-config="{ isCurrent: true, isHover: true, height: 70, useKey: true, resizable: true }"
                :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true }"
                :column-config="{ resizable: true, useKey: true }"
                :scroll-y="{ enabled: true, gt: 50 }"
                :radio-config="{ labelField: 'name', highlight: true }"
              >
                <vxe-column type="seq" width="50" row-resize />

                <vxe-column field="tp" width="9%" sortable :filters="tpOptions" :filter-multiple="true" type="html" title="分类" row-resize>
                  <template #default="{ row }">
                    {{ setRowTpName(row) }}
                  </template>
                </vxe-column>
                <vxe-column field="name" sortable title="检查方法" width="25%" type="html" row-resize />
                <vxe-column field="desc" title="备注" width="8%" type="html" row-resize />
                <vxe-column
                  field="situation"
                  sortable
                  title="当前现状"
                  :edit-render="{ autofocus: '.my-input', autoselect: true }"
                  min-width="20%"
                  row-resize
                >
                  <template #edit="{ row }">
                    <vxe-textarea v-model="row.situation" />
                  </template>
                </vxe-column>
                <vxe-column
                  field="issues"
                  sortable
                  title="存在问题"
                  :edit-render="{ autofocus: '.my-input', autoselect: true }"
                  min-width="20%"
                  row-resize
                >
                  <template #edit="{ row }">
                    <vxe-textarea v-model="row.issues" type="text" />
                  </template>
                </vxe-column>
                <vxe-column
                  field="score"
                  sortable
                  title="得分"
                  :edit-render="{ autofocus: '.my-input', autoselect: true }"
                  min-width="13%"
                  row-resize
                >
                  <template #edit="{ row }">
                    <a-rate v-model:value="row.score" allow-half />
                  </template>
                  <template #default="{ row }">
                    <a-rate v-model:value="row.score" allow-half />
                  </template>
                </vxe-column>
                <vxe-column field="id" title="" :visible="false" />
              </vxe-table>
            </a-card>
          </a-col>
        </a-row>
      </div>
    </a-drawer>
    <a-drawer title="" placement="left" width="50%" :mask="true" style="margin: 10px" :visible="showFileDrawer" @close="closeFileDrawer">
      <template #extra>
        <a-button style="margin-right: 8px" type="link" @click="closeFileDrawer">关闭</a-button>
      </template>
      <FileViewer ref="refShowFile" />
    </a-drawer>
  </div>
</template>

<script setup lang="ts">
  import { ref, nextTick } from 'vue';
  import { getProjectItems } from '../AuditProjectItem.api';
  import { queryAllReports, batchAddOrUpdate } from '/@//views/newlib/components/api/AuditTaskReport.api';
  import type { VxeTablePropTypes } from 'vxe-table';
  import FileViewer from '/@/components/onlinePreview/FileViewer.vue';

  const list = ref([]);
  const emit = defineEmits(['callback']);
  const refShowFile = ref();

  const showDrawer = ref(false);
  const tpOptions = ref();
  const curCheckMethod = ref();
  const tableRef = ref();

  const curProject = ref();

  const showFileDrawer = ref(false);

  async function iniData(check, project, tpOpt) {
    curProject.value = project;
    //check.actNames = getHTMLText(check.actNames)
    curCheckMethod.value = check;
    tpOptions.value = tpOpt;
    let params = {
      checkid: check.checkid,
      pid: project.id,
    };
    list.value = await getProjectItems(params);
    let reprotExists = await queryAllReports(params);
    list.value.forEach(function (ele) {
      let report = reprotExists[ele.id];
      if (report) {
        ele['situation'] = report.situation;
        ele['issues'] = report.issues;
        ele['score'] = report.score;
        ele['reportId'] = report.id;
      }
    });

    showDrawer.value = true;
  }

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

  async function saveData() {
    const $table = tableRef.value;
    if (!$table) return;
    let formDataAry = [];
    const updateRows = $table.getUpdateRecords();
    updateRows.forEach((element) => {
      let formData = {};
      formData['id'] = element.reportId;
      formData['checkid'] = element.checkid;
      formData['checkItemTp'] = element.tp;
      formData['checkItemId'] = element.id;
      formData['projectid'] = curProject.value.id;
      formData['situation'] = element.situation;
      formData['issues'] = element.issues;
      formData['score'] = element.score;
      formDataAry.push(formData);
    });

    await batchAddOrUpdate(formDataAry);
    await $table.clearEdit();
    //closeDrawer();
  }

  function handleShowFile() {
    showFileDrawer.value = true;
    let fileObj = {
      fileName: curCheckMethod.value.fileName,
      fileId: curCheckMethod.value.fileId,
      fileTp: curCheckMethod.value.fileTp,
      filePath: curCheckMethod.value.filePath,
    };
    nextTick(async () => {
      await refShowFile.value.setDocFile(fileObj);
    });
  }

  function closeFileDrawer() {
    showFileDrawer.value = false;
  }

  async function editCancel() {
    const $table = tableRef.value;
    if (!$table) return;
    await $table.clearEdit();
  }

  const setRowTpName = (row) => {
    const foundOption = tpOptions.value.find((option) => option.value * 1 === row.tp * 1);
    return foundOption?.label;
  };

  const getHTMLText = (data) => {
    if (!data) return '';
    const regex = /<span[^>]*>(.*?)<\/span>/;
    const match = data.match(regex);
    if (match) {
      return match[1];
    }
    return '';
  };
  defineExpose({
    iniData,
  });
</script>

<style lang="scss" 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: 2; /* 限制行数为 10 行 */
    overflow: hidden; /* 隐藏超出部分 */
  }
</style>
