<template>
    <div class="main">
        <div class="main-manInfos">
            <div class="manInfo-logos">
                <img class="logos-logo" :src="test.manInfo.logoUrl">
            </div>
            <div class="manInfo-name"  @click="manInfoClick">{{test.manInfo.barFrom}}的专柜：{{test.manInfo.barName}}</div>
            <div class="manInfo-switch" @click="switchBarClick">
                <div class="switch-text">切换</div>
                <img class="switch-icon" :src="test.manInfo.icon['1']">
            </div>
        </div>
        <div class="main-tips">
            <div class="tips-tip">店铺粉丝 {{test.barInfo.fans}}</div>
            <div class="tips-tip">个人粉丝 {{test.barInfo.personalFans}}</div>
            <div class="tips-tip">今日新增 {{test.barInfo.newFans}}</div>
        </div>
        <div class="main-menus">
            <div class="menus-row">
                <div class="menu">
                    <img class="menu-logo" :src="test.menuInfo.icon['1']">
                    <div class="menu-text">优惠券核销</div>
                </div>
                <div class="menu" @click="menu02Click">
                    <img class="menu-logo" :src="test.menuInfo.icon['2']">
                    <div class="menu-text">任务列表</div>
                </div>
                <div class="menu" @click="menu03Click">
                    <img class="menu-logo" :src="test.menuInfo.icon['3']">
                    <div class="menu-text">活动列表</div>
                </div>
            </div>
            <div class="menus-row">
                <div class="menu" @click="menu04Click">
                    <img class="menu-logo" :src="test.menuInfo.icon['4']">
                    <div class="menu-text">专柜维护</div>
                </div>
                <div class="menu" @click="menu05Click">
                    <img class="menu-logo" :src="test.menuInfo.icon['5']">
                    <div class="menu-text">活动模版</div>
                </div>
                <div class="menu"  @click="menu06Click">
                    <img class="menu-logo" :src="test.menuInfo.icon['6']">
                    <div class="menu-text">商品管理</div>
                </div>
            </div>

        </div>
        <div class="main-actives">
            <div class="actives-banners">
                <!--                <img class="actives-banner-small" :src="test.activeInfo.icon['0']">-->

                <div class="actives-banner-title">现有开展活动</div>
                <!--              <img class="actives-banner-small" :src="test.cache.imgUrl">-->

            </div>
            <div class="actives-main">
                <div class="active-logos">
                    <img class="active-logo" :src="test.activeInfo.icon['1']">
                </div>
                <div class="active-infos">
                    <div class="active-title">大转盘</div>
                    <div class="active-dsc">{{test.cache.actDsc}}</div>
                </div>
            </div>
            <div class="actives-main">
                <div class="active-logos">
                    <img class="active-logo" :src="test.activeInfo.icon['2']">
                </div>
                <div class="active-infos">
                    <div class="active-title">现金券发放</div>
                    <div class="active-dsc">{{test.cache.actDsc}}</div>
                </div>
            </div>
            <div class="actives-main">
                <div class="active-logos">
                    <img class="active-logo" :src="test.activeInfo.icon['3']">
                </div>
                <div class="active-infos">
                    <div class="active-title">集卡</div>
                    <div class="active-dsc">{{test.cache.actDsc}}</div>
                </div>
            </div>
            <div class="actives-mores">
                <div class="mores-title">查看更多</div>
                <img class="mores-icon" :src="test.cache.arrowRightDark">
            </div>
        </div>
        <div class="main-menuBar">
            <div class="menuBar-menu" @click="menuBarClick('MainSale')">
                <img class="menuBar-icon" :src="test.menuBarInfo.icon.now['1']">
                <div class="menuBar-title menuBar-title-ac">活动</div>
            </div>
            <div class="menuBar-menu" @click="menuCase()"><img class="menuBar-icon" :src="test.menuBarInfo.icon.now['2']">
                <div class="menuBar-title">案例</div>
            </div>
            <div class="menuBar-menu" @click="menuProfit()"><img class="menuBar-icon" :src="test.menuBarInfo.icon.now['3']">
                <div class="menuBar-title">收益</div>
            </div>
            <div class="menuBar-menu" @click="menuTask()"><img class="menuBar-icon" :src="test.menuBarInfo.icon.now['4']">
                <div class="menuBar-title">任务</div>
            </div>
            <div class="menuBar-menu" @click="menuBarClick('Me')">
                <img class="menuBar-icon" :src="test.menuBarInfo.icon.now['5']">
                <div class="menuBar-title">我的</div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "discountIndex",
        data() {
            return {
                test: {
                    cache: {
                        imgUrl: "/hi.jpg",
                        actDsc: "由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状。",
                        nowMenuBar: "1",
                        arrowRightDark: "/mainSale/icon-arrow-right-dark.png",
                    },
                    manInfo: {
                        bk_logoUrl: "https://ezhq.xyz/img/main/logo_sona.jpg",
                        logoUrl: "/photo.png",
                        barFrom: "alice",
                        barName: "only",
                        icon: {
                            "1": "/mainSale/icon-arrow-right-light.png",
                        }
                    },
                    barInfo: {
                        fans: "299",
                        personalFans: "77",
                        newFans: "11",
                    },
                    menuInfo: {
                        icon: {
                            "1": "/mainSale/icon-menu-01.png",
                            "2": "/mainSale/icon-menu-02.png",
                            "3": "/mainSale/icon-menu-03.png",
                            "4": "/mainSale/icon-menu-04.png",
                            "5": "/mainSale/icon-menu-05.png",
                            "6": "/mainSale/icon-menu-06.png",
                        }

                    },
                    activeInfo: {
                        icon: {
                            "0": "/mainSale/icon-active-title.png",
                            "1": "/mainSale/icon-active-1.png",
                            "2": "/mainSale/icon-active-2.png",
                            "3": "/mainSale/icon-active-3.png",
                        }
                    },
                    menuBarInfo: {
                        list: {
                            main: [
                                {
                                    name: "",
                                    iconUaUrl: "",
                                    iconAcUrl: "",

                                }
                            ],
                        },
                        icon: {
                            now: {
                                "1": "",
                                "2": "",
                                "3": "",
                                "4": "",
                                "5": "",
                            },
                            ua: {
                                "1": "/mainSale/icon-menuBar-1-ua.png",
                                "2": "/mainSale/icon-menuBar-2-ua.png",
                                "3": "/mainSale/icon-menuBar-3-ua.png",
                                "4": "/mainSale/icon-menuBar-4-ua.png",
                                "5": "/mainSale/icon-menuBar-5-ua.png",
                            },
                            ac: {
                                "1": "/mainSale/icon-menuBar-1-ac.png",
                                "2": "/mainSale/icon-menuBar-2-ac.png",
                                "3": "/mainSale/icon-menuBar-3-ac.png",
                                "4": "/mainSale/icon-menuBar-4-ac.png",
                                "5": "/mainSale/icon-menuBar-5-ac.png",
                            }
                        },

                    }
                },
                dis: {}
            };
        },
        created() {
            this.checkNowMenuBar()
        },
        methods: {
            checkNowMenuBar() {
                let inData = '1'

                this.test.menuBarInfo.icon.now = this.test.menuBarInfo.icon.ua
                this.test.menuBarInfo.icon.now[inData] = this.test.menuBarInfo.icon.ac[inData]
            },
            manInfoClick(){
                this.$router.push("counterInfo")
            },
            
            switchBarClick(){
                this.$router.push("changeCounter")
            },
            testButtonClick() {
            },
            menu01Click() {
            },
            menu02Click() {
                this.$router.push("Task")
            },
            menu03Click() {
                this.$router.push("activeList")
            },
            menu04Click() {
                this.$router.push("counterMaintain")
            },
            menu05Click() {
                this.$router.push("ActTemplate")
            },
            menu06Click() {
                this.$router.push("goodManage")
            },
            buttonMainMarketingClick() {
                // this.$router.push("home")
            },
            menuBarClick(inData) {
                this.$router.push(inData)
            },
            menuCase() {
                this.$router.push({path:"/case"}) 
            },
            menuProfit() {
                this.$router.push({path:"/profitList"})  
            },
            menuTask() {
                this.$router.push({path:"/taskList"})  
            },

        }
    };
</script>

<style scoped>
    .testCube {
        width: 60px;
        height: 10px;
        background-color: lightcoral;
        border: 1px solid white;
    }

    .main {
        background-color: rgb(237, 239, 243);
        width: 100%;
        height: auto;
        /*padding: ;*/
        padding-bottom: 94px;
        display: flex;
        flex-direction: column;
        justify-content: start;

        overflow: auto;
    }

    .main-manInfos {
        width: 100%;
        height: 72px;
        background-color: #4377BC;

        padding: 0px 16px;

        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .manInfo-logos {

        width: 48px;
        height: 48px;
        /*border: 1px solid white;*/


        display: flex;
        flex-direction: row;
        justify-content: start;
        align-items: center;
    }

    .logos-logo {
        width: 48px;
        height: 48px;
        object-fit: cover;
        border-radius: 50%;

        border: 2px solid white;
    }

    .manInfo-name {
        width: 100%;
        height: 18px;
        padding: 0px 12px;
        margin-right: 60px;


        color: white;

        font-size: 14px;
        line-height: 16px;
        font-weight: bold;

    }

    .manInfo-switch {
        /*border: 1px solid greenyellow;*/
        width: 100px;
        height: 18px;


        font-size: 14px;
        line-height: 18px;
        font-weight: bold;

        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
    }

    .switch-icon {
        width: 5px;
        height: 8px;
    }

    .switch-text {
        color: white;

        padding-right: 4px;

        font-size: 14px;
        line-height: 16px;
        font-weight: normal;
    }

    .main-tips {

        width: 100%;
        height: 48px;
        background-color: #F8F8F8;

        padding: 0px 16px;

        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .tips-tip {
        /*border: 1px solid darkorange;*/
        width: 30%;
        height: 16px;

        color: #4377BC;
        font-size: 12px;
        font-weight: normal;
        line-height: 16px;
        text-align: center;

    }

    .main-menus {
        /*border: 1px solid lightseagreen;*/
        width: 100%;
        height: 240px;

        display: flex;
        flex-direction: column;
        justify-content: start;
    }

    .menus-row {
        width: 100%;
        height: 120px;

        padding: 12px 16px 0px 16px;

        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }

    .menu {
        width: 108px;
        height: 108px;
        background-color: #F8F8F8;

        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .menu-logo {
        width: 48px;
        height: 48px;

        object-fit: cover;
    }

    .menu-text {
        font-size: 14px;
        font-weight: bold;
        color: #2D476A;
    }

    .main-actives {
        /*border: 1px solid lightcoral;*/
        width: 100%;
        height: 380px;
        /*margin-bottom: 94px;*/
        margin-top: 36px;
        padding: 0px 12px;
        background-color: white;

        display: flex;
        flex-direction: column;
        justify-content: start;
    }

    .actives-banners {
        border-bottom: 1px solid #EEEEEE;
        width: 100%;
        height: 25px;


        display: flex;
        flex-direction: row;
        justify-content: center;

    }

    .actives-banner-small {


        width: 220px;
        height: 30px;

        object-fit: cover;

        position: relative;
        bottom: 7px;
    }

    .actives-banner-title {
        background: url(/mainSale/icon-active-title.png);
        background-repeat: no-repeat;
        background-size: 100% 100%;

        width: 220px;
        height: 30px;

        font-size: 16px;
        line-height: 16px;
        color: #2D476A;
        text-align: center;


        position: relative;
        bottom: 7px;
    }


    .actives-banner-main {
        width: 148px;
        height: 24px;
        border-radius: 40px;
        margin: 0px 4px;

        font-size: 16px;
        font-weight: bold;
        line-height: 18px;
        text-align: center;
        color: #2D476A;

        background: linear-gradient(#FFFFFF, 50%, #E4F9FF);
        box-shadow: 0px 1px 1px 0px #96CEDC;

        position: relative;
        bottom: 12px;
    }


    .actives-main {
        border-bottom: 1px solid #EEEEEE;
        width: 100%;
        height: 105px;
        padding: 12px 0px;

        display: flex;
        flex-direction: row;
        justify-content: start;
    }

    .active-logos {
        background-color: #F8F8F8;
        width: 80px;
        height: 80px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }

    .active-logo {
        width: 56px;
        height: 56px;

    }

    .active-infos {
        width: 100%;
        height: 80px;
        padding-left: 12px;

        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .active-title {
        height: 16px;
        font-size: 14px;
        font-weight: bold;
        line-height: 14px;
        margin-bottom: 8px;
    }

    .active-dsc {
        height: 36px;
        width: 100%;
        font-size: 12px;
        font-weight: normal;

    }

    .actives-mores {
        width: 100%;
        height: 40px;
        /*border: 1px solid red;*/

        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }

    .mores-title {
        width: auto;
        height: 14px;

        margin-right: 4px;

        font-size: 12px;
        font-weight: normal;
        line-height: 14px;
        color: #2D476A;
    }

    .mores-icon {
        width: 10px;
        height: 14px;
    }

    .main-menuBar {
        /*border: 1px solid darkviolet;*/
        box-shadow: inset 0px 1px 2px 0px rgba(221, 221, 221, 1);
        width: 100%;
        height: 82px;
        position: fixed;
        bottom: 0px;
        left: 0px;
        background-color: #FAFAFA;
        padding: 0px 14px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }

    .menuBar-menu {
        /*background-color: greenyellow;*/
        width: 48px;
        height: 47px;


        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: center;
    }

    .menuBar-icon {
        width: 24px;
        height: 24px;
        object-fit: cover;
    }

    .menuBar-title {
        width: auto;
        height: 12px;
        font-size: 10px;
        font-weight: bold;
        color: rgba(67, 119, 188, 0.4);
        text-align: center;
    }

    .menuBar-title-ac {
        color: rgba(67, 119, 188, 1);
    }
</style>