<template>
<scroller :class="['scroller1','tab', isIpx?'ipx':'']">
  <div class="tabnav">
    <div class="tablist" :style="''+chooseNav==index?'color:  '+(item.selectedColor? item.selectedColor :  tabBar.selectedColor) :''" v-for="(item,index) in tabBar" :key="index" @click.stop="tabChange" :data-index="index">
      <image :src="item.selectedIconPath" v-if="chooseNav==index" class="tabimg"></image>
      <image :src="item.iconPath" v-if="chooseNav!==index" class="tabimg"></image>
      <div class="badge_text" v-if="cartCount> 0 && isCart == false && item.pagePath =='/yzbld_sun/pages/carts/carts'"><text class="text8">{{cartCount}}</text></div>

      <text class="text9">{{item.text}}</text>
    </div>
  </div>
</scroller>
</template>
<script>
import wx from './../../../../common/wx.js';
import http from '../../../util/request.js';

export default {

    props: {
        cartCount: {
            type: Number,
            default: 0,
            observer: function (newVal, oldVal) {}}
    },
    data: function () {
        return {
            isIpx: false,
            chooseNav: 0,
            isCart: '',
            tabBar: []};
    },
    mixins: [require ('./../../../../common/publish').publish],
    created :function () {
        this.data = this.$data;
        var tab = wx.getStorageSync ('bottom_tab') || null;
        if (tab == null) {this.getBottomTab (true);
        } else {this.setBottomTab (tab.data);
            var now = parseInt (Date.parse (new Date ()) / 1000);
            if (parseInt (tab.expried) <now) {this.getBottomTab (false);
            }
        }
    },
    methods: {getCurrentPageUrl () {var pages = this.getCurrentPages ();
            var currentPage = pages [pages.length - 1];
            var url = currentPage.route;
            return url;
        },
        getTab () {
            let tabBar = [
                {
                    'pagePath': '/yzbld_sun/pages/index/index',
                    'text': '首页',
                    'iconPath': 'bmlocal://assets/style/images/index.png',
                    'selectedIconPath': 'bmlocal://assets/style/images/indexSelect.png',
                    'selectedColor': '#f5 ac32',
                    'active': true
                },
                {
                    'pagePath': '/yzbld_sun/pages/classify/classify',
                    'text': '分类',
                    'iconPath': 'bmlocal://assets/style/images/cata.png',
                    'selectedIconPath': 'bmlocal://assets/style/images/cataSelect.png',
                    'selectedColor': '#f5 ac32',
                    'active': false
                },
                {
                    'pagePath': '/yzbld_sun/pages/carts/carts',
                    'text': '购物车',
                    'iconPath': 'bmlocal://assets/style/images/carts.png',
                    'selectedIconPath': 'bmlocal://assets/style/images/cartsSelect.png',
                    'selectedColor': '#f5 ac32',
                    'active': false
                },
                {
                    'pagePath': '/yzbld_sun/pages/user/user',
                    'text': '我的',
                    'iconPath': 'bmlocal://assets/style/images/user.png',
                    'selectedIconPath': 'bmlocal://assets/style/images/userSelect.png',
                    'selectedColor': '#f5 ac32',
                    'active': false
                }
            ];
            this.updateData (tabBar);
        },
        updateData (tabBar) {
            var chooseNav = 0;
            var currentPath = '/' + this.getCurrentPageUrl ();
            for (var i = 0; i < tabBar.length; ++i) {if (currentPath == tabBar [i].pagePath) {
                    chooseNav = i;
                    break;
                }
            }
            this.setData ({
                tabBar: tabBar,
                chooseNav: chooseNav,
                isCart: currentPath == '/yzbld_sun/pages/carts/carts'
            });
        },
        getBottomTab (is_use) {
            var that = this;
            http.get ('getBottomTab').then (data => {console.log ('getBottomTab');
                console.log (data);
                if (data.length> 0) {for (var i = 0; i < data.length; ++i) {data [i]['pagePath'] = '/yzbld_sun/pages/' + data [i]['pagePath'];
                    }
                }
                if (is_use) {that.setBottomTab (data);
                }
                var now = parseInt (Date.parse (new Date ()) / 1000);
                var obj = {};
                obj.data = data;
                obj.expried = now + 60;
                wx.setStorage ({
                    key: 'bottom_tab',
                    data: obj
                });
            });
        },
        setBottomTab (bottomTab) {if (bottomTab.length> 0) {this.updateData (bottomTab);
            } else {this.getTab ();
            }
        },
        tabChange (e) {
            let idx = e.target.attr.dataIndex;
            this.reLaunch ({url: this.data.tabBar [idx].pagePath });
        }
    }
};
</script>
<style scoped>
@import './../../../../app.css';
@import './../../../../fixed.css';
.scroller1 {
}
.tabnav {
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    display: flex;
}
.tablist {
    color: #8 c8 c8 c;
    font-size: 20 px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    display: flex;
}
.tabimg {
    color: #8 c8 c8 c;
    font-size: 20 px;
    margin-top: 8 px;
    width: 60 px;
    height: 60 px;
    display: inline-block;
}

.badge_text {
    color: #ffffff;
    font-size: 22 px;

    line-height: 18 px;

    border-top-left-radius: 15 px;
    border-top-right-radius: 15 px;
    border-bottom-left-radius: 15 px;
    border-bottom-right-radius: 15 px;
    width: 30 px;
    height: 30 px;
    background-color: #ff4444;
    /*box-sizing: border-box;*/
    position: absolute;
    right: 0 px;
    top: 10 px;
   /* box-shadow: 0 0 0 5 px #fff;*/
    flex-direction: row;
  justify-content: center;
}
.text8 {
    color: #ffffff;
    font-size: 20 px;
  justify-items: center;
  padding-top: 6 px;
  padding-left: 6 px;
  padding-bottom: 6 px;
  padding-right: 6 px;
}
.text9 {
    color: #8 c8 c8 c;
    font-size: 20 px;
}
</style>