<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="7">
            <a-card title="检查点" :bordered="false" style="height: 100%; overflow-y: hidden">
              <a-descriptions title="" bordered :column="1" style="width: 100%; max-height: 70vh; overflow-y: auto">
                <a-descriptions-item label="检查项">{{ curCheckMethod.content }}</a-descriptions-item>
                <a-descriptions-item label="合规条目">{{ curCheckMethod.item }}</a-descriptions-item>
                <a-descriptions-item label="合规内容">
                  <div style="max-height: 30vh; overflow-y: auto">
                    {{ curCheckMethod.complineContent }}
                  </div>
                </a-descriptions-item>
                <a-descriptions-item label="控制项">
                  <template v-if="curCheckMethod?.caNames">
                    <span v-for="item in curCheckMethod.caNames.split(',')" :key="item">
                      <a-button type="link">{{ item }}</a-button>
                    </span>
                  </template>
                </a-descriptions-item>
                <a-descriptions-item label="参考文件">
                  <a-button type="link" @click="handleShowFile()">{{ curCheckMethod.fileName }}</a-button>
                </a-descriptions-item>

                <a-descriptions-item label="说明">{{ curCheckMethod?.checkDes }}</a-descriptions-item>
              </a-descriptions>
            </a-card>
          </a-col>
          <a-col :span="17">
            <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>
                <a-button style="margin-right: 8px" @click="editCancel">取消</a-button>
              </template>
              <vxe-table
                border
                keep-source
                ref="tableRef"
                :data="list"
                max-height="750"
                :show-radio="true"
                :row-config="{ isCurrent: true, isHover: true, height: 70,useKey:true }"
                :edit-config="{ trigger: 'click', mode: 'cell' }"
                :column-config="{ resizable: true,useKey:true }"
                :scroll-y="{ enabled: true, gt: 50 }"
                :radio-config="{ labelField: 'name', highlight: true }"
              >
                <vxe-column type="seq" width="50" />

                <vxe-column field="tp" width="8%" sortable :filters="tpOptions" :filter-multiple="true" type="html" title="分类">
                  <template #default="{ row }">
                    <span>{{ formatTp(row) }}</span>
                  </template>
                </vxe-column>
                <vxe-column field="name" sortable title="检查方法" width="15%" type="html" />
                <vxe-column
                  field="situation"
                  sortable
                  title="当前现状"
                  :edit-render="{ autofocus: '.my-input', autoselect: true }"
                  type="text"
                  min-width="20%"
                >
                  <template #edit="{ row }">
                    <vxe-textarea v-model="row.situation" type="text" placeholder="请输入内容" size="small" clearable :rows="6" />
                  </template>
                </vxe-column>
                <vxe-column
                  field="issues"
                  sortable
                  title="存在问题"
                  :edit-render="{ autofocus: '.my-input', autoselect: true }"
                  type="text"
                  min-width="20%"
                >
                  <template #edit="{ row }">
                    <vxe-textarea v-model="row.issues" type="text" placeholder="请输入内容" size="small" clearable :rows="6" />
                  </template>
                </vxe-column>
                <vxe-column
                  field="score"
                  sortable
                  title="得分"
                  :edit-render="{ autofocus: '.my-input', autoselect: true }"
                  type="text"
                  min-width="10%"
                >
                  <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>
      <ShowFileContent ref="refShowFile" />
    </a-drawer>
  </div>
</template>

<script setup lang="ts">
  import { ref, nextTick } from 'vue';
  import { queryAllCheckItems } from '/@/views/newlib/components/api/AuditCheckMethodItem.api';
  import { queryAllReports, batchAddOrUpdate } from '/@/views/newlib/components/api/AuditTaskReport.api';
  import type { VxeColumnPropTypes, VxeTablePropTypes } from 'vxe-table';
  // import ShowFileContent from './modal/ShowFileContent.vue';

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

  const showDrawer = ref(false);

  const curCheckMethod = ref();
  const tableRef = ref();

  const showFileDrawer = ref(false);

  interface RowVO {
    id: number;
    checkName: string;
    tp: string;
    name: string;
    situation: string;
    issues: number;
    score: string;
  }

  const mergeCells = ref<VxeTablePropTypes.MergeCells<RowVO>>([]);

  async function iniData(data) {
    curCheckMethod.value = data;
    let params = {
      checkid: data.checkid,
    };
    list.value = await queryAllCheckItems(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;
      }
    });

    //list.value =list.value.concat( list.value)

    showDrawer.value = true;
    // mergeCells.value.push({ row: 0, col: 1, rowspan:list.value.length, colspan: 1 })
  }

  const formatTp = (row) => {
    return row.tp == 1 ? '工具要求' : row.tp == 2 ? '记录要求' : '制度要求';
  };

  const tpOptions = ref([
    { label: '工具要求', value: 1 },
    { label: '记录要求', value: 2 },
    { label: '制度要求', value: 3 },
  ]);

  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['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();
  }

  defineExpose({
    iniData,
  });
</script>

<style lang="less" 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>
