<template>
  <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
    <el-card shadow="hover">
      <el-menu :default-active="activeMenu" :popper-offset="16" class="el-menu-popper-demo" ellipsis mode="horizontal" style="max-width: 100%">
        <el-menu-item index="1" @click="showMenu(1)" :disabled="!basicEnabled">模版基础信息定义</el-menu-item>
        <el-menu-item index="2" @click="showMenu(2)" :disabled="!tempEnabled">模版附件管理</el-menu-item>
        <el-menu-item index="3" @click="showMenu(3)" :disabled="!testEnabled">打印预览</el-menu-item>
      </el-menu>
    </el-card>
  </transition>
  <Template-Basic v-if="basicShow" ref="templateBasicRef" @processing-complete="onProcessingComplete"></Template-Basic>
  <Template-Module v-if="tempShow" ref="templateModuleRef"></Template-Module>
  <Template-View v-if="testShow" ref="templateViewRef"></Template-View>

  <el-card v-if="basicShow" shadow="hover">
    <el-button v-hasPermi="['print:temp:edit']" v-if="haveFlag" icon="Edit" type="primary" @click="handleEdit">修改</el-button>
    <el-button v-hasPermi="['print:temp:add']" v-if="!haveFlag" icon="Plus" type="primary" @click="handleAdd">新增</el-button>
    <el-button icon="Refresh" @click="handleClose">返回</el-button>
  </el-card>

  <el-card v-if="tempShow" shadow="hover">
    <el-row style="margin-top: 20px">
      <el-button v-hasPermi="['print:temp:next']" type="primary" icon="ArrowRight" size="mini" style="margin-left: 20px" @click="handleNext">下一步</el-button>
    </el-row>
  </el-card>

  <el-card v-if="testShow" shadow="hover">
    <el-row>
      <el-button v-hasPermi="['print:temp:preview']" type="primary" icon="View" size="mini" style="margin-left: 20px" @click="handlePreview">预览</el-button>
      <el-button v-hasPermi="['print:temp:downloadmsg']" type="primary" icon="Download" size="mini" style="margin-left: 20px" @click="downLoadMsg">下载报文样例</el-button>
      <el-button v-hasPermi="['print:temp:completed']" type="primary" icon="Check" size="mini" style="margin-left: 20px" @click="handleCompleted">定义完成</el-button>
    </el-row>
  </el-card>
</template>

<script lang="ts" name="TempConstructDetail" setup>
import TemplateBasic from '@/views/print/template/module/TempBasic.vue';
import TemplateModule from '@/views/print/template/module/TemplateModule.vue';
import TemplateView from '@/views/print/template/module/TemplateView.vue';
import { quryTemplateInfoByTempId } from '@/api/print/template';
import { RouteLocationNormalized } from 'vue-router';

const router = useRouter();

const { proxy } = getCurrentInstance() as ComponentInternalInstance;

const haveFlag = ref(false);
const activeMenu = ref(null);
const basicShow = ref(true);
const tempShow = ref(false);
const testShow = ref(false);
const basicEnabled = ref(false);
const tempEnabled = ref(false);
const testEnabled = ref(false);
const templateBasicRef = ref<InstanceType<typeof TemplateBasic>>();
const templateModuleRef = ref<InstanceType<typeof TemplateModule>>();
const templateViewRef = ref<InstanceType<typeof TemplateView>>();
const templateId = ref(null);
const showMenu = (value) => {
  // 默认所有显示为 false
  basicShow.value = false;
  tempShow.value = false;
  testShow.value = false;

  // 根据传入的 value 设置对应的显示状态为 true
  switch (value) {
    case 1:
      basicShow.value = true;
      activeMenu.value = '1';
      break;
    case 2:
      tempShow.value = true;
      activeMenu.value = '2';
      break;
    case 3:
      testShow.value = true;
      activeMenu.value = '3';
      break;
    default:
      return;
  }
};

const handleAdd = () => {
  templateBasicRef.value.handleAdd(() => {
    const newPath = `/print/template/printTempConstruct/templatDetail/${templateId.value}`;
    const routeObj = { path: newPath };
    proxy?.$tab.closePage();
    proxy?.$tab.refreshPage(routeObj);
    // loadingPage();
  });
};

const handleEdit = async () => {
  await proxy?.$modal.confirm('修改模版信息，对应的附件信息、附件参数、参数原值将被删除，是否修改？').finally();
  templateBasicRef.value.handleEdit(() => {
    // 子组件的 handleEdit 完成后执行的代码
    afterBasic();
  });
};
const afterBasic = () => {
  basicEnabled.value = true;
  tempEnabled.value = true;
  testEnabled.value = false;
  showMenu(2);
  templateModuleRef.value.getTemp(templateId.value);
};
const handleNext = async () => {
  await templateModuleRef.value.nextStep(() => {
    afterTemp();
    templateViewRef.value.loadingPage(templateId.value);
  });
};

const handlePreview = async () => {
  await templateViewRef.value.handlePreview();
};
const handleCompleted = async () => {
  await templateViewRef.value.handleCompleted();
};

const afterTemp = () => {
  basicEnabled.value = true;
  tempEnabled.value = true;
  testEnabled.value = true;
  showMenu(3);
};

const handleClose = () => {
  templateBasicRef.value.handleClose();
};
/**
 * 下载报文样例
 */
const downLoadMsg = () => {
  proxy?.download(
    'print/parameterPreviewValues/downLoadMsg',
    {
      templateId: templateId.value
    },
    `msg_${templateId.value}_${new Date().getTime()}.txt`
  );
};
const onProcessingComplete = (data) => {
  templateId.value = data.code;
};

const loadingPage = async () => {
  basicEnabled.value = true;
  tempEnabled.value = false;
  testEnabled.value = false;
  const res = await quryTemplateInfoByTempId(templateId.value);
  if (res.data.versionRequestStatus == '01') {
    tempEnabled.value = true;
    showMenu(2);
  }
  if (res.data.versionRequestStatus == '04' || res.data.versionRequestStatus == '05') {
    tempEnabled.value = true;
    testEnabled.value = true;
    showMenu(3);
  }
};



onMounted(() => {
  const route = useRoute();
  const loadtemplateId = route.params.templateId as string | undefined;
  if (loadtemplateId) {
    templateId.value = loadtemplateId;
    haveFlag.value = true;
    loadingPage();
  } else {
    showMenu(1);
    basicEnabled.value = true;
  }
});
</script>
