<template>
    <div class="import-mychart-wrap">
        <div class="select-box">
			<el-select 
				style="width:300px" 
				v-model="selectMyChartClassify" 
				filterable 
				placeholder="图分类名称"
				@change="handleChange"
			>
				<el-option
					v-for="item in myChartClassifyList"
					:key="item.MyChartClassifyId"
					:label="item.MyChartClassifyName"
					:value="item.MyChartClassifyId"
				>
				</el-option>
			</el-select>
			<el-button type="primary" @click="handleImport">一键导入</el-button>
			<el-tooltip class="item" effect="dark" content="该操作将批量导入所选图分类下所有图表" placement="top-start">
				<i style="font-size:24px;color: #666;" class="el-icon-question"></i>
			</el-tooltip>
		</div>
		<div class="list" v-infinite-scroll="load" v-if="list.length>0">
            <div class="chart-item" v-for="item in list" :key="item.UniqueCode" @click="handleClickItem">
                <div class="title">{{item.ChartName}}</div>
                <div class="img" :style="'backgroundImage:url('+item.ChartImage+')'"></div>
            </div>
		</div>
        <tableNoData text="无数据" size="mini" v-if="list.length===0"/>
    </div>
</template>

<script>
import { mychartInterface } from '@/api/api.js';
export default {
    data() {
        return {
            myChartClassifyList:[],
            selectMyChartClassify:'',
            pageSize:10000,
			CurrentIndex: 1,
			list:[],
            loading:false,
            finished:false,

        }
    },
    props:{
        showEnMark:{
            type:Boolean,
            default:false
        }
    },
    mounted(){
        this.getMyChartClassify()
    },  
    methods: {
        //获取我的图库中分类
		getMyChartClassify(){
			mychartInterface.classifyList().then(res=>{
				if (res.Ret !== 200) return;
				this.myChartClassifyList=res.Data?res.Data.List:[]
			})
		},
        handleChange(){
            this.CurrentIndex=1
            this.list=[]
            this.finished=false
            this.loading=false
            this.handleGetMyChartList()
        },
		async handleGetMyChartList(){
            if(!this.selectMyChartClassify) return
            this.loading=true
            const res=await  mychartInterface.myList({
				PageSize: this.pageSize,
				CurrentIndex: this.CurrentIndex,
				MyChartClassifyId: this.selectMyChartClassify || 0
			})
            this.loading=false
            const arr=res.Data?res.Data.List.filter(_=>!_.Disabled):[]
            this.list=[...this.list,...arr]
            if(!res.Data){
                this.finished=true
            }
            if(res.Data&&res.Data.Paging.IsEnd){
                this.finished=true
            }
		},

        load(){
            if(this.finished) return
            this.CurrentIndex++
            this.handleGetMyChartList()
        },

        handleImport:_.throttle(function(){
            if(!this.selectMyChartClassify){
                this.$message.warning('请选择分类')
                return
            }
            if(this.list.length==0){
                this.$message.warning('该分类无图表')
                return
            }
            this.$emit('handleImportMyChart',this.list)
            setTimeout(() => {
                this.CurrentIndex=1
                this.list=[]
                this.finished=false
                this.loading=false
                this.selectMyChartClassify=''
            }, 300);
        },1000),

        handleClickItem(){
            this.$message.warning('此处不支持单个插入图表')
        }
    },
}
</script>

<style lang="scss" scoped>
div{
    box-sizing: border-box;
}
.import-mychart-wrap{
    position: relative;
    height: 100%;
    padding-top: 20px;
    .select-box{
        position: absolute;
        top: -75px;
        right: 0;
    }
    .list{
        max-height: calc(100vh - 220px);;
        overflow-x: hidden;
		overflow-y: auto;
        display: flex;
            flex-wrap: wrap;
            gap: 20px;
            .chart-item{
                cursor: move;
                padding: 0 10px;
                width: 250px;
                max-height: 260px;
                border-radius: 4px;
                border: 1px solid var(--gary-gy-5-line, #C8CDD9);
                background: var(--gary-gy-white, #FFF);
                .title{
                    padding: 10px 0;
                    text-align: center;
                    border-bottom: 1px solid #C8CDD9;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                }
                .img{
                    width: 100%;
                    height: 197px;
                    background-size: cover;
                    background-position: center;
                    background-repeat: no-repeat;
                }
            }
    }
}
</style>