<script setup>
import {computed, ref} from 'vue'
import {useClassify} from '../hooks/useClassify'
import openShareIcon from '@/assets/imgs/ppt/ppt_icon_user1.png'
import closeShareIcon from '@/assets/imgs/ppt/ppt_icon_user2.png'
import {apiPPTList,apiPPTPubList,apiPPTShareList} from '@/api/ppt'
import { useRouter } from 'vue-router'
import moment from 'moment'
import {useCachedViewsStore} from '@/store/modules/cachedViews'

const cachedViewsStore=useCachedViewsStore()

const router=useRouter()

const {
    classifyState,
    getPPTClassifyData,

    fileOptState,
    handleShowFileOpt,
    handlePPTCatalogueCopy,
    handlePPTCatalogueDel,
    handlePPTCatalogueReName,
    
    PPTOptState,
    handleShowPPTOpt,
    handlePPTDel,
    handlePPTShare,
    handleShowPPTCopy,
    handlePPTCopy,
    handlePPTCopyBeforeClose,

    goPPTDetail,

    handleSetPPTShared,
    PPTSetSharedOptState,
    PPTSetSharedOptMethods,
    getResearcherList,
    researcherList,

    chooseMemberOptState,
    chooseMemberOptMethods,
    handleChooseMember,

    permissionBtn,
    checkAuthBtn
}=useClassify()
getPPTClassifyData()
getResearcherList()
const isOptBoxShow = computed(()=>{
    return checkAuthBtn(permissionBtn.ppt_copy)||checkAuthBtn(permissionBtn.ppt_save)||checkAuthBtn(permissionBtn.ppt_del)
})
const isOptPPTShow = computed(()=>{
    return checkAuthBtn(permissionBtn.ppt_copy)||checkAuthBtn(permissionBtn.ppt_del) || checkAuthBtn(permissionBtn.ppt_setShare)
})
const activeType=ref('myPPT')

// 获取ppt列表
let activeGroupId=ref('')
let pptList=ref([])
async function getPPTList(){
    let res 
    if(activeType.value=='myPPT'){
        res=await apiPPTList({GroupId:activeGroupId.value})
    } else if(activeType.value=='sharedPPT'){
        res=await apiPPTShareList({GroupId:activeGroupId.value})
    }else{
        res=await apiPPTPubList({AdminId:activeGroupId.value})
    }
     
    if(res.Ret===200){
        pptList.value=res.Data.List||[]
    }
}
getPPTList()

function handleClickCatalogue(item){
    activeGroupId.value=item.GroupId
    getPPTList()
}

// 设置共享
function handleChangePPTShare(type,item){
    if(type==1&&!item.IsSingleShareBoolean) return
    if(type==2&&item.IsSingleShareBoolean) return
    handlePPTShare()
}

// 跳转搜索
async function goMobileSearch(){
    await cachedViewsStore.removeCaches('PPTSearch')
    if(window.location.pathname.startsWith('/ppten')){
        router.push('/ppten/search')
    }else{
        router.push('/ppt/search')
    }
}


const showPopover=ref(false)

</script>

<template>
    <div class="pad-ppt-index-wrap">
        <div class="left-classify-wrap">
            <div class="sticky-box">
            <div class="classify-type-box">
                <span 
                    :class="activeType=='myPPT'&&'active'"
                    @click="activeType='myPPT'"
                >我的PPT</span>
                <span 
                    :class="activeType=='sharedPPT'&&'active'"
                    @click="activeType='sharedPPT'"
                >共享PPT</span>
                <span
                    :class="activeType=='pubPPT'&&'active'"
                    @click="activeType='pubPPT'"
                >公共PPT</span>
            </div>
            <div class="classify-list" v-if="activeType=='myPPT'">
                <van-collapse class="level-two" v-model="classifyState.myActiveType" :border="false">
                    <van-collapse-item
                        :name="item.GroupId"
                        v-for="item in classifyState.privateList"
                        :key="item.GroupId"
                        :is-link="false"
                    >
                        <template #title>
                            <div class="title-second" @click="handleClickCatalogue(item)">
                                <img src="@/assets/imgs/ppt/ppt_icon_file.png" alt="">
                                <span class="van-ellipsis">{{item.GroupName}}</span>
                                <div @click.stop="handleShowFileOpt(item)">
                                    <van-popover position="bottom-start">
                                        <template #reference>
                                            <div class="menu-icon" v-if="isOptBoxShow">
                                                <img class="icon" src="@/assets/imgs/ppt/ppt_icon_menu.png" alt="">
                                            </div>
                                        </template>
                                        <div class="pad-classify-file-opt-box">
                                            <div class="item" @click="handlePPTCatalogueCopy" v-permission="permissionBtn.ppt_copy">
                                                <img src="@/assets/imgs/ppt/icon_action_copy.png" alt="">
                                                <span>复制</span>
                                            </div>
                                            <div class="item" @click="fileOptState.showReName=true" v-permission="permissionBtn.ppt_save">
                                                <img src="@/assets/imgs/ppt/ppt_icon_write02.png" alt="">
                                                <span>重命名</span>
                                            </div>
                                            <div class="item del" @click="handlePPTCatalogueDel" v-permission="permissionBtn.ppt_del">
                                                <img src="@/assets/imgs/icon_del.png" alt="">
                                                <span>删除</span>
                                            </div>
                                        </div>
                                    </van-popover>
                                </div>
                            </div>
                        </template>
                        <div 
                            class="ppt-item"
                            v-for="_item in item.PptList" 
                            :key="_item.GroupId"
                            @click.stop="goPPTDetail(_item)"
                        >
                            <span class="van-ellipsis text">{{ _item.Title }}</span>
                            <div @click.stop="handleShowPPTOpt(_item,'myPPT')">
                                <van-popover position="bottom-start">
                                    <template #reference>
                                        <img class="share-icon" :src="_item.IsSingleShareBoolean?openShareIcon:closeShareIcon" alt="" v-if="checkAuthBtn(permissionBtn.ppt_visible)">
                                    </template>
                                    <div class="pad-classify-file-opt-box">
                                        <div class="item" @click="handleChangePPTShare(1,_item)" v-permission="permissionBtn.ppt_visible">
                                            <img :src="closeShareIcon" alt="">
                                            <span>仅自己可见</span>
                                        </div>
                                        <div class="item" @click="handleChangePPTShare(2,_item)" v-permission="permissionBtn.ppt_visible">
                                            <img :src="openShareIcon" alt="">
                                            <span>所有人可见</span>
                                        </div>
                                    </div>
                                </van-popover>
                            </div>
                            <div @click.stop="handleShowPPTOpt(_item,'myPPT')">
                                <van-popover position="bottom-start">
                                    <template #reference>
                                        <div class="menu-icon" v-if="isOptPPTShow">
                                            <img class="icon" src="@/assets/imgs/ppt/ppt_icon_menu.png" alt="">
                                        </div>
                                    </template>
                                    <div class="pad-classify-file-opt-box">
                                        <div class="item" @click="handleShowPPTCopy" v-permission="permissionBtn.ppt_copy">
                                            <img src="@/assets/imgs/ppt/icon_action_copy.png" alt="">
                                            <span>复制</span>
                                        </div>
                                        <div class="item" @click="handleSetPPTShared"  v-if="!PPTOptState.isCommon&&checkAuthBtn(permissionBtn.ppt_setShare)">
                                            <img src="@/assets/imgs/ppt/ppt_icon_set_shared_black.png" alt="">
                                            <span>{{ PPTOptState.data.IsGrant ? '取消共享' : '设置共享' }}</span>
                                        </div>
                                        <div class="item del" @click="handlePPTDel" v-permission="permissionBtn.ppt_del">
                                            <img src="@/assets/imgs/icon_del.png" alt="">
                                            <span>删除</span>
                                        </div>
                                    </div>
                                </van-popover>
                            </div>
                            
                        </div>
                    </van-collapse-item>
                </van-collapse>
            </div>

            <div class="classify-list" v-if="activeType=='sharedPPT'">
                <van-collapse class="level-two" v-model="classifyState.sharedActiveType" :border="false">
                    <van-collapse-item
                        :name="item.GroupId"
                        v-for="item in classifyState.sharedList"
                        :key="item.GroupId"
                        :is-link="false"
                    >
                        <template #title>
                            <div class="title-second" @click="handleClickCatalogue(item)">
                                <img src="@/assets/imgs/ppt/ppt_icon_file.png" alt="">
                                <span class="van-ellipsis">{{item.GroupName}}</span>
                            </div>
                        </template>
                        <div 
                            class="ppt-item"
                            v-for="_item in item.PptList" 
                            :key="_item.GroupId"
                            @click.stop="goPPTDetail(_item)"
                        >
                            <span class="van-ellipsis text">{{ _item.Title }}</span>
                            <div v-if="_item.IsGrant" @click.stop="handleShowPPTOpt(_item,'sharedPPT')">
                                <van-popover position="bottom-start">
                                    <template #reference>
                                        <div class="menu-icon" v-if="checkAuthBtn(permissionBtn.ppt_setShare)">
                                            <img class="icon" src="@/assets/imgs/ppt/ppt_icon_menu.png" alt="">
                                        </div>
                                    </template>
                                    <div class="pad-classify-file-opt-box">
                                        <div class="item" @click="handleSetPPTShared" v-if="!PPTOptState.isCommon&&checkAuthBtn(permissionBtn.ppt_setShare)">
                                            <img src="@/assets/imgs/ppt/ppt_icon_set_shared_black.png" alt="">
                                            <span>取消共享</span>
                                        </div>
                                        <div class="item" @click="handleChooseMember" v-if="!PPTOptState.isCommon&&PPTOptState.data.IsGrant">
                                            <img src="@/assets/imgs/ppt/ppt_icon_choose_member_black.png" alt="">
                                            <span>选择用户</span>
                                        </div>
                                    </div>
                                </van-popover>
                            </div>
                            
                        </div>
                    </van-collapse-item>
                </van-collapse>
            </div>

            <div class="classify-list" v-if="activeType=='pubPPT'">
                <van-collapse class="level-two" v-model="classifyState.pubActiveType" :border="false">
                    <van-collapse-item
                        :name="item.GroupId"
                        v-for="item in classifyState.publicList"
                        :key="item.GroupId"
                        :is-link="false"
                    >
                        <template #title>
                            <div class="title-second" @click="handleClickCatalogue(item)">
                                <img src="@/assets/imgs/ppt/ppt_icon_file.png" alt="">
                                <span class="van-ellipsis">{{item.GroupName}}</span>
                            </div>
                        </template>
                        <div 
                            class="ppt-item"
                            v-for="_item in item.PptList" 
                            :key="_item.GroupId"
                            @click.stop="goPPTDetail(_item)"
                        >
                            <span class="van-ellipsis text">{{ _item.Title }}</span>
                            <div @click.stop="handleShowPPTOpt(_item,'pubPPT')">
                                <van-popover position="bottom-start">
                                    <template #reference>
                                        <div class="menu-icon">
                                            <img class="icon" src="@/assets/imgs/ppt/ppt_icon_menu.png" alt="">
                                        </div>
                                    </template>
                                    <div class="pad-classify-file-opt-box">
                                        <div class="item" @click="handleShowPPTCopy">
                                            <img src="@/assets/imgs/ppt/icon_action_copy.png" alt="">
                                            <span>复制</span>
                                        </div>
                                    </div>
                                </van-popover>
                            </div>
                        </div>
                    </van-collapse-item>
                </van-collapse>
            </div>
            </div>
        </div>
        <div class="right-list-wrap">
            <div class="search-box">
                <van-search 
                    shape="round" 
                    readonly 
                    placeholder="请输入PPT标题" 
                    @click-input="goMobileSearch"
                />
            </div>
            <ul class="list-wrap">
                <li 
                    class="item" 
                    v-for="item in pptList"
                    :key="item.PptId"
                    @click="goPPTDetail(item)"
                >
                    <div class="van-ellipsis title">{{item.Title}}</div>
                    <div class="bg-img">
                        <span class="text">{{item.Title}}</span>
                        <img src="/pptImg/pptcover_bg1.jpg" alt="">
                    </div>
                    
                    <div class="time">创建时间:{{moment(item.PptCreateTime).format('YYYY-MM-DD')}}</div>
                </li>
                <li class="empty-item"></li>
                <li class="empty-item"></li>
            </ul>
        </div>
    </div>
    <!-- 目录重命名 -->
    <van-dialog 
        v-model:show="fileOptState.showReName" 
        title="重命名" 
        show-cancel-button
        confirmButtonText="保存"
        @confirm="handlePPTCatalogueReName"
    >
        <div class="file-rename-wrap">
            <input type="text" placeholder="请输入目录名" v-model="fileOptState.reNameVal">
        </div>
    </van-dialog>
    <!-- ppt复制弹窗 -->
    <van-dialog 
        v-model:show="PPTOptState.showCopy" 
        title="PPT目录" 
        show-cancel-button
        confirmButtonText="保存"
        @confirm="handlePPTCopy"
        :before-close="handlePPTCopyBeforeClose"
    >
        <div class="ppt-copy-wrap">
            <van-popover v-model:show="showPopover">
                <ul class="select-copy-val-box">
                    <li 
                        class="item" 
                        v-for="item in PPTOptState.copyActions" 
                        :key="item.GroupId"
                        @click="PPTOptState.copySelectData=item;showPopover=false"
                    >{{item.text}}</li>
                </ul>
                <template #reference>
                    <span 
                        :class="['select-value-box',!PPTOptState.copySelectData.GroupName&&'grey-text']"
                        >{{PPTOptState.copySelectData.GroupName||'请选择目录'}}</span>
                </template>
            </van-popover>
        </div>
    </van-dialog>
    <!-- 设置共享弹框 -->
    <van-popup 
        v-model:show="PPTSetSharedOptState.show" 
        :close-on-click-overlay="false"
        round
    >
        <div class="set-shared-popup">
            <div class="set-shared-title">
                    <span @click="PPTSetSharedOptMethods.cancel" class="cancel" >取消</span>
                    <span class="title" >选择共享用户</span>
                    <span @click="PPTSetSharedOptMethods.save" class="confirm">确认</span>
            </div>

            <div class="set-shared-radios">
                <van-radio-group v-model="PPTSetSharedOptState.chooseType" shape="dot">
                    <van-cell-group inset>
                        <van-cell title="全部用户" clickable @click="PPTSetSharedOptState.chooseType = '1'">
                            <template #right-icon>
                                <van-radio icon-size="16px" name="1" />
                            </template>
                        </van-cell>
                        <van-cell title="指定成员" clickable @click="PPTSetSharedOptState.chooseType = '2'">
                            <template #right-icon>
                                <van-radio icon-size="16px" name="2" />
                            </template>
                        </van-cell>
                    </van-cell-group>
                </van-radio-group>
            </div>

            <div class="set-shared-result">
                    <div v-show="PPTSetSharedOptState.chooseType == '2'" class="choosed-member-wrap">
                        <div class="members-item-wrap">
                            <div v-for="item in PPTSetSharedOptState.members" :key="item.text+item.id" class="members-item">
                                <span>{{ item.text }}</span>
                                <img src="@/assets/imgs/ppt/ppt_icon_set_close.png" @click="PPTSetSharedOptMethods.delete(item)" />
                            </div>
                        </div>
                    </div>
                    <div v-show="PPTSetSharedOptState.chooseType == '2'" class="btn" @click="PPTSetSharedOptMethods.chooseMember">选择指定成员</div> 
            </div>

        </div>
    </van-popup>
    <!-- 选择成员弹框 -->
    <van-popup v-model:show="chooseMemberOptState.show" round :close-on-click-overlay="false">
        <div class="choose-memeber-wrap">
            <div class="choose-memeber-title">
                    <span>选择指定成员</span>
                    <img src="../../../assets/imgs/dataEDB/close_outline_black.png" @click="chooseMemberOptMethods.cancel">
            </div>
            <div class="choose-member-popup">
                    <van-sidebar v-model="chooseMemberOptState.slideActive" @change="chooseMemberOptMethods.change">
                        <van-sidebar-item v-for="item in researcherList" :title="item.text" :key="item.text+item.id"/>
                    </van-sidebar>
                    <van-tree-select
                        style="flex:1;height: 100%"
                        v-model:active-id="chooseMemberOptState.activeIdCopy"
                        v-model:main-active-index="chooseMemberOptState.activeIndex"
                        :items="chooseMemberOptState.acitiveItem"
                    />
            </div>
            <div class="choose-memeber-footer" @click="chooseMemberOptMethods.save">确定</div>
        </div>
    </van-popup>
</template>

<style lang="scss">
.van-collapse-item__content{
    padding: 0;
}
.van-collapse-item--border:after{
    display: none;
}
.van-collapse-item__title--expanded{
    padding-bottom: 6px;
}
.van-collapse-item__wrapper{
    margin-bottom: 20px;
}
.van-collapse-item__title--expanded:after{
    display: none;
}

.select-copy-val-box{
    min-width: 150PX;
    padding: 10PX;
    max-height: 300PX;
    overflow-y: auto;
    &::-webkit-scrollbar{
        display: none;
    }
    .item{
        border-bottom: 1px solid $border-color;
        font-size: 14PX;
        padding: 10PX 0;
    }
}
@media screen and (min-width:$media-width){
    .pad-classify-file-opt-box{
        border: 1px solid $border-color;
        padding: 10px 0;
        .item{
            padding: 10px 20px;
            display: flex;
            align-items: center;
            img{
                width: 20px;
                margin-right: 8px;
            }
        }
        .del{
            color: $theme-red;
        }
    }
            
}
</style>
<style lang="scss" scoped>
@media screen and (min-width:$media-width){
    .choose-memeber-wrap{
        width: 375px;
        .choose-memeber-title{
            position: relative;
            text-align: center;
            padding: 17px 56px;
            font-size: 16px;
            border-bottom: 1px solid $border-color;
            img{
                width: 24px;
                height: 24px;
                position: absolute;
                right: 17px;
                top:50%;
                transform: translateY(-50%);
            }
        }
        .choose-member-popup{
                height: 27vh;
                display: flex;
                :deep(.van-sidebar-item){
                    padding: 14px 12px;
                    font-size: 14px;
                }
        }
        .choose-memeber-footer{
            font-size: 16px;
            font-weight: 400;
            text-align: center;
            color: rgba(0, 82, 217, 1);
            padding: 16px 0;
            border-top: 1px solid $border-color;
            cursor: pointer;
        }
        
    }
    .set-shared-popup{
        width: 375px;
        .set-shared-title{
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            padding: 17px;
            border-bottom: 1px solid $border-color;
            font-size: 16px;
            .title{
                font-size: 18px;
                font-weight: 600;
            }
            .confirm{
                color:rgba(0, 82, 217, 1);
            }
        }
        .set-shared-radios{
            padding-top: 5px;
            :deep(.van-cell-group--inset){
                margin: 0;
            }
            :deep(.van-cell__title){
                font-size: 16px;
            }
            :deep(.van-cell){
                padding: 14px 17px;
            }
            :deep(.van-cell::after){
                left: 0;
                width: 100%;
                border: 1px solid $border-color;
            }
        }
        .set-shared-result{
            height: 23vh;
            display: flex;
            flex-direction: column;
                .choosed-member-wrap{
                    flex: 1;
                    overflow: auto;
                    .members-item-wrap{
                        display: flex;
                        flex-wrap: wrap;
                        box-sizing: border-box;
                        padding: 0 16px;
                        .members-item{
                            display: flex;
                            align-items: center;
                            vertical-align: middle;
                            font-size: 14px;
                            font-weight: 400;
                            color: rgba(0, 82, 217, 1);
                            padding: 4px 8px;
                            background: rgba(248, 248, 248, 1);
                            margin: 8px;
                            img{
                                width: 16px;
                                height: 16px;
                                margin-left: 8px;
                            }
                        }
                    }
                }
                .btn{
                    width: 341px;
                    height: 44px;
                    padding: 10px 20px 10px 20px;
                    border-radius: 4px;
                    background: rgba(0, 82, 217, 1);
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    margin:16px auto 20px;
                    font-size: 14px;
                    color: rgba(255, 255, 255, 1);
                }
        }

    }

    .pad-ppt-index-wrap{
        display: flex;
        .left-classify-wrap{
            width: 350px;
            min-height: 100vh;
            border-right: 1px solid $border-color;
            padding: 30px;
            .sticky-box{
                position: sticky;
                top: 90px;
            }
            .classify-type-box{
                span{
                    display: inline-block;
                    padding-bottom: 5px;
                    margin-right: 30px;
                }
                .active{
                    color: $theme-color;
                    font-weight: bold;
                    border-bottom: 2px solid $theme-color;
                }
            }
            .classify-list{
                height: 80vh;
                overflow-y: auto;
                &::-webkit-scrollbar{
                    display: none;
                }
            }
            .level-two{
                padding-top: 20px;
                margin-left: -15px;
            }
            .title-second{
                display: flex;
                align-items: center;
                position: relative;
                img{
                    width: 20px;
                    margin-right: 8px;
                }
                span{
                    display: block;
                    width: 80%;
                    font-size: 16px;
                }
                .menu-icon{
                    width: 15px;
                    position: absolute;
                    right: 0;
                    top: 5px;
                    text-align: center;
                    .icon{
                        width: 3px;
                        margin-right: 0;
                    }
                }
            }
            .ppt-item{
                border-bottom: 1px solid $border-color;
                margin-left: 40px;
                margin-right: var(--van-cell-horizontal-padding);
                padding-top: 14px;
                padding-bottom: 10px;
                position: relative;
                color: $font-grey;
                display: flex;
                .text{
                    width: calc(100% - 55px);
                    display: block;
                }
                .menu-icon{
                    width: 15px;
                    position: absolute;
                    right: 0;
                    top: 20px;
                    text-align: center;
                    .icon{
                        width: 3px;
                    }
                }
                .share-icon{
                    width: 16px;
                    height: 16px;
                    position: absolute;
                    right: 35px;
                    top: 17px;
                }
            }
        }
        .right-list-wrap{
            flex: 1;
            .search-box{
                padding: 0 10px;
                position: sticky;
                top: 60px;
                z-index: 99;
            }
            .list-wrap{
                padding: var(--van-search-padding);
                display: flex;
                flex-wrap: wrap;
                justify-content: center;
                .item{
                    display: block;
                    box-sizing: border-box;
                    width: 260px;
                    min-height: 240px;
                    padding: 10px 14px;
                    border: 1px solid $border-color;
                    margin-bottom: 20px;
                    margin-left: 10px;
                    margin-right: 10px;
                    .bg-img{
                        width: 100%;
                        display: block;
                        margin: 10px 0;
                        position: relative;
                        .text{
                            display: inline-block;
                            width: 80%;
                            text-align: center;
                            position: absolute;
                            top: 50%;
                            left: 50%;
                            transform: translate(-50%,-50%);
                            color: #fff;
                            font-size: 14px;
                        }
                        img{
                            width: 100%;
                            height: 100%;
                        }
                    }
                }
                .empty-item{
                    display: block;
                    box-sizing: border-box;
                    width: 260px;
                    padding: 10px 14px;
                    margin-left: 10px;
                    margin-right: 10px;
                }
            }
        }
    }
    .file-rename-wrap{
        display: flex;
        align-items: center;
        padding: 50px 30px;
        span{
            flex-shrink: 0;
            margin-right: 20px;
        }
        input{
            flex: 1;
            line-height: 35px;
            padding: 0 30px;
            border-radius: 35px;
            border: 1px solid $border-color;
            width: 150px;
        }
    }
    .ppt-copy-wrap{
        display: flex;
        align-items: center;
        padding: 50px 30px;
        span{
            flex-shrink: 0;
        }
        :deep(.van-popover__wrapper){
            flex: 1;
        }
        .select-value-box{
            display: block;
            height: 35px;
            line-height: 35px;
            padding: 0 30px;
            border-radius: 35px;
            border: 1px solid $border-color;
            // min-width: 150px;
            &.grey-text{
                color: $font-grey;
            }
        }
    }

}

</style>