<template>
  <div class="AppHome">
    <component :is="tabList[tabIndex].component"/>
    <div class="tab-list">
      <div class="tab-item" v-for="(item, index) in tabList" :key="index" @click="tabClick(index)">
        <img :src="tabIndex == index ? item.activeImg : item.img " alt="">
        <p :style="tabIndex == index ? 'color: #267EF0;' : ''">{{ item.text }}</p>
      </div>
    </div>
  </div>
</template>

<script>
import Home from './components/Home'
import Grid from './components/Grid'
import App from './components/App'
import My from './components/AppMyGrid'
export default {
  name: "AppHome",
  appName: "首页",
  data() {
    return {
      tabList: [
        {
          text: '首页',
          img: require('./img/tab/home-icon.png'),
          activeImg: require('./img/tab/home-icon-active.png'),
          component: Home
        },
        // {
        //   text: '网格',
        //   img: require('./img/tab/grid-icon.png'),
        //   activeImg: require('./img/tab/grid-icon-active.png'),
        //   component: Grid
        // },
        {
          text: '应用',
          img: require('./img/tab/app-icon.png'),
          activeImg: require('./img/tab/app-icon-active.png'),
          component: App
        },
        {
          text: '我的',
          img: require('./img/tab/my-icon.png'),
          activeImg: require('./img/tab/my-icon-active.png'),
          component: My
        }
      ],
      tabIndex: 0,
    }
  },
  components: {Home, Grid, App, My},
  methods: {
    tabClick(index) {
      this.tabIndex = index
    },
  },
  onShow() {
    document.title = "慧治理"
  },
}
</script>

<style lang="scss" scoped>
.AppHome {
  width: 100%;
  height: 100%;
  background-color: #F5F6F7;
  padding-bottom: 112px;
  .tab-list {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    padding: 16px 36px 8px;
    box-sizing: border-box;
    background-color: #fff;
    z-index: 9999999;
    .tab-item {
      flex: 1;
      text-align: center;
      img {
        width: 56px;
        height: 56px;
      }
      p {
        font-size: 20px;
        font-family: PingFangSC-Regular, PingFang SC;
        color: #000;
        line-height: 28px;
      }
    } 
  }
}
</style>
