<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)">模版基础信息定义</el-menu-item>
        <el-menu-item index="2" @click="showMenu(2)">模版附件管理</el-menu-item>
        <el-menu-item index="3" @click="showMenu(3)">打印预览</el-menu-item>
      </el-menu>
    </el-card>
  </transition>
  <Template-Basic v-if="basicShow" ref="templateBasicRef"></Template-Basic>
  <Template-Module v-if="tempShow" ref="templateModuleRef"></Template-Module>
  <Template-View v-if="testShow" ref="templateViewRef"></Template-View>

  <el-row shadow="hover" style="margin-top: 20px">
    <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:review:review']" type="primary" icon="Check" size="mini" style="margin-left: 20px" @click="handlePassed">审核通过</el-button>
    <el-button v-hasPermi="['print:review:review']" type="danger" icon="Close" size="mini" style="margin-left: 20px" @click="handleFailed">审核不通过</el-button>
  </el-row>
</template>

<script lang="ts" name="ShowViewDetail" 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 { templetPreview } from '@/api/print/template';
import { getPreviewFailed, getPreviewPassed } from '@/api/print/review';
import { RouteLocationNormalized } from 'vue-router';
import { LoadingInstance } from 'element-plus/es/components/loading/src/loading';

const route = useRoute();

const { proxy } = getCurrentInstance() as ComponentInternalInstance;

const activeMenu = ref('1');
const basicShow = ref(true);
const tempShow = ref(false);
const testShow = ref(false);
const templateId = ref(null);
const templateBasicRef = ref<InstanceType<typeof TemplateBasic>>();
const templateModuleRef = ref<InstanceType<typeof TemplateModule>>();
const templateViewRef = ref<InstanceType<typeof TemplateView>>();

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 handlePreview = async () => {
  let LoadingInstance: LoadingInstance;
  LoadingInstance = ElLoading.service({ text: '正在处理数据，请稍后', background: 'rgba(0, 0, 0, 0.7)' });
  const res = await templetPreview(templateId.value);
  if (res.code === 200) {
    LoadingInstance.close();
    await proxy?.$download.oss(res.data.ossId);
  } else {
    LoadingInstance.close();
    proxy?.$modal.msgError(res.msg);
  }
};

const handlePassed = async () => {
  let LoadingInstance: LoadingInstance;
  LoadingInstance = ElLoading.service({ text: '正在处理数据，请稍后', background: 'rgba(0, 0, 0, 0.7)' });
  const res = await getPreviewPassed(templateId.value);
  LoadingInstance.close();
  if (res.code === 200) {
    proxy?.$modal.msgSuccess('处理成功');
    proxy?.$modal.alert('审核通过后版本仍未启动，如需启用版本，请在版本管理节点启用本版本');
    ClosePage();
  } else {
    proxy?.$modal.msgError(res.msg);
  }
};

const handleFailed = async () => {
  try {
    // 弹出输入框让用户填写原因
    const { value: reason } = await ElMessageBox.prompt('请输入审核不通过原因', '审核不通过', {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      inputType: 'textarea',
      inputPlaceholder: '请详细说明不通过原因...',
      inputValidator: (value) => {
        if (!value) {
          return '请录入审核回退原因';
        }
        return true;
      }
    });

    // 用户确认后调用接口
    const loadingInstance = ElLoading.service({
      text: '正在提交审核结果',
      background: 'rgba(0, 0, 0, 0.7)'
    });

    const res = await getPreviewFailed({
      templateId: templateId.value,
      reason: reason.trim() // 传递审核原因
    });

    loadingInstance.close();

    if (res.code === 200) {
      proxy?.$modal.msgSuccess('审核不通过已提交');
      ClosePage();
    } else {
      proxy?.$modal.msgError(res.msg || '提交失败');
    }
  } catch (error) {
    // 用户点击取消或关闭弹窗
    if (error !== 'cancel') {
      proxy?.$modal.msgError('操作失败: ' + error);
    }
  }
};

const ClosePage = () => {
  const obj: RouteLocationNormalized = {
    fullPath: '',
    hash: '',
    matched: [],
    meta: undefined,
    name: undefined,
    params: undefined,
    query: undefined,
    redirectedFrom: undefined,
    path: '/print/temp/printReview'
  };
  proxy?.$tab.closeOpenPage(obj);
};

onMounted(() => {
  const route = useRoute();
  const loadtemplateId = route.params.templateId as string | undefined;
  if (loadtemplateId) {
    templateId.value = loadtemplateId;
  }
});
</script>
