<template>
    <div class="mian-container">
        <div class="container container-left">
            <h3 class="title">{{ leftText }}</h3>
            <div class="content">
                <slot name="left"></slot>
            </div>
        </div>

        <div class="toolbar">
            <div>
                <Button @click="btnClick('right')"><img :src="require('./right.png')" alt=""></Button>
                <Button @click="btnClick('rightAll')"><img :src="require('./dblright.png')" alt=""></Button>
            </div>
            <div>
                <Button @click="btnClick('left')"><img :src="require('./left.png')" alt=""></Button>
                <Button @click="btnClick('leftAll')"><img :src="require('./dblleft.png')" alt=""></Button>
            </div>
        </div>
        <div class="container container-right">
            <h3 class="title">{{rightText}}</h3>
            <div class="content">
                <slot name="right"></slot>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name: "Transform",
    data() {
        return {};
    },
    computed: {},
    methods: {
        btnClick(type) {
            this.$emit("on-btn-click", type);
        }
    },
    props:{
        left:{
            type:Array,
            default:()=>{
                return []
            }
        },
        right:{
            type:Array,
            default:()=>{
                return []
            }
        },
        leftText:{
            type:String,
            default:()=>{
                return '选择授权';
            }
        },
        rightText:{
            type:String,
            default:()=>{
                return '已授权';
            }
        },
    }
};
</script>
<style lang="less" scoped>
.mian-container {
    display: flex;
    .container {
        display: inline-block;
        width: calc(~"50% - 45px");
        .title{
            text-align: center;
            height:40px;
            line-height: 40px;
        }
        .content {
            border: 1px solid lightgray;
            border-radius: 10px;
            height: 400px;
            overflow-y: auto;
        }
    }
    .toolbar {
        display: inline-flex;
        flex-direction: column;
        justify-content: space-around;
        width: 80px;
        height: 400px;
        clear: both;
        padding: 10px;
        button {
            margin-top: 20px;
            width: 60px;
            img {
                margin-top: 4px;
            }
        }
    }
}
</style>
