<template>
  <div class="min-h-screen flow-root" style="background: #f9f9f9">
    <div style="height: 50px; margin-bottom: 20px"></div>
    <syHeaderNavBar
      class="fixed top-0 left-0 right-0"
      @close="router.push('/tracingManagement')"
      @back="router.back"
    >
      <div class="flex items-center justify-between">
        <div>{{ template?.name }}</div>
        <div class="mr-40">
          <syButton mode="elementBtn" type="default" @click="addTemplate">
            保存存证</syButton
          >
          <syButton mode="elementBtn" type="primary" @click="saveTemplate">
            保存模板</syButton
          >
        </div>
      </div>
    </syHeaderNavBar>
    <div style="height: calc(100vh - 70px); width: 100%">
      <TemplateEdit
        v-if="template"
        ref="syTraceProofEditRef"
        :name="template?.name"
        :navigate="navigate"
        :route="$route"
        :go="go"
        :showTip="showTip"
        :detail="template?.detail"
        :note="template?.note"
        :id="template?.id"
        :increasementProof="false"
      ></TemplateEdit>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted, provide, ref } from "vue";
import { GO_URLS, syHeaderNavBar, syScrollBar, syButton } from "cqk-sy-ui";
import { useRoute } from "vue-router";
import { router } from "@/router";
import { $ajax } from "@/service";
import { showTip } from "@/components/GlobalMount/api";
import TemplateEdit from "@/components/TemplateEdit/TraceProofEdit/index.vue";

const syTraceProofEditRef = ref<any>();

const headerTitle = ref("");
const route = useRoute();
const templateId = route.query.id as string;
const navigate = router.push;
const go = router.go;

const template = ref<any>();

provide("tracingDetail", {
  transform: computed(() => true),
});

onMounted(async () => {
  const res = await $ajax({
    type: "get",
    url: GO_URLS.getSystemTemplate,
    params: {
      id: templateId,
    },
  });
  template.value = res?.data;
});

const saveTemplate = async () => {
  if (route.query.type === "sys") {
    syTraceProofEditRef.value.CreateTemplate();
  } else {
    syTraceProofEditRef.value.updateCustomize();
  }
};

const addTemplate = async () => {
  syTraceProofEditRef.value.addTemplate();
};
</script>

<style lang="scss" scoped></style>
