<template>
    <div class="content">
        <div class="top-banner banner terms-banner">
            <div class="flex-column align-center justify-center content">
                <p class="banner-title text-ct white" aria-live="assertive">약관 및 정책</p>
                <p class="box-title text-ct white">AI 디지털교과서 통합지원센터의 정보보호 및 이용 정책</p>
            </div>
        </div>
        <PageNavigationBar :navi="naviData" />
        <div class="pt100 pb100">
            <div class="w1280">
                <div>
                    <ul class="edu-tab flex justify-between align-center pd10 border radius mb30">
                        <li v-for="(type, idx) in tabType" :key="idx"
                            :class="{ 'gd-3 pd10 radius text-ct cursor': true, 'active': checkType === type.id }"
                            @click.stop="userTypeActive(type.id)" tabindex="0"  @keydown.enter.space="userTypeActive(type.id)">
                            {{ type.name }}
                        </li>
                    </ul>
                    <div class="content pt30 pb30">
                        <div v-show="checkType === 'use'">
                            <div class="flex justify-between align-center border-b mb30 pb10 no-gutters">
                                <div class="middle-title pb0 gd-8">
                                    <p>이용약관</p>
                                </div>
                                <div class="flex justify-start align-center gd-4">
                                    <div class="gd-7 pl0">
                                        <p class="text-rg">이전 이용약관 확인</p>
                                    </div>
                                    <div class="gd-5 pr0">
                                        <select name="" id="" class="full-select ml0">
                                            <option value="1.0">Version 1.0</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="border pd30">
                                <terms-1></terms-1>
                            </div>
                        </div>
                        <div v-show="checkType === 'privacy'">
                            <div class="flex justify-between align-center border-b mb30 pb10 no-gutters">
                                <div class="middle-title pb0 gd-8">
                                    <p>개인정보 처리방침</p>
                                </div>
                                <div class="flex justify-start align-center gd-4">
                                    <div class="gd-7 pl0">
                                        <p class="text-rg">이전 개인정보 처리방침 확인</p>
                                    </div>
                                    <div class="gd-5 pr0">
                                        <select name="" id="" class="full-select ml0">
                                            <option value="1.0">Version 1.0</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <Privacy />
                        </div>
                        <div v-show="checkType === 'email'">
                            <div class="flex justify-between align-center border-b mb30 pb10 no-gutters">
                                <div class="middle-title pb0 gd-8">
                                    <p>이메일 무단수집거부</p>
                                </div>
                                <div class="flex justify-start align-center gd-4">
                                    <div class="gd-7 pl0">
                                        <p class="text-rg">이전 이메일 무단수집거부 확인</p>
                                    </div>
                                    <div class="gd-5 pr0">
                                        <select name="" id="" class="full-select ml0">
                                            <option value="1.0">Version 1.0</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <Email />
                        </div>
                        <div v-show="checkType === 'copyright'">
                            <div class="flex justify-between align-center border-b mb30 pb10 no-gutters">
                                <div class="middle-title pb0 gd-8">
                                    <p>저작권 정책</p>
                                </div>
                                <!-- <div class="flex justify-start align-center gd-4">
                                    <div class="gd-7 pl0">
                                        <p class="text-rg">이전 이용약관 확인</p>
                                    </div>
                                    <div class="gd-5 pr0">
                                        <select name="" id="" class="full-select ml0">
                                            <option value="1.0">Ver_1.0</option>
                                        </select>
                                    </div>
                                </div> -->
                            </div>
                            <div class="border pd30">
                                <Copyright />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import ProgressBar from '../../../component/progressbar/ProgressBar.vue';
import PageNavigationBar from '../../../component/pagenavigationbar/PageNavigationBar.vue';
import Email from '../../../component/terms/Email.vue';
import Privacy from '../../../component/terms/Privacy .vue';
import Terms1 from '../../../component/terms/Terms1.vue';
import Copyright from '../../../component/terms/Copyright.vue';

export default {
    props: {
        type: {
            type: String,
            required: true
        }
    },
    data() {
        return {
            tabType: [{ id: 'use', name: '이용약관' }, { id: 'privacy', name: '개인정보 처리방침' }, { id: 'email', name: '이메일 무단수집거부' }, { id: 'copyright', name: '저작권 정책' }],
            checkType: null,
            naviData: {},
        };
    },
    methods: {
        userTypeActive: function (type) {
            this.naviData.main = '약관 및 정책';
            if (type == 'use') {
                this.naviData.sub = '이용약관';
            } else if (type == 'privacy') {
                this.naviData.sub = '개인정보 처리방침';
            } else if (type == 'email') {
                this.naviData.sub = '이메일 무단수집거부';
            } else if (type == 'copyright') {
                this.naviData.sub = '저작권 정책';
            }
            this.checkType = type
        }
    },
    watch: {
        '$route.query.type': {
            immediate: true,
            handler(newType) {
                this.userTypeActive(newType);
            }
        }
    },
    computed: {},
    components: {
        'ProgressBar': ProgressBar,
        'Terms1': Terms1,
        'Privacy': Privacy,
        'Email': Email,
        'PageNavigationBar': PageNavigationBar,
        'Copyright': Copyright
    },
    created() {
        this.naviData = {};
    },
    mounted() {
        const type = this.$route.query.type;
        this.naviData = { 'main': '', 'sub': '' };
        this.naviData.main = '약관 및 정책';
        if (type === 'use') {
            this.checkType = type;
            this.naviData.sub = '이용약관';
        } else if (type === 'privacy') {
            this.checkType = type;
            this.naviData.sub = '개인정보 처리방침 ';
        } else if (type === 'email') {
            this.checkType = type;
            this.naviData.sub = '이메일 무단수집거부';
        } else if (type === 'copyright') {
            this.checkType = type;
            this.naviData.sub = '저작권 정책';
        }
    },
    beforeDestroy() {

    },
};

</script>
