<script setup>
//加入我的图库
import {ref,watch} from 'vue'
import {showToast} from 'vant'
import{apiMyClassifyList,apiMyChartAdd,apiAddClassify} from '@/api/myETA'

const props = defineProps({
    isShowDialog:{//是否展示弹窗
        type:Boolean,
        default:false
    },
    dialogPosition:{//弹窗显示的位置,根据屏幕大小决定
        type:String,
        default:'bottom'
    },
    chartInfo:{//图表信息
        type:Object,
        default:{}
    }
})

//是否展示添加分类弹窗
const showAddClassify = ref(false)
//新添加的分类名称
const addClassifyName = ref('')

//我的图库分类列表
const classifyList = ref([])
//chartInfo中,已选择的分类ids
const choosedIds = ref([])

const showAddPop = ref(false)
watch(()=>props.isShowDialog,()=>{
    if(props.isShowDialog){
        getMyClassifyList()
    }
    showAddPop.value = props.isShowDialog
})
const emits = defineEmits(['close'])
watch(showAddPop,()=>{
    if(!showAddPop.value){
        emits('close')
    }
})
//获取我的图库列表
async function getMyClassifyList(){
    const res = await apiMyClassifyList()
    if(res.Ret!==200) return 
    classifyList.value = res.Data.List||[]
    choosedIds.value = props.chartInfo.MyChartClassifyId?props.chartInfo.MyChartClassifyId.split(',').map(e => Number(e)):[]

}
function closeDialog(){
    emits('close')
}
//选择分类
function handleChooseClassify(item){
    if(choosedIds.value.includes(item.MyChartClassifyId)){
        const index=choosedIds.value.indexOf(item.MyChartClassifyId)
        choosedIds.value.splice(index,1)
    }else{
        choosedIds.value.push(item.MyChartClassifyId)
    }
    
}
//确认加入的分类
function handleConfirmAddChart(){
    if(choosedIds.value.length===0){
        showToast('请选择分类')
        return
    }
    apiMyChartAdd({
        ChartInfoId:props.chartInfo.ChartInfoId,
        MyChartClassifyId:choosedIds.value
    }).then(res=>{
        if(res.Ret!==200) return 
        showToast({message:'加入我的图库成功',type:'success'})
        closeDialog()

    })
}
//添加新的分类
function handleConfirmEditClassify(){
    if(!addClassifyName.value){
        showToast('请填写分类名称！')
        return
    }
    apiAddClassify({MyChartClassifyName:addClassifyName.value}).then(res=>{
        if(res.Ret!==200) return
        showAddClassify.value=false
        getMyClassifyList()
    })
}
</script>

<template>
    <van-popup 
        v-model:show="showAddPop" 
        :position="dialogPosition"
        round
    >
        <div class="select-classify-wrap">
            <div class="top-box">
                <span class="close" @click="closeDialog">关闭</span>
                <span class="title">加入我的图库</span>
                <span class="add-btn" @click="showAddClassify=true,addClassifyName=''">添加分类</span>
            </div>
            <ul class="classify-list">
                <li 
                    :class="['item',choosedIds.includes(item.MyChartClassifyId)?'active':'']" 
                    v-for="item in classifyList" 
                    :key="item.MyChartClassifyId"
                    @click="handleChooseClassify(item)"
                >{{item.MyChartClassifyName}}</li>
            </ul>
            <div class="block"></div>
            <div class="confirm-btn" @click="handleConfirmAddChart">
                <span>确定</span>
            </div>
        </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 scoped lang="scss">
.select-classify-wrap{
    .top-box{
        padding:32px;
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid #DCDFE6;
        .close{
            color:#666666;
        }
        .title{
            font-size: 36px;
        }
        .add-btn{
            color:$theme-color;
        }
    }
    .classify-list{
        max-height: 600px;
        overflow-y: auto;
        .item{
            padding:32px;
            border-bottom: 1px solid #DCDFE6;
            
            &.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{
        padding:32px;
        text-align: center;
        color: $theme-color;
    }
    .block{
        background-color: #F6F6F6;
        height:16px;
    }
    
    @media screen and (min-width:$media-width){
        width: 375px;
        .top-box{
            padding:16px;
            .title{
                font-size: 18px;
            }
        }
        .classify-list{
            max-height: 500px;
            overflow-y: auto;
            .item{
                padding:16px;
                &.active{
                    &::after{
                        width:18px;
                        height:18px;
                    }
                }
            }
        }
        .confirm-btn{
            padding:16px;
        }
        .block{
            height:8px;
        }
    }
}
</style>
