<script setup>
import { onMounted , reactive, ref , computed } from 'vue';
import Search from '@/components/Search.vue'
import SelfList from '@/components/SelfList.vue'
import draggable from 'vuedraggable'
import {apiChartList,apiChartClassifyList,apiChartMove,apiChartClassifyMove} from '@/api/chart.js'

// 获取分类
let chartMyClassifyList=ref([])//我的图库分类
let chartPubClassifyList=ref([])//公共图库分类
let selectChartClassifyId=ref('')//当前选中的分类id
let curChartClassifyType=ref('')//当前选中的是公共图库\我的图库
//获取图库分类
const getChartClassifyList=async ()=>{
    const res=await apiChartClassifyList()
    if(res.code===200){
        chartMyClassifyList.value=res.data.private_classify||[]
        chartPubClassifyList.value=res.data.public_classify||[]
        if(res.data.private_classify){
            selectChartClassifyId.value=res.data.private_classify[0].myChartClassifyId
            curChartClassifyType.value='我的图库'
        }else{
            selectChartClassifyId.value=res.data.public_classify[0].myChartClassifyId
            curChartClassifyType.value='公共图库'
        }
        getChartList()
    }
}
getChartClassifyList()
const curChartClassifyList=computed(()=>{
    if(curChartClassifyType.value==='我的图库'){
        return chartMyClassifyList.value
    }else{
        return chartPubClassifyList.value
    }
})

// 获取图表数据
let chartList=reactive({
    page:1,
    pageSize:20,
    list:[],
    finished:false,
    loading:false
})
const getChartList=async ()=>{
    chartList.loading=true
    const res=await apiChartList({
        Page:chartList.page,
        Limit:chartList.pageSize,
        ClassifyId:selectChartClassifyId.value,
        Keywords:''
    })
    chartList.loading=false
    if(res.code===200){
        if(res.data){
            chartList.list=[...chartList.list,...res.data]
            if(res.data.length<20){
                chartList.finished=true
            }
        }else{
            chartList.finished=true
        }
    }
}

// 加载更多图表
const onLoad=()=>{
    chartList.page++
    getChartList()
}

// 点击分类
const handleClickChartClassifyItem=(item)=>{
    chartList.finished=false
    chartList.list=[]
    chartList.page=1
    selectChartClassifyId.value=item.myChartClassifyId
    getChartList()
}

let isMounted=ref(false)
onMounted(()=>{
    isMounted.value=true
})
</script>

<template>
    <!-- 图库放置在公共顶部的搜索和筛选 -->
    <template v-if="isMounted&&$route.path=='/chart/list'">
        <teleport to="#chart-in-head">
            <div class="flex-col-center chart-search-filter-wrap">
                <Search
                    placeholder="图表名称搜索"
                ></Search>
                <el-popover 
                    :width="400" 
                    trigger="click"
                    placement="bottom-end"
                    popper-style="box-shadow: rgb(14 18 22 / 35%) 0px 10px 38px -10px, rgb(14 18 22 / 20%) 0px 10px 20px -15px; padding: 20px;"
                >
                    <template #reference>
                        <div class="filter-btn">筛选</div>
                    </template>
                    <template #default>
                        <div class="filter-box">
                            <!-- 内部员工才有 客户只有公共图库分类 -->
                            <div class="top-type" v-if="$store.state.userInfo&&$store.state.userInfo.is_inner==1">
                                <span 
                                    :class="curChartClassifyType=='公共图库'&&'type-active'" 
                                    @click="curChartClassifyType='公共图库'"
                                >公共图库</span>
                                <span
                                    :class="curChartClassifyType=='我的图库'&&'type-active'" 
                                    @click="curChartClassifyType='我的图库'"
                                >我的图库</span>
                            </div>
                            <draggable 
                                class="filter-list"
                                v-model="curChartClassifyList" 
                                item-key="myChartClassifyId"
                                animation="300"
                                :disabled="curChartClassifyType=='公共图库'"
                            >
                                <template #item="{element}">
                                    <div 
                                        :class="['item',selectChartClassifyId==element.myChartClassifyId&&'item-active']" 
                                        @click="handleClickChartClassifyItem(element)"
                                    >{{element.myChartClassifyName}}</div>
                                </template>
                            </draggable>
                        </div>
                    </template>
                </el-popover>
            </div>
        </teleport>
    </template>
    
    <div class="chart-list-page">
        <SelfList 
            :finished="chartList.finished" 
            :isEmpty="chartList.list.length===0&&chartList.finished"
            :loading="chartList.loading"
            :count="chartList.list.length"
            @listOnload="onLoad"
        >
            <draggable 
                class="flex list-wrap"
                v-model="chartList.list" 
                item-key="UniqueCode"
                animation="300"
                :disabled="false"
            >
                <template #item="{element}">
                    <div class="chart-item">
                        <el-tooltip
                            effect="dark"
                            placement="top-start"
                        >
                            <template #content>
                                <div style="max-width: 250px;" v-html="element.ChartName"></div>
                            </template>
                            <div class="multi-ellipsis-l2 title" v-html="element.ChartName"></div>
                        </el-tooltip>
                        <el-image class="chart-img" :src="element.ChartImage" fit="cover" lazy />
                    </div>
                </template>
                
            </draggable>
        </SelfList>
    </div>
</template>

<style lang="scss" scoped>
.chart-search-filter-wrap{
    height: 100%;
    .filter-btn{
        cursor: pointer;
        margin-left: 25px;
        color: #F3A52F;
        font-size: 16px;
        &::before{
            content: '';
            display: inline-block;
            width: 17px;
            height: 13px;
            background-image: url('@/assets/icon-filter.png');
            background-size: cover;
            vertical-align: middle;
            margin-right: 3px;
        }
    }
}
.filter-box{
    .top-type{
        background-color: #fff;
        padding-bottom: 12px;
        span{
            font-size: 16px;
            color: #999;
            display: inline-block;
            margin-right: 40px;
            cursor: pointer;
            &:hover{
                color: #F3A52F;
            }
        }    
        .type-active{
            color: #F3A52F;
            font-weight: bold;
            position: relative;
            &::after{
                content: '';
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
                top: 105%;
                width: 40px;
                height: 4px;
                background: #F3A52F;
                border-radius: 37px;
            }
        }
    }
    .filter-list{
        height: 300px;
        overflow-y: auto;
        &::-webkit-scrollbar{
            display: none;
        }
        .item{
            padding: 10px 0;
            font-size: 16px;
            border-bottom: 1px solid #F2F2F2;
            cursor: pointer;
        }
        .item-active{
            color: #F3A52F;
        }
    }
}
.chart-list-page{
    .list-wrap{
        flex-wrap: wrap;
    }
    .chart-item{
        flex-shrink: 0;
        width: 270px;
        height: 300px;
        background: #FFFFFF;
        box-shadow: 0px 4px 12px 1px rgba(0, 0, 0, 0.08);
        border-radius: 8px;
        border: 1px solid #F2F2F2;
        margin: 0 10px 20px 10px;
        position: relative;
        padding: 20px;
        &:hover{
            border-color: #F3A52F;
        }
        .title{
            font-size: 16px;
        }
        .chart-img{
            position: absolute;
            left: 20px;
            width: calc(100% - 40px);
            bottom: 20px;
            height:215px;
            object-fit: cover;
        }
    }
}
</style>
