<template>
    <app-layout :title="pageTitle">
        <div class="message-container">
            <view v-if="info.title.length > 0" class="head">
                <text class="title limit-line clamp-1">{{ info.title }}</text>
                <text v-if="info.date.length > 0" class="date">{{ info.date }}</text>
            </view>
            <view class="body" :class="{ mt40: info.title.length > 0 }">
                <rich-text :nodes="info.content"></rich-text>
            </view>
        </div>
    </app-layout>
</template>

<script>
import AppLayout from "@/components/layout/layout";
import { mapState } from "vuex";
export default {
    name: "detail-detail",
    data() {
        return {
            pageTitle: "",
            info: {
                title: "",
                date: "",
                content: "",
            },
        };
    },
    components: {
        AppLayout,
    },
    computed: {
        ...mapState({
            platformData: (state) => state.system.platformData,
        }),
    },
    async onLoad(e) {
        if (!e.type) {
            return this.$utils.toast("参数错误").then(() => {
                this.$utilst.toPage("", {}, "back");
            });
        }
        if (e.type == "about" || e.type == "privacy" || e.type == "service") {
            await this.$store.dispatch("system/platformData");
            if (e.type == "about") {
                this.pageTitle = "关于我们";
                this.info.content = this.platformData.about;
            } else if (e.type == "privacy") {
                this.pageTitle = "隐私政策";
                this.info.content = this.platformData.privacy;
            } else {
                this.pageTitle = "服务协议";
                this.info.content = this.platformData.service;
            }
        }
        this.info.content = this.info.content.replace(/\<img/gi, '<img style="max-width:100%;height:auto"');
        uni.setNavigationBarTitle({
            title: this.pageTitle,
        });
    },
    onShow() {},
    onReady() {},
    onHide() {},
    onReachBottom() {},
    onPullDownRefresh() {},
    onShareTimeline() {},
    onShareAppMessage() {},
    methods: {},
};
</script>

<style lang="less" scoped>
.message-container {
    width: 100%;
    box-sizing: border-box;
    padding: 40rpx;
    .head {
        width: 100%;
        font-size: 30rpx;
        font-weight: bold;
        line-height: 30rpx;
        .title {
            color: #333333;
        }
        .date {
            display: inline-block;
            color: #999999;
            margin-top: 24rpx;
        }
    }
    .body.mt40 {
        margin-top: 40rpx;
    }
}
</style>