<template>
  <Dialog
    v-model="visible"
    diaTitle="生成报告"
    :width="'80%'"
    :height="'80%'"
    :zIndex="100"
    @close="handleCloseFun"
  >

    <div class="report-page">
      <div class="form-box">
        <el-form :model="reportFormData" inline>
          <el-form-item label="报告名称：">
            <el-input v-model="reportFormData.reportName"></el-input>
          </el-form-item>
          <el-form-item >
            <el-button type="primary" @click="createSuccessFun">生成</el-button>
            <el-button type="">刷新</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="content-box">
        <el-form>
          <el-form-item label="图片选择：">
            <div class="img-content">
              <div class="img-item" v-for="item in resultImgList" :key="item.id">
                <el-checkbox v-model="item.checkImg" class="check-style" size="large" />
                <el-image
                  class="img-style"
                  title="点击预览图片"
                  :src="item.url"
                  :zoom-rate="1.2"
                  :max-scale="7"
                  :min-scale="0.2"
                  :preview-src-list="[item.url]"
                  show-progress
                  :initial-index="4"
                  fit="cover"
                />
              </div>

            </div>

          </el-form-item>
          <el-form-item label="指标选择：">
            <taskPerformance ref="taskPerformanceRef" :task-info="currentNodeInfo" :run-info="currentNodeInfo" :param-type="currentNodeInfo?.nodeType"></taskPerformance>
          </el-form-item>
        </el-form>
      </div>

    </div>

  </Dialog>

</template>

<script setup lang="ts">
import { ref, reactive, defineProps, defineEmits, onMounted } from 'vue';
import Dialog from '@/components/common/dialog/index.vue';
import dayjs from 'dayjs';
import taskPerformance from '@/components/taskDetail/taskPerformance.vue';
import { generateReportApi, listSimulationKeyResultApi } from '@/api/project/run';
import { downloadFile } from '@/utils/file';

const env = import.meta.env;

const props = defineProps({
  currentNodeInfo: {
    type: Object,
    default: () => {},
  },
  parentNodeInfo: {
    type: Object,
    default: () => {},
  },
});

const emits = defineEmits(['close']);
const visible = ref(true);
const taskPerformanceRef = ref();
const reportFormData = reactive<any>({
  reportName: '',
});

const handleCloseFun = () => {
  emits('close');
};

const createSuccessFun = async () => {
  console.log(props.currentNodeInfo);

  const performanceList = taskPerformanceRef.value.baseTableRef.tableRef.getCheckboxRecords();

  const chcekImgs = resultImgList.value.filter((item:any) => {
    return item.checkImg;
  });
  const imageFileIdList = chcekImgs.map((item:any) => {
    return item.fileId;
  });
  const taskInfo = props.parentNodeInfo;
  for (const key in taskInfo) {
    if (key.includes('tag')) {
      delete taskInfo[key];
    }
  }
  delete taskInfo.children;
  const parentNodeInfoList = [taskInfo];
  const fileName = reportFormData.reportName + '.docx';
  await generateReportApi({
    performanceList,
    imageFileIdList,
    parentNodeInfoList,
    fileName,
  } );

};

const resultImgList = ref<any>([]);
const queryDirDataFun = async () => {
  const res: any = await listSimulationKeyResultApi({
    keyResultType: '1',
    runId: props.currentNodeInfo?.uuid,
    current: 1,
    size: 999,
  });
  if (res && res.code === 200) {
    resultImgList.value = res.data.data.map((item:any) => {
      return {
        ...item,
        url: `${env.VITE_API_IMAGE_PREVIEW_URL}/data/previewImage?fileId=${item.fileId}`,
      };
    });
  }
};

onMounted(async () => {
  await queryDirDataFun();
  reportFormData.reportName = '算例报告_' + dayjs().format('YYYY_MM_DD_HH_mm');
});

</script>

<style lang="scss" scoped>
.report-page{
    width: 100%;
    height: 100%;
    min-height: 500px;

    .form-box{
      width: 100%;
      height: 50px;
    }

    .content-box{

      .img-content{
        width: 100%;
        min-height: 200px;
        padding: 5px;
        display: flex;
        flex-wrap: wrap;

        .img-item{
          width: 150px;
          height: 150px;
          margin-right: 20px;
          margin-bottom: 20px;
          position: relative;
          box-sizing: content-box;
          border: 1px dashed var(--el-color-primary);

          .check-style{
            position: absolute;
            top: 0px;
            left: 5px;

          }

          .img-style{
          width: 150px;
          height: 150px;
        }

        }

      }

    }

}
</style>
