<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">

</style>
<template>
    <div class="view-container">
        <h1>Template</h1>

        <br>

        <p>
            <button @click="mockSearchApi()">mock search api</button>
        </p>

        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <img style="width: 300px;" data-src="/ui/frontend/static/images/swiper/1.jpg"
                         class="swiper-lazy">
                    <div class="swiper-lazy-preloader"></div>
                </div>
                <div class="swiper-slide">
                    <img style="width: 300px;" data-src="/ui/frontend/static/images/swiper/2.jpg"
                         class="swiper-lazy">
                    <div class="swiper-lazy-preloader"></div>
                </div>
                <div class="swiper-slide">
                    <img style="width: 300px;" data-src="/ui/frontend/static/images/swiper/3.jpg"
                         class="swiper-lazy">
                    <div class="swiper-lazy-preloader"></div>
                </div>
                <div class="swiper-slide">
                    <img style="width: 300px;" data-src="/ui/frontend/static/images/swiper/4.jpg"
                         class="swiper-lazy">
                    <div class="swiper-lazy-preloader"></div>
                </div>
                <div class="swiper-slide">
                    <img style="width: 300px;" data-src="/ui/frontend/static/images/swiper/5.jpg"
                         class="swiper-lazy">
                    <div class="swiper-lazy-preloader"></div>
                </div>
            </div>
            <div class="swiper-button-prev"></div><!--左箭头-->
            <div class="swiper-button-next"></div><!--右箭头-->
            <div class="swiper-scrollbar"></div>
        </div>

        <br>

        <div>
            <div>{{$t('route.dashboard')}}</div>
            <button @click="testCookie()">test cookie</button>
        </div>

        <br>

        <div>
            <el-date-picker
                    v-model="time1"
                    type="date"
                    placeholder="Pick a day">
            </el-date-picker>
        </div>
    </div>
</template>

<script>
    import {mapGetters} from 'vuex';
    import {_mockSearch} from "../service/api/sample-api";

    import Swiper from 'swiper';
    import 'swiper/css/swiper.min.css';

    import Cookies from 'js-cookie'

    const _Template = {
        name: 'Template',
        created: function () {
            console.log('Template - > created ');
        },
        updated: function () {
        },
        mounted: function () {
            console.log('Template - > mounted ');
            let mySwiper = new Swiper('.swiper-container', {
                autoplay: true,
                loop: true,
                speed: 500,
                spaceBetween: 10,
                centeredSlides: false,
                slidesPerView: 3,
                effect: 'coverflow',
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                },
                scrollbar: {
                    el: '.swiper-scrollbar',
                },
                lazy: {
                    loadPrevNext: true,
                }
                //Enable 3D Flow
                // tdFlow: {
                //   rotate: 10,
                //   stretch: -50,//每个slide之间拉伸值（负值远离）
                //   depth: 400,  //值越大图片越往后退（可负值）
                //   modifier: 1,
                //   shadows: true
                // }
            });
        },
        activated: function () {
        },
        data: function () {
            return {
                time1: undefined
            };
        },
        methods: {
            mockSearchApi() {
                _mockSearch([], 1, 10).then((response) => {
                    console.log(response);
                }).catch((reason => {
                    console.log(reason);
                }))
            },
            testCookie() {
                let _lang = Cookies.get('language');
                switch (_lang) {
                    case 'zh':
                        _lang = 'en';
                        break;
                    case 'en':
                        _lang = 'zh';
                        break;
                    default:
                        _lang = 'en';
                        break;
                }
                Cookies.set('language', _lang);
                console.log('Template - > testCookie ', _lang);
                window.location.reload();
            }
        },
        components: {},
        computed: {
            ...mapGetters([])
        }
    };
    export default _Template;
</script>

