<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">
            <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="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>
                <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 }"
           
                  :edit-config="{trigger: 'click', mode: 'cell'}"
                  :columnConfig="{ resizable: 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>
                  <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"></vxe-textarea>
                    </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"></vxe-textarea>
                    </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>
      <FileViewer ref="refShowFile"></FileViewer>
    </a-drawer>
</div>
</template>

<script setup lang="ts">
  import { ref, nextTick } from 'vue';
  import { queryAllCheckItems } from './api/AuditCheckMethodItem.api';
  import { queryAllReports,batchAddOrUpdate } from './api/AuditTaskReport.api';
  import type { VxeColumnPropTypes,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 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="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>

