<template>
  <div v-loading="loading" class="flx-center">
    <div class="container">
      <div class="breadcrumb">
        <span class="current">当前位置:</span>
        <el-breadcrumb :separator-icon="ArrowRight">
          <el-breadcrumb-item :to="{ path: previousPage }">{{ previousName }}</el-breadcrumb-item>
          <el-breadcrumb-item>{{ route.query?.FTITLE }}</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <el-divider />
      <div style="min-height: 400px">
        <div v-dompurify-html="html"></div>
        <!-- <el-empty description="暂无数据" /> -->
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { menuList } from '@/Layout/config'
import { ArrowRight } from '@element-plus/icons-vue'
import { getCommonDetail, getGuideGuidance } from '@/services/api/common'

const router = useRouter()
const route = useRoute()
const previousPage = ref()
const previousName = ref()
const loading = ref(true)
const html = ref()

onMounted(async () => {
  // 获取上个跳转的路由
  previousPage.value = router.options.history.state.back as string
  previousName.value = menuList.filter((item: any) => item.link === previousPage.value)[0]?.name
  const { FormType, FID, Type } = route.query
  if (Type) {
    const res: any = await getGuideGuidance({ Type })
    if (res.code === 200) {
      loading.value = false
      html.value = res.data.FRICHTEXT_Tag
    }
  } else {
    const res: any = await getCommonDetail({ FormType, FID })
    if (res.code === 200) {
      loading.value = false
      html.value = res.data.FRICHTEXT_Tag
    }
  }
})
</script>

<style lang="scss" scoped>
.container {
  width: 1316px;
  background: #ffffff;
  padding: 46px 36px 54px;
  margin-top: 26px;
  box-sizing: border-box;

  .breadcrumb {
    font-size: 12px;
    font-weight: 400;
    color: #666666;
    display: flex;
    align-items: center;
    .current {
      margin-right: 8px;
    }
  }
}
</style>
