@extends('component-base.layout')

@section('title')
    Dropdown
@endsection

@push('css')
    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-rqn26AG5Pj86AF4SO72RK5fyefcQ/x32DNQfChxWvbXIyXFePlEktwD18fEz+kQU" crossorigin="anonymous">
    <link rel="stylesheet" href="/_assets/commons/css/components/checkbox.css?v={{config("sns-line.version")}}" type="text/css">
    <link rel="stylesheet" href="/_assets/commons/css/components/dropdown.css?v={{config("sns-line.version")}}" type="text/css">
    <style>
        .dropdown-demo-area {
            background: #fff;
            border-radius: 8px;
            padding: 24px;
            margin-bottom: 24px;
        }
        .dropdown-demo-area-title {
            font-size: 16px;
            font-weight: 600;
            color: #222;
            margin-bottom: 16px;
        }
        .dropdown-demo-area-row {
            display: flex;
            align-items: flex-start;
            gap: 24px;
            flex-wrap: wrap;
        }
        .dropdown-demo-item {
            display: flex;
            flex-direction: column;
            align-items: start;
            gap: 8px;
        }
        .dropdown-demo-item-label {
            font-size: 12px;
            color: #9A9EAD;
        }
        #component {
            padding: 30px;
            background: white;
            margin-top: 24px;
        }
    </style>
@endpush

@section('contents')
    <div id="component" v-cloak>

        {{-- デフォルト --}}
        <div class="dropdown-demo-area">
            <div class="dropdown-demo-area-title">デフォルト</div>
            <div class="dropdown-demo-area-row">
                <div class="dropdown-demo-item">
                    <dropdown :type_dropdown="1" :sub_items="menu_normal" :flag_selected="true" @action="action"></dropdown>
                    <span class="dropdown-demo-item-label">デフォルト</span>
                </div>
            </div>
        </div>

        {{-- リストメニュー --}}
        <div class="dropdown-demo-area">
            <div class="dropdown-demo-area-title">リストメニュー</div>
            <div class="dropdown-demo-area-row">
                <div class="dropdown-demo-item">
                    <dropdown :type_dropdown="1" :sub_items="menu_list" @action="action"></dropdown>
                    <span class="dropdown-demo-item-label">管理名変更・フォルダ移動・複製・削除</span>
                </div>
            </div>
        </div>

        {{-- タブメニュー --}}
        <div class="dropdown-demo-area">
            <div class="dropdown-demo-area-title">タブメニュー</div>
            <div class="dropdown-demo-area-row">
                <div class="dropdown-demo-item">
                    <dropdown :type_dropdown="1" :sub_items="menu_tab" @action="action"></dropdown>
                    <span class="dropdown-demo-item-label">名前変更・移動・複製・削除</span>
                </div>
            </div>
        </div>

        {{-- フォルダメニュー --}}
        <div class="dropdown-demo-area">
            <div class="dropdown-demo-area-title">フォルダメニュー</div>
            <div class="dropdown-demo-area-row">
                <div class="dropdown-demo-item">
                    <dropdown :type_dropdown="1" :sub_items="menu_folder" @action="action"></dropdown>
                    <span class="dropdown-demo-item-label">名前変更・削除</span>
                </div>
            </div>
        </div>

        {{-- チェックボックスメニュー --}}
        <div class="dropdown-demo-area">
            <div class="dropdown-demo-area-title">チェックボックスメニュー</div>
            <div class="dropdown-demo-area-row">
                <div class="dropdown-demo-item">
                    <dropdown :type_dropdown="3" :sub_items="menu_checkbox" @action="action"></dropdown>
                    <span class="dropdown-demo-item-label">チェックボックス付き</span>
                </div>
            </div>
        </div>

        {{-- 多階層メニュー --}}
        <div class="dropdown-demo-area">
            <div class="dropdown-demo-area-title">多階層メニュー</div>
            <div class="dropdown-demo-area-row">
                <div class="dropdown-demo-item">
                    <multi-menu :menus="multi_menus" @action="actionMultimenu"></multi-menu>
                    <span class="dropdown-demo-item-label">4階層まで対応</span>
                </div>
            </div>
        </div>

    </div>
@endsection

@push('js')
    <script src="/_assets/commons/js/components/dropdown.js?v={{config("sns-line.version")}}"></script>
    <script src="/_assets/commons/js/components/multilevel_menu.js?v={{config("sns-line.version")}}"></script>
    <script>
        var vueE = new Vue({
            el: '#component',
            data: {
                multi_menus: [
                    {
                        text: '項目名',
                        children: [],
                    },
                    {
                        text: 'ホバー',
                        children: [
                            { text: '項目名', children: [] },
                            {
                                text: 'ホバー',
                                children: [
                                    { text: '項目名', children: [] },
                                    {
                                        text: 'ホバー',
                                        children: [
                                            { text: '項目名', children: [] },
                                            { text: 'ホバー', children: [] },
                                            { text: '選択', children: [] },
                                            { text: '項目名', children: [] },
                                        ]
                                    },
                                    { text: '選択', children: [] },
                                    { text: '項目名', children: [] },
                                ]
                            },
                            { text: '選択', children: [] },
                            { text: '項目名', children: [] },
                        ],
                    },
                    {
                        text: '選択',
                        children: [],
                    },
                    {
                        text: '項目名',
                        children: [],
                    },
                ],
                menu_normal: [
                    {
                        class_name: '',
                        html: 'ホバー',
                        action: 1
                    },
                    {
                        class_name: '',
                        html: '項目名',
                        action: 2
                    },
                    {
                        class_name: '',
                        html: '選択',
                        action: 3
                    },
                    {
                        class_name: '',
                        html: '項目名',
                        action: 4
                    },
                ],
                menu_list: [
                    {
                        class_name: '',
                        html: '<svg width="13" height="13" viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12.375 6.25H11.5C11.4312 6.25 11.375 6.30625 11.375 6.375V11.375H1.125V1.125H6.125C6.19375 1.125 6.25 1.06875 6.25 1V0.125C6.25 0.05625 6.19375 0 6.125 0H0.5C0.223437 0 0 0.223437 0 0.5V12C0 12.2766 0.223437 12.5 0.5 12.5H12C12.2766 12.5 12.5 12.2766 12.5 12V6.375C12.5 6.30625 12.4438 6.25 12.375 6.25Z" fill="#1F1F1F"/><path d="M4.03774 8.7183H4.03144C3.9638 8.7183 3.90046 8.69187 3.85309 8.64389C3.80589 8.59608 3.78038 8.53269 3.78124 8.4654L3.81094 6.6078C3.81094 6.57711 3.82406 6.54528 3.84694 6.5205L10.344 0.036C10.3682 0.01278 10.3998 0 10.4331 0C10.4679 0 10.4987 0.01245 10.5222 0.036L12.4644 1.9764C12.5118 2.02466 12.5118 2.10544 12.4644 2.1528L5.96554 8.6373C5.94542 8.65825 5.91458 8.67137 5.88094 8.6733L4.03774 8.7183ZM10.4331 1.35899L4.80274 6.9768L4.79194 7.70131L5.50654 7.6842L11.1387 2.0637L10.4331 1.35899Z" fill="#1F1F1F"/></svg>管理名変更',
                        action: 1
                    },
                    {
                        class_name: '',
                        html: '<svg width="13" height="11" viewBox="0 0 13 11" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.9997 10.2501H0.5004C0.22448 10.2501 0 10.0256 0 9.7497V0.5004C0 0.22448 0.22448 0 0.5004 0H4.4721C4.50289 0 4.53405 0.01246 4.5576 0.0342L6.3909 1.7874H11.9997C12.2756 1.7874 12.5001 2.01188 12.5001 2.2878V9.7497C12.5001 10.0256 12.2756 10.2501 11.9997 10.2501ZM1.125 1.125V9.1251H11.3751V2.9124H5.9391L4.0707 1.125H1.125Z" fill="#1F1F1F"/></svg>フォルダ移動',
                        action: 2
                    },
                    {
                        class_name: '',
                        html: '<svg width="11" height="14" viewBox="0 0 11 14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.4996 14.0004H3.2076C3.1515 14.0004 3.09367 13.9898 3.0357 13.9689H2.97V13.9392C2.92446 13.914 2.88661 13.8855 2.8548 13.8528L0.1467 11.1456C0.0521 11.051 0 10.9254 0 10.7919V2.5002C0 2.22428 0.22448 1.9998 0.5004 1.9998H8.4996C8.77552 1.9998 9 2.22428 9 2.5002V13.5C9 13.7759 8.77552 14.0004 8.4996 14.0004ZM1.125 3.1248V10.0314H3.3435C3.6884 10.0314 3.969 10.3116 3.969 10.656V12.8754H7.875V3.1248H1.125ZM1.6236 11.0313L2.9691 12.3777V11.0313H1.6236ZM10.8747 11.9997H9.9999C9.93092 11.9997 9.8748 11.9436 9.8748 11.8746V1.125H2.1249C2.05709 1.125 1.9998 1.06771 1.9998 0.9999V0.1251C1.9998 0.05612 2.05592 0 2.1249 0H10.5003C10.7757 0 10.9998 0.22448 10.9998 0.5004V11.8746C10.9998 11.9436 10.9437 11.9997 10.8747 11.9997Z" fill="#1F1F1F"/></svg>複製する',
                        action: 3
                    },
                    {
                        class_name: 'danger',
                        html: '<svg width="12" height="13" viewBox="0 0 12 13" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.5472 12.5001H2.4534C1.91849 12.5001 1.47968 12.0815 1.4544 11.547L1.0683 3.375H0.1251C0.05612 3.375 0 3.31888 0 3.2499V2.7504C0 2.47448 0.22448 2.25 0.5004 2.25H2.5002V0.9999C2.5002 0.44855 2.94875 0 3.5001 0H8.4996C9.05144 0 9.5004 0.44855 9.5004 0.9999V2.249L8.3754 2.25H11.5002C11.7756 2.25 11.9997 2.47448 11.9997 2.7504V3.2499C11.9997 3.31888 11.9436 3.375 11.8746 3.375H10.9314L10.5453 11.547C10.5201 12.0815 10.0817 12.5001 9.5472 12.5001ZM2.1951 3.375L2.5731 11.3751H9.4266L9.8046 3.375H2.1951ZM3.6252 2.25H8.3754V1.126L8.4996 1.125C8.4311 1.12498 8.3754 1.06797 8.3754 0.9999V1.126L3.6252 1.125V2.25Z" fill="#FF4D4F"/></svg>削除する',
                        action: 4
                    },
                ],
                menu_tab: [
                    {
                        class_name: '',
                        html: '<svg width="13" height="13" viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12.375 6.25H11.5C11.4312 6.25 11.375 6.30625 11.375 6.375V11.375H1.125V1.125H6.125C6.19375 1.125 6.25 1.06875 6.25 1V0.125C6.25 0.05625 6.19375 0 6.125 0H0.5C0.223437 0 0 0.223437 0 0.5V12C0 12.2766 0.223437 12.5 0.5 12.5H12C12.2766 12.5 12.5 12.2766 12.5 12V6.375C12.5 6.30625 12.4438 6.25 12.375 6.25Z" fill="#1F1F1F"/><path d="M4.03774 8.7183H4.03144C3.9638 8.7183 3.90046 8.69187 3.85309 8.64389C3.80589 8.59608 3.78038 8.53269 3.78124 8.4654L3.81094 6.6078C3.81094 6.57711 3.82406 6.54528 3.84694 6.5205L10.344 0.036C10.3682 0.01278 10.3998 0 10.4331 0C10.4679 0 10.4987 0.01245 10.5222 0.036L12.4644 1.9764C12.5118 2.02466 12.5118 2.10544 12.4644 2.1528L5.96554 8.6373C5.94542 8.65825 5.91458 8.67137 5.88094 8.6733L4.03774 8.7183ZM10.4331 1.35899L4.80274 6.9768L4.79194 7.70131L5.50654 7.6842L11.1387 2.0637L10.4331 1.35899Z" fill="#1F1F1F"/></svg>名前を変更する',
                        action: 1
                    },
                    {
                        class_name: '',
                        html: '<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.3281 5.18437L5.425 0.0609375C5.37969 0.021875 5.32188 0 5.26094 0H3.87812C3.7625 0 3.70937 0.14375 3.79688 0.21875L9.26875 4.96875H0.125C0.05625 4.96875 0 5.025 0 5.09375V6.03125C0 6.1 0.05625 6.15625 0.125 6.15625H9.26719L3.79531 10.9062C3.70781 10.9828 3.76094 11.125 3.87656 11.125H5.30625C5.33594 11.125 5.36562 11.1141 5.3875 11.0938L11.3281 5.94063C11.5578 5.74062 11.5578 5.38438 11.3281 5.18437Z" fill="#1F1F1F"/></svg>右に移動',
                        action: 2
                    },
                    {
                        class_name: '',
                        html: '<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.3754 4.96875H2.2332L7.70508 0.21875C7.79258 0.142188 7.73945 0 7.62383 0H6.24102C6.18008 0 6.12227 0.021875 6.07695 0.0609375L0.172266 5.18437C-0.0574219 5.38438 -0.0574219 5.74062 0.172266 5.93906L6.11133 11.0938C6.13477 11.1141 6.16289 11.125 6.19258 11.125H7.62227C7.73789 11.125 7.79102 10.9812 7.70352 10.9062L2.2332 6.15625H11.3754C11.4441 6.15625 11.5004 6.1 11.5004 6.03125V5.09375C11.5004 5.025 11.4441 4.96875 11.3754 4.96875Z" fill="#1F1F1F"/></svg>左に移動',
                        action: 3
                    },
                    {
                        class_name: '',
                        html: '<svg width="11" height="14" viewBox="0 0 11 14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.4996 14.0004H3.2076C3.1515 14.0004 3.09367 13.9898 3.0357 13.9689H2.97V13.9392C2.92446 13.914 2.88661 13.8855 2.8548 13.8528L0.1467 11.1456C0.0521 11.051 0 10.9254 0 10.7919V2.5002C0 2.22428 0.22448 1.9998 0.5004 1.9998H8.4996C8.77552 1.9998 9 2.22428 9 2.5002V13.5C9 13.7759 8.77552 14.0004 8.4996 14.0004ZM1.125 3.1248V10.0314H3.3435C3.6884 10.0314 3.969 10.3116 3.969 10.656V12.8754H7.875V3.1248H1.125ZM1.6236 11.0313L2.9691 12.3777V11.0313H1.6236ZM10.8747 11.9997H9.9999C9.93092 11.9997 9.8748 11.9436 9.8748 11.8746V1.125H2.1249C2.05709 1.125 1.9998 1.06771 1.9998 0.9999V0.1251C1.9998 0.05612 2.05592 0 2.1249 0H10.5003C10.7757 0 10.9998 0.22448 10.9998 0.5004V11.8746C10.9998 11.9436 10.9437 11.9997 10.8747 11.9997Z" fill="#1F1F1F"/></svg>複製する',
                        action: 4
                    },
                    {
                        class_name: 'danger',
                        html: '<svg width="12" height="13" viewBox="0 0 12 13" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.5472 12.5001H2.4534C1.91849 12.5001 1.47968 12.0815 1.4544 11.547L1.0683 3.375H0.1251C0.05612 3.375 0 3.31888 0 3.2499V2.7504C0 2.47448 0.22448 2.25 0.5004 2.25H2.5002V0.9999C2.5002 0.44855 2.94875 0 3.5001 0H8.4996C9.05144 0 9.5004 0.44855 9.5004 0.9999V2.249L8.3754 2.25H11.5002C11.7756 2.25 11.9997 2.47448 11.9997 2.7504V3.2499C11.9997 3.31888 11.9436 3.375 11.8746 3.375H10.9314L10.5453 11.547C10.5201 12.0815 10.0817 12.5001 9.5472 12.5001ZM2.1951 3.375L2.5731 11.3751H9.4266L9.8046 3.375H2.1951ZM3.6252 2.25H8.3754V1.126L8.4996 1.125C8.4311 1.12498 8.3754 1.06797 8.3754 0.9999V1.126L3.6252 1.125V2.25Z" fill="#FF4D4F"/></svg>削除する',
                        action: 5
                    },
                ],
                menu_folder: [
                    {
                        class_name: '',
                        html: '<svg width="13" height="13" viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12.375 6.25H11.5C11.4312 6.25 11.375 6.30625 11.375 6.375V11.375H1.125V1.125H6.125C6.19375 1.125 6.25 1.06875 6.25 1V0.125C6.25 0.05625 6.19375 0 6.125 0H0.5C0.223437 0 0 0.223437 0 0.5V12C0 12.2766 0.223437 12.5 0.5 12.5H12C12.2766 12.5 12.5 12.2766 12.5 12V6.375C12.5 6.30625 12.4438 6.25 12.375 6.25Z" fill="#1F1F1F"/><path d="M4.03774 8.7183H4.03144C3.9638 8.7183 3.90046 8.69187 3.85309 8.64389C3.80589 8.59608 3.78038 8.53269 3.78124 8.4654L3.81094 6.6078C3.81094 6.57711 3.82406 6.54528 3.84694 6.5205L10.344 0.036C10.3682 0.01278 10.3998 0 10.4331 0C10.4679 0 10.4987 0.01245 10.5222 0.036L12.4644 1.9764C12.5118 2.02466 12.5118 2.10544 12.4644 2.1528L5.96554 8.6373C5.94542 8.65825 5.91458 8.67137 5.88094 8.6733L4.03774 8.7183ZM10.4331 1.35899L4.80274 6.9768L4.79194 7.70131L5.50654 7.6842L11.1387 2.0637L10.4331 1.35899Z" fill="#1F1F1F"/></svg>名前を変更する',
                        action: 1
                    },
                    {
                        class_name: 'danger',
                        html: '<svg width="12" height="13" viewBox="0 0 12 13" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.5472 12.5001H2.4534C1.91849 12.5001 1.47968 12.0815 1.4544 11.547L1.0683 3.375H0.1251C0.05612 3.375 0 3.31888 0 3.2499V2.7504C0 2.47448 0.22448 2.25 0.5004 2.25H2.5002V0.9999C2.5002 0.44855 2.94875 0 3.5001 0H8.4996C9.05144 0 9.5004 0.44855 9.5004 0.9999V2.249L8.3754 2.25H11.5002C11.7756 2.25 11.9997 2.47448 11.9997 2.7504V3.2499C11.9997 3.31888 11.9436 3.375 11.8746 3.375H10.9314L10.5453 11.547C10.5201 12.0815 10.0817 12.5001 9.5472 12.5001ZM2.1951 3.375L2.5731 11.3751H9.4266L9.8046 3.375H2.1951ZM3.6252 2.25H8.3754V1.126L8.4996 1.125C8.4311 1.12498 8.3754 1.06797 8.3754 0.9999V1.126L3.6252 1.125V2.25Z" fill="#FF4D4F"/></svg>削除する',
                        action: 5
                    },
                ],
                menu_checkbox: [
                    { id: 1, checked: false, text: 'テキストテキスト' },
                    { id: 2, checked: true, text: 'テキストテキスト' },
                    { id: 3, checked: false, text: 'テキストテキスト' },
                    { id: 4, checked: true, text: 'テキストテキスト' },
                ],
            },
            watch: {
            },
            created() {
            },
            mounted() {

            },
            methods: {
                action(value) {
                    console.log(value)
                },
                actionMultimenu(data) {
                    console.log(this.multi_menus[data.level - 1])
                }
            }
        })
    </script>
@endpush