<template>
    <div class="eta-sheet-wrap">
        <div class="top-box">
            <span>ETA表格</span>
            <el-input
                class="search-box"
				placeholder="表格名称"
				v-model="keyword"
				size="medium"
				prefix-icon="el-icon-search"
                @input="handleSearch"
			/>
        </div>
        <div class="main-box">
            <draggable
                :list="list"
                :group="{ name: 'component', pull: 'clone', put: false }"
                class="sheet-list-box"
                animation="300"
                :sort="false"
                tag="div"
            >
                <div class="sheet-item" :comp-data="getCompData(item)" v-for="item in list" :key="item.ExcelInfoId">
                    <div class="title">{{item.ExcelName}}</div>
                    <div class="img" :style="'backgroundImage:url('+item.ExcelImage+')'"></div>
                </div>
            </draggable>
            <tableNoData text="暂无数据" size="mini" v-if="list.length===0"/>
        </div>
    </div>
</template>

<script>
import * as sheetInterface from "@/api/modules/sheetApi.js";
export default {
    data() {
        return {
            keyword:'',
            list:[]
        }
    },
    created(){
        this.getSheetList()
    },
    methods: {
        // 生产随机id
        getCompId(type){
            return type+new Date().getTime()
        },

        getCompData(item){
            const LINK_URL = this.$setting.dynamicOutLinks.ChartViewUrl+'/sheetshow';
            // console.log(LINK_URL);
            const obj={
                compId:4,
                compType:'sheet',
                content:`${LINK_URL}?code=${item.UniqueCode}`
            }
            return JSON.stringify(obj)
        },

        handleSearch(){
            this.getSheetList()
        },
        getSheetList() {
            this.list=[]
            sheetInterface.sheetList({
                Keyword: this.keyword,
                CurrentIndex: 1,
                PageSize: 10000,
            }).then((res) => {
                if (res.Ret !== 200) return;
                this.list = res.Data.List || [];
            });
        },
    },
}
</script>

<style lang="scss" scoped>
div{
    box-sizing: border-box;
}
.eta-sheet-wrap{
    .top-box{
        display: flex;
        justify-content: space-between;
        .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;
        overflow-y: auto;
        .sheet-list-box{
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            .sheet-item{
                cursor: move;
                padding: 0 10px 10px 10px;
                width: 250px;
                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: contain;
                    background-position: center;
                    background-repeat: no-repeat;
                }
            }
        }
    }
}
</style>