<template>
    <div class="datasExport">
        <div class="datasExport_wind">
            <div class="windStstus">
                <div class="exceed">
                    <span class="title">场站：</span>
                    <el-select v-model="exportFrom.station" multiple collapse-tags placeholder="请选择">
                        <el-option
                        v-for="item in stationOption"
                        :key="item.no"
                        :label="item.stationName"
                        :value="item.no">
                        </el-option>
                    </el-select>
                </div>
                <div class="exceed">
                    <span class="title">时间：</span>
                    <el-date-picker
                        v-model="exportFrom.pickerTime"
                        type="daterange"
                        :clearable='false'
                        value-format="YYYY-MM-DD"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                    </el-date-picker>
                </div>
                <el-button color="#626aef" @click="seachData">查 询</el-button>
                <el-button @click="exportDataMsg">导 出</el-button>
            </div>
        </div>
        <div class="lineMain" :style="pageHeight">
            <div class="dragapp">

                <div class="dragappLeft">
                    <h3>工具 1</h3>
                    <draggable class="grouplist" v-model="list1" :group="{ name: 'people', pull: 'clone', put: false }" @change="log">
                        <template #item="{element}">
                            <div class="groupMain1">
                                <span class="groupname">{{element.name}}</span>
                            </div>
                        </template>
                    </draggable>
                    <h3>工具 2</h3>
                    <draggable class="grouplist" v-model="list3" :group="{ name: 'people', pull: 'clone', put: false }" @change="log">
                        <template #item="{element}">
                            <div class="groupMain2">
                                <span class="groupname">{{element.name}}</span>
                            </div>
                        </template>
                    </draggable>
                </div>

                <div class="dragappRight">
                    <h3>算法运算一</h3>
                    <draggable class="grouplist" v-model="list2" group="people" @change="log">
                        <template #item="{element}">
                            <div class="groupMain">
                                <span class="groupname">{{element.name}}</span>
                                <!-- <span class="groupMainArrow">>>>></span> -->
                            </div>
                        </template>
                    </draggable>
                    <h3>算法运算二</h3>
                    <draggable class="grouplist" v-model="list4" group="people" @change="log">
                        <template #item="{element}">
                            <div class="groupMain">
                                <span class="groupname">{{element.name}}</span>
                            </div>
                        </template>
                    </draggable>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import draggable from "vuedraggable";
export default {
    components: {
        draggable
    },
    computed:{
        pageHeight() {
            return {
                'height': document.documentElement.clientHeight-130 + 'px'
            }
        }
    },
    data() {
        return {
            exportFrom: {
                station: [],
                pickerTime: []
            },
            stationOption: [],
            tableData: [],

            tplOptions: {
                sort: false, 
                group: {
                    name: 'field', 
                    pull:'clone',
                    put: false
                }
            },
            dragOptions: {
                animation: 500,
                filter: '.disabled' //class为disabled时不可拖拽
            },
            list1: [
                { name: "数据1", id: 1 },
                { name: "数据2", id: 2 },
                { name: "数据3", id: 3 },
                { name: "数据4", id: 4 }
            ],
            list2: [
                { name: "数据1", id: 5 },
                { name: "算法1", id: 6 },
                { name: "算法2", id: 7 }
            ],
            list3: [
                { name: "算法1", id: 8 },
                { name: "算法2", id: 9 },
                { name: "算法3", id: 10 }
            ],
            list4: []
        }
    },
    methods:{
        log(evt) {
            window.console.log(evt);
            console.log(this.list2)
        }
    }
}
</script>

<style lang="less">
.datasExport{
    .datasExport_wind{
        .windStstus{
            display: flex;
            // justify-content: space-around;
            align-items: center;
            background: #3a35ae;
            margin: 0 10px;
            border: 1px solid #7674d8;
            border-radius: 10px 10px 0 0;
            border-bottom: none;
            height: 40px;
            padding-left: 10px;
            .exceed{
                display: flex;
                margin-right:20px;
                .title{
                    color: #fff;
                    font-size: 12px;
                    margin-top: 5px;
                }
                .el-input{
                    width: 200px;
                    margin-right:10px;
                    height: 28px;
                }
                .el-select .el-input.is-focus .el-input__wrapper{
                    box-shadow: 0 0 0 1px rgba(100, 95, 239, 1) !important;
                }
                .el-select{
                    .el-input__wrapper{
                        background: none;
                    }
                    .el-input__wrapper.is-focus{
                        box-shadow: 0 0 0 1px rgba(100, 95, 239, 1) !important;
                    }
                    .el-tag{
                        background: #645fef;
                        color: #fff;
                    }
                }
                .el-date-editor {
                    height: 28px;
                    
                    background: none;
                    .el-input__icon,
                    .el-range-separator {
                        line-height: 28px;
                    }
                    .el-input__icon {
                        svg{
                            color: #fff;
                        }
                    }
                    .el-range-input, .el-range-separator, .el-range-input{
                        color: #fff;
                    }
                }
            }
            .el-button {
                height: 28px;
                padding: 0 20px;
                line-height: 5px;
            }
        }
    }
    .el-button{
        height: 30px;
        line-height: 5px;
    }
    .lineMain{
        width: calc(100% - 20px);
        padding: 10px;
        background: #edeffb;
        border-radius: 10px;
        overflow-y: auto;
        .dragapp {
            display: flex;
            // justify-content: space-around;
            
            .dragappLeft, .dragappRight {
                .grouplist{
                    .groupMain1, .groupMain2{
                        width: 110px;
                        height: 50px;
                        text-align: center;
                        border-radius: 10px;
                        color: #fff;
                        margin-top: 10px;
                        .groupname{
                            position: relative;
                            top: 10px;
                        }
                    }
                }
            } 
            .dragappLeft{
                width: 20%;
                border: 1px solid #d9d9d9;
                margin-right: 20px;
                .groupMain1{
                    background: #5672c4;
                }
                .groupMain2{
                    background: #95cc7a;
                }
            }
            .dragappRight{
                width: 70%;
                height: 350px;
                border: 1px solid #d9d9d9;
                .grouplist{
                    display: flex;
                    height: 150px;
                    .groupMain{
                        width: 110px;
                        height: 50px;
                        text-align: center;
                        background: #7ac1dd;
                        border-radius: 10px;
                        color: #fff;
                        margin-top: 10px;
                        .groupname{
                            position: relative;
                            top: 10px;
                        }
                    }
                    .groupMain{
                        margin-right: 50px;
                        .groupMainArrow{
                            display: inline-block;
                            position: relative;
                            color: #333;
                            right: -55px;
                            top: 10px;
                        }
                    }
                }
            }
            /*选中样式*/
            .chosen {
                border: solid 2px #3089dc !important;
            }
        }
        
    }
}
</style>