<!--
  @description: 首页
  @Modifier：杨胜国
  @routerPath:shopHome
  @date：  2021/05/17-18:00
-->
<template>
  <div class="shopHome">
    <!--搜索组件-->
    <search :is-dorpdown="false" :search-children-data="seenData" :goods-list-data="goodsList" @goodsCategory="goodsCategory" />
    <!-- 轮播图 -->
    <shopHomeBanner :banner-list="bannerListData" />
    <!-- 小标题 -->
    <div class="middle_width1190">
      <div class="floorhd">
        <div class="grid_c1 floorhd_inner">
          <h3 class="floorhd_tit">
            为你推荐
          </h3>
        </div>
      </div>
    </div>
    <!-- tab切换 -->
    <div class="middle_width1190 feed-tab-wrapper">
      <ul class="feed-tab clearfix">
        <li
          v-for="(item, index) in tabList"
          :key="index"
          class="feed-tab__item fl"
          @click="tabClick(index)"
        >
          <div class="feed-tab__item-title">
            <span class="feed-tab__item-title-text" :class="{'feed-tab__item--active':tabActive.code===item.code}">{{ item.name }}</span>
          </div>
          <div class="feed-tab__item-desc" :class="{'feed-tab__item--active':tabActive.code===item.code}">
            {{ item.describe }}
          </div>
        </li>
      </ul>
    </div>
    <!-- 商品列表 -->
    <shopHomePageProductComp :product-list="productList" />
  </div>
</template>

<script>
/* 公共方法 */
import { getToken } from '@/assets/js/utils/auth'
import { addUserMarkToRedis } from '@/api/shoppingmall/tabcenter'
import { homePageProductList, getShptAdvertisementPictureList } from '@/api/shoppingmall/products'
import { getLoginRegistImage } from '@/api/common/tools.js'// 地址加密获取图片
/* 组件 */
import shopHomePageProductComp from './shopHomePageProductComp'
import shopHomeBanner from './shopHomeBanner'
// import search from '../components/shopComponents/search/search'
import search from '../shopGoodsClass/search'
import { getgoodsclassTree } from '@/api/shoppingmall/products'
export default {
  name: 'ShopHome',
  components: {
    search, // 搜索
    shopHomeBanner, // 轮播图
    shopHomePageProductComp // tab切换
  },
  // inject: ['reload'],
  data() {
    return {
      // 动态添加class 是否显示一级全部分类列表
      seenData: {
        seen: true,
        current: 1
      },
      isLogin: false, // 是否登录
      // 轮播图列表
      bannerListData: [],
      goodsList: [], // 商品分类列表
      goodsTwoLevelList: [], // 分类对应二级列表
      productList: [],
      tabList: [
        {
          name: '办公用品',
          describe: '办公设备',
          code: 'J010200'
        },
        {
          name: '电脑设备',
          describe: '笔记本计算机',
          code: 'J030300'
        },
        {
          name: '劳动保护',
          describe: '洗涤用品',
          code: 'J020200'
        }
      ],
      tabActive: [
        {
          name: '办公用品',
          describe: '办公设备',
          code: 'J010200'
        }
      ],
      // 图片列表请求对象
      listData: {
        'pageNo': 0,
        'pageSize': 10,
        'useStatus': '01'
      }
    }
  },
  created() {
    this.init()
  },
  methods: {
    // 初始化数据
    init() {
      const token = this.$route.query.token ? this.$route.query.token : ''
      if (token) {
        this.isLogin = !!getToken()
        addUserMarkToRedis().then(res => {

        })
      } else {
      // 校验是否登录
        if (getToken()) {
          this.isLogin = true
        } else {
          this.isLogin = false
        }
      }
      // 默认进来展示第一个
      this.homePageProduct(0)
      this.tabActive = this.tabList[0]
      // 查询分类json树
      const pid = ''
      getgoodsclassTree(pid).then(response => {
        this.goodsList = response.data
      }).catch(() => {
      })
      // 获取轮播图
      this.getPictureList()
    },
    // tab切换
    tabClick(index) {
      this.tabActive = this.tabList[index]
      this.homePageProduct(index)// 初始化数据
    },
    // 返回顶部
    goToTop() {
      const layout = document.getElementById('layout')
      layout.animate({
        scrollTop: 0
      })
    },
    goodsCategory(data) {
      // data.map((item, index) => {
      //   if (item.name === '办公设备及电脑') {
      //     this.homePageProduct(item.classifyNo, 1)
      //   }
      //   if (item.name === '办公用品') {
      //     this.homePageProduct(item.classifyNo, 2)
      //   }
      //   if (item.name === '数码摄影') {
      //     this.homePageProduct(item.classifyNo, 3)
      //   }
      //   return
      // })
    },
    // 首页按类别展示
    homePageProduct(index) {
      // 按商品类别展示列表
      const data = {
        goodsClassId: this.tabList[index].code,
        pageNo: 0,
        pageSize: 20
      }
      homePageProductList(data).then(response => {
        this.productList = response.data.content
      }).catch(res => {})
    },
    // 点击列表展示商品列表去商品详情
    goToGoodsDetail(item) {
      this.$router.push({ path: '/shop/goodsClassDetail', query: { id: item.id }})
      // window.open(routes.href, '_blank')
    },
    // 活动页跳转详情
    toDetail(row) {
      if (row.path) {
        this.$router.push({ path: row.path, query: row.query })
      }
    },
    // 轮播图图片列表
    getPictureList() {
      getShptAdvertisementPictureList(this.listData).then(res => {
        this.bannerListData = res.data.records
        this.bannerListData.forEach(item => {
          item.picture = getLoginRegistImage(item.picture)
        })
      })
    }
  }
}
</script>

<style scoped lang="less">
.shopHome{
   background-color: #f2f2f2;
  .floorhd_tit{
    position: relative;
    font: 12px/1.5 Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans GB,"\5B8B\4F53",sans-serif;
    width: 180px;
    height: 45px;
    font-size: 26px;
    font-weight: 700;
    text-align: center;
    line-height: 45px;
    padding: 0 30px;
    margin: 20px auto 20px;
    color: #333;
  }
    .floorhd_tit::after{
      background-image: url(https://misc.360buyimg.com/mtd/pc/index_2019/1.0.0/assets/sprite/floor_hd/sprite@2x.png);
      background-size: 50px 20px;
      width: 25px;
      height: 20px;
      background-position: -25px 0;
      right: 0;
    }
    .floorhd_tit::before{
      background-position: 0 0;
      left: 0;
      background-image: url(//misc.360buyimg.com/mtd/pc/index_2019/1.0.0/assets/sprite/floor_hd/sprite@2x.png);
      background-size: 50px 20px;
      width: 25px;
      height: 20px;
      display: block;
    }
    .floorhd_tit::after,.floorhd_tit::before{
      content: "";
      position: absolute;
      top: 50%;
      margin-top: -10px;
    }
}
// 商品类别模块
.index_goods {
  width: 100%;
  .title_box {
    margin: 10px 0;
    padding-left: 12px;
    .title {
      display: inline-block;
      text-align: center;
      font-size: 24px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: rgba(102, 102, 102, 1);
      margin-left: 20px;
    }
    img {
      margin-bottom: 8px;
    }
  }
}
// 侧边导航
.nav_fixed {
  position: fixed;
  top: 50%;
  right: 20px;
  z-index: 100000;
  li {
    width: 55px;
    height: 63px;
    padding: 10px;
    color: #ff6600;
    text-align: center;
    background: rgba(241, 241, 241, 1);
    &:hover {
      background: #ff6600;
      color: #ffffff;
      cursor: pointer;
    }
    &.active {
      background: #ff6600;
      color: #ffffff;
    }
  }
  .last {
    border: none;
    line-height: 28px;
    i {
      display: block;
    }
  }
}
// 为你推荐
.feed-tab-wrapper{
  background: #FFFFFF;
  margin-bottom: 12px;
  .feed-tab{
    margin: 0 auto;
    height: 60px;
    width: 1080px;
    display:flex;
    .feed-tab__item {
      flex:1;
      width: 180px;
      height: 60px;
      text-align: center;
      cursor: pointer;
      .feed-tab__item-desc{
        color: #999;
        font-size: 14px;
      }
      .feed-tab__item-title{
        color: #333;
        margin-top: 7px;
        font-size: 16px;
        font-weight: 700;
        line-height: 27px;
        height: 27px;
      }
      .feed-tab__item--active{
        &.feed-tab__item-title-text {
          background: @orange;
          color: #fff;
          height: 27px;
          display: inline-block;
          border-radius: 50px;
          padding: 0 5px;
        }
        &.feed-tab__item-desc {
          color: @orange;
        }
      }
    }
  }
}
</style>
