<template>
  <div id="dashboard">
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive"/>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive"/>
  </div>
</template>

<script>
import {mapState, mapMutations, mapActions} from 'vuex'
import {getGoodsCart} from './../../service/api/index'
import {setStore} from './../../config/global'
import {getUserInfo} from "@/service/api/category";
import {Button, Icon, Loading} from 'vant';
import Header from "@/views/home/components/header/Header";
import Sowing from "@/views/home/components/sowing/Sowing";
import Nav from "@/views/home/components/nav/Nav";
import FlashSale from "@/views/home/components/flashSale/FlashSale";
import YouLike from "@/views/home/components/youLike/YourLike";
import MarkPage from "@/views/home/components/markPage/MarkPage";

export default {
  name: "DashBoard",
  components: {
    VanIcon:Icon,
  },
  data() {
    return {
      active: Number(sessionStorage.getItem('tabBarActiveIndex')) || 0,
      home_icon: {
        normal: require('@/images/tabbar/home_default.png'),
        active: require('@/images/tabbar/home_selected.png')
      },
      category_icon: {
        normal: require('@/images/tabbar/category_default.png'),
        active: require('@/images/tabbar/category_selected.png')
      },
      cart_icon: {
        normal: require('@/images/tabbar/shoppingcart_default.png'),
        active: require('@/images/tabbar/shoppingcart_selected.png')
      },
      mine_icon: {
        normal: require('@/images/tabbar/mine_default.png'),
        active: require('@/images/tabbar/mine_selected.png')
      },
    }
  },
  watch: {
    active(value) {
      // console.log(value);
      let tabBarActiveIndex = value > 0 ? value : 0;
      // 缓存到本地
      sessionStorage.setItem('tabBarActiveIndex', value);
    }
  },
  computed: {
    ...mapState(['shopCart', 'userInfo']),
    goodsNum() {
      if (this.shopCart) {
        // 总的购物车商品数量
        let num = 0;
        // console.log(Object.values(this.shopCart));
        Object.values(this.shopCart).forEach((goods, index) => {
          num += goods.num;
        });
        return num;
      } else {
        return 0;
      }
    }
  },
  mounted() {
    // 1. 自动登录
    // this.reqUserInfo();

    // 2. 获取购物车的数据
    // this.initShopCart();
    // this.getUserId();
  },
  methods: {
    // 根据企业微信返回code获取userId
    // async getUserId(){
    //   let result = await getUserInfo(localStorage.getItem('code'));
    //   console.log(111,result)
    //   sessionStorage.setItem('userId', result.userid);
    // },
    ...mapMutations(['INIT_SHOP_CART']),
    ...mapActions(['reqUserInfo']),
    async initShopCart() {
      if (this.userInfo.token) { // 已经登录
        // 1. 获取当前用户购物车中的商品(服务器端)

        let result = await getGoodsCart(this.userInfo.token);
        //  todo result获取不到服务器端的用户商品数据，接口问题
        // 2. 如果获取成功
        if (result.success_code === 200) {
          let cartArr = result.data;
          let shopCart = {};
          // 2.1 遍历
          cartArr.forEach((value) => {
            shopCart[value.goods_id] = {
              "num": value.num,
              "id": value.goods_id,
              "name": value.goods_name,
              "small_image": value.small_image,
              "price": value.goods_price,
              "checked": value.checked
            }
          });
          // 2.2 本地数据同步
          setStore('shopCart', shopCart);
          this.INIT_SHOP_CART()
        }
      }
    }
  }
}
</script>

<style lang="less" scoped>
#dashboard {
  width: 100%;
  height: 100%;
  background-color: #f5f5f5;
  position: relative;
}

.van-tabbar{
  z-index: 99;
  position: fixed;
  padding-bottom: 16px;
}

.tabbar-item-icon{
  font-size: 24px;
  margin-bottom: 4px;
  text-align: center;
}

.van-tabbar-item--active{
  color: #1989fa !important;
}

.tabbar-item-text{
  font-size: 14px;
  text-align: center;
}
</style>
