<style scoped>
.view {
  transition: all .5s ease;
}
.view-enter, .view-leave {
  opacity: 0;
  transform: translate3d(10px, 0, 0);
}
[v-cloak] {
  display: none;
}
</style>
<template>
  <div>
    <app-header type="operation"></app-header>

    <router-view 
      class="view" 
      transition="view" 
      transition-mode="out-in" 
      keep-alive></router-view>
    
    <app-footer></app-footer>
    
  </div>
</template>

<script>
  var appHeader = require('./components/layout/header.vue');
  var appFooter = require('./components/layout/footer.vue');
  var store = require('./vuex/store');
  var MT = require('./vuex/mutation-types');
  var ctns = require('./vuex/constants_supplier');

  //弹出提示信息
  var Vue = require('vue');
  Vue.prototype.ctns=ctns;

  module.exports = {
    store: store,
    components: {
      appHeader: appHeader,
      appFooter: appFooter
    },   
    methods: {
      getOnlineUser: function () {
        var self = this;
        Ajax.get('/online').then(function (resp) {
          self.$store.dispatch(MT.SET_ONLINE_USER, resp.data);
        });
      },
      getAreaData: function () {
        var self = this;
        Ajax.get('/area.json').then(function (resp) {
          var array = resp.data.city;
          var provinceArray = [];
          var map = {};
          var S_CITY = {'北京市': 1, '上海市': 1, '天津市': 1, '重庆市': 1, '香港': 1, '澳门': 1, '台湾': 1};
          _.each(array, function (province) {
            provinceArray.push(province.name);
            // 直辖市、特政区
            if (S_CITY[province.name]) {
              map[province.name] = {
                sub: [{name: '请选择'}, {name: province.name}]
              };

              map[province.name][province.name] = {
                sub: province.sub
              };
            } else {
              map[province.name] = {
                sub: province.sub
              };

              _.each(province.sub, function (city) {
                map[province.name][city.name] = {
                  sub: city.sub
                };
              });
            }
          });
          self.$store.dispatch(MT.SET_AREA, {
            provinceArray: provinceArray,
            map: map
          });
        });
      }
    },
    ready: function () {
      this.getOnlineUser();
      this.getAreaData();
    }
  };
</script>