@extends('component-base.layout')

@section('title')
    Steps
@endsection

@push('css')
    <link rel="stylesheet" href="/_assets/commons/css/components/step.css?v={{config("sns-line.version")}}" type="text/css">
    <style>
        #component {
            margin-top: 0;
        }
        .ct202602-steps.vertical {
            justify-content: start;
        }
        #component {
            padding: 30px;
            background: white;
            margin-top: 24px;
        }
    </style>
@endpush

@section('contents')
    <div id="component" v-cloak>
        <div style="margin-bottom: 30px; border-radius: 10px; background: #fff; ">
            <div style="margin-bottom: 15px; font-weight: bold; padding: 15px; ">ステップ</div>
            <div style="display: flex; padding: 15px; ">
                <steps :steps="steps" :type_step="TYPE_STEP.VERTICAL" :is_detail="true"></steps>
                <p style="margin-right: 200px"></p>
                <steps :steps="steps" :type_step="TYPE_STEP.VERTICAL2"></steps>
            </div>
        </div>
        <div style="margin-bottom: 150px; padding: 15px; border-radius: 10px; background: #fff; padding-bottom: 100px">
            <steps :steps="steps" :type_step="TYPE_STEP.HORIZONTAL"  :is_detail="true"></steps>
            <p style="margin-bottom: 150px"></p>
            <steps :steps="steps" :type_step="TYPE_STEP.HORIZONTAL"></steps>
        </div>
    </div>
@endsection

@push('js')
    <script>
        const STATUS = {
            WAITING: 1,
            PROCESSING: 2,
            DONE: 3,
            ERROR: 4
        };
    </script>
    <script src="/_assets/commons/js/components/steps.js?v={{config("sns-line.version")}}"></script>

    <script>
        var vueE = new Vue({
            el: '#component',
            data: {
                steps: [],
                TYPE_STEP,
                STATUS
            },
            watch: {
            },
            created() {
                const urlParams = new URLSearchParams(window.location.search);
                const prj = urlParams.get('prj');
                if (prj && prj.length > 0) {
                    const themes = {
                        lgram: {
                            '--bg-main': '#722ED1',
                            '--bg-sub': '#D3ADF7'
                        },
                        lme: {
                            '--bg-main': '#1677FF',
                            '--bg-sub': '#91CAFF'
                        }
                    }

                    if (prj === 'lgram') {
                        Object.entries(themes.lgram).forEach(([key, val]) => {
                            document.documentElement.style.setProperty(key, val)
                        })
                    }

                    if (prj === 'lme') {
                        Object.entries(themes.lme).forEach(([key, val]) => {
                            document.documentElement.style.setProperty(key, val)
                        })
                    }
                }

                this.steps = [
                    {
                        label: 'お支払い期間の変更',
                        status: STATUS.DONE,
                        hint: '項目を編集する'
                    },
                    {
                        label: 'お支払い期間の変更',
                        status: STATUS.PROCESSING,
                        hint: '項目を編集する'
                    },
                    {
                        label: '変更完了',
                        status: STATUS.WAITING,
                        hint: '項目を編集する'
                    },
                    {
                        label: '変更完了',
                        status: STATUS.ERROR,
                        hint: '項目を編集する'
                    },
                ]
            },
            mounted() {
            },
            methods: {
            }
        })
    </script>
@endpush