<template>
    <div class="statistic-analysis-wrap">
        <div class="top-box">
            <div class="left-card">
                <span>选择图片</span>
            </div>
            <div class="right">
                <el-input
                    class="search-box"
					placeholder="请输入图片名称"
					v-model="keyword"
					size="medium"
                    @input="handleSearch"
                    style="width:240px"
				/>
                <el-select placeholder="请选择图片类型" v-model="type" style="width:240px" @change="handleSearch">
                    <el-option label="版头" :value="1"></el-option>
                    <el-option label="版尾" :value="2"></el-option>
                </el-select>
            </div>
        </div>
        <div class="main-box">
            <!-- <div class="type-select-box">
                <span style="margin-right:20px">版面设置</span>
                <el-radio-group v-model="setType">
                    <el-radio :label="1">版头</el-radio>
                    <el-radio :label="2">版尾</el-radio>
                </el-radio-group>
            </div> -->
            <div style="flex:1;overflow-y: auto;padding:20px 0">
            <tableNoData text="暂无数据" size="mini" v-if="list.length===0&&finished"/>
            <div class="list-wrap" v-infinite-scroll="handleLoadMore" :infinite-scroll-immediate="false">
                <div 
                    :class="['item',selectItem&&selectItem.ResourceId===item.ResourceId?'active':'']" 
                    v-for="item in list" 
                    :key="item.ResourceId" 
                    @click="handleSelectItem(item)"
                >
                    <div class="img" :style="'backgroundImage:url('+item.ImgUrl+')'"></div>
                    <div class="title">{{item.ImgName}}</div>
                </div>
            </div>
            </div>
            <div class="btns-box">
                <el-button type="primary" plain @click="handleClose">取消</el-button>
                <el-button type="primary" @click="handleSave">保存</el-button>
            </div>
        </div>
    </div>
</template>

<script>
import {apiSmartReport}  from '@/api/modules/smartReport'
export default {
    data() {
        return {
            keyword:'',
            type:1,
            list:[],
            page:1,
            pageSize:20,
            finished:false,

            setType:'',
            selectItem:null
        }
    },
    created(){
        this.getImgList()
    },
    methods: {
        //资源库列表
        async getImgList(){
            const res=await apiSmartReport.imgReourceList({
                CurrentIndex:this.page,
                PageSize:this.pageSize,
                Type:this.type,
                Keyword:this.keyword
            })
            if(res.Ret===200){
                const arr = res.Data.List || [];
                this.list =
                    this.page === 1
                    ? arr
                    : [...this.list, ...arr];
                this.finished =  res.Data.Paging.IsEnd;
            }
        },

        handleLoadMore(){
            if(this.finished) return
            this.page++
            this.getImgList()
        },

        handleSearch(){
            this.page=1
            this.finished=false
            this.getImgList()
        },

        handleSelectItem(e){
            this.selectItem=e
        },

        handleClose(){
            this.$emit('close')
        },

        handleSave(){
            // if(!this.setType){
            //     this.$message.warning('请选择设置的版面类型')
            //     return
            // }
            if(!this.selectItem){
                this.$message.warning('请选择版图')
                return
            }
            this.$emit('change',{
                type:this.type,
                data:this.selectItem
            })
        }
        

    },

}
</script>

<style lang="scss" scoped>
div{
    box-sizing: border-box;
}
.statistic-analysis-wrap{
    .top-box{
        display: flex;
        justify-content: space-between;
        align-items: center;
        .right{
            .search-box{
                width: 330px;
            }
        }
    }
    .main-box{
        margin-top: 30px;
        height: calc(100vh - 180px);
        border-radius: 4px;
        border: 1px solid var(--gary-gy-5-line, #C8CDD9);
        background: #FFF;
        padding: 20px;
        display: flex;
        flex-direction: column;
        .list-wrap{
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            .item{
                width: 240px;
                cursor: pointer;
                .img{
                    background: var(--gary-gy-3-disabled, #EBEFF6);
                    width: 240px;
                    height: 240px;
                    background-size: contain;
                    background-position: center;
                    background-repeat: no-repeat;
                }
                .title{
                    margin-top: 5px;
                    display: -webkit-box;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    -webkit-line-clamp: 2;
                    line-break: anywhere;
                    -webkit-box-orient: vertical;
                }
            }
            .active{
                position: relative;
                .img{
                    border: 1px solid #0052D9;
                }
                &::before{
                    content: '';
                    display: block;
                    width: 20px;
                    height: 20px;
                    position: absolute;
                    left: 0;
                    top: 0;
                    background-image: url('~@/assets/img/smartReport/icon17.png');
                    background-size: cover;
                    background-repeat: no-repeat;
                }
            }
        }
        .btns-box{
            padding-top: 20px;
            text-align: center;
            .el-button{
                width: 200px;
            }
        }
    }
}
</style>