<template>
  <el-row type="flex" class="navs_wraper" justify="start" align="middle">
    <el-col class="nav_item" v-for="(e, i) in visibleNav" :key="i" :class="'nav_item_' + (i + 1)">
      <div class="nav_item_i" @click="toPage(e)">
        <div class="nav_icon"></div>
        <p>{{ e[$langPre.computedProp('title')] }}</p>
      </div>
    </el-col>
  </el-row>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  name: 'MinniHome',
  data () {
    return {
      disabled: false
    }
  },
  computed: {
    ...mapGetters(['userRole']),
    nav () {
      return [
        { title: '操作', zh_title: '操作', en_title: 'Operate', router: '/index/device', isVisible: true },
        { title: '建图', zh_title: '建图', en_title: 'Map - building', router: '/index/building', isVisible: this.userRole === 1 },
        { title: '地图', zh_title: '地图', en_title: 'Map', router: '/index/map', isVisible: true },
        { title: '重定位', zh_title: '重定位', en_title: 'Relocate', router: '/index/relocation', isVisible: true }
      ]
    },
    visibleNav () {
      return this.nav.filter(item => item.isVisible)
    }
  },
  methods: {
    toPage (e) {
      if (e.router === '/index/building') {
        this.$confirm(this.$t('Donewmap'), this.$t('Prompt'), {
          confirmButtonText: this.$t('Confirm'),
          cancelButtonText: this.$t('Cancel'),
          type: 'warning'
        }).then(() => {
          this.$router.push(e.router)
        }).catch(() => {
          this.$message({
            type: 'info',
            message: this.$t('Mapbuildingcancel')
          })
        })
        return
      }
      this.$router.push(e.router)
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '../../style/mixin'
.navs_wraper
  width 100%
  padding 2% 2.5% 0 2.5%
  flex-wrap wrap
  align-content center
.nav_item
  width 32%
  height 47%
  padding 0.9%
  color #fff
  font-size .2rem
  border 1px solid #2f9ae3
  background-image: linear-gradient(to bottom,transparent 11px,rgba(32, 74, 128, 90%) 1px),
                    linear-gradient(to right,transparent 11px,rgba(32, 74, 128, 90%) 1px);
  background-size: 12px 12px;
  background-repeat: repeat;
  cursor pointer
  margin-bottom 2%
  &:nth-child(3n+2)
    margin-left 2%
    margin-right 2%
.nav_item_i
  _fj(center,,column)
  height 100%
  padding .1rem
  background-image linear-gradient(to bottom,rgba(42, 83, 138, 50%), rgba(57, 101, 181, 50%))
  border-top: 3px solid #2fb4f2;
  border-left: 3px solid #40c2f7;
  border-right: 3px solid #5dddf8;
  border-bottom: 3px solid #6abde9;
  box-shadow inset 0 0px 12px 8px rgba(98, 180, 243, 50%)
  p
    font-size .4rem
    line-height 1
    color #F6F9FE
    font-family 'YouSheBiaoTiHei'
    background linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(49,190,255,0.9) 0%, rgba(239,252,254,1) 40%)
    -webkit-background-clip: text
    -webkit-text-fill-color: transparent
.nav_icon
  width 35%
  padding-top 35%
  border-radius 50%
  margin-bottom 3%
.nav_item_1
  .nav_icon
    background #217872 center center / 70% auto url(../../images/new/RF1.png) no-repeat
.nav_item_2
  .nav_icon
    background #80732F center center / 70% auto url(../../images/new/RF2.png) no-repeat
.nav_item_3
  .nav_icon
    background #00a9ff center center / 70% auto url(../../images/new/RF3.png) no-repeat
.nav_item_4
  .nav_icon
    background #80372D center center / 70% auto url(../../images/new/RF4.png) no-repeat
.enClass
  .nav_item_i
    p
      font-size 0.24rem
</style>
