<template>
  <div id="page-zhcj" class="deck-pages">
    <ul class="menu-left">
      <li v-for="item in menuList" :key="item.id" @click="handleChangePage(item)"
        :class="{ 'highlight': item.id===currentPage }"
      >
        <img :src="item.img" alt=""/>
        <span>{{ item.title }}</span>
      </li>
    </ul>

    <!-- <ZhcjTscy v-if="currentPage===1"/> -->
    <ZhcjZdxm v-if="currentPage===2"/>
  </div>
</template>

<script>
import ZhcjZdxm from './zhcj_sub/ZhcjZdxm.vue'
// import ZhcjTscy from './zhcj_sub/ZhcjTscy.vue'

export default {
  name: 'PageZnfx',
  components: {
    ZhcjZdxm,
    // ZhcjTscy
  },
  data() {
    return {
      currentPage: 1,
      menuList: [
        { id: 1, img: require('../../../assets/imgs/deck/page_zhcj/menu-zhcj-1.png'), title: '特色产业', hasRight: false },
        { id: 2, img: require('../../../assets/imgs/deck/page_zhcj/menu-zhcj-2.png'), title: '重点项目', hasRight: true },
        { id: 3, img: require('../../../assets/imgs/deck/page_zhcj/menu-zhcj-3.png'), title: '龙头企业', hasRight: false },
        { id: 4, img: require('../../../assets/imgs/deck/page_zhcj/menu-zhcj-4.png'), title: '智慧物联', hasRight: false },
        { id: 5, img: require('../../../assets/imgs/deck/page_zhcj/menu-zhcj-5.png'), title: '乡村振兴', hasRight: false },
        { id: 6, img: require('../../../assets/imgs/deck/page_zhcj/menu-zhcj-6.png'), title: '长江禁捕', hasRight: false }
      ],
    }
  },
  methods: {
    handleChangePage(item) {
      this.currentPage = item.id
    },
  },
  watch: {
    currentPage: {
      handler(val) {
        this.menuList.forEach(i => {
          if(i.id===val) {
            this.$store.commit('changeHasRight', i.hasRight)
          }
        })
      },
      immediate: true
    }
  }
}
</script>

<style lang="scss" scoped>
.menu-left {
  position: absolute;
  height: calc(100vh - 215px);
  width: 200px;
  box-sizing: border-box;
  padding: 90px 0;
  top: 185px;
  bottom: 30px;
  left: 30px;
  border: 1px solid #7FFFEA;
  background: rgba(0,58,64,0.8);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  li {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    &.highlight {
      img {
        filter: hue-rotate(260deg);
      }
      span {
        color: #fbdc6a;
      }
    }
    img {
      width: 110px;
      height: 110px;
      margin-bottom: 15px;
    }
    span {
      color: #FFFFFF;
      opacity: 0.91;
      white-space: pre-wrap;
      font-size: 32px;
      line-height: 48px;
      text-align: center;
    }
  }
}
</style>