<template>
  <div class="products-yemian">
    <div class="container">
      <div class="row">
        <div class="col-md-3 products-leul" @click="showMenu = !showMenu">
          <h4>
            <span class="glyphicon glyphicon-globe" style="margin-right: 3px; vertical-align: middle;"></span>
            产品中心
          </h4>
          <el-collapse-transition>
            <div v-show="showMenu">
              <ul @click.stop="handleProduct">
                <li v-for="item in cniyvTypeList" :key="item.ptsid">
                  <router-link :to="{path: '/products', query: {type_id: item.ptsid}}" :data-type_id="item.ptsid" :class="{ 'active': isActive == item.ptsid }">{{ item.name }}</router-link>
                </li>
              </ul>
            </div>
          </el-collapse-transition>
        </div>
        <div class="col-md-9 col-sm-12">
          <div class="bread-container">
            <b>您当前的位置：</b>
            <el-breadcrumb separator-class="el-icon-arrow-right" @click.native="handleClick">
              <el-breadcrumb-item v-for="item in breadList" :key="item.path">
                <router-link :to="item.path" :data-title="item.meta.title">{{ item.meta.title }}</router-link>
              </el-breadcrumb-item>
              <el-breadcrumb-item v-if="lastChecked && !$route.meta.isDetail">
                <span class="nav-title">{{lastChecked}}</span>
              </el-breadcrumb-item>
            </el-breadcrumb>
          </div>
          <div class="row" v-if="!$route.meta.isDetail" style="margin-top: 10px;">
            <div v-if="cniyvList.total==0"><el-empty :image-size="200"></el-empty></div>
            <div v-else>
              <div class="col-md-4 col-sm-6 col-xs-12" v-for="item in cniyvList.list" :key="item.ptsid" style="margin-bottom: 20px;">
                <el-card :body-style="{ padding: '0px' }" shadow="never">
                  <router-link :to="`/products/detail/${item.ptsid}`" class="products-border">
                    <img :src="item.thumbnail" loading="lazy" :data-src="item.thumbnail" alt="" @click="handleToDetail" :data-type="item.type">
                  </router-link>
                  <div style="padding: 14px;">
                    <strong class="public-title">{{item.title}}</strong>
                    <div class="bottom clearfix">
                      <!-- <p>{{item.desc}} </p> -->
                      <p>
                        <router-link :to="`/products/detail/${item.ptsid}`">
                          <span @click="handleToDetail" :data-type="item.type" class="products-aniu">了解更多 <i class="fa fa-angle-right"></i></span>
                        </router-link>
                      </p>
                    </div>
                  </div>
                </el-card>
              </div>
            </div>
          </div>
          <div class="row" v-else style="margin-top: 10px;">
            <router-view :key="$route.fullPath"></router-view>
          </div>
          <div class="footer-pagination" v-if="!$route.meta.isDetail">
            <el-pagination
              background
              hide-on-single-page
              layout="total, prev, pager, next"
              :page-size="9"
              :current-page="curPage"
              :total="cniyvList.total"
              @current-change="handleChangePage"
            >
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'

export default {
  data() {
    return {
      isActive: '',
      lastChecked: '',
      curPage: 1,
      showMenu: true
    }
  },

  computed: {
    ...mapGetters([
      'cniyvTypeList',
      'cniyvList'
    ]),

    breadList() {
      const matche = this.$route.matched
      matche[0].path = '/'
      const length = matche.length
      if (length > 2) {
        matche[length-1].path = `/products?type_id=${this.isActive}`
        matche[length-1].meta.title = this.lastChecked
      }
      return matche
    }
  },

  created() {
    const activeId = localStorage.getItem('activeId')
    const lastChecked = localStorage.getItem('lastChecked')
    if (activeId) this.isActive = activeId
    if (lastChecked) this.lastChecked = lastChecked
  },

  mounted() {
    this.getCniyvTypeList({
      page: 1,
      limit: 100,
      orderField: 'sort',
    })

    this.getProductList({
      limit: 9,
      page: 1,
      typeid: this.isActive
    })
  },

  methods: {
    ...mapActions({
      getCniyvTypeList: 'cniyv/getCniyvTypeList',
      getCniyvList: 'cniyv/getCniyvLists'
    }),

    handleProduct(e) {
      const productTypeId = e.target.dataset.type_id
      if (this.isActive != productTypeId) this.isActive = productTypeId
      this.lastChecked = this.cniyvTypeList.filter(item => item.ptsid == productTypeId).map(item => item.name)[0]
      localStorage.setItem('activeId', this.isActive)
      localStorage.setItem('lastChecked', this.lastChecked)
      this.curPage = 1
      this.getProductList({
        limit: 9,
        page: this.curPage,
        typeid: this.isActive
      })
    },

    handleClick(e) {
      const title = e.target.dataset.title
      if (title == '产品中心') {
        this.lastChecked = ''
        this.isActive = 0
        localStorage.removeItem('activeId')
        localStorage.removeItem('lastChecked')
        this.getProductList({
          limit: 9,
          page: this.curPage,
        })
      } else {
        this.getProductList({
          limit: 9,
          page: this.curPage,
          typeid: this.isActive
        })
      }
    },

    handleToDetail(e) {
      const type = e.target.dataset.type
      // console.log(type)
      this.lastChecked = type
      this.isActive = this.cniyvTypeList.filter(item => item.name == this.lastChecked).map(item => item.ptsid)[0]
      localStorage.setItem('activeId', this.isActive)
      localStorage.setItem('lastChecked', this.lastChecked)
    },

    getProductList(options) {
      this.getCniyvList(options)
    },

    handleChangePage(curPage) {
      this.curPage = curPage
      this.getProductList({
        limit: 9,
        page: curPage,
        typeid: this.isActive
      })
    }
  },

  beforeDestroy() {
    localStorage.removeItem('lastChecked')
    localStorage.removeItem('activeId')
  },
  beforeRouteUpdate(to, from, next) {
    if (to.meta.isDetail) {
      to.meta.title = this.lastChecked
    }
    next()
  }
}
</script>

<style scoped>
.products-leul {
  cursor: pointer;
  position: sticky;
  top: 0;
  background-color: #fff;
  z-index: 99;
}
.products-yemian .products-leul ul li .active {
    color: #fff;
    background-color: #3884c0;
}

.bread-container {
  display: flex;
  align-items: center;
  line-height: 32px;
  border-bottom: 1px solid #dadada;
}

.bread-container .nav-title {
  font-weight: 600;
  color: #3884c0;
}

.bread-container .nav-title:hover {
  color: #333;
  /* border-bottom: 1px solid #084587; */
}

.el-breadcrumb__item {
  display: flex;
}

.products-border img {
  object-fit: contain;
}

.el-breadcrumb__item:last-child a {
  font-weight: 600;
  color: #3884c0;
}

.bottom a {
  display: inline-block;
}

a {
  outline: none;
}

.footer-pagination {
  text-align: right;
  margin-bottom: 20px;
}

:deep(.el-pagination.is-background .el-pager li:not(.disabled).active) {
  background-color: #3884c0;
}
</style>
