<script setup name="MyETAIndex">
import {ref,reactive,computed} from 'vue'
import { useRouter } from 'vue-router'
import {useClassify} from './hooks/useClassify'
import apiMyETA  from '@/api/myETA'
import { showConfirmDialog, showToast } from 'vant';
import { useWindowSize } from '@vueuse/core'
import draggable from 'vuedraggable'
import {useCachedViewsStore} from '@/store/modules/cachedViews'
import {myETABtn,useAuthBtn} from '@/hooks/useAuthBtn'
import { useNoAuth } from '@/hooks/useNoAuth'
const {checkAuthBtn} = useAuthBtn()

const cachedViewsStore=useCachedViewsStore()
const { width, height } = useWindowSize()

const router=useRouter()

const {
    classifyTypeOpt,
    classifyState,
    getMyClassify,
    getPubClassify,
    classifyTypeChange,
    handleAddClassify,
    handleConfirmEditClassify,

    handleShowOpt,
    handleClassifyShare,
    handleCopyClassify,
    handleClassifyDel,
    handleAddClassifyBeforeClose
}=useClassify()

const curChartClassifyList=computed(()=>{
    return classifyState.classifyTypeAct==1?classifyState.myClassifyList:classifyState.pubClassifyList
})
//我的图库/公共图库opt：重命名、可见、复制、删除
const isOptShow = computed(()=>{
    if(classifyState.classifyTypeAct===1){
        return checkAuthBtn(myETABtn.myChart_classifyOpt_rename)
            || checkAuthBtn(myETABtn.myChart_classifyOpt_show)
            || checkAuthBtn(myETABtn.myChart_classifyOpt_copy)
            || checkAuthBtn(myETABtn.myChart_classifyOpt_delete)
    }
    if(classifyState.classifyTypeAct===2){
        return checkAuthBtn(myETABtn.myChart_classifyOpt_copy)
    }
})
// 拖动排序结束
function onClassifySortEnd(e){
    console.log(e);
    const index=e.item.__draggable_context.index
    const aitem=e.item.__draggable_context.element
    const params={
        MyChartClassifyId:aitem.MyChartClassifyId,
        NextClassifyId:curChartClassifyList.value[index+1]?.MyChartClassifyId||0,
        PrevClassifyId:curChartClassifyList.value[index-1]?.MyChartClassifyId||0,
    }
    console.log(params);
    apiMyETA.myETAClassifySort(params).then(res=>{

    })
}

const showClassifyPop=ref(false)

async function initPage(){
    getPubClassify()
    await getMyClassify()
    listState.cid=classifyState.myClassifyList[0]?.MyChartClassifyId
    listState.cname=classifyState.myClassifyList[0]?.MyChartClassifyName
    listState.ctype='我的图库'
    if(!listState.cid){
        listState.finished=true
        return
    }
    getChartList()
}
initPage()


const listState = reactive({
    ctype:'我的图库',
    cname:'',
    cid:0,
    list:[],
    page:1,
    pageSize:20,
    finished:false,
    loading:false,
    total:0,
})
async function getChartList(){
    const res=await apiMyETA.myChartList({
        CurrentIndex:listState.page,
        PageSize:listState.pageSize,
        MyChartClassifyId:listState.cid
    })
    if(res.Ret===200){
        listState.loading=false
        if(!res.Data){
            listState.finished=true
            listState.total=0
            return
        }
        
        listState.finished=res.Data.Paging.IsEnd
        const arr=res.Data.List||[]
        listState.list=[...listState.list,...arr]
        listState.total=res.Data.Paging.Totals
    }
}
function onLoad(){
    listState.page++
    getChartList()
}

// 切换分类
function handleSwitchClassify(item){
    listState.ctype=classifyState.classifyTypeAct==1?'我的图库':'公共图库'
    listState.cid=item.MyChartClassifyId
    listState.cname=item.MyChartClassifyName
    listState.list=[]
    listState.page=1
    listState.finished=false
    listState.total=0
    getChartList()
    showClassifyPop.value=false
}

//跳转选择图表
function goChooseChart(){
    router.push({
        path:'/myETA/choosechart'
    })
}

//移除图表
function handleRemoveChart(item,index){
    showConfirmDialog({
        title: '提示',
        message:'是否确认移出？',
    }).then(()=>{
        apiMyETA.myChartRemove({
            MyChartClassifyId:Number(listState.cid),
            MyChartId:item.MyChartId
        }).then(res=>{
            if(res.Ret===200){
                setTimeout(() => {
                    showToast('移出成功')
                }, 100);
                listState.list.splice(index,1)
            }
        })
    }).catch(()=>{})
}
let hintDialogShow = ref(false)
let detailArr = ref([])
async function classifyDel(item){
    const res = await apiMyETA.getFrameNode({
        MyChartClassifyId:item.MyChartClassifyId
    })
    if(res.Ret!==200) return 
    detailArr.value = res.Data||[]
    if(detailArr.value.length){
        hintDialogShow.value  = true
        return
    }
    handleClassifyDel(item)
}
let activeMenu = ref([])

// 跳转详情
function goDetail(item){
    if(!item.HaveOperaAuth) return showToast(useNoAuth().chart)
    
    router.push({
        path:"/myETA/chartdetail",
        query:{
            code:item.UniqueCode,
            cid:listState.cid,
            iscommon:listState.ctype=='我的图库'?false:true
        }
    })
}

async function goSearch(){
    // 删除报告搜索页的缓存
    await cachedViewsStore.removeCaches('MyETASearchList')
    router.push('/myETA/searchlist')
}


</script>

<template>
    <div class="myETA-index-page">
        <div class="top-sticky-wrap">
            <div class="search-wrap">
                <van-search 
                    shape="round" 
                    readonly 
                    placeholder="请输入图表名称"
                    @click="goSearch"
                />
                <img @click="goChooseChart" class="icon" src="@/assets/imgs/myETA/icon_select.png" alt="icon" v-permission="myETABtn.myChart_selectChart">
                <img @click="showClassifyPop=true" class="icon" src="@/assets/imgs/myETA/icon_menu2.png" alt="icon">
            </div>
            <p style="margin-top:10px;font-weight:bold">{{listState.ctype}}{{listState.cname?'/'+listState.cname:''}}</p>
            <p class="des">共{{listState.total}}张图表</p>
        </div>
        <van-list
            v-model:loading="listState.loading"
            :finished="listState.finished"
            :finished-text="listState.list.length>0?'没有更多了':'暂无图表'"
            :immediate-check="false"
            @load="onLoad"
        >
            <img v-if="listState.list.length==0&&listState.finished" class="list-empty-img" src="https://hzstatic.hzinsights.com/static/ETA_mobile/empty_img.png" alt="">
            <ul class="chart-list-wrap">
                <li 
                    class="chart-list-item" 
                     v-for="item,index in listState.list" 
                    :key="item.ChartInfoId"
                    @click="goDetail(item)"
                >
                    <div class="van-multi-ellipsis--l2 name">{{item.ChartName}}</div>
                    <img class="img" :src="!item.HaveOperaAuth?useNoAuth().noAuthImg:item.ChartImage" alt="">   
                    <div class="time">
                        <span>{{item.CreateTime.slice(0,10)}}</span>
                        <img v-if="listState.ctype==='我的图库'&&checkAuthBtn(myETABtn.myChart_move)" class="remove-box" @click.stop="handleRemoveChart(item,index)" src="@/assets/imgs/myETA/icon_remove2.png" alt="">
                    </div>
                </li>
            </ul>
        </van-list>
    </div>

    <!-- 分类 -->
    <van-popup 
        v-model:show="showClassifyPop"
        position="right"
        :style="{ height: '100%',width:width>650?'400px':'80%' }"
    >
        <div class="classify-wrap">
            <div class="type-box">
                <span
                    :class="['item',item.type===classifyState.classifyTypeAct?'active':'']"
                    v-for="item in classifyTypeOpt" 
                    :key="item.id"
                    @click="classifyTypeChange(item)"
                >{{item.name}}</span>
            </div>
            <draggable 
                v-if="classifyState.classifyTypeAct==1"
                class="list-box"
                :list="curChartClassifyList" 
                item-key="MyChartClassifyId"
                animation="300"
                @end="onClassifySortEnd"
                :disabled="classifyState.classifyTypeAct!=1"
                tag="ul"
                handle=".icon-drag-box"
            >
                <template #item="{element}">
                    <li 
                        class="select-text-disabled item"
                        @click="handleSwitchClassify(element)"
                    >
                        <div :class="['van-ellipsis name',element.MyChartClassifyId===listState.cid&&'active-name']">{{element.MyChartClassifyName}}</div>
                        <div class="icon-drag-box" v-if="classifyState.classifyTypeAct==1">
                            <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48" fill="none">
                                <path d="M40.4087 23.8334L33.7785 18.3083V22.7283H24.9384V13.8882H29.3585L23.8334 7.25806L18.3083 13.8882H22.7283V22.7283H13.8882V18.3083L7.25806 23.8334L13.8882 29.3585V24.9384H22.7283V33.7785H18.3083L23.8334 40.4087L29.3585 33.7785H24.9384V24.9384H33.7785V29.3585L40.4087 23.8334Z" fill="#666666"/>
                            </svg>
                        </div>
                        <div class="icon-menu-box" @click.stop="handleShowOpt(element)" v-if="isOptShow">
                            <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48" fill="none">
                                <path d="M24 33C25.65 33 27 34.35 27 36C27 37.65 25.65 39 24 39C22.35 39 21 37.65 21 36C21 34.35 22.35 33 24 33ZM21 24C21 25.65 22.35 27 24 27C25.65 27 27 25.65 27 24C27 22.35 25.65 21 24 21C22.35 21 21 22.35 21 24ZM21 12C21 13.65 22.35 15 24 15C25.65 15 27 13.65 27 12C27 10.35 25.65 9 24 9C22.35 9 21 10.35 21 12Z" fill="#666666"/>
                            </svg>
                        </div>
                    </li>
                </template>
            </draggable>
            <div class="public-classify-wrap" v-else>
                <van-collapse class="classify-level" v-model="activeMenu" :border="false">
                    <van-collapse-item
                        :name="item.MenuAdminId"
                        v-for="item in curChartClassifyList"
                        :key="item.MenuAdminId"
                        :is-link="true"
                    >
                        <template #title>
                            <div class="title-second">
                                <span class="van-ellipsis">{{item.MenuName}}</span>
                            </div>
                        </template>
                        <div 
                            class="classify-item"
                            v-for="_item in item.Items" 
                            :key="_item.MyChartClassifyId"
                            @click.stop="handleSwitchClassify(_item)"
                        >
                            <span class="van-ellipsis text">{{ _item.MyChartClassifyName }}</span>
                            <div @click.stop="handleShowOpt(_item)" class="menu-icon">
                                <img class="icon" src="@/assets/imgs/ppt/ppt_icon_menu.png" alt="">
                            </div>
                        </div>
                    </van-collapse-item>
                </van-collapse>
            </div>
            <div class="bot-btns" v-permission="myETABtn.myChart_classifyOpt_edit">
                <van-button type="primary" block @click="handleAddClassify('')">添加我的分类</van-button>
            </div>
        </div>
    </van-popup>

    <!-- 添加我的分类弹窗 -->
    <van-dialog 
        v-model:show="classifyState.showEidtClassifyName" 
        :title="classifyState.isAddClassifyName?'添加分类':'重命名'" 
        show-cancel-button
        confirmButtonText="确定"
        @confirm="handleConfirmEditClassify"
        :before-close="handleAddClassifyBeforeClose"
    >
        <div class="rename-wrap">
            <input type="text" placeholder="请输入分类名称！" v-model="classifyState.classifyNameVal">
        </div>
    </van-dialog>

    <!-- 分类操作弹窗 -->
    <van-popup 
        v-model:show="classifyState.showClassifyOpt" 
        round
        position="bottom"
    >
        <div class="classify-opt-wrap">
            <!-- <div class="item border">
                <img src="@/assets/imgs/ppt/ppt_icon_file.png" alt="">
                <span>{{classifyState.activeClassifyVal.MyChartClassifyName}}</span>
            </div> -->
            <!-- 我的图库分类操作 -->
            <template v-if="classifyState.classifyTypeAct==1">
            <div class="item border" @click="handleAddClassify(classifyState.activeClassifyVal)" v-permission="myETABtn.myChart_classifyOpt_edit">
                <!-- <img src="@/assets/imgs/ppt/ppt_icon_write.png" alt=""> -->
                <span>重命名</span>
            </div>
            <div class="item border" v-permission="myETABtn.myChart_classifyOpt_show">
                <!-- <img src="@/assets/imgs/icon_user.png" alt=""> -->
                <span style="display:inline-block;margin-right:10px">所有人可见</span>
                <van-switch
                    class="switch-box"
                    size="22px" 
                    :model-value="classifyState.activeClassifyVal.IsPublic?true:false"
                    @update:model-value="handleClassifyShare"
                />
            </div>
            <div class="item border red" @click="classifyDel(classifyState.activeClassifyVal)" v-permission="myETABtn.myChart_classifyOpt_delete">
                <!-- <img src="@/assets/imgs/icon_del.png" alt=""> -->
                <span>删除</span>
            </div>
            </template>
            <!-- 公共图库分类操作 -->
            <template v-if="classifyState.classifyTypeAct==2">
            <div class="item border" @click="handleCopyClassify(classifyState.activeClassifyVal)" v-permission="myETABtn.myChart_classifyOpt_copy">
                <!-- <img src="@/assets/imgs/ppt/ppt_icon_copy.png" alt=""> -->
                <span>复制</span>
            </div>
            </template>
        </div>
    </van-popup>
    <!--分类节点弹窗-->
    <van-dialog
        v-model:show="hintDialogShow"
        title="提示"
        show-cancel-button
        confirmButtonText="确定"
        @confirm="hintDialogShow = false"
    >
        <div class="class-node-wrap">
            <p>该图分类已添加节点链接，不允许删除！详情请前往PC端查看。</p>
            <div class="frame-list">
                <p class="frame-item" v-for="(item,index) in detailArr" :key="index">
                    {{index+1}}、{{item.FrameworkName}}({{item.NodeName}})
                </p>
            </div>
        </div>

    </van-dialog>
</template>

<style lang="scss">
.public-classify-wrap{
    .van-collapse{
        .van-collapse-item{
            >.van-cell{
                flex-direction: row-reverse;
                .van-cell__title{
                    overflow: hidden;
                }
            }
            .van-collapse-item__wrapper{
                .van-collapse-item__content{
                    padding-top: 0;
                    padding-bottom: 0;
                }
            }
        }
    }
}
</style>
<style lang="scss" scoped>
.myETA-index-page{
    padding: 0 $page-padding;
}
.top-sticky-wrap{
    position: sticky;
    top: 0;
    z-index: 99;
    background-color: #fff;
    padding-bottom: 20px;
    padding-top: 30px;
    .search-wrap{
        display: flex;
        align-items: center;
        .van-search{
            padding: 0;
            flex: 1;
        }
        .icon{
            width: 70px;
            height: 70px;
            margin-left: 30px;
        }
    }
    .des{
        margin-top: 30px;
        color: $font-grey;
    }
}

.chart-list-wrap{
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
    justify-content: space-between;
    gap: 30px 0;
    .chart-list-item{
        box-sizing: border-box;
        width: 330px;
        padding: 10px 14px;
        border: 1px solid $border-color;
        border-radius: 12px;
        .name{
            min-height: 70px;
        }
        .img{
            width: 100%;
            height: 220px;
            display: block;
            margin: 10px 0;
        }
        .time{
            font-size: 28px;
            color: $font-grey_999;
            position: relative;
            .remove-box{
                position: absolute;
                top: 0;
                right: 0;
                width: 32px;
                height: 32px;
            }       
        }
    }
}

.classify-wrap{
    height: 100%;
    display: flex;
    flex-direction: column;
    .type-box{
        padding: $page-padding;
        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.08);
        .item{
            margin-right: 40px;
            font-size: 32px;
            color: $font-grey_999;
        }
        .active{
            font-weight: 600;
            color: #333;
            position: relative;
            &::after{
                content: '';
                position: absolute;
                bottom: -$page-padding;
                left: 50%;
                transform: translateX(-50%);
                display: block;
                width: 50px;
                height: 6px;
                background-color: $theme-color;
                border-radius: 3px;
            }
        }
    }
    .list-box{
        flex: 1;
        overflow-y: auto;
        padding: $page-padding;
        .item{
            padding: 23px 0;
            display: flex;
            align-items: center;
            .name{
                flex: 1;
            }
            .active-name{
                color: $theme-color;
            }
            .icon-drag-box{
                width: 48px;
                height: 48px;
                svg{
                    width: 100%;
                    height: 100%;
                }
            }
            .icon-menu-box{
                margin-left: 20px;
                width: 48px;
                height: 48px;
                svg{
                    width: 100%;
                    height: 100%;
                }
            }
        }
    }
    .public-classify-wrap{
        margin-top:30px;
        .classify-level{
            span{
                padding: 0 15px;
            }
            .classify-item{
                display: flex;
                align-items: center;
                justify-content: space-between;
                overflow: hidden;
                padding: var(--van-cell-vertical-padding) 0;
                .menu-icon{
                    width:30px;
                    text-align: center;
                }
                img{
                    display: inline-block;
                    width: 48px;
                    height: auto;
                    &.icon{
                        width: 6px;
                        margin-right: 0;
                    }
                }
            }
        }
        @media screen and (min-width:$media-width){
            margin-top:10px;
            .classify-level{
                span{
                    font-size: 16px;
                    padding:0 60px;
                    
                }
                .classify-item{
                    img{
                        width: 32px;
                        &.icon{
                            width:4px;
                        }
                    }
                }
                
            }
        }
    }
    .bot-btns{
        padding: $page-padding;
    }
}

.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;
    }
}

.classify-opt-wrap{
    .item{
        padding: 42px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        img{
            width: 36px;
            height: 36px;
            margin-right: 20px;
        }
        // .switch-box{
        //     position: absolute;
        //     right: 42px;
        //     top: 50%;
        //     transform: translateY(-50%);
        // }
    }
    .border{
        border-bottom: 1px solid $border-color;
    }
    .blue{
        color: $theme-color;
    }
    .red{
        color: $theme-red;
    }
}

.class-node-wrap{
    padding:30px;
    .frame-list{
        max-height: 30vh;
        overflow-y: auto;
        margin-top: 15px;
    }
}

@media screen and (min-width:$media-width){
    .myETA-index-page{
        padding: 0 $page-padding;
    }
    .top-sticky-wrap{
        top: 60px;
        padding-bottom: 10px;
        padding-top: 15px;
        .search-wrap{
            .icon{
                width: 35px;
                height: 35px;
                margin-left: 15px;
            }
        }
        .des{
            margin-top: 15px;
        }
    }
    .chart-list-wrap{
        gap: 20px 4%;
        justify-content: flex-start;
        .chart-list-item{
            width: 22%;
            padding: 10px 14px;
            border-radius: 6px;
            .name{
                min-height: 35px;
            }
            .img{
                width: 100%;
                height: auto;
                display: block;
                margin: 10px 0;
            }
            .time{
                font-size: 14px;
                .remove-box{
                    width: 16px;
                    height: 16px;
                }
            }
        }
    }
    .classify-wrap{
        .type-box{
            padding: $page-padding;
            box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.08);
            .item{
                margin-right: 20px;
                font-size: 16px;
            }
            .active{
                &::after{
                    bottom: -$page-padding;
                    width: 25px;
                    height: 3px;
                    border-radius: 2px;
                }
            }
        }
        .list-box{
            padding: $page-padding;
            .item{
                padding: 12px 0;
                .icon-drag-box{
                    width: 24px;
                    height: 24px;
                }
                .icon-menu-box{
                    margin-left: 10px;
                    width: 24px;
                    height: 24px;
                }
            }
        }
        .bot-btns{
            padding: $page-padding;
        }
    }

    .rename-wrap{
        padding: 25px 15px;
        span{
            margin-right: 10px;
        }
        input{
            line-height: 35px;
            padding: 0 15px;
            border-radius: 35px;
            width: 75px;
        }
    }

    .classify-opt-wrap{
        .item{
            padding: 21px;
            img{
                width: 18px;
                height: 18px;
                margin-right: 10px;
            }
            // .switch-box{
                // right: 21px;
            // }
            
        }
    }
    .class-node-wrap{
        padding:30px;
        .frame-list{
            margin-top: 15px;
        }
    }
}
</style>