<!-- Created by henian.xu on 2018/9/7. -->

<template>
    <el-dialog
        :title="$$t('vmf_select_component', '选择组件')"
        center
        width="400px"
        :visible.sync="dialog.visible"
    >
        <!--primary-->
        <el-button-group class="w-100per add-components-wrap">
            <el-button
                v-for="(item,index) in showComponentsList"
                :key="index"
                class="w-100per"
                @click="onAddComponent(item)"
            >
                {{ item.name }}
            </el-button>
        </el-button-group>
    </el-dialog>
</template>

<script>
import storeMixin from '../storeMixin';

export default {
    name: 'AddComponent',
    mixins: [storeMixin],
    data() {
        return {
            dialog: {
                visible: false,
            },
            position: 'bottom',
        };
    },
    props: {
        availableComponents: {
            type: Array,
            default() {
                // return 'Divider|Toolbar|Goods|GoodsList|Ad|AdCube|MagicCube';
                return [
                    'Divider',
                    'Toolbar',
                    'Goods',
                    'GoodsList',
                    'Ad',
                    'AdCube',
                    'MagicCube',
                    'RichText',
                    'CustomCode',
                    'Video',
                    'Notification',
                ];
            },
        },
    },
    watch: {
        availableComponents: {
            handler(val) {
                this.setAvailableComponents(val);
            },
            immediate: true,
        },
    },
    methods: {
        onAddComponent({ data }) {
            console.log(data, this.position);
            let index = (this.currentComponent || {}).__index;
            if (this.position === 'bottom') index += 1;
            const resData = JSON.parse(JSON.stringify(data));
            resData.handlerData = data.handlerData;
            this.addComponent({
                data: resData,
                position: this.position,
                index,
            });
            this.close();
        },
        open(position) {
            this.position = position;
            this.dialog.visible = true;
        },
        close() {
            this.dialog.visible = false;
        },
    },
};
</script>

<style lang="scss">
.add-components-wrap {
    > .el-button {
        + .el-button {
            margin-top: $margin;
        }
    }
}
</style>
