<template>
    <div class="nus_agreement">
        <template v-if="content">
            <component :is="content"></component>
        </template>
        <div class="nu_agreement-wrapper" v-else-if="contentData">
            <div class="nu_wrapper-context">
                <h2>{{contentData.nameText}}</h2>
                <div class="nu_text">{{contentData.subNameText}}</div>
                <div class="nu_text" v-html="contentData.info"></div>
                <template v-if="contentData.content && contentData.content.length">
                    <dl
                        v-for="(contItem, index) in contentData.content"
                        :key="index">
                        <dt v-html="contItem.nameText"></dt>
                        <template v-if="contItem.list && contItem.list.length">
                            <dd
                                v-for="(item, index1) in contItem.list"
                                :key="index1">
                                <div class="nu_content-index" v-html="item.label"></div>
                                <div class="nu_content-note">
                                    <span v-html="item.text"></span>
                                    <div
                                        class="nu_text"
                                        v-for="(subItem, index2) in item.list"
                                        :key="index2"
                                        v-html="subItem.text">
                                    </div>
                                </div>
                            </dd>
                        </template>
                    </dl>
                </template>
            </div>
        </div>
    </div>
</template>

<script>
import { USER_PAGE_TYPE } from 'nimble-lib';
// import contentData from './contentData';

export default {
    props: {
        content: {},
        contentData: {
            // default() {
            //     return contentData;
            // }
        }
    },
    mounted () {
        this.$emit('openPage', USER_PAGE_TYPE.AGREEMENT);
    }
};
</script>


<style lang="scss">
@import '../../../_assets/style/_iconFont.scss';
@import '../../../_assets/style/_var.scss';
@import '../../../_assets/style/_mixin.scss';

.nus_agreement {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    .nu_agreement-wrapper{
        width:100%;
        height:100%;
        max-width:630px;
        margin:0 auto;
        position:relative;
        font-size: 12px;
        font-family: "微软雅黑";
    }
    .nu_wrapper-context{
        /* position:absolute; */
        top:0;
        bottom:0;
        padding:10px;
        overflow: auto;
    }
    h2 {
        width: 100%;
        text-align: center;
        font-size: 1.5em;
        font-weight: bold;
    }
    .nu_text {
        margin: 0;
        line-height: 16px;
        text-align: justify;
        text-indent: 24px;
        &:nth-child(2) {
            text-indent: 29px;
        }
    }
    dl{
        dt{
            margin: 0 0 5px;
        }
        dd {
            line-height: 16px;
            margin: 5px 0 0 16px;
            display: -webkit-flex;
            display: flex;
            div {
                text-align: justify;
                &:first-of-type {
                    margin-right: 14px;
                    display: block;
                }
            }
        }
    }
    .nu_content-note {
        margin-left: -5px;
    }
}

</style>

