<template>
  <!-- <el-button @click="exportJson">导出json</el-button>
    <el-button @click="importJson">导入json</el-button> -->
  <div class="header-box" id="header-box">
    <div class="left-box">
      <span class="name">{{ flowName }}</span>
      <!-- <span class="line">|</span>
      <span class="version">版本：</span> -->
      <el-select
        v-if="type === 'review'"
        @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>
      <span v-if="reportDetailInfo?.templateType">
        分析方向：{{ DISCIPLINE_TYPE.O[reportDetailInfo.templateType] }}
      </span>
      <span v-if="reportDetailInfo?.comment"> 备注：{{ reportDetailInfo.comment }} </span>
    </div>
  </div>
  <div class="flow-view-box" v-loading="contentLoading">
    <ReportEdit
      v-if="reportDetailInfo.fileId"
      ref="reportEditRef"
      v-model:data="reportDetailInfo.templateContent"
      :fileId="reportDetailInfo.fileId"
      mode="input"
      :preview="type === 'review' || type === 'approve'"
    />
  </div>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { ElMessage } from 'element-plus';
import { useDict } from '@/utils/useDict';
import { queryReportTemplateInfoApi, queryReportTemplateVersionApi } from '@/api/capability/report';
import ReportEdit from './reportEdit/index.vue';

const props = defineProps({
  reportUuid: {
    type: String,
    default: '',
  },
  reportFileId: {
    type: String,
    default: '',
  },
  type: {
    type: String,
    default: 'review',
  },
});

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

const flowName = ref('');

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(currentVersion.value.uuid);
    }
  } else {
    ElMessage.error(res.message);
  }
};

const changeVersionFun = () => {
  getReportDetail(currentVersion.value.uuid);
};

const contentLoading = ref(false);

const reportDetailInfo = ref<any>({});

const getReportDetail = async (uuid: string) => {
  contentLoading.value = true;
  const res: any = await queryReportTemplateInfoApi({ uuid: uuid });
  if (res.code === 200) {
    reportDetailInfo.value = res.data;
    if (!res.data.templateContent || res.data.templateContent?.length < 10) {
      reportDetailInfo.value.templateContent = [];
    } else {
      reportDetailInfo.value.templateContent = JSON.parse(res.data.templateContent);
    }
  } else {
    ElMessage.error(res.message);
  }
  contentLoading.value = false;
};

onMounted(async () => {
  if (props.type === 'review') {
    await getReportVersionOptions();
  }
  if (props.type === 'approve') {
    getReportDetail(props.reportUuid);
  }
});
</script>
<style lang="scss">
.flow-view-box {
  height: calc(100% - 45px);
}
#header-box {
  padding: 0;
  height: auto;
  margin-bottom: var(--margin-medium);
  .left-box {
    display: flex;
    align-items: center;
    width: 500px;
    span {
      display: inline-block;
      flex-shrink: 0;
      margin-right: var(--margin-medium);
    }
  }
  .select-box {
    width: 200px;
    flex-shrink: 0;
    margin-right: var(--margin-medium);
  }
}
</style>
