<template>
  <Dialog v-model="diaVisible" diaTitle="编辑报告" width="80%" height="90%" @close="closeFun">
    <div class="content">
      <!-- <div v-if="!(historyData?.length > 0)" class="chose-report"> -->
      <div class="chose-report">
        <el-select
          v-model="reportData"
          value-key="uuid"
          placeholder="请选择报告模板"
          @change="setReportDataFun"
        >
          <el-option
            v-for="item in reportList"
            :key="item.uuid"
            :label="item.templateName"
            :value="item"
          />
        </el-select>
      </div>
      <div class="report-content">
        <ReportEdit
          v-if="reportFileId"
          ref="ReportEditRef"
          v-model:data="reportDataContent"
          :valueList="historyData"
          :fileId="reportFileId"
          mode="input"
        />
        <div v-else class="no-report">暂无报告模板</div>
      </div>
    </div>
    <template #footer>
      <div>
        <el-button @click="closeFun">关闭</el-button>
        <el-button type="primary" @click="saveFun(false)" :disabled="!reportFileId">保存</el-button>
        <el-button type="primary" @click="saveFun(true)" :disabled="!reportFileId">
          保存并下载
        </el-button>
      </div>
    </template>
  </Dialog>
</template>

<script setup lang="ts">
import { ref, watch, nextTick } from 'vue';
import Dialog from '@/components/common/dialog/index.vue';
import { queryReportTemplateApi } from '@/api/capability/report';
import { editReportApi, editReportAndDownloadApi, queryTaskRunApi } from '@/api/project/run';
import ReportEdit from '@/components/common/report/reportEdit/index.vue';
import { ElMessage } from 'element-plus';

interface Props {
  modelValue: boolean;
  data: any;
}

const props = withDefaults(defineProps<Props>(), {
  modelValue: false,
  data: {},
});

watch(
  () => props.modelValue,
  (val: boolean) => {
    diaVisible.value = val;
    if (val) {
      initFun();
    } else {
      resetFun();
    }
  }
);

const emit = defineEmits(['update:modelValue']);
const reportData = ref<any>('');
const reportDataId = ref<any>('');
const reportDataContent = ref<any>({});
const reportFileId = ref<any>('');
const diaVisible = ref(false);

const initFun = () => {
  getReportListFun();
};

const reportList = ref<any>([]);
const getReportListFun = () => {
  const params = {
    current: 1,
    size: 999,
    type: '1',
  };
  queryReportTemplateApi(params).then((res: any) => {
    if (res.code === 200) {
      reportList.value = res.data.data;
      getRunDetailFun();
    }
  });
};

const historyData = ref<any>([]);
const getRunDetailFun = () => {
  const params = {
    runId: props.data.uuid,
  };
  queryTaskRunApi(params).then((res: any) => {
    if (res.code === 200) {
      // 编辑过算例报告的获取historyData
      historyData.value = JSON.parse(res.data[0]?.reportContent);
      if (historyData.value) {
        // 匹配对应的报告模版数据data
        const data = reportList.value.find((i: any) => i.uuid === res.data[0].reportTemplate);
        if (!data) {
          return;
        }
        reportData.value = data;
        setReportDataFun(data);
      }
    }
  });
};

const setReportDataFun = (data: any) => {
  reportFileId.value = '';
  nextTick(() => {
    const { templateContent, fileId, uuid } = data;
    reportDataContent.value = JSON.parse(templateContent);
    reportDataId.value = uuid;
    reportFileId.value = fileId;
  });
};

const ReportEditRef = ref<any>();
const saveFun = (download: boolean) => {
  const fileName = reportData.value.templateName + '.docx';
  const data = ReportEditRef.value?.getFormatDataFun();
  const params = {
    runId: props.data.uuid,
    reportTemplate: reportDataId.value,
    reportContent: JSON.stringify(data),
    fileName,
  };
  let api: any = editReportApi;
  if (download) {
    api = editReportAndDownloadApi;
  }
  api(params).then(() => {
    ElMessage.success('操作成功');
    closeFun();
  });
};

const resetFun = () => {
  reportData.value = '';
  reportDataId.value = '';
  reportDataContent.value = {};
  reportFileId.value = '';
};

const closeFun = () => {
  emit('update:modelValue', false);
};
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .chose-report {
    width: 200px;
    height: 32px;
  }
  .report-content {
    width: 100%;
    flex: 1;
    .no-report {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      color: var(--el-text-color-primary);
    }
  }
}
</style>
