<template>
    <div class="terms-wrap">
        <div class="page-title mb40">
            <h2 class="page-sub-title">약관동의</h2>
        </div>
        <div class="terms-use mb40">
            <div class="flex justify-between align-center">
                <h3 class="content-title2 mb20">이용약관 안내</h3>
                <router-link :to="{path:'/aidt/terms/view.page', query: { type: 'use' }}" target="_blank" class="link-text">이용약관
                    전문보기</router-link>
            </div>
            <div class="terms-content overflow-y mb24 radius">
                <Terms1 />
            </div>
            <div>
                <div class="mb5 check-group flex justify-start align-center">
                    <input type="radio" name="agreeInput1" id="agreement1" v-model="agreeTerms" :value="true"
                        @change="handleAgreeTerms" />
                    <label for="agreement1" class="detail-text inline-block ml5">이용약관에 동의합니다.</label>
                </div>
                <div class="check-group flex justify-start align-center">
                    <input type="radio" name="agreeInput1" id="nonAgreement1" v-model="agreeTerms" :value="false"
                        @change="handleAgreeTerms" />
                    <label for="nonAgreement1" class="detail-text inline-block ml5">이용약관에 미동의합니다.</label>
                </div>
            </div>
        </div>
        <div class="terms-privacy mb40">
            <div class="flex justify-between align-center">
                <h3 class="content-title2 mb20">개인정보 수집·이용 동의</h3>
                <router-link :to="{path:'/aidt/terms/view.page', query: { type: 'privacy' }}" target="_blank"
                    class="link-text">개인정보
                    처리방침 전문보기</router-link>
            </div>

            <div class="terms-content overflow-y mb24 radius">
                <ul>
                    <li class=" mb10">
                        <p class="detail-text">1. 개인정보의 수집·이용 목적 : AI 디지털교과서 통합지원센터 홈페이지 서비스 제공(회원 관리, 민원 처리, 서비스 개선)
                        </p>
                    </li>
                    <li class=" mb10">
                   
                        <table class="terms-table">
                            <caption class="detail-text mb5">2. 수집하는 개인정보의 항목 :</caption>
                            <colgroup>
                                <col width="15%">
                                <col width="70%">
                                <col width="15%">
                            </colgroup>
                            <thead>
                                <tr>
                                    <th rowspan="2" class="text-ct">회원유형</th>
                                    <th colspan="2" class="text-ct">개인정보항목</th>
                                </tr>
                                <tr>
                                    <th class="text-ct">필수 항목</th>
                                    <th class="text-ct">선택항목</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td class="text-ct">기업회원</td>
                                    <td class="text-lf">
                                        <ul>
                                            <li>⦁아이디, 비밀번호, 이름, 본인인증정보(DI값), 연락처, 이메일, 기업명, 생년월일 정보</li>
                                            <li>⦁재직증명서(파일)</li>
                                        </ul>
                                    </td>
                                    <td>직위</td>
                                </tr>
                                <tr>
                                    <td class="text-ct">일반회원</td>
                                    <td>
                                        <ul>
                                            <li class="text-lf">⦁아이디, 비밀번호, 이름, 본인인증정보(DI값), 연락처, 이메일, 생년월일 정보</li>
                                        </ul>
                                    </td>
                                    <td></td>
                                </tr>
                            </tbody>
                        </table>
                    </li>
                    <li class=" mb10">
                        <p class="detail-text">3. 개인정보의 처리 및 보유기간 : <span class="border-b admin-sec-title">2년</span>
                        </p>
                    </li>
                    <li class=" mb10">
                        <p class="detail-text">4. 개인정보의 수집·이용 동의 거부 권리 및 동의 거부에 따른 불이익 내용 또는 제한사항 : 위의 개인정보 수집·이용에 대한
                            동의를 거부할 권리가 있습니다.</p>
                        <div class="pl15">
                            <p class="detail-text">- 필수 항목은 서비스 제공에 필수적으로 제공되어야 하는 정보이므로, 동의를 거부하는 경우 회원가입 및 서비스 이용이
                                제한됩니다.</p>
                            <p class="detail-text">- 선택항목의 수집·이용에 동의를 거부하시더라도 회원가입 및 서비스 이용의 제한은 없습니다.</p>
                        </div>
                    </li>
                    <li class=" mb10">
                        <p class="detail-bold">5. 만 14세 미만 아동의 회원가입을 제한합니다.</p>
                    </li>
                </ul>
            </div>
            <div>
                <div class="mb5 check-group flex justify-start align-center">
                    <input type="radio" name="agreeInput2" id="agreement2" v-model="agreePrivacy" :value="true"
                        @change="handleAgreePrivacy" />
                    <label for="agreement2" class="detail-text inline-block ml5">개인정보 수집 및 이용에 동의합니다.</label>
                </div>
                <div class="check-group flex justify-start align-center mb5">
                    <input type="radio" name="agreeInput2" id="nonAgreement2" v-model="agreePrivacy" :value="false"
                        @change="handleAgreePrivacy" />
                    <label for="nonAgreement2" class="detail-text inline-block ml5">개인정보 수집 및 이용에 미동의합니다.</label>
                </div>
                <div class="check-group flex justify-start align-center">
                    <input type="checkbox" name="ageAgree" id="ageAgree" v-model="agreeAge" :value="true"
                        @change="handleAgreeAge" />
                    <label for="ageAgree" class="detail-text inline-block ml5">본인은 <span class="detail-bold">만 14세
                            이상</span>입니다. <span class="detail-bold">(필수)</span></label>
                </div>
            </div>
        </div>
        <div class="terms-privacy mb40">
            <div class="flex justify-between align-center">
                <h3 class="content-title2 mb20">개인정보 수집·이용 동의(선택)</h3>
                <!-- <router-link :to="{ name: 'TermsPage', params: { type: 'Privacy' } }" target="_blank"
                    class="link-text">개인정보
                    처리방침 전문보기</router-link> -->
            </div>
            <div class="terms-content overflow-y mb24 radius">
                <ul>
                    <li class=" mb10">
                        <p class="detail-text">1. 개인정보의 수집·이용 목적 : AI 디지털교과서 통합지원센터 추후 <span class="border-b">기술지원 신청 및
                                안내</span> </p>
                    </li>
                    <li class=" mb10">
                        <table class="terms-table">
                            <caption class="detail-text mb5">2. 수집하는 개인정보의 항목 :</caption>
                            <colgroup>
                                <col width="30%">
                                <col width="70%">
                            </colgroup>
                            <thead>
                                <tr>
                                    <th rowspan="2" class="text-ct">회원유형</th>
                                    <th class="text-ct">개인정보항목</th>
                                </tr>
                                <tr>
                                    <th class="text-ct">선택 항목</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td class="text-ct">기업회원</td>
                                    <td>
                                        <ul>
                                            <li>⦁이름, 연락처, 이메일, 기업명</li>
                                        </ul>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </li>
                    <li class=" mb10">
                        <p class="detail-text">3. 개인정보의 처리 및 보유기간 : <span class="border-b admin-sec-title">2년</span>
                        </p>
                    </li>
                    <li class=" mb10">
                        <p class="detail-text">4. 개인정보의 활용 동의를 거부하시더라도 회원가입 및 서비스 이용의 제한은 없습니다. 다만, AI 디지털교과서 통합지원센터의 기술
                            교육 신청 시 신청정보를 추가로 요구할 수 있습니다. </p>
                    </li>
                </ul>
            </div>
            <div>
                <div class="mb5 check-group flex justify-start align-center">
                    <input type="radio" name="agreeInput3" id="selectvalue" v-model="agreeOptional" :value="true"
                        @change="handleAgreeOptional" />
                    <label for="selectvalue" class="detail-text inline-block ml5">개인정보 수집 및 이용에 동의합니다.</label>
                </div>
                <div class="check-group flex justify-start align-center mb5">
                    <input type="radio" name="agreeInput3" id="nonSelectvalue" v-model="agreeOptional" :value="false"
                        @change="handleAgreeOptional" />
                    <label for="nonSelectvalue" class="detail-text inline-block ml5">개인정보 수집 및 이용에 미동의합니다.</label>
                </div>

            </div>
            <!-- <div class="check-group flex justify-start align-center">
                <input type="checkbox" name="selectvalue" id="selectvalue" v-model="agreeOptional"
                    @change="handleAgreeOptional" />
                <label for="selectvalue" class="detail-text inline-block ml5">개인정보 수집·이용에 동의합니다.(선택)</label>
            </div> -->
        </div>
        <div class="all-terms">
            <div class="mb30 flex justify-center align-center">
                <input type="checkbox" name="allAgree" id="allAgreement" v-model="agreeAll" @click="allCheck" /> 
                <label for="allAgreement"
                    class="content-sub-title inline-block ml5"> 이용약관, 개인정보 수집 및 이용에 모두 동의합니다.</label>
            </div>
            <!-- <div class="check-group flex justify-start align-center">
                <input type="checkbox" name="selectvalue" id="selectvalue" v-model="agreeAll" />
                <label for="selectvalue" class="detail-text inline-block ml5">이용약관 개인정보 수집 이용 동의에 모두 동의합니다.</label>
            </div> -->
            <div class="btn-zone flex justify-between no-gutters">
                <div class="gd-1">
                    <button class="large-btn darkg-border-btn ml0" title="뒤로가기" @click="refusal">뒤로가기</button>
                </div>
                <div class="gd-1">
                    <button class="large-btn blue-btn ml0" title="다음" @click="termsVaildation">다음</button>
                </div>
            </div>
        </div>

    </div>
</template>

<script>
import PageNavigationBar from '../../../component/pagenavigationbar/PageNavigationBar.vue';
import ProgressBar from '../../../component/progressbar/ProgressBar.vue';
import Terms1 from '../../../component/terms/Terms1.vue';

export default {
    data() {
        return {
            // 이용약관동의여부
            agreeTerms: '',
            // 개인정보 수집 및 이용 동의 여부
            agreePrivacy: '',
            // 14세 이상 동의여부
            agreeAge: false,
            // 개인정보 수집 및 이용(선택) 동의 여부
            agreeOptional: '',
            // 모든 동의 여부
            agreeAll: false
        }
    },
    methods: {
        handleAgreeTerms() {
            // this.agreeTerms = !this.agreeTerms;
            this.updateAgreeAll();
        },
        handleAgreePrivacy() {
            //this.agreePrivacy = !this.agreePrivacy;
            this.updateAgreeAll();
        },
        handleAgreeAge() {
            //this.agreeAge = !this.agreeAge;
            this.updateAgreeAll();
        },
        handleAgreeOptional() {
            //this.agreeOptional = !this.agreeOptional;
            this.updateAgreeAll();
        },
        updateAgreeAll() {
            this.agreeAll = this.agreeTerms && this.agreePrivacy && this.agreeAge && this.agreeOptional;
        },
        allCheck() {
            if (!this.agreeAll) {
                this.agreeTerms = true
                this.agreePrivacy = true
                this.agreeAge = true
                this.agreeOptional = true
            } else {
                this.agreeTerms = ''
                this.agreePrivacy = ''
                this.agreeAge = false
                this.agreeOptional = ''
            }
        },
        termsVaildation(){
            if(this.agreeTerms && this.agreePrivacy && this.agreeAge){
                this.$emit('TermsSuccess', 2, this.agreeOptional);
            }else{
                alert('이용 약관에 동의하셔야 다음 단계로 넘어갈 수 있습니다.');
            }
        },
        refusal() {
            window.scrollTo(0, 0);
            this.$router.push({ path: '/', query: {} });
        }
    },
    watch: {

    },
    components: {
        'PageNavigationBar': PageNavigationBar,
        'ProgressBar': ProgressBar,
        'Terms1': Terms1
    },

    mounted() {
    }
}
</script>
