<template>
  <div class="relative main-container">
    <div class="navs_wraper">
      <div class="nav_item" v-for="(e, i) in nav" :key="i" :class="'nav_item_' + (i + 1)" @click="toPage(e)">
        <div class="relative nav_item_i">
          <div class="nav_icon"></div>
          <p>{{ e[$langPre.computedProp('title')] }}</p>
        </div>
      </div>
    </div>
    <!-- <button class="absolute onoff_wraper" @click="switchDown('1', '0')" :disabled="disabled">
      <div class="onoff_power"><img src="../../../images/new/switch_10.png" alt=""></div>
      <div class="onoff_power_txt">{{ $t('vehiclecontrol.poweroff') }}</div>
    </button> -->
  </div>
</template>

<script>
import {ShutDown} from '@config/getData2.js'
export default {
  name: 'MinniHome',
  data () {
    return {
      nav: [
        {title: '任务', zh_title: '任务', en_title: 'Task', router: '/mini/carrypoint'},
        {title: '故障', zh_title: '故障', en_title: 'Fault', router: '/mini/errorinfo'},
        {title: '示教', zh_title: '示教', en_title: 'Teach', router: '/mini/teach'}
      ],
      disabled: false
    }
  },
  methods: {
    toPage (e) {
      this.$router.push(e.router)
    },
    switchDown (type, bool) {
      this.disabled = true
      bool = bool === '0' ? '1' : '0'
      this._ShutDown(type, bool)
    },
    async _ShutDown (type, bool) {
      try {
        let res = await ShutDown(type, bool) // type:1-关机、2-显示屏控制、3-TCS控制、4-SCHE控制、5-RC控制、6-Joy控制，7-退出，8-软启动，9-跳过起点，10-重启，11-全屏，12-跳过检测 ; bool:开关或按钮的值，开关开启传1，关闭传0，按钮点击直接传1
        if (res.code === '1') {
          this.toast(res.desc)
        } else {
          this.toast(res.desc)
        }
        this.disabled = false
      } catch (e) {
        this.disabled = false
        this.toast(this.$t('common.operationfailed'))
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@style/mixin'
.main-container
  display flex
.navs_wraper
  _fj()
  width 100%
  padding 0 12%
.nav_item
  width 29%
  padding 12px
  color #fff
  font-size 40px
  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
.nav_item_i
  _fj()
  padding 20px 40px 20px 35px
  background-image linear-gradient(to bottom,rgba(42, 83, 138, 50%), rgba(57, 101, 181, 50%))
  border-top 2px solid #62b2f0
  border-left 2px solid #62b2f0
  box-shadow inset 0 0px 12px 8px rgba(98, 180, 243, 50%)
  p
    font-size 56px
    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;
  &::before
    content ''
    position absolute
    bottom 0
    left 0
    width 100%
    height 2px
    background-image linear-gradient(to right,#62b2f0,#b1ebf8)
  &::after
    content ''
    position absolute
    top 0
    right 0
    height 100%
    width 2px
    background-image linear-gradient(to bottom,#62b2f0,#b1ebf8)
.nav_icon
  width 25%
  padding-top 25%
  border-radius 50%
.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 #80372D center center / 70% auto url(../../../images/new/RF3.png) no-repeat
.onoff_wraper
  display: flex;
  flex-direction: column;
  align-items: center;
  bottom 0
  left 50%
  transform translateX(-50%)
  background-color transparent
.onoff_power
  display: flex;
  justify-content: center;
  align-items: center;
  width: 90px;
  height: 90px;
  border: 1px solid #1a48f7;
  border-radius: 50%;
  box-shadow: inset 14px 0px 7px 0px rgba(26, 138, 247, 80%), inset -14px 0px 7px 0px rgba(26, 138, 247, 80%);
  img
    width 50%
    height auto
.onoff_power_txt
  font-size 30px
  color #fff
  line-height 60px
  font-family 'Source Han Sans CN'
  text-align center
</style>
