<template>
    <div class="conatiner" id='allConatiner'>
        <el-carousel class="banner swiper" :class="[bannerList.length==1?'noButton':'']" height="420px" :interval="4000">
            <template v-for="item in bannerList">
                <el-carousel-item :style="{backgroundImage:'url('+item.imageUrl+')'}">
                    <a v-if="item.url" :href="item.url"></a>
                </el-carousel-item>
            </template>

        </el-carousel>

        <div class="content" id='content'>
            <div class="content-step">
                <div class="step-item">
                    <div class="num">1</div>
                    <div class="text">
                        <div class="title">选择所需服务</div>
                        <div class="subTitle">100+服务项目</div>
                    </div>
                    <img src="../assetsPre/more.png" alt="">
                </div>
                <div class="step-item">
                    <div class="num">2</div>
                    <div class="text">
                        <div class="title">服务商对接服务</div>
                        <div class="subTitle">专人客服对接办理</div>
                    </div>
                    <img src="../assetsPre/more.png" alt="">
                </div>
                <div class="step-item">
                    <div class="num">3</div>
                    <div class="text">
                        <div class="title">在线下单支付</div>
                        <div class="subTitle">款项支付到平台</div>
                    </div>
                    <img src="../assetsPre/more.png" alt="">
                </div>
                <div class="step-item">
                    <div class="num">4</div>
                    <div class="text">
                        <div class="title">验收服务</div>
                        <div class="subTitle">验收后商家才能收到款项</div>
                    </div>
                </div>

            </div>

            <div class="content-box" :id="'box'+index" v-for="(item,index) in serviceType">
                <div class="box-top">
                    <div class="title">
                        {{item.shortName}}
                    </div>
                    <div class="subTitle">
                        {{item.description}}
                    </div>
                    <router-link class='more' :to='{name:"business",query:{serviceId:(index+1)}}'>查看更多 ></router-link>
                </div>
                <div class="box-content">
                    <div class="box-left" :style="{backgroundImage:'url('+item.image+')'}"></div>
                    <div class="box-right">
                        <div class="box-right-top" :style="{backgroundColor:item.color}">
                            <div class="box-ad">
                                <span>消息提醒：最热门服务商家可在此展示位置自定义一条广告消息展示</span>
                            </div>
                            <div class="box-hot">热门{{item.shortName}}</div>
                            <img src="../assetsPre/hot.png" alt="">
                        </div>
                        <div class="box-right-content">
                            <div class="box-goodsList" v-loading="loading">

                                <goods-little v-for="(todo,todoIndex) in item.homeStoreInfoList" :info='todo' style="padding-left:30px;display:inline-block"></goods-little>

                            </div>
                            <div class="box-rankList" v-loading="loading">

                                <router-link :to='{name:"shop",query:{id:todo.id,breHref:breHref}}' class="box-rankItem" v-for="(todo,todoIndex) in item.hotStoreInfoList">
                                    <div class="num" :style="{backgroundImage:'url('+(todoIndex<3?require('../assetsPre/num_bg_pre.png'):require('../assetsPre/num_bg.png'))+')'}">{{todoIndex+1}}</div>
                                    <div class="name">{{todo.storeName}}</div>
                                </router-link>

                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="quickMenu" id="quickMenu" :style="{position:quickFixed?'fixed':'absolute'}">
                <div class="quickTop">
                    <img src="../assetsPre/quckmenu.png" alt="">
                </div>
                <div class="quck-item" @click="goMenu(index)" :class="{active:(nowShort==index)}" v-for="(item,index) in serviceType">
                    <span>{{item.shortName}}</span>
                </div>

                <img class="sanjiao" :style="{top:quickTop}" src="../assetsPre/quckmenu_sanjiao.png" alt="">
            </div>

            <div class="newRight" id='newRight' :style="{position:quickFixed?'fixed':'absolute'}">
                <div class="newShop" v-if="!hideShow1" style="margin-bottom:10px">
                    <div class="newShop-name">
                        <img src="../assetsPre/newShop.png" alt="">
                        <span>新入驻</span>
                        <i class="el-icon-close" id='close1' @click="showHide(1)"></i>
                    </div>
                    <div class="newShop-list">
                        <router-link :to='{name:"shop",query:{id:item.id,breHref:breHref}}' class="newShop-item" v-for="item in newShop">
                            <span>{{item.storeName}}</span>
                            <span style="color:#1BB8AC">{{forNow(item.createTime)}}</span>
                            <span>入住了平台</span>
                        </router-link>
                    </div>
                </div>

                <div class="newShop" v-if="!hideShow2">
                    <div class="newShop-name">
                        <img src="../assetsPre/newInfo.png" alt="">
                        <span>新订单</span>
                        <i class="el-icon-close" id='close1' @click="showHide(2)"></i>
                    </div>

                    <div class="newShop-list">
                        <div class="newShop-item" v-for="item in orderList">
                            <span>{{item.userInfo?item.userInfo.nickname:''}}</span>
                            <span style="color:#1BB8AC">{{forNow(item.createTime)}}</span>
                            <span>提交了订单</span>
                        </div>
                    </div>
                </div>
            </div>

        </div>

        <!-- <div class="minRight">
            <el-tooltip v-if="hideShow1" content="新入驻" placement="left" effect="light">
                <div class="minRight-item" @click="hideShow1=false">
                    <img src="../assetsPre/newShop.png" alt="">
                </div>
            </el-tooltip>

            <el-tooltip v-if="hideShow2" content="新订单" placement="left" effect="light">
                <div class="minRight-item" @click="hideShow2=false">
                    <img src="../assetsPre/newInfo.png" alt="">
                </div>
            </el-tooltip>
        </div> -->

        <menuFoot></menuFoot>

    </div>
</template>

<script>
var newShopLeft = 100;
window.onresize = function () {
    // console.log(document.getElementById('container').scrollTop)
    if (document.getElementById('container')) {
        if (document.getElementById('container').scrollTop < 600) {
            if (document.getElementById('allConatiner')) {
                if (document.getElementById('allConatiner').offsetWidth <= 1750 && document.getElementById('allConatiner').offsetWidth > 1390) {
                    document.getElementById('newRight').style.right = 0 - (document.getElementById('allConatiner').offsetWidth - 1390) / 2 + 'px'
                }
                else if (document.getElementById('allConatiner').offsetWidth <= 1390) {
                    document.getElementById('newRight').style.right = 0
                }
                else {
                    document.getElementById('newRight').style.right = '-180px'

                }
            }
        }
        else {
            document.getElementById('newRight').style.top = '100px'
            if (document.getElementById('allConatiner').offsetWidth <= 1750 && document.getElementById('allConatiner').offsetWidth > 1390) {
                document.getElementById('newRight').style.right = 0
            }
            else if (document.getElementById('allConatiner').offsetWidth <= 1390) {
                document.getElementById('newRight').style.right = 0
            }
            else {
                document.getElementById('newRight').style.right = '90px'

            }
        }
    }


};
import goodsLittle from '../components/GoodsLittle'
import menuFoot from '../pagesPre/MenuFoot'
import { mapState } from 'vuex'
export default {
    name: 'home',
    data() {
        return {
            newShopLeft,
            hideShow1: false,
            hideShow2: false,
            nowShort: 0,
            quickFixed: false,
            bannerList: [],
            serviceGoods: {},
            loading: true,
            newShop: [],
            orderList: []
        }
    },
    mounted() {

        this.$http.get({
            url: '/storeInfo/all',
            data: {

                orderByStr: 'create_time_,desc',
                useFlag: 'Y',
                limitNum: 4
            }
        }).then(res => {
            if (res.success) {
                this.newShop = res.data
            }
        }).catch(e => {
            console.log(e)
        })

        this.$http.get({
            url: '/userOrder/all',
            data: {
                limitNum: 4
            }
        }).then(res => {
            if (res.success) {
                this.orderList = res.data
            }
        }).catch(e => {
            console.log(e)

        })


        setTimeout(() => {
            if (document.getElementById('allConatiner').offsetWidth <= 1750 && document.getElementById('allConatiner').offsetWidth > 1390) {
                console.log('a')
                document.getElementById('newRight').style.right = 0 - (document.getElementById('allConatiner').offsetWidth - 1390) / 2 + 'px'
            }
            else if (document.getElementById('allConatiner').offsetWidth <= 1390) {
                console.log('b')
                document.getElementById('newRight').style.right = 0
            }
            else {
                console.log('c')
                document.getElementById('newRight').style.right = '-180px'

            }

            this.loading = false

        }, 500)



        this.$http.get({
            url: '/bannerInfo/all',
            data: {
                location: '1'
            }
        }).then(res => {
            if (res.success) {
                this.bannerList = res.data
            }
        }).catch(e => {
            console.log(e)
        })


        var list = [{
            name: '首页',
            href: '/'
        }]



        // this.$store.commit('updateHrefHistory', list)
    },
    computed: {
        ...mapState(['serviceType']),
        quickTop() {
            var val = 65
            val = this.nowShort * 50 + 65
            return val + 'px'
        },
        breHref() {
            var str = '首页,/index_;'
            if (this.$route.name == 'business') {
                str += document.title + ',' + this.$route.name + '_;'
            }
            return str
        }
    },
    methods: {
        // getTime(str) {
        //     var time = ''
        //     if (str) {
        //         // time = moment(str).fromNow()
        //         time= distanceInWordsToNow(new Date(str), { locale: cn, addSuffix: true })
        //     }
        //     return time
        // },
        showHide(style) {
            if (style == 1) {
                this.hideShow1 = true
                this.$emit('showHide', { index: 1, hide: true })
            }
            else {
                this.hideShow2 = true
                this.$emit('showHide', { index: 2, hide: true })
            }
        },
        goBanner(banner) {
            console.log(banner)
            if (banner) {
                this.$router.push(banner)
            }
        },
        scrollMenu() {
            // console.log(document.getElementById('content').offsetLeft)
            if (document.getElementById('container').scrollTop >= 600) {
                this.quickFixed = true
                document.getElementById('quickMenu').style.left = document.getElementById('content').offsetLeft + 'px'
            }
            else {
                this.quickFixed = false
                document.getElementById('quickMenu').style.left = 0
            }

            // console.log(document.getElementById('box0').offsetTop,document.getElementById('container').scrollTop)

            for (var i = 0; i < this.serviceType.length; i++) {
                if (document.getElementById('container').scrollTop >= document.getElementById('box' + i).offsetTop + (document.body.clientHeight / 3)) {
                    this.nowShort = i
                }
            }

            if (this.nowShort == -1) {
                this.nowShort = 0
            }

            console.log(this.quickFixed)
            if (this.quickFixed) {
                document.getElementById('newRight').style.top = '100px'
                if (document.getElementById('allConatiner').offsetWidth <= 1750 && document.getElementById('allConatiner').offsetWidth > 1390) {
                    document.getElementById('newRight').style.right = 0
                }
                else if (document.getElementById('allConatiner').offsetWidth <= 1390) {
                    document.getElementById('newRight').style.right = 0
                }
                else {
                    document.getElementById('newRight').style.right = '90px'

                }
            }
            else {
                if (document.getElementById('allConatiner')) {
                    if (document.getElementById('allConatiner').offsetWidth <= 1750 && document.getElementById('allConatiner').offsetWidth > 1390) {
                        document.getElementById('newRight').style.right = 0 - (document.getElementById('allConatiner').offsetWidth - 1390) / 2 + 'px'
                    }
                    else if (document.getElementById('allConatiner').offsetWidth <= 1390) {
                        document.getElementById('newRight').style.right = 0
                    }
                    else {
                        document.getElementById('newRight').style.right = '-180px'

                    }
                }
            }


        },
        goMenu(index) {
            document.getElementById('container').scrollTop = document.getElementById('box' + index).offsetTop + 730 - 250
        }
    },
    activated() {
        this.quickFixed = false
        document.getElementById('quickMenu').style.left = 0

    },
    components: {
        goodsLittle, menuFoot
    }
}
</script>

<style lang="less" scoped>
.conatiner {
    // min-width: 1190px;
}
.banner {
    height: 420px;
    width: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    min-width: 1196px;
}

.content {
    width: 100%;
    max-width: 1390px;
    margin: auto;
    position: relative;
    .content-step {
        width: 1196px;
        height: 80px;
        background: rgba(255, 255, 255, 1);
        border: 1px solid rgba(234, 234, 234, 1);
        margin: 30px auto 0;

        .step-item {
            display: inline-block;
            width: 24%;
            height: 100%;

            .num {
                width: 40px;
                height: 40px;
                border: 1px solid rgba(11, 158, 192, 1);
                border-radius: 100%;
                font-size: 20px;
                font-family: MicrosoftYaHei;
                color: rgba(11, 158, 192, 1);
                line-height: 40px;
                text-align: center;
                font-weight: bold;
                float: left;
                margin: 20px 0 20px 50px;
            }

            .text {
                float: left;
                margin: 0 19px;
                padding: 20px 0;

                .title {
                    font-size: 14px;
                    font-family: MicrosoftYaHei;
                    color: rgba(11, 158, 192, 1);
                    line-height: 19px;
                    font-weight: bold;
                }

                .subTitle {
                    font-size: 12px;
                    font-family: MicrosoftYaHei;
                    color: rgba(153, 153, 153, 1);
                    line-height: 16px;
                    margin-top: 4px;
                }
            }

            img {
                width: 16.8px;
                height: 29px;
                display: block;
                float: right;
                margin: 27px 0;
            }
        }
    }

    .content-box {
        overflow: hidden;
        width: 1190px;
        margin: 40px auto 0;
        background-color: #fff;
        border: 1px solid rgba(234, 234, 234, 1);
        .box-top {
            padding: 8px 10px 11px 20px;
            overflow: hidden;
            .title {
                font-size: 24px;
                font-family: MicrosoftYaHei;
                color: rgba(51, 51, 51, 1);
                line-height: 31px;
                float: left;
            }

            .subTitle {
                font-size: 12px;
                font-family: MicrosoftYaHei;
                color: rgba(102, 102, 102, 1);
                line-height: 16px;
                margin: 13px 8px 2px;
                float: left;
            }

            .more {
                font-size: 12px;
                font-family: MicrosoftYaHei;
                color: rgba(153, 153, 153, 1);
                line-height: 16px;
                float: right;
                margin: 13px 0px 2px;
            }
        }

        .box-content {
            overflow: hidden;
            height: 500px;
            width: 100%;
            .box-left {
                background: rgba(40, 208, 235, 1);
                width: 230px;
                float: left;
                height: 100%;
            }
            .box-right {
                width: 960px;
                height: 100%;
                float: right;
                .box-right-top {
                    height: 40px;
                    overflow: hidden;
                    position: relative;
                    .box-ad {
                        font-size: 14px;
                        font-family: MicrosoftYaHei;
                        color: rgba(255, 255, 255, 1);
                        line-height: 19px;
                        margin: 11px 0;
                        float: left;
                        width: 716px;

                        span {
                            margin-left: 30px;
                        }
                    }

                    .box-hot {
                        font-size: 14px;
                        font-family: MicrosoftYaHei;
                        font-weight: bold;
                        color: rgba(255, 255, 255, 1);
                        line-height: 19px;
                        margin: 11px 26px;
                    }

                    img {
                        width: 29px;
                        height: 35px;
                        position: absolute;
                        right: 0;
                        top: 0;
                    }
                }

                .box-right-content {
                    overflow: hidden;
                    padding-top: 14px;
                    height: 484px;

                    .box-goodsList {
                        font-size: 0;
                        width: 716px;
                        float: left;
                        height: 100%;
                    }
                }

                .box-rankList {
                    width: 241px;
                    float: right;
                    border-left: 1px solid #ebebeb;
                    height: 100%;

                    .box-rankItem {
                        margin-left: 26px;
                        font-size: 0;
                        overflow: hidden;
                        margin-top: 12px;
                        margin-bottom: 6px;
                        display: block;
                        .num {
                            width: 15px;
                            height: 20px;
                            background-size: contain;
                            font-size: 10px;
                            font-family: MicrosoftYaHei;
                            color: rgba(255, 255, 255, 1);
                            line-height: 14px;
                            font-weight: bold;
                            text-align: center;
                            padding-left: 3px;
                            line-height: 20px;
                            float: left;
                        }
                        .name {
                            font-size: 12px;
                            font-family: MicrosoftYaHei;
                            color: rgba(153, 153, 153, 1);
                            line-height: 19px;
                            font-weight: bold;
                            margin-left: 10px;
                            width: 180px;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                            float: left;
                        }
                    }
                }
            }
        }
    }

    .quickMenu {
        position: absolute;
        top: 120px;
        left: 0px;
        background-color: #fff;

        .quickTop {
            background: rgba(255, 255, 255, 1);
            img {
                width: 55px;
                height: 45px;
                display: block;
                margin: auto;
            }
        }

        .quck-item {
            width: 55px;
            height: 50px;
            background: rgba(255, 255, 255, 1);
            border: 1px solid rgba(234, 234, 234, 1);
            text-align: center;
            border-top: 0;
            line-height: 51px;
            cursor: pointer;
            span {
                vertical-align: middle;
                font-size: 12px;
                font-family: MicrosoftYaHei;
                color: rgba(153, 153, 153, 1);
                line-height: 16px;
                max-width: 24px;
            }

            &.active {
                // border-color: #0b9ec0;
                border: 1px solid #81bcd4;
                span {
                    color: #0b9ec0;
                }
            }
        }

        .sanjiao {
            position: absolute;
            right: -8px;
            top: 65px;
            width: 9px;
            height: 11px;
            transition: top ease-in-out 0.3s;
        }
    }

    .newRight {
        position: absolute;
        right: -180px;
        top: 0;
    }

    .newShop {
        width: 250px;
        background: rgba(255, 255, 255, 1);
        border: 1px solid rgba(234, 234, 234, 1);

        .newShop-name {
            border-bottom: 1px solid rgba(234, 234, 234, 1);
            height: 40px;
            line-height: 40px;
            img {
                width: 20px;
                height: 18px;
                vertical-align: middle;
                margin: 0 7px 0 12px;
            }

            span {
                font-size: 14px;
                font-family: MicrosoftYaHei;
                color: rgba(51, 51, 51, 1);
                line-height: 19px;
                vertical-align: middle;
            }

            i {
                float: right;
                line-height: 40px;
                padding: 0 10px;
                font-size: 18px;
                cursor: pointer;
            }
        }
        .newShop-list {
            padding-left: 25px;

            .newShop-item {
                line-height: 33px;
                height: 33px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                display: block;
                span {
                    vertical-align: middle;
                    font-size: 12px;
                    font-family: MicrosoftYaHei;
                    color: rgba(102, 102, 102, 1);
                    line-height: 16px;
                }
                &:not(:last-child) {
                    border-bottom: 1px solid rgba(234, 234, 234, 1);
                }
            }
        }
    }
}

.minRight {
    position: absolute;
    top: 680px;
    right: 0;
    background-color: #fff;
    border: 1px solid #ebebeb;

    .minRight-item {
        padding: 10px;
        img {
            width: 20px;
            height: 18px;
            display: block;
            cursor: pointer;
        }

        &:not(:last-child) {
            border-bottom: 1px solid #ebebeb;
        }
    }
}
</style>
