<template>
    <div id="mainPage">
        <bottomTab :curTab="thisTab"></bottomTab>
        <alert ref="alertPart"></alert>
        <div class="container">
            <mu-row gutter>
                <mu-col span="12">
                    <div class="grid-cell">
                        <timePart></timePart>
                    </div>
                </mu-col>
            </mu-row>

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

<script>
    import {
        ManagerSelfQuery,
        OrderShopQuery,
    } from '../api/getApiRes.js'

    import bottomTab from '../components/bottomTab'
    import alert from '../components/alert'
    import axios from 'axios';
    import timePart from '@/components/timePart.vue'
    let qs = require('qs');
    import Global from '../Global.js'
    import '../libs/rem';

    export default {
        data() {
            return {
                thisTab: 'STATE',
            }
        },
        mounted() {
            // this.getManagerSelfQuery();
        },
        destroyed() {

        },
        methods: {
            alertInfo(info) {
                this.$refs.alertPart.openSimpleDialog(info);
            },
            getManagerSelfQuery() {
                let that = this;
                let param = {
                    token: localStorage.token,
                };
                let postdata = qs.stringify(param);
                ManagerSelfQuery(postdata).then(res => {
                    let json = res;
                    if (json.Code == 0) {
                        this.currShopId = json.Rs.ShopId;
                        this.getList();
                    } else {
                        that.alertInfo(json.Memo);
                        if (json.Code == 1010) {
                            localStorage.clear();
                            console.log(1010);
                            that.$router.push({path: '/login'});
                        }
                    }
                })
            },
            getList() {
                let that = this;
                let param = {
                    token: localStorage.token,
                };
                let postdata = qs.stringify(param);
                OrderShopQuery(postdata).then(res => {
                    let json = res;
                    if (json.Code == 0) {
                        that.list = json.Rs;
                        if (that.list) {
                            that.shopNum = json.Rs.length;
                        }
                    } else {
                        that.alertInfo(json.Memo);
                        // 权限失效后，删掉本地token
                        if (json.Code == 1004) {
                            localStorage.clear();
                            console.log(1010);
                            // this.$router.push({path: '/login'});
                        }
                    }
                })
            },
            onGoNewPage(path) {
                this.$router.push({path: '/' + path});
            },
            goPage(pages) {
                this.$router.push({path: pages});
            },
            goAppoint(row) {
                let that = this;
                if (row.IsJoin == 0) {
                    that.alertInfo('您不是该店会员，不可预约');
                    return false
                }
                if (row.Status == 2) {
                    that.alertInfo(row.name + '不可预约');
                    return false
                } else {
                    this.$router.push({
                        path: '/appoint', query: {
                            shopId: row.ShopID
                        }
                    });
                }
            }
        },
        beforeRouteEnter(to, from, next) {
            next(vm => {
                //因为当钩子执行前，组件实例还没被创建
                // vm 就是当前组件的实例相当于上面的 this，所以在 next 方法里你就可以把 vm 当 this 来用了。
                if (to.name == '') {
                    vm.getList();
                }
            });
        },
        watch: {
            $route(to) {
                if (to.name == '') {
                    this.getList();
                }
            },
            'active'() {
                this.getList();
            }
        },
        components: {
            bottomTab, alert ,timePart
        }
    }
</script>

<style scoped>
    #mainPage {
        width: 100%;
        height: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        background: #000;
        /*background-image: url("../static/images/comm/logo.png");*/
        /*background-position: top center;*/
        /*background-repeat: no-repeat;*/
        overflow-y: scroll;
        color: red;
    }

    .imgContainer {
        width: 100%;
        height: 2rem;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        border: 2px solid red;
    }

    .imgContainer img {
        overflow: hidden;
        display: block;
        margin: 0 auto;
    }

    h5 {
        font-size: 30px;
        margin: 0;
        text-align: center;
    }

    /deep/ .mu-item-action {
        color: red;
    }

    /deep/ .mu-item-title {
        color: red;
    }

</style>
