<script setup>
import { useRouter } from 'vue-router'
import {useClassify} from '../hooks/useClassify'
import {ref} from 'vue'
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()

// 跳转搜索
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="mobile-classify-wrap">
        <div class="search-box">
            <van-search 
                shape="round" 
                readonly 
                placeholder="请输入PPT标题" 
                @click-input="goMobileSearch"
            />
        </div>
        <van-collapse v-model="classifyState.activeType" :border="false">
            <van-collapse-item class="level-one" name="myPPT" :is-link="true">
                <template #title>
                    <div class="title-first">我的PPT</div>
                </template>
                <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">
                                <img src="@/assets/imgs/ppt/ppt_icon_file.png" alt="">
                                <span class="van-ellipsis">{{item.GroupName}}</span>
                                <div @click.stop="handleShowFileOpt(item)" class="menu-icon">
                                    <img class="icon" src="@/assets/imgs/ppt/ppt_icon_menu.png" alt="">
                                </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')" class="menu-icon">
                                <img class="icon" src="@/assets/imgs/ppt/ppt_icon_menu.png" alt="">
                            </div>
                        </div>
                    </van-collapse-item>
                </van-collapse>
            </van-collapse-item>
            <van-collapse-item class="level-one" name="sharedPPT" :is-link="true">
                <template #title>
                    <div class="title-first">共享PPT</div>
                </template>
                <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">
                                <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')" class="menu-icon">
                                <img class="icon" src="@/assets/imgs/ppt/ppt_icon_menu.png" alt="">
                            </div>
                        </div>
                    </van-collapse-item>
                </van-collapse>
            </van-collapse-item>

            <van-collapse-item class="level-one" name="pubPPT" :is-link="true">
                <template #title>
                    <div class="title-first">公共PPT</div>
                </template>
                <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">
                                <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')" class="menu-icon">
                                <img class="icon" src="@/assets/imgs/ppt/ppt_icon_menu.png" alt="">
                            </div>
                        </div>
                    </van-collapse-item>
                </van-collapse>
            </van-collapse-item>    
        </van-collapse>
    </div>

    <!-- 设置共享弹框 -->
    <van-popup 
        v-model:show="PPTSetSharedOptState.show" 
        round
        position="bottom"
    >
        <div class="set-shared-popup">
            <div class="set-shared-title">
                    <span @click="PPTSetSharedOptMethods.cancel">取消</span>
                    <span>选择共享用户</span>
                    <span @click="PPTSetSharedOptMethods.save">确认</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="14px" name="1" />
                            </template>
                        </van-cell>
                        <van-cell title="指定成员" clickable @click="PPTSetSharedOptState.chooseType = '2'">
                            <template #right-icon>
                                <van-radio icon-size="14px" 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-if="PPTSetSharedOptState.chooseType == '2'" class="btn" @click="PPTSetSharedOptMethods.chooseMember">选择指定成员</div> 
            </div>

        </div>
    </van-popup>

    <!-- 选择成员弹框 -->
    <van-popup v-model:show="chooseMemberOptState.show" round position="bottom">
        <div class="set-shared-title">
                    <span @click="chooseMemberOptMethods.cancel">取消</span>
                    <span>选择指定成员</span>
                    <span @click="chooseMemberOptMethods.save">确认</span>
        </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>
    </van-popup>

    <!-- 目录编辑弹窗 -->
    <van-popup 
        v-model:show="fileOptState.show" 
        round
        position="bottom"
    >
        <div class="file-opt-wrap">
            <div class="item border">
                <img src="@/assets/imgs/ppt/ppt_icon_file.png" alt="">
                <span>{{fileOptState.data.GroupName}}</span>
            </div>
            <div class="item border blue" @click="handlePPTCatalogueCopy" v-permission="permissionBtn.ppt_copy">
                <img src="@/assets/imgs/ppt/ppt_icon_copy.png" alt="">
                <span>复制</span>
            </div>
            <div class="item border blue" @click="fileOptState.showReName=true" v-permission="permissionBtn.ppt_save">
                <img src="@/assets/imgs/ppt/ppt_icon_write.png" alt="">
                <span>重命名</span>
            </div>
            <div class="item border red" @click="handlePPTCatalogueDel" v-permission="permissionBtn.ppt_del">
                <img src="@/assets/imgs/icon_del.png" alt="">
                <span>删除</span>
            </div>
        </div>
    </van-popup>
    <!-- 目录重命名 -->
    <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-popup 
        v-model:show="PPTOptState.show" 
        round
        position="bottom"
    >
        <div class="file-opt-wrap ppt-opt-wrap">
            <div class="top-box">
                 <img src="@/assets/imgs/ppt/icon01.png" alt="">
                 <div class="title">
                    <div class="name">{{PPTOptState.data.Title}}</div>
                    <div class="person">
                            {{PPTOptState.data.AdminRealName}}
                            {{PPTOptState.data.PptCreateTime.split(' ')[0]}}
                            创建
                    </div>
                 </div>
                 <div class="share" v-if="!PPTOptState.isCommon&&checkAuthBtn(permissionBtn.ppt_visible)&&PPTOptState.activeType=='myPPT'">
                       <span class="share-font">公开</span>
                        <van-switch 
                            size="16px" 
                            :model-value="PPTOptState.data.IsSingleShareBoolean"
                            @update:model-value="handlePPTShare"
                        />
                 </div>
            </div>
            <div class="item border blue" @click="handleShowPPTCopy"  v-if="checkAuthBtn(permissionBtn.ppt_copy)&&(PPTOptState.activeType=='myPPT'||PPTOptState.activeType=='pubPPT')">
                <img src="@/assets/imgs/ppt/ppt_icon_copy.png" alt="">
                <span>复制</span>
            </div>
            <div class="item border blue" @click="handleSetPPTShared"  v-if="!PPTOptState.isCommon&&checkAuthBtn(permissionBtn.ppt_setShare)&&(PPTOptState.activeType=='myPPT'||PPTOptState.activeType=='sharedPPT')">
                <img src="@/assets/imgs/ppt/ppt_icon_set_shared.png" alt="">
                <span>{{ PPTOptState.data.IsGrant ? '取消共享' : '设置共享' }}</span>
            </div>
            <div class="item border blue" @click="handleChooseMember"  v-if="!PPTOptState.isCommon&&PPTOptState.data.IsGrant&&PPTOptState.activeType=='sharedPPT'">
                <img src="@/assets/imgs/ppt/ppt_icon_choose_member.png" alt="">
                <span>选择用户</span>
            </div>
            <div class="item border red" @click="handlePPTDel" v-if="!PPTOptState.isCommon&&checkAuthBtn(permissionBtn.ppt_del)&&PPTOptState.activeType=='myPPT'">
                <img src="@/assets/imgs/icon_del.png" alt="">
                <span>删除</span>
            </div>
        </div>
    </van-popup>
    <!-- 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>
</template>

<style lang="scss">
.level-one{
    .van-cell__title{
        flex: none;
    }
    .van-collapse-item__title--expanded:after{
        display: none !important;
    }
}
.level-two{
    .van-cell__title{
        flex: 1;
    }
}
.van-collapse-item__content{
    padding: 0;
}
.van-collapse-item--border:after{
    display: none;
}
.van-collapse-item__title--expanded{
    padding-bottom: 0;
}
.van-collapse-item__wrapper{
    margin-bottom: 20px;
}

.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;
    }
}
</style>
<style lang="scss" scoped>

.mobile-classify-wrap{
    .level-one{
        margin-bottom: 30px;
        &::after{
            display: none;
        }
    }
    .level-two{
        padding-top: 20px;
    }
    .title-first{
        font-size: 32px;
    }
    .title-second{
        display: flex;
        align-items: center;
        position: relative;
        font-size: 30px;
        img{
            width: 36px;
            margin-right: 20px;
        }
        span{
            display: block;
            width: 80%;
            font-size: 30px;
        }
        .menu-icon{
            width: 30px;
            position: absolute;
            right: 0;
            margin-right: 0;
            text-align: center;
            .icon{
                width: 4px;
                margin-right: 0;
            }
        }
    }
    .ppt-item{
        border-bottom: 1px solid $border-color;
        margin-left: 86px;
        margin-right: var(--van-cell-horizontal-padding);
        padding-top: 30px;
        padding-bottom: 10px;
        position: relative;
        color: $font-grey;
        .text{
            width: 90%;
            display: block;
            font-size: 30px;
        }
        .menu-icon{
            width: 30px;
            position: absolute;
            right: 0;
            margin-right: 0;
            text-align: center;
            bottom: 10px;
            .icon{
                width: 4px;
                margin-right: 0;
            }
        }
    }
}
.file-opt-wrap{
    .item{
        padding: 42px;
        display: flex;
        align-items: center;
        img{
            width: 36px;
            margin-right: 20px;
        }
    }
    .border{
        border-bottom: 1px solid $border-color;
    }
    .blue{
        color: $theme-color;
    }
    .red{
        color: $theme-red;
    }
}

.set-shared-popup{
    .set-shared-radios{
        padding-top: 20px;
       :deep(.van-cell-group--inset){
          margin: 0 40px;
       }
       :deep(.van-cell__title){
          font-size: 28px;
       }
       :deep(.van-cell){
          padding: 12px 0;
       }
       :deep(.van-cell::after){
           border: none;
       }
    }
    .set-shared-result{
        height: 26vh;
        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: 10px 20px;
                .members-item{
                    display: flex;
                    align-items: center;
                    vertical-align: middle;
                    background-color: #F8F8F8;
                    font-size: 28px;
                    padding: 8px 16px;
                    font-weight: 400;
                    margin: 8px;
                    color: #0052D9;
                }
                img{
                    width: 32px;
                    height: 32px;
                    margin-left: 16px;
                }
            }
        }

        .btn{
            margin: 28px auto 40px;
            font-size: 28px;
            background-color: rgb(0,82,217);
            border-radius: 30px;
            color: #ffffff;
            cursor: pointer;
            width: 500px;
            height: 60px;
            line-height: 60px;
            text-align: center;
        }
    }
}
.set-shared-title{
        display: flex;
        justify-content: space-between;
        align-items: center;
        box-sizing: border-box;
        padding: 26px 42px;
        border-bottom: 1px solid $border-color;
        font-size: 26px;
    }
.file-rename-wrap{
    display: flex;
    align-items: center;
    padding: 50px 30px;
    span{
        flex-shrink: 0;
        margin-right: 20px;
    }
    input{
        flex: 1;
        line-height: 70px;
        padding: 0 30px;
        border-radius: 70px;
        border: 1px solid $border-color;
        width: 150px;
    }
}

.ppt-opt-wrap{
    .top-box{
        box-sizing: border-box;
        padding: 40px 40px 21px 40px;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        border-bottom: 1px solid $border-color;
        img{
            width: 80px;
            height: 80px;
            margin-right: 23px;
        }

        .title{
            flex: 1;
            .name{
                color: #333;
                font-size: 28px;
                font-weight: 400;
            }
            .person{
                font-size: 24px;
                color: #999999;
                margin-top: 20px;
            }
        }

        .share{
            height: 80px;
            margin-left: 32px;
            display:flex;
            align-items: center;
            .share-font{
                color: #666666;
                font-size: 24px;
                margin-right: 20px
            }
        }
    }
}

.choose-member-popup{
    display: flex;
    height: 48vh;
    :deep(.van-sidebar-item){
        padding: 38px 24px;
        font-size: 28px;
    }
}

.ppt-copy-wrap{
    display: flex;
    align-items: center;
    padding: 50px 30px;
    span{
        flex-shrink: 0;
        margin-right: 20px;
    }
    :deep(.van-popover__wrapper){
        flex: 1;
    }
    .select-value-box{
        display: block;
        height: 70px;
        line-height: 70px;
        padding: 0 30px;
        border-radius: 70px;
        border: 1px solid $border-color;
        min-width: 150px;
        &.grey-text{
            color: $font-grey;
        }
    }
}


</style>