<!-- Created by henian.xu on 2019/1/9. -->

<template>
    <div class="page-decorator">
        <MobileShell>
            <draggable
                v-model="componentListModel"
                @change="onDraggableInput"
            >
                <WidgetShell
                    v-for="(item,index) in componentListModel"
                    :key="item.id"
                    :index="index"
                    :data="item"
                    @add="onAdd"
                />
            </draggable>
            <div
                v-if="!componentListModel.length"
                class="ta-c pa-a"
            >
                <el-button
                    type="primary"
                    @click="onAdd"
                >
                    {{ $$t('vmf_add_component', '添加组件') }}
                </el-button>
            </div>

            <AddComponent
                ref="AddComponent"
                :available-components="availableComponents"
            />
        </MobileShell>
        <ControlPanel />
    </div>
</template>

<script>
import store from './store';
import storeMixin from './storeMixin';
import MobileShell from './widget/_mobileShell';
import WidgetShell from './widget/_widgetShell';
import AddComponent from './widget/_AddComponent';
import ControlPanel from './widget/_controlPanel';

export default {
    name: 'PageDecorator',
    components: {
        ControlPanel,
        AddComponent,
        WidgetShell,
        MobileShell,
    },
    mixins: [storeMixin],
    data() {
        return {};
    },
    props: {
        json: {
            type: String,
            default() {
                return `[{"componentType":"Page","props":{"backgroundColor":"#f8f9fa","title":"${this.$$t(
                    'vmf_page_title',
                    '页面标题',
                )}"}}]`;
            },
        },
        availableComponents: {
            type: Array,
            default() {
                return undefined;
            },
        },
    },
    computed: {
        componentListModel: {
            get() {
                return this.componentList;
            },
            set() {
                // 通过 @chang="onDraggableInput" 事件更新位置，所以这里不做为
            },
        },
    },
    watch: {
        json: {
            handler(val) {
                this.setDecoration(val);
            },
            immediate: true,
        },
    },
    methods: {
        onAdd(position) {
            this.$refs.AddComponent.open(position);
        },
        onDraggableInput({ moved }) {
            if (!moved) return;
            this.move(moved);
        },
        /** -- 外部用 --*/
        getDecorationJson() {
            return this.getDecorationJson_();
        },
        restoreInitial() {
            this.restoreDecorationData();
        },
    },
    beforeCreate() {
        this.$store.registerModule('decoration', store);
    },
    beforeDestroy() {
        this.$store.unregisterModule('decoration');
    },
};
</script>

<style lang="scss">
.page-decorator {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;

    > .ctrl {
        /*position: fixed;*/
        /*right: 18px;*/
        /*width: 400px;*/
    }
}
</style>
