<template>
  <div class="gl-page-content no-padding flow-content">
    <!-- <el-button @click="exportJson">导出json</el-button>
    <el-button @click="importJson">导入json</el-button> -->
    <div class="header-box">
      <div class="left-box">
        <img class="back" @click="goBack" src="@/assets/imgs/dragFlow/back.svg" alt="" />
        <span class="name">{{ reportDetail.templateName }}</span>
        <span class="line">|</span>
        <span class="version">版本：</span>
        <el-select
          @change="changeVersionFun"
          class="select-box"
          value-key="uuid"
          v-model="currentVersion"
        >
          <el-option
            v-for="item in reportVersionOptions"
            :key="item.uuid"
            :label="item.templateVersion + '（' + FLOW_APPROVE_STATUS.O[item.approveType] + '）'"
            :value="item"
          />
        </el-select>
      </div>
      <div class="right-box">
        <el-button v-if="operationType !== FLOW_OPERATION_TYPE.UPGRADE" @click="saveDraftFun()"
          >保存草稿</el-button
        >
        <el-button type="primary" @click="openApproveDiaFun">提交评审</el-button>
      </div>
    </div>
    <div id="report-box">
      <ReportEdit
        v-if="reportDetail.fileId"
        ref="reportEditRef"
        v-model:data="reportDetail.templateContent"
        :fileId="reportDetail.fileId"
        mode="edit"
      />
    </div>
    <ApproveDialog
      v-model:showDialog="showApproveDia"
      :uuid="currentVersion?.uuid"
      :reportDetail="reportDetail"
      :operationType="operationType"
      @saveDraft="saveDraftFun"
      :templateVersion="reportDetail.templateVersion"
      :upgradeReportInfo="upgradeReportInfo"
    ></ApproveDialog>
  </div>
</template>
<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue';
import { ElMessage } from 'element-plus';
import ApproveDialog from './approveDialog.vue';
import ReportEdit from '@/components/common/report/reportEdit/index.vue';
import { FLOW_OPERATION_TYPE } from '@/utils/enum/flow';
import { useDict } from '@/utils/useDict';
import {
  queryReportTemplateInfoApi,
  queryReportTemplateVersionApi,
  updateReportTemplateApi,
} from '@/api/capability/report';

const props = defineProps({
  reportUuid: {
    type: String,
    default: '',
  },
  // operationType: {
  //   type: FLOW_OPERATION_TYPE,
  // },
  operationType: {
    type: String,
    default: FLOW_OPERATION_TYPE.CREATE,
  },
  upgradeReportInfo: {
    type: Object,
    default: () => {},
  },
});

const emits = defineEmits(['goBack']);

const { FLOW_APPROVE_STATUS } = useDict('FLOW_APPROVE_STATUS');

const currentVersion = ref<any>();

const reportVersionOptions = ref<any[]>([]);

const getReportVersionOptions = async () => {
  const res: any = await queryReportTemplateVersionApi({ uuid: props.reportUuid });
  if (res.code === 200) {
    reportVersionOptions.value = res.data.map((item: any) => {
      return {
        templateVersion: item.templateVersion,
        approveType: item.approveType,
        uuid: item.uuid,
      };
    });
    if (reportVersionOptions.value.length > 0) {
      currentVersion.value = reportVersionOptions.value[reportVersionOptions.value.length - 1];
      getReportDetail();
    }
  } else {
    ElMessage.error(res.message);
  }
};

const changeVersionFun = () => {
  getReportDetail();
};

const reportDetail = reactive<any>({
  uuid: '',
  version: '',
  comment: '',
  templateName: '',
  templateType: '',
  templateContent: '',
});

const getReportDetail = async () => {
  const res: any = await queryReportTemplateInfoApi({ uuid: currentVersion.value.uuid });
  if (res.code === 200) {
    for (const key in res.data) {
      reportDetail[key] = res.data[key];
    }
    if (!res.data.templateContent || res.data.templateContent?.length < 10) {
      reportDetail.templateContent = [];
    } else {
      reportDetail.templateContent = JSON.parse(res.data.templateContent);
    }
  } else {
    ElMessage.error(res.message);
  }
};

const goBack = () => {
  emits('goBack');
};

const saveDraftFun = async (callback?: () => void) => {
  const formData = new FormData();
  formData.append('templateVersion', reportDetail.templateVersion);
  formData.append('templateName', reportDetail.templateName);
  formData.append('templateType', reportDetail.templateType);
  formData.append('comment', reportDetail.comment);
  formData.append('uuid', reportDetail.uuid);
  formData.append('id', reportDetail.id);
  formData.append('templateContent', JSON.stringify(reportDetail.templateContent));
  if (reportDetail.extras) {
    formData.append('extras', reportDetail.extras);
  }
  formData.append('fileId', reportDetail.fileId);
  const res: any = await updateReportTemplateApi(formData);
  if (!callback) {
    if (res.code === 200) {
      ElMessage.success('保存成功');
    } else {
      ElMessage.error(res.message);
    }
  }
  if (callback) {
    callback();
  }
};

const showApproveDia = ref(false);

const openApproveDiaFun = () => {
  showApproveDia.value = true;
};

onMounted(async () => {
  await getReportVersionOptions();
});
</script>
<style lang="scss" src="./reportCreate.scss" scoped></style>
