<template>
    <!-- <Header  backgroundBox="#f8f8f8" :show="false"></Header> -->
     <div class="header" :style="{height: contentHeight + 'px'}"></div>
    <div class="container">
        <div class="userinfo">
            <img class="avatar" mode="aspectFill"
                :src="fileDomain + userStore.userinfo.user.headSculpturePhoto ?? '../../static/image/avatar-content.png'"
                @click="router.push({ name: 'account-userinfo' })">
            <div class="user">
                <div class="nickname" v-if="userStore.userinfo.user.name">{{ userStore.userinfo.user.name }}</div>
                <div class="nickname" v-else>注册用户</div>
                <div class="section" v-if="organizeList.length > 0">
                    {{ organizeList[0].organName }}
                </div>
                <div class="section" v-else>暂无部门</div>
            </div>
            <div class="exit">
                <img src="../../static/image/exit.png" @click="logout">
            </div>
        </div>
        <div class="menu">
            <div class="status">
                <div class="item">
                    <div class="num">{{ total[0] }}</div>
                    <div class="text">待发布</div>
                </div>
                <div class="item">
                    <div class="num">{{ total[1] }}</div>
                    <div class="text">已发布</div>
                </div>
                <div class="item">
                    <div class="num">{{ total[2] }}</div>
                    <div class="text">收藏</div>
                </div>
            </div>
            <van-button type="primary" icon="guide-o" size="small"
                @click="router.push({ name: 'publish' })">新建图组</van-button>
        </div>
        <div class="edit">
            <van-button plain type="default" round block
                @click="router.push({ name: 'account-userinfo' })">编辑资料</van-button>
        </div>
        <div class="area">
            <div class="a-prefecture a-box" @click="handleClassify()">
                <div class="a-text">专区</div>
            </div>
            <div class="a-subject a-box" @click="router.push({ name: 'subject' })">
                <div class="a-text">专题</div>
            </div>
        </div>
        <div class="content">
            <van-tabs v-model:active="active" background="#f8f8f8" animated swipeable sticky :offset-top="contentHeight">
                <van-tab title="待发布">
                    <picture-list ref="waitingPublishPicture" :active="0" @total="setTotal" @refresh="handleRefreshPublishPicture" @publish="handlePublishPicture"></picture-list>
                </van-tab>
                <van-tab title="已发布">
                    <picture-list ref="publishPicture" :active="1" @total="setTotal" @opreation="handleOperation"></picture-list>
                </van-tab>
                <van-tab title="收藏">
                    <picture-list :active="2" @total="setTotal"></picture-list>
                </van-tab>
            </van-tabs>
        </div>
    </div>
    <MoreOperations ref="morePopupRef" @refresh="handleRefreshPublishPicture"></MoreOperations>
    <Publish ref="publishPopupRef"  @refresh="handleRefreshWaitingPublishPicture"></Publish>
</template>

<script setup>
import { showConfirmDialog, showToast } from 'vant'
import useUserStore from '@/store/user'
import PictureList from './components/PictureList'
import { useInitScroll } from '@/hooks/useScroll'
import MoreOperations from './components/MoreOperations/index.vue'
import Publish from './components/Publish/index.vue'
import { selectOrganizeList } from '@/api/prefecture'

useInitScroll()
const contentHeight = ref(50)
onLoad(() => {
    xma.xh.getMenuButtonBoundingClientRect({
      success(res) {
        contentHeight.value = (res.top + res.bottom) / 2 + 25;
      },
    });
    setTimeout(() => {
        getOrganizeList()
    }, 1000)
})

const router = useRouter()
const userStore = useUserStore()
const active = ref(0)
const fileDomain = import.meta.env.VITE_APP_FILE_URL

const total = reactive({
    0: 0,
    1: 0,
    2: 0
})

onShow(() => {
    // toLogin() 
    // if (userStore.isLogin())
    getOrganizeList()
})

const toLogin = () => {
    console.log('toLogin')
    if (userStore.isLogin())
        return
    router.push({ name: 'account-login' })
}

const setTotal = (e) => {
    total[e.activeIndex] = e.value
}
const publishPicture = ref()
const handleRefreshPublishPicture = () => {
    publishPicture.value.refresh()
}
const publishPopupRef = ref()
const handlePublishPicture = (e) => {
    publishPopupRef.value.open(e)
}

const waitingPublishPicture = ref()
const handleRefreshWaitingPublishPicture = () => {
    handleRefreshPublishPicture()
    waitingPublishPicture.value.refresh()
}

const logout = () => {
    showConfirmDialog({
        title: '提示',
        message:
            '确定退出登录吗',
    }).then(() => {
        userStore.logout()
        showToast('退出登录成功')
        router.push({ name: 'account-login' })
    }).catch(() => {

    })

}

const morePopupRef = ref()
const handleOperation = (e) => {
    morePopupRef.value.open(e)
}

// 获取组织列表
const organizeList = ref([])
const getOrganizeList = async() => {
    const data = {
        userId: userStore.userinfo.user.id,
        sysCode: import.meta.env.VITE_APP_SYSTEM_CODE,
        moduleCode: 'practice-mediaCatalog'
    }
    const res = await selectOrganizeList(data)
    organizeList.value = res.data
}

const handleClassify = async() => {
    if(organizeList.value.length == 0) {
        showToast('暂无可查看的专区')
        return
    }
    router.push({ name: 'prefecture' })
}
</script>

<style lang="scss" scoped>
.header {
    position: sticky;
    top: 0;
    background-color: #f8f8f8;
    z-index: 999;
}
.container {
    background-color: #f8f8f8;
    padding: 38px 12px 0 12px;
    // min-height: 100vh;

    .userinfo {
        display: flex;

        .avatar {
            width: 58px;
            height: 58px;
            border-radius: 50%;
        }

        .user {
            flex: 1;
            margin-left: 16px;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            overflow: hidden;

            .nickname {
                font-size: 19px;
                color: #232524;
            }

            .section {
                width: max-content;
                height: 20px;
                padding: 0 10px;
                line-height: 22px;
                text-align: center;
                color: #ffffff;
                font-size: 13px;
                background-color: #232524;
                border-radius: 4px;
                max-width: calc(100% - 20px);
            }
        }

        .exit {
            display: flex;
            align-items: center;


            img {
                width: 28px;
                height: 28px;
            }
        }
    }

    .menu {
        display: flex;
        margin-top: 30px;

        .status {
            display: flex;
            flex: 1;
            gap: 25px;

            .item {
                text-align: center;

                .num {
                    font-size: 15px;
                }

                .text {
                    font-size: 10px;
                    color: #707070;
                }
            }
        }
    }

    .edit {
        margin-top: 20px;

        .van-button {
            background: #f8f8f8;
        }
    }

    .area {
        display: flex;
        justify-content: space-between;
        margin-top: 20px;

        .a-box {
            width: 344rpx;
            height: 120rpx;
            border-radius: 10px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .a-prefecture {
            background-image: url('../../static/image/prefecture.png');
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center;
        }

        .a-subject {
            background-image: url('../../static/image/subject.png');
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center;
        }

        .a-text {
            font-size: 32rpx;
            color: #232524;
        }
    }

    .content {
        margin-top: 20px;
    }
}
</style>@/hooks/useScroll