{extend name="layout_container" /}

{block name="main"}

<el-tabs v-model="active" @tab-click="handleClick">
    {foreach $configs as $key=>$item}
    <el-tab-pane label="{$item['name']}" name="{$item['key']}">
        <div id="{$item['key']}"></div>
    </el-tab-pane>
    {/foreach}
</el-tabs>

{/block}

{block name="style"}
{__block__}

{/block}
{block name="script"}
<script>


    new Vue({
        el: '#app',
        template: "#appCnt",
        data: function () {
            return {
                active: '{$active}'
            }
        },
        computed: {

        },
        methods: {
            handleClick(tab, event) {
                console.log(tab, event);
            }
        },
        created: function () {
        }
    })
</script>
{foreach $configs as $key=>$item}
<script>
    {if $key==0}
    {$item['form']->customComponentView()|raw}
    {/if}
        var create{$item['key']} = {$item['form']->formScript()|raw};
        var $f = create{$item['key']}({el: document.getElementById("{$item['key']}")});
</script>
{/foreach}
{/block}