<template>
    <div class="team-boxed">
        <div class="container">
            <div class="intro">
                <h2 id='RuleWelcome' class="text-center">{{lang.rulePage.welcome}} </h2>

                <div id="RuleDesc"></div>
            </div>

        </div>
    </div>
</template>

<script>
import { mapGetters } from "vuex";
import "../assets/css/Team-Boxed.css";
import "../assets/css/Team-Clean.css";
export default {
    data() {
        return {};
    },
    mounted: function () {
        this.createdRuleText();
    },
    computed: {
        ...mapGetters({
            lang: "getLang",
        }),
    },
    watch: {
        lang: function (val) {
            this.initLang();
        },
    },
    events: {
        "lang-change": function (lang) {
            this.initLang(lang);
        },
    },
    methods: {
        initLang: function (lang) {},
        createdRuleText() {
            var tempText = this.lang.rulePage.desc;

            var spiltRow = tempText.split("|");

            var tempHtmlText = "";
            for (var i = 0; i < spiltRow.length; i++) {
                tempHtmlText += `<p class ="ruleRow">${spiltRow[i]}</p>`;
            }

            document.getElementById("RuleDesc").innerHTML = tempHtmlText;
        },
    },
};
</script>

<style >
#RuleWelcome {
    color: white;
}

.team-boxed {
    color: white;
    background-color: #1b2738;
}

.item1 {
    cursor: pointer;
}

.team-boxed .item1 .box {
    text-align: center;
    padding: 30px;
    background-color: #1b2738;
    margin-bottom: 30px;
}
.team-boxed .item1 {
    text-align: center;
    box-shadow: 10px 10px 15px #1b2738;
}
.team-boxed .item1 {
    text-align: center;
    box-shadow: 10px 10px 35px black;
}

.ruleRow {
    text-align: left;
    color: white !important;
}
</style>