<template>
  <div id="page-znfx" 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>
    <ZnfxNyd v-if="currentPage===1"/>
    <ZnfxNzjy v-if="currentPage===2"/>
    <ZnfxNcpzl v-if="currentPage===3"/>
    <ZnfxNcpcl v-if="currentPage===4"/>
    <ZnfxSnbt v-if="currentPage===5"/>
    <ZnfxDwfy v-if="currentPage===6"/>
    <!-- <ZnfxSzjg v-if="currentPage===7"/> -->
  </div>
</template>

<script>
import ZnfxNyd from './znfx_sub/ZnfxNyd.vue'
import ZnfxNzjy from './znfx_sub/ZnfxNzjy.vue'
import ZnfxNcpzl from './znfx_sub/ZnfxNcpzl.vue'
import ZnfxSnbt from './znfx_sub/ZnfxSnbt.vue'
import ZnfxNcpcl from './znfx_sub/ZnfxNcpcl.vue'
import ZnfxDwfy from './znfx_sub/ZnfxDwfy.vue'
// import ZnfxSzjg from './znfx_sub/ZnfxSzjg.vue'

export default {
  name: 'PageZnfx',
  components: {
    ZnfxNyd,
    ZnfxNzjy,
    ZnfxNcpzl,
    ZnfxSnbt,
    ZnfxNcpcl,
    ZnfxDwfy,
    // ZnfxSzjg
  },
  data() {
    return {
      currentPage: 1,
      menuList: [
        { id: 1, img: require('../../../assets/imgs/deck/page_znfx/menu-znfx-1.png'), title: '农用地与经\n营主体分析', hasRight: true },
        { id: 7, img: require('../../../assets/imgs/deck/page_znfx/menu-znfx-7.png'), title: '三资监管\n分析', hasRight: false },
        { id: 2, img: require('../../../assets/imgs/deck/page_znfx/menu-znfx-2.png'), title: '农资经营\n管控分析', hasRight: true },
        { id: 3, img: require('../../../assets/imgs/deck/page_znfx/menu-znfx-3.png'), title: '农产品质量\n监管分析', hasRight: true },
        { id: 4, img: require('../../../assets/imgs/deck/page_znfx/menu-znfx-4.png'), title: '农产品\n产量分析', hasRight: true },
        { id: 5, img: require('../../../assets/imgs/deck/page_znfx/menu-znfx-5.png'), title: '涉农补贴\n资金分析', hasRight: true },
        { id: 6, img: require('../../../assets/imgs/deck/page_znfx/menu-znfx-6.png'), title: '动物防疫监\n测预警分析', hasRight: true },
      ]
    }
  },
  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>