<template>
    <div class="content pt50 pb50">
        <div class=" w1400">
            <div class="page-title point-font mb30">
                <p>내 정보</p>
            </div>

            <UserInfoView :pageId="pageId" @child-mbrVO="mbrVO = $event"/>
            <div>
                <p>SNS 계정 연동 설정</p>
            </div>
            <div>
                <div v-for="link in linkList" :key="link.id" class="sns-link-item">
                    <div v-if="linkList.length > 1 && link.lgnOffrType !== 'S'">
                        <div class="sns-link-info">
                            <span>{{ convertOffrType(link.lgnOffrType) }}</span>
                            <!-- <span>{{ link.snsEml }}</span> -->
                        </div>
                        <div class="switch-container">
                            <label class="switch">
                                <input type="checkbox" v-model="link.linkVtlzYn" @change="toggleLink(link)">
                                <span class="slider"></span>
                            </label>
                            <p>{{ link.linkVtlzYn ? '연동' : '해제' }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import pageAuthMixin from "../../../../../../views/common/pageAuthMixin.js";
import { findAllLink, unlinkAccount, reLinkAccount, setPrimaryProfile } from "../../../../../../resources/api/unified.js";
// COMPONENETS
import UserInfoView from "../../../../../component/userInfo/UserInfoView.vue";

export default {
    mixins: [pageAuthMixin],
    components: {
        UserInfoView,
    },
    data() {
        return {
            pageId: this.$store.state.mbrId, // 페이지 아이디

            linkList: [], // 연동된 계정 목록
            mbrVO: {},
        };
    },
    created() {
        this.findAllLink(); // 연동된 계정 목록 조회
    },
    methods: {
        // 연동된 계정 목록 조회
        async findAllLink() {
            try {
                const res = await findAllLink();
                if (res.status == 200) {
                    this.linkList = res.data.data;
                }
            } catch (error) {
                const errorData = error.response?.data;
                if (errorData?.message != null && errorData?.message != "") {
                    alert(error.response.data.message);
                } else {
                    alert("에러가 발생했습니다.\n관리자에게 문의해주세요.");
                }
            }
        },

        // 연동 버튼 클릭
        async toggleLink(link) {
            const checked = link.linkVtlzYn;
            if (!confirm(checked ? "연동을 설정하시겠습니까?" : "연동을 해제하시겠습니까?")) {
                link.linkVtlzYn = !checked; // 체크박스 상태 되돌리기
                return;
            }

            const proc = checked ? reLinkAccount : unlinkAccount;
            try {
                const res = await proc({ lgnOffrType: link.lgnOffrType });
                if (res.status == 200) {
                    alert(res.data.message);
                }
            } catch (error) {
                const errorData = error.response?.data;
                if (errorData?.message != null && errorData?.message != "") {
                    alert(error.response.data.message);
                } else {
                    alert("에러가 발생했습니다.\n관리자에게 문의해주세요.");
                }
            }
        },

        // SNS 계정 타입 변환
        convertOffrType(code) {
            switch (code) {
                case 'G': return '구글';
                case 'K': return '카카오';
                case 'N': return '네이버';
                case 'S': return '시스템';
                default: return '기타';
            }
        }
    },
};
</script>

<style scoped>
.switch-container {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: Arial, sans-serif;
}

.switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 28px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    background-color: #ccc;
    transition: 0.4s;
    border-radius: 34px;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: 0.4s;
    border-radius: 50%;
}

/* Checked 상태일 때 */
input:checked+.slider {
    background-color: #4caf50;
}

input:checked+.slider:before {
    transform: translateX(22px);
}
</style>