@extends('component-base.layout')

@section('title')
Left Panel
@endsection

@push('css')
<link rel="stylesheet" href="/css/component-base/category/category.css?v={{config("sns-line.version")}}">
<link rel="stylesheet" href="/css/component-base/button/button.css?v={{config("sns-line.version")}}">
<link rel="stylesheet" href="/css/component-base/tooltip/tooltip.css?v={{config("sns-line.version")}}">
<link rel="stylesheet" href="/css/component-base/left-panel/left-panel.css?v={{config("sns-line.version")}}">
<style>
    .demo-box {
        display: flex;
        height: 500px;
        border-radius: 10px;
        overflow: hidden;
        border: 1px solid #EBEBEB;
        background: #FFFFFF;
    }
    .demo-content {
        flex: 1;
        padding: 24px;
        overflow: auto;
        background: #F5F7FA;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #8C8C8C;
        font-size: 14px;
    }

    #vue-element {
        padding: 20px;
        background: #fff;
        border-radius: 10px;
        overflow: hidden;
    }
</style>
@endpush

@section('contents')
<div id="vue-element" v-cloak>
    <div style="font-weight: bold;">Left panel</div>
    <br>
    <br>
    <div class="demo-box">
        <lme-left-panel
            title="フォルダ"
            theme="lme-theme"
            :categories="categories"
            @select="onSelect"
            @rename="onRename"
            @delete="onDelete"
            @add-sub="onAddSub"
            @add="onAdd"
            @sort="onSort"
        />
        <div class="demo-content">
            選択中: @{{ categories.selected }}
        </div>
    </div>
</div>
@endsection

@push('js')
<script src="/js/component-base/category/lme-category.js?v={{config("sns-line.version")}}"></script>
<script src="/js/component-base/button/lme-button.js?v={{config("sns-line.version")}}"></script>
<script src="/js/component-base/button/lme-button-flat.js?v={{config("sns-line.version")}}"></script>
<script src="/js/component-base/tooltip/lme-tooltip.js?v={{config("sns-line.version")}}"></script>
<script src="/js/component-base/left-panel/lme-left-panel.js?v={{config("sns-line.version")}}"></script>
<script>
let vueElement = new Vue({
    el: '#vue-element',
    data: {
        categories: {
            selected: 'all',
            default: { id: 'all', label: '未分類', total: 0 },
            favorite: { id: 'favorite', label: 'お気に入り', total: 0 },
            main: [
                {
                    id: 'folder-1',
                    label: 'フォルダ名',
                    total: 0,
                    sub: [
                        { id: 'sub-1-1', label: 'サブフォルダ名', total: 0 },
                        { id: 'sub-1-2', label: 'サブフォルダ名2', total: 0 },
                    ]
                },
                {
                    id: 'folder-2',
                    label: 'フォルダ名2',
                    total: 0,
                    sub: []
                },
            ]
        },
    },
    methods: {
        onSelect(id) {
            this.categories.selected = id;
        },
        onRename(item) {
            console.log('rename', item);
        },
        onDelete(item) {
            console.log('delete', item);
        },
        onAddSub(parent) {
            console.log('add-sub', parent);
        },
        onAdd() {
            console.log('add folder');
        },
        onSort() {
            console.log('sort');
        },
    }
});
</script>
@endpush