<template>
    <div  class="autoBox box" >
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: 'home' }">{{$t('common.Home')}}</el-breadcrumb-item>
                <el-breadcrumb-item :to="{ path: 'financialServices' }">{{$t('common.FinancialServices')}}</el-breadcrumb-item>
                <el-breadcrumb-item :to="{ path: 'FinancialServicesAgency' }">{{$t('common.FinancialServicesAgency')}}</el-breadcrumb-item>
                <el-breadcrumb-item>{{init.title}}</el-breadcrumb-item>
            </el-breadcrumb>

        </div>
        <div class="invesDetails">
            <h3 class="invesTitle">{{init.title}}</h3>
            <div v-html="init.contentHtml" class="invesContent"></div>
            <div style="font-size: 14px;color: #666666;margin-top: 20px">
                {{$t('common.ReleaseTime')}}：
                <span>{{formatDate(init.publishDate)}}</span>
            </div>
        </div>
    </div>
</template>
<script>
    import {getInformationById} from "../../api/baseUnitView";

    export default{
        name:'FinancialExampleContentDetails',
        data(){
            return{
                init:this.$route.query.key
            }
        },
        mounted() {
            console.log(this.init)
            this.getInit()
        },
        watch:{
            '$i18n.locale'(){
                this.getInit();

            },
        },
        methods:{
            getInit(){
                const params1={
                    baseId:this.$route.query.key,
                    language:this.$i18n.locale.toUpperCase(),
                };
                getInformationById(params1).then(res => {
                    console.log(res,'---------------------------')
                    this.init = res.data.cmsInformationView;


                });
            }
        }
    }
</script>
<style scoped>
    .box {
        margin-top: 10px;
        background: #fff;
        /* height: 500px; */
        padding: 20px 0;
    }
    .crumbs {
        margin-left: 20px;
    }
    body {
        margin: 0;
    }
    .invesDetails{
        margin-top: 30px;
        padding: 0 20px;
    }
    .invesTitle{
        text-align: center;
        font-size: 28px;
        color: #666666;
    }
    .invesContent{
        text-indent: 2em;
        color: #666666;
        font-size: 18px;
    }
    .invesContent >>>p{
        word-break: break-all;
    }
</style>