<template>
    <div class="bg" :style="bgStyle">
        <div v-for="item in channel" :key="item.id" :class="item.en" @click="changeChannel(item.id)"><b>{{item.cn}}</b><span>{{item.en && item.en.toUpperCase()}}</span></div>
    </div>
</template>
<style>
    .bg {
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        transition: all 0.6s ease 0s;
        transform: translate(100%, 0);
        background: resolve("me/channel_default_bg.jpg") no-repeat;
        background-size: 100% 100%;

        div {
            font-family: "BrownStd-Bold", "PingFang SC", Helvetica, Roboto, "Heiti SC", "\9ED1\4F53", Arial;
            color: #fff;
            background: #000;
            text-align: left;
            width: 680px;
            height: 105px;
            line-height: 105px;
            position: absolute;
            left: 50%;
            transform: translate(-50%, -50%);
            border: none;
            font-size: 38px;
            padding-left: 240px;

            span {
                font-size: 26px;
                margin-left: 20px;
            }
        }
    }

    .bg-animation {
        transform: translate(0, 0);
    }

    .men {
        width: 680px;
        height: 105px;
        position: absolute;
        bottom: 260px;
        left: 50%;
        transform: translate(-50%, -50%);
        border: none;
    }

    .women {
        width: 680px;
        height: 105px;
        position: absolute;
        bottom: 120px;
        left: 50%;
        transform: translate(-50%, -50%);
        border: none;
    }
</style>

<script>
    'use strict';

    import $ from 'jquery';
    import util from 'common/util';
    import cookie from 'yoho-cookie';

    export default {
        props: ['curChannel'],
        data() {
            return {
                channel: [
                    {
                        id: 0,
                        cn: '男士',
                        en: 'men'
                    },
                    {
                        id: 1,
                        cn: '女士',
                        en: 'women'
                    }
                ],
                bgStyle: {}
            };
        },
        created() {
            this.getResource();
        },
        methods: {
            changeChannel(val) {
                const opt = {
                    path: '/'
                };

                this.$emit('cv', val);
                cookie.set('_Channel', this.channel[val].en, opt);
                cookie.set('_ChannelIndex', val, opt);
            },
            bgChange(src) {
                return `background: url(${src})`;
            },
            getResource() {
                $.get('/channel/resources.json', {
                    contentCode: '5e673b5352171c1a32736ebedb3d077c'
                }).then(ret => {
                    if (ret[0]) {
                        let data = ret[0].data;
                        let src = util.getImgUrl(data.list[0].src, data.imageWidth, data.imageHeight);

                        this.bgStyle = {
                            background: `url(${src}) no-repeat`,
                            backgroundSize: '100% 100%'
                        };
                    }
                });
            }
        }
    };
</script>