<template>
  <router-view></router-view>
</template>

<script>
import {mixinTime} from '../../mixins/mixins.js'
import {getBanner, getMenu,getHealth,getTabList} from '../../getData/index'

export default {
  mixins:[mixinTime],
  data(){
    return{
      swiperList:[],
      MenuList:[],
      TabTitle:[],
      tabList:[],
      TabTopActive:0,
      tabListId:1,
      tabListPage:1,
      tabListCount:5,
    }
  },
  methods:{
    changeTab(index,id){
      this.TabTopActive=index
      // console.log(index,id);
      this.tabList=[]
      this.tabListId=id
      this.getTabList()

    },
    tabListImg(data){
      data.forEach(v=>{
        
      })
    },
    async getBannerList(){
      let {data}=await getBanner()
      // console.log(data);
      this.swiperList=data.result
    },
    async getMenuList(){
      let {data}=await getMenu()
      this.MenuList=data.result
    },
    async getTabTitle(){
      let data=await getHealth()
      this.TabTitle=data.data.result
    },
    async getTabList(){
      let {data}=await getTabList({plateId:this.tabListId,page:this.tabListPage,count:this.tabListCount})
      data.result.forEach(v=>{
        let thumbnail=v.thumbnail.split(';')
        // console.log(thumbnail);
        let releaseTime=this.changeTime(v.releaseTime)

        let newV=Object.assign({...v},{thumbnail},{releaseTime})
        
        this.tabList.push(newV)
      })
    }
  },
  mounted(){
    this.getBannerList()  
    this.getMenuList()
    this.getTabTitle()
    this.getTabList()
  }
};
</script>

<style lang="scss" scoped>
.bigBox{
  background: rgb(244,244,244);
}
.one{
  display: flex;
  background: rgb(244,244,244);
  justify-content: space-between;
  div{
    background: #fff;
    width: 184px;
    margin: 2px 0;
    p{
      text-align: left;
      font-size: 15px;
      padding: 10px 5px;
    }
    img{
      width: 165px;
      height: 165px;
    }
  }
  
}
.two{
  background: rgb(244,244,244);
  margin-top: 2px;
  margin-bottom: 2px;
  .menuBox{
    display: flex;
    flex-wrap: wrap;
    // background: #fff;
    div{
      width: 25%;
      padding-top: 2px;
      background: #fff;
      padding-top: 2px;
    img{
      width: 60%;
      height: 60%;
    }
    p{
      font-size: 12px;
      padding-top: 3px;
    }
  }
  }
 
}
.tabTop{
  display: flex;
  font-size: 10px;
  justify-content: space-around;
  background: #fff;
  margin: 2px 0;
  padding: 12px 0;
  .active{
    color: red;
  }
}
.tabList{
  .tabBigLength{
    background: #fff;
    margin: 10px 0;
    text-align: left;
    padding: 7px;
    dd{
      font-weight: bold;
    }
    
    dt{
      display: flex;
      justify-content: space-around;
      margin-top: 9px;
      img{
        width: 30%;
      }
    }
    
  }
  .tabSmallLength{
    background: #fff;
    margin: 10px 0;
    padding: 7px 7px 10px 7px;
    
    dd{
      font-weight: bold;
    }
    
    .top{
      display: flex;
        text-align: left;
        justify-content: space-around;
    }
    img{
      width: 30%;
      margin-right: 10px;
    }
  }
  .tabListBtn{
    display: flex;
    justify-content: space-between;
    // color: #ccc;
    font-size: 13px;
    padding-top: 15px;
  }
}
</style>