<script setup>
import {reactive, ref} from 'vue'
import apiChart from '@/api/chart'
import apiFuture from '@/api/futureChart'
import apiCorrelation from '@/api/correlationChart'
import apiLineEquationChart from '@/api/lineEquationChart'
import apiStatisticFeatureChart from '@/api/statisticFeatureChart'
import {apiMyClassifyList,apiMyChartAdd,apiAddClassify} from '@/api/myETA'
import { showToast } from 'vant';
import { useWindowSize } from '@vueuse/core'
import { useNoAuth } from '@/hooks/useNoAuth'
const { width, height } = useWindowSize()

const keyword=ref('')

const typeOpt=[
    {
        name:"图库",
        type:1,
    },
    {
        name:"商品价格曲线",
        type:2,
    },
    {
        name:"相关性图表",
        type:3,
    },
    {
        name:"拟合方程曲线",
        type:4,
    },
    {
        name:"统计特征",
        type:5,
    }

]
let type=ref(1)
const isShowMe=ref(false)

const listState=reactive({
    list:[],
    page:0,
    pageSize:20,
    loading:false,
    finished:false,
})

async function getChartList(){
    const params={
        PageSize: listState.pageSize,
        CurrentIndex: listState.page,
        ChartClassifyId: 0,
        KeyWord: keyword.value,
        IsShowMe:isShowMe.value
    }
    let res
    if(type.value==1){
        res=await apiChart.pubChartList(params)
    }else if(type.value==2){
        res=await apiFuture.searchChartList(params)
    }else if(type.value==3){
        res=await apiCorrelation.chartList(params)
    }else if(type.value==4){
        res=await apiLineEquationChart.chartList(params)
    }else if(type.value==5){
        res=await apiStatisticFeatureChart.chartList(params)
    }
    
    if(res.Ret==200){
        listState.loading=false
        if(!res.Data){
            listState.finished=true
            return
        }

        listState.finished=res.Data.Paging.IsEnd
        const arr=res.Data.List||[]
        listState.list=[...listState.list,...arr]
    }
}

function onLoad(){
    listState.page++
    getChartList()
}

function refreshList(){
    listState.list=[]
    listState.page=1
    listState.finished=false
    getChartList()
}

// 切换图类型
function handleTypeChange(item){
    type.value=item.type
    isShowMe.value=false
    refreshList()
}

// 只看我的状态切换
function handleShowMeChange(){
    refreshList()
}

// 搜索
function onSearch(){
    refreshList()
}
// 清除搜索关键词
function onClearSearch(){
    console.log('aaa');
    keyword.value=''
    refreshList()
}


// 获取我的分类数据
let classifyList=ref([])
async function getMyClassifyList(){
    const res=await apiMyClassifyList()
    if(res.Ret===200){
        const arr=res.Data.List||[]
        classifyList.value=arr
    }
}
getMyClassifyList()
// 显示选择分类弹窗
let showSelect=ref(false)
let selectChartId=ref(0)//要加入的图id
let cids=ref([])//已加入的分类id
function handleAdd(item){
    selectChartId.value=item.ChartInfoId
    cids.value=item.MyChartClassifyId?item.MyChartClassifyId.split(',').map(e => Number(e)):[]
    showSelect.value=true
}

function handleChooseClassify(item){
    if(cids.value.includes(item.MyChartClassifyId)){
        const index=cids.value.indexOf(item.MyChartClassifyId)
        cids.value.splice(index,1)
    }else{
        cids.value.push(item.MyChartClassifyId)
    }
}

// 确认将图加入选择的分类
function handleConfirmAddChart(){
    
    if(cids.value.length===0){
        showToast('请选择分类')
        return
    }
    apiMyChartAdd({
        ChartInfoId:selectChartId.value,
        MyChartClassifyId:cids.value
    }).then(res=>{
        if(res.Ret===200){
            showToast('添加成功！')
            showSelect.value=false
            // 更新列表中的MyChartClassifyId
            listState.list.forEach(item=>{
                if(item.ChartInfoId==selectChartId.value){
                    item.MyChartClassifyId=cids.value.join(',')
                }
            })
        }
    })
}

// 添加分类
let showAddClassify=ref(false)
let addClassifyName=ref('')
async function handleConfirmEditClassify(){
    if(!addClassifyName.value){
        showToast('请填写分类名称！')
        return
    }
    const res=await apiAddClassify({MyChartClassifyName:addClassifyName.value})
    if(res.Ret===200){
        showAddClassify.value=false
        getMyClassifyList()
    }
}


</script>

<template>
    <div class="choose-chart-list-page">
        <div class="sticky-box">
        <div class="search-box">
            <van-search
                shape="round"
                placeholder="请输入图表名称"
                v-model="keyword"
                @search="onSearch"
                @clear="onClearSearch"
            />
        </div>
        <div class="type-box">
            <span 
                :class="['opt',type==item.type?'active':'']" 
                v-for="item in typeOpt" 
                :key="item.type"
                @click="handleTypeChange(item)"
            >{{item.name}}</span>
        </div>
        </div>
        <!-- 只看我的 -->
        <div class="only-me-box" v-if="type!=1">
            <van-checkbox v-model="isShowMe" @change="handleShowMeChange">只看我的</van-checkbox>
        </div>
        <van-list
            v-model:loading="listState.loading"
            :finished="listState.finished"
            :finished-text="listState.list.length>0?'没有更多了':'暂无图表'"
            @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="list-wrap">
            <li class="item" v-for="item in listState.list" :key="item.ChartInfoId">
                <div class="van-multi-ellipsis--l2 name">{{item.ChartName}}</div>
                <van-image
                    fit="contain"
                    lazy-load
                    class="img"
                    :src="!item.HaveOperaAuth?useNoAuth().noAuthImg:item.ChartImage"
                />
                <div>
                    <span class="time">{{item.ModifyTime.substr(0,10)}}</span>
                    <template v-if="item.HaveOperaAuth">
                        <img class="add-icon" src="@/assets/imgs/myETA/icon_add.png" alt="" @click="handleAdd(item)">
                        <div class="pad-add-box" @click="handleAdd(item)">
                            <img src="@/assets/imgs/myETA/icon_add.png" alt="">
                            <span>加入我的图库</span>
                        </div>
                    </template>
                </div>
            </li>
        </ul>
        </van-list>
    </div>

    <!-- 选择分类弹窗 -->
    <van-popup 
        v-model:show="showSelect" 
        :position="width>650?'center':'bottom'"
        round
        closeable
    >
        <div class="select-classify-wrap">
            <div class="top-box">
                <span class="add-btn" @click="showAddClassify=true,addClassifyName=''">添加分类</span>
                <span class="title">选择分类</span>
            </div>
            <ul class="classify-list">
                <li 
                    :class="['item',cids.includes(item.MyChartClassifyId)?'active':'']" 
                    v-for="item in classifyList" 
                    :key="item.MyChartClassifyId"
                    @click="handleChooseClassify(item)"
                >{{item.MyChartClassifyName}}</li>
            </ul>
            <van-button 
                type="primary" 
                block 
                round 
                class="confirm-btn" 
                @click="handleConfirmAddChart"
            >确定</van-button>
        </div>
    </van-popup>
    <!-- 添加我的分类弹窗 -->
    <van-dialog 
        v-model:show="showAddClassify" 
        title="添加分类" 
        show-cancel-button
        confirmButtonText="确定"
        @confirm="handleConfirmEditClassify"
    >
        <div class="rename-wrap">
            <input type="text" placeholder="请输入分类名称！" v-model="addClassifyName">
        </div>
    </van-dialog>
</template>

<style lang="scss" scoped>
.sticky-box{
    position: sticky;
    top: 0;
    z-index: 99;
    background-color: #fff;
}
.type-box{
    padding: 60px 40px 26px 40px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.08);
    overflow-x: auto;
    display: flex;
    flex-wrap: nowrap;
    &::-webkit-scrollbar{
        display: none;
    }
    .opt{
        display: inline-block;
        margin-right: 40px;
        color: $font-grey_999;
        flex-shrink: 0;
        &.active{
            color: #333;
            position: relative;
            &::after{
                content: '';
                display: block;
                width: 50px;
                height: 6px;
                background-color: $theme-color;
                position: absolute;
                bottom: -26px;
                left: 50%;
                transform: translateX(-50%);
                border-radius: 3px;
            }
        }
    }
}
.only-me-box{
    padding: 40px 36px 0 36px;
}
.list-wrap{
    padding: $page-padding;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .item{
        box-sizing: border-box;
        padding: 14px;
        width: 48%;
        margin-bottom: 30px;
        border: 1px solid $border-color;
        box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.03);
        border-radius: 4px;
        position: relative;
        .name{
            min-height: 60px;
        }
        .img{
            width: 100%;
            height: 220px;
            margin: 14px 0;
        }
        .time{
            font-size: 24px;
            color: $font-grey_999;
        }
        .add-icon{
            position: absolute;
            right: 14px;
            bottom: 14px;
            width: 36px;
            height: 36px;
        }
        .pad-add-box{
            display: none;
        }
    }
}
.select-classify-wrap{
    .top-box{
        padding: 30px 0;
        text-align: center;
        position: relative;
        .title{
            font-size: 32px;
        }
        .add-btn{
            position: absolute;
            left: $page-padding;
            top: 50%;
            transform: translateY(-50%);
            color: $theme-color;
        }
    }
    .classify-list{
        height: 40vh;
        overflow-y: auto;
        .item{
            padding: 20px $page-padding;
            color: $font-grey;
        }
        .active{
            color: $theme-color;
            position: relative;
            &::after{
                content: '';
                display: block;
                width: 36px;
                height: 36px;
                background-image: url('@/assets/imgs/icon_select2.png');
                background-size: cover;
                background-repeat: no-repeat;
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                right: $page-padding;
            }
        }
    }
    .confirm-btn{
        width: calc(100% - 2*$page-padding);
        margin: 32px auto;
    }
}
.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;
    }
}

@media screen and (min-width:$media-width){
    .sticky-box{
        padding: 30px;
        top: 60px;
        display: flex;
        align-items: center;
        flex-direction: row-reverse;
        justify-content: space-between;
    }
    .type-box{
        flex-shrink: 0;
        box-shadow: none;
        padding: 0;
        flex: 3;
        .opt{
            margin-right: 20px;
            padding: 8px 24px;
            color: $theme-color;
            border: 1px solid $theme-color;
            border-radius: 3px;
            &.active{
                color: #fff;
                background-color: $theme-color;
                &::after{
                    display: none;
                }
            }
        }
    }
    .search-box{
        flex: 1;
        max-width: 500px;
        min-width: 200px;
    }
    .only-me-box{
        padding: 10px 30px;
        margin-top: -30px;
        position: sticky;
        top: 146px;
        z-index: 100;
        background-color: #fff;
    }
    .list-wrap{
        padding: 10px 30px;
        justify-content: flex-start;
        .item{
            padding: 15px;
            width: 260px;
            margin: 10px;
            .name{
                min-height: 36px;
            }
            .img{
                height: 158px;
                margin: 10px 0;
            }
            .time{
                font-size: 14px;
            }
            .add-icon{
                display: none;
            }
            .pad-add-box{
                display: flex;
                align-items: center;
                position: absolute;
                bottom: 15px;
                right: 15px;
                font-size: 14px;
                color: $theme-color;
                img{
                    width: 18px;
                    height: 18px;
                    margin-right: 5px;
                }
            }
        }
    }
    .select-classify-wrap{
        width: 375px;
        max-width: 500px;
        .top-box{
            padding: 20px 0;
            border-bottom: 1px solid $border-color;
            .title{
                font-size: 18px;
            }
            .add-btn{
                left: 16px;
            }
        }
        .classify-list{
            &::-webkit-scrollbar{
                display: none;
            }
            .item{
                padding: 16px;
                border-bottom: 1px solid $border-color;
            }
            .active{
                &::after{
                    width: 18px;
                    height: 18px;
                    right: 16px;
                }
            }
        }
        .confirm-btn{
            width: calc(100% - 2*$page-padding);
            margin: 20px auto;
        }
    }
    .rename-wrap{
        padding: 50px 30px;
        input{
            line-height: 35px;
            padding: 0 30px;
            border-radius: 35px;
            width: 150px;
        }
    }
}
</style>