<template>
    <div class="account_message">
		<div class="account_message_title modal_title_text">
			<div class="">
				消息中心
			</div>
			<div class="account_message_title_setting">设置</div>
		</div>
		<a-tabs class="account_message_body" v-model:activeKey="activeKey">
			<a-tab-pane key="1" tab="系统消息">
				<system ref="system"></system>
			</a-tab-pane>
			<a-tab-pane key="2" tab="私信" force-render>
				<privateChat ref="privateChat"></privateChat>
			</a-tab-pane>
			<a-tab-pane key="3" tab="评论">Content of Tab Pane 3</a-tab-pane>
			<a-tab-pane key="4" tab="点赞">Content of Tab Pane 3</a-tab-pane>
			<a-tab-pane key="6" tab="新增粉丝">
				<newFollow ref="newFollow"></newFollow>
			</a-tab-pane>
			<a-tab-pane key="5" tab="客服">Content of Tab Pane 3</a-tab-pane>
		</a-tabs>
    </div>
</template>
<script lang="ts">
import { defineComponent,computed,ref,reactive,nextTick,toRefs,createVNode} from 'vue'
import { Https } from "@/tool/https";
import { useRouter,useRoute } from 'vue-router'
import { Modal,message } from 'ant-design-vue';
import { useStore } from "vuex";
import { setCookie, getCookie, WriteCookie } from "@/tool/cookie";
import system from '@/component/Account/message/system.vue'
import privateChat from '@/component/Account/message/privateChat.vue'
import newFollow from '@/component/Account/message/newFollow.vue'
import { useI18n } from 'vue-i18n'
export default defineComponent({
    components:{
		system,
		privateChat,
		newFollow,
    },
    setup() {
		const router = useRouter()
        const store = useStore();
		let accountMessage = reactive({
			activeKey: ref('1'),
		})
		// provide('exhibitionList',exhibitionList)
		let setUserData = ()=>{
			router.push({path:'/home/account/accountEdit'})
		}
        return{
           ...toRefs(accountMessage),
		   setUserData,
        }
    },
    data(){
        return{
            
        }
    },
})
</script>
<style lang="less" scoped>
.account_message{
	width: 100%;
	.account_message_title{
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 2rem 5rem;
		border-bottom: 1px solid #e9eaec;
		.account_message_title_setting{
			cursor: pointer;
		}
	}
	.account_message_body{
		padding: 0rem 5rem;
		:deep(.ant-tabs-nav){
			.ant-tabs-nav-wrap{
				.ant-tabs-tab-btn{
					font-size: 2.4rem;
				}
				.ant-tabs-tab-btn:active{
					color: #39215b;
				}
				.ant-tabs-tab-active{
					.ant-tabs-tab-btn{
						color: #39215b;
						font-weight: 900;
					}
				}
			}
			.ant-tabs-tab:hover{
				color: #39215b;
			}
			.ant-tabs-ink-bar{
				background: #39215b;
			}
		}
		:deep(.ant-tabs-content){
			min-height: 80rem;
			padding-bottom: 3rem;
		}
	}
}
</style>
