<template>
	<div>
		<year2019 v-if="layoutColor == 'year2019'"></year2019>
		<spring v-else-if="layoutColor == 'spring'"></spring>
		<newyear v-else-if="layoutColor == 'newyear'"></newyear>
		<affairs v-else-if="layoutColor == 'affairs'"></affairs>
        <zhonggf v-else-if="layoutColor == 'zhonggf'"></zhonggf>
        <jinqiu v-else-if="layoutColor == 'jinqiu'"></jinqiu>
        <shengxia v-else-if="layoutColor == 'shengxia'"></shengxia>
        <guoqing v-else-if="layoutColor == 'guoqing'"></guoqing>
	</div>
</template>
<script>
	const year2019 = resolve => require(['./year2019/index'],resolve)
	const spring = resolve => require(['./spring/index'],resolve)
	const newyear = resolve => require(['./newyear/index'],resolve)
	const affairs = resolve => require(['./affairs/index'],resolve)
    const zhonggf = resolve => require(['./zhonggf/index'],resolve)
    const jinqiu = resolve => require(['./jinqiu/index'],resolve)
    const shengxia = resolve => require(['./shengxia/index'],resolve)
    const guoqing = resolve => require(['./guoqing/index'],resolve)

	export default{
        head() {
            return {
                style: [
                    {cssText: this.skinCss, type: 'text/css'}
                ],
            }
        },
		props: {
			layoutColor: {}
		},
		components: {
			year2019,
			spring,
			newyear,
			affairs,
            zhonggf,
            jinqiu,
            shengxia,
            guoqing,
		},
        computed: {
            skinCss(){
                let color = this.layoutColor;
                if(!!~color.indexOf('#')){
                    let styleHtml = `
                        #barrage-skin.z-active{color: ${color};}
                        #camera-skin .z-active{border-color: ${color};}
                        #camera-skin .z-active .mark{background-color: ${color};}
                        #camera-skin .go-left:hover:before{border-right-color: ${color};}
                        #camera-skin .go-right:hover:before{border-left-color: ${color};}
                        #menuTab-skin .z-active:after{border-color: ${color};}
                        #menuTab-skin .follow{background-color: ${color};}
                        #menuTab-skin .z-active:after{background-color: ${color};}
                        #menuTab-skin .item:before{background-color: ${color};}
                        #share-skin .tab-box .tab{border-color: ${color};}
                        #share-skin .tab-box .item{color: ${color};}
                        #share-skin .tab-box .z-active{background-color: ${color};;color: #ffffff}
                        #share-skin .tab-content .tab-pane .item .num i{color: ${color};}
                        #playList-skin .play-state .play{color: ${color};}
                        #chat-skin .chat-reply{background-color: ${color};}
                        #chat-skin .chat-unread span{background-color: ${color};}
                        #sendBox-skin .btn-send button{background-color: ${color};}
                        #sendBox-skin .input-bar .textarea-box a{color: ${color};}
                        #emoji-skin .swiper-pagination .swiper-pagination-bullet-active{background-color: ${color};}
                        #more-skin .swiper-pagination .swiper-pagination-bullet-active{background-color: ${color};}
                        #follow-skin .follow .top span{color: ${color};}
                    `;
                    return styleHtml;
                }else{
                    return '';
                }
            }
        },
	}
</script>
<style>
	
</style>