<template>
  <div class="index-container" :class="{'enClass': selectType === 'en-us'}">
    <div class="header-container">
      <div class="horizontal-menu-container">
        <el-menu :default-active="$route.meta.jumpPath" mode="horizontal" @select="handleSelect">
          <el-menu-item :index="menu.index" v-for="menu in menus" :key="menu.index">{{selectType === 'en-us' ? menu.en_title : menu.zh_title}}</el-menu-item>
        </el-menu>
      </div>
      <div class="lang_change_wraper">
        <el-select v-model="selectType" placeholder="请选择" popper-class="lang_dropdown" @change="selectChanged">
          <el-option
            v-for="(item, index) in selectTypeList"
            :key="index"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </div>
      <div class="header_state_wraper">
        <div class="state-line"></div>
        <div class="state-item">{{ selectType === 'en-us' ? topInfo.en_agvrun_status_name : topInfo.zh_agvrun_status_name }}</div>
        <div class="state-item">{{ selectType === 'en-us' ? topInfo.en_automatic_status_name :  topInfo.zh_automatic_status_name }}</div>
        <div class="elec-qty-wrap">
          <div class="elec-qty" :style="{width: Number(topInfo.electric) + '%'}" :class="{'elec-qty_s': Number(topInfo.electric) <= 40}"></div>
          <div class="elec-qty_border"></div>
          <div class="elec-txt">{{ topInfo.electric }}%</div>
        </div>
        <div class="state-line"></div>
      </div>
      <div class="header_user_wraper">
        <div class="header_user_wraper_i" @click="showDropdown">
          <div class="user_name">{{ username }}</div>
        </div>
        <div v-show="dropdown" class="header_dropdown_wraper">
          <ul>
            <li @click="showDialog">{{ $t('common.changepassword') }}</li>
            <li @click="toEixt">{{ $t('common.exit') }}</li>
          </ul>
          <div class="popper__arrow"></div>
        </div>
        <div class="state-line"></div>
      </div>
      <div class="time-container">
        <jxTime></jxTime>
      </div>
    </div>
    <div class="body-conatiner" :class="{'body-conatiner_1': $route.path !== '/index/home'}">
      <div class="hud_left"></div>
      <div class="hud_right"></div>
      <div class="bottom_bg"></div>
      <div v-show="$route.path !== '/index/teach' && $route.path !== '/index/home' && $route.path !== '/index/errorinfo'" class="side-bar-container">
        <el-menu :default-active="$route.meta.guidePath" @select="handleSelectChild">
          <el-menu-item :index="menu.index" v-for="menu in childmenus" :key="menu.index" :class="{'el-menu-item-long': menu.title.length === 5 }">{{selectType === 'en-us' ? menu.en_title : menu.zh_title}}</el-menu-item>
        </el-menu>
      </div>
      <router-view></router-view>
    </div>
    <jxDialog
    ref="child"
    title="修改密码"
    :unclick="unclick"
    @toSure="toSureDialog"
    @toCancle="toCancle"
    >
      <div class="form_wraper">
        <div class="form">
          <div class="form_item">
            <div class="form_item__label form_item__label_pass"><i>*</i>{{ $t('common.oldpassword') }}</div>
            <div class="form_item__content form_item__content_pass">
              <input type="password" class="form_item__input" v-model="oldpassword" @focus="show" data-layout="normal">
            </div>
          </div>
        </div>
        <div class="form">
          <div class="form_item">
            <div class="form_item__label form_item__label_pass"><i>*</i>{{ $t('common.newpassword') }}</div>
            <div class="form_item__content form_item__content_pass">
              <input type="password" class="form_item__input" v-model="newpassword1" @focus="show" data-layout="normal">
            </div>
          </div>
        </div>
        <div class="form">
          <div class="form_item">
            <div class="form_item__label form_item__label_pass"><i>*</i>{{ $t('common.newpassword') }}</div>
            <div class="form_item__content form_item__content_pass">
              <input type="password" class="form_item__input" v-model="newpassword2" @focus="show" data-layout="normal">
            </div>
          </div>
        </div>
      </div>
    </jxDialog>
    <vue-touch-keyboard id="keyboard" :options="options" v-if="visible" :layout="layout" :cancel="hide" :accept="accept" :input="input" :next="next" />
  </div>
</template>

<script>
import jxTime from '@components/time.vue'
import jxDialog from '@components/dialog.vue'
import { queryHomePage } from '@/config/getData.js'
import { updatePass, sysMenuBuild, authLogout } from '@config/getData2.js'
import {encrypt} from '../../../main.js'
export default {
  components: {
    jxTime,
    jxDialog
  },
  data () {
    return {
      itime: this.$store.getters.setTime,
      timer: null,
      username: this.$store.getters.userInfo !== '' ? JSON.parse(this.$store.getters.userInfo).user.username : '',
      menus: [] || JSON.parse(this.$store.getters.menus),
      // menus: [{
      //   label: '首页',
      //   index: '1',
      //   router: '',
      //   children: [{
      //     label: '首页',
      //     index: '1',
      //     router: '/index/home'
      //   }]
      // }, {
      //   label: '任务',
      //   index: '2',
      //   router: '',
      //   children: [{
      //     label: '搬运站点',
      //     index: '1',
      //     router: '/index/carrypoint'
      //   }, {
      //     label: '任务列表',
      //     index: '2',
      //     router: '/index/tasklists'
      //   }, {
      //     label: '任务操作',
      //     index: '3',
      //     router: '/index/taskoperates'
      //   }]
      // }, {
      //   label: '故障',
      //   index: '3',
      //   router: '',
      //   children: [{
      //     label: '故障信息',
      //     index: '1',
      //     router: '/index/errorinfo'
      //   }, {
      //     label: '故障处理',
      //     index: '2',
      //     router: '/index/errordeal'
      //   }]
      // }, {
      //   label: '车辆',
      //   index: '4',
      //   router: '',
      //   children: [{
      //     label: '车辆状态',
      //     index: '1',
      //     router: '/index/vehiclestatus'
      //   }, {
      //     label: '车辆控制',
      //     index: '2',
      //     router: '/index/vehiclecontrol'
      //   }]
      // }, {
      //   label: '示教',
      //   index: '5',
      //   router: '/index/teach'
      // }, {
      //   label: '系统',
      //   index: '6',
      //   router: '',
      //   children: [{
      //     label: '用户管理',
      //     index: '1',
      //     router: '/index/user'
      //   }, {
      //     label: '角色管理',
      //     index: '2',
      //     router: '/index/role'
      //   }, {
      //     label: '系统参数',
      //     index: '3',
      //     router: '/index/system'
      //   }, {
      //     label: '开发者选项',
      //     index: '4',
      //     router: '/index/developer'
      //   }]
      // }],
      dropdown: false,
      oldpassword: '',
      newpassword1: '',
      newpassword2: '',
      unclick: false,
      visible: false,
      layout: 'normal',
      input: null,
      options: {
        useKbEvents: false,
        preventClickEvent: false
      },
      topInfo: {},
      selectTypeList: [{value: 'zh-cn', label: '中文'}, {value: 'en-us', label: 'English'}],
      selectType: ''
    }
  },
  computed: {
    routerPath () {
      return this.$route.meta.jumpPath
    },
    childmenus () {
      let res = []
      this.menus.map(el => {
        if (el.index === this.$route.meta.jumpPath) {
          res = el.children
        }
      })
      return res
    }
  },
  watch: {
    oldpassword (val) {
      if (val === '' || this.newpassword1 === '' || this.newpassword2 === '') {
        this.unclick = true
      } else {
        this.unclick = false
      }
    },
    newpassword1 (val) {
      if (val === '' || this.oldpassword === '' || this.newpassword2 === '') {
        this.unclick = true
      } else {
        this.unclick = false
      }
    },
    newpassword2 (val) {
      if (val === '' || this.oldpassword === '' || this.newpassword1 === '') {
        this.unclick = true
      } else {
        this.unclick = false
      }
    }
  },
  created () {
    this._sysMenuBuild()
    this._queryHomePage()
    this.timer = setInterval(() => {
      this._queryHomePage()
    }, this.itime)
    if (this.menus.length) {
      this.menus.map(el => {
        if (el.router === this.$route.path) {
          this.childmenus = el.children
        }
      })
    }
    if (this.$i18n.locale === 'zh-cn') {
      this.selectType = 'zh-cn'
    } else if (this.$i18n.locale === 'en-us') {
      this.selectType = 'en-us'
    }
  },
  beforeDestroy () {
    clearInterval(this.timer)
  },
  destroyed () {
    clearInterval(this.timer)
  },
  methods: {
    handleSelect (key) {
      this.dropdown = false
      this.menus.map(el => {
        if (el.router === '' && el.index === key) {
          this.$router.push({ path: el.children[0].router })
        }
        if (key === '5') {
          this.$router.push({ path: el.router })
        }
      })
    },
    handleSelectChild (key) {
      this.dropdown = false
      this.childmenus.map(el => {
        if (el.index === key) {
          this.$router.push({ path: el.router })
        }
      })
    },
    showDropdown () {
      this.dropdown = !this.dropdown
    },
    showDialog () {
      this.dropdown = false
      this.$refs.child.active = true
      this.oldpassword = ''
      this.newpassword1 = ''
      this.newpassword2 = ''
      this.unclick = true
    },
    toSureDialog () {
      this._updatePass()
      this.hide()
    },
    toCancle () {
      this.hide()
    },
    async _updatePass () {
      this.$refs.child.disabled = true
      if (!this.oldpassword) {
        // this.toast('旧密码不能为空')
        this.toast(this.$t('common.toast1'))
        this.$refs.child.disabled = false
        return
      }
      if (!this.newpassword1) {
        // this.toast('新密码不能为空')
        this.toast(this.$t('common.toast2'))
        this.$refs.child.disabled = false
        return
      }
      if (!this.newpassword2) {
        // this.toast('输入新密码')
        this.toast(this.$t('common.toast3'))
        this.$refs.child.disabled = false
        return
      }
      if (this.newpassword1 !== this.newpassword2) {
        // this.toast('新密码输入不一致，请重新输入')
        this.toast(this.$t('common.toast4'))
        this.$refs.child.disabled = false
        return
      }
      try {
        let res = await updatePass(encrypt(this.newpassword1), encrypt(this.oldpassword))
        this.toast(res.desc)
        this.$refs.child.active = false
        this.$refs.child.disabled = false
      } catch (e) {
        this.$refs.child.active = false
        this.$refs.child.disabled = false
      }
    },
    async _sysMenuBuild () {
      let res = await sysMenuBuild()
      this.menus = [...res]
      res.map(el => {
        if (el.router === this.$route.path) {
          this.childmenus = el.children
        }
      })
      this.$store.dispatch('getMenus', [...res])
    },
    async _authLogout () {
      await authLogout()
    },
    async _queryHomePage () {
      let res = await queryHomePage()
      if (res.code === '1') {
        this.topInfo = res.result
      } else {
        this.toast(res.desc)
      }
    },
    toEixt () {
      this.$store.dispatch('setSignOut')
      this._authLogout()
      this.$router.push('/login')
    },
    show (e) {
      this.input = e.target
      this.layout = e.target.dataset.layout
      if (!this.visible) {
        this.visible = true
      }
    },
    hide () {
      this.visible = false
    },
    accept () {
      this.hide()
    },
    next () {
      let inputs = document.querySelectorAll('input')
      let found = false;
      [].forEach.call(inputs, (item, i) => {
        if (!found && item === this.input && i < inputs.length - 1) {
          found = true
          this.$nextTick(() => {
            inputs[i + 1].focus()
          })
        }
      })
      if (!found) {
        this.input.blur()
        this.hide()
      }
    },
    selectChanged (e) {
      this.$i18n.locale = e
      window.localStorage.setItem('locale', e)
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@style/mixin'
.index-container
  position relative
  _wh(100%, 100%)
.header-container
  position absolute
  left 0
  top 0
  z-index 150
  _fj(flex-end,  flex-start)
  _wh(100%, 124px)
  background center / 100% 100% url(../../../images/new/header_bg.png) no-repeat
.horizontal-menu-container
  height 77px
  .el-menu
    border none
    background-color transparent
  .el-menu-item
    // _wh(105px, 77px)
    _wh(95px, 77px)
    _font(30px, 77px, #8DBFEE, bold, center)
    font-family SourceHanSansCN-Bold
    font-style italic
    background linear-gradient(0deg, #A2C3E3 0%, #5E9ED9 11.9140625%, #A2C3E3 100%)
    -webkit-background-clip text
    -webkit-text-fill-color transparent
    border-bottom 0
    padding 0
  .el-menu-item.is-active
    color #fff
  .el-menu--horizontal>.el-menu-item.is-active
    border-bottom 0
    width 128px
    color #fff
    -webkit-text-fill-color #fff
    background center / 100% 100% url(../../../images/new/nav_bg.png) no-repeat
.time-container
  height 77px
  margin 0 10px
.state-item
  _wh(67px, 43px)
  _font(20px,43px,#fff,,center)
  font-family Adobe Heiti Std
  margin-right 3px
  background center / 100% 100% url(../../../images/new/state-item_bg.png) no-repeat
.state-line
  _wh(1px,42px)
  opacity 0.3
  background #AECAF5
  margin 0 5px
.elec-qty-wrap
  position relative
  _wh(67px, 43px)
  z-index 151
.elec-qty
  position absolute
  z-index 152
  _wh(0, 100%)
  background-color green
  background left top url(../../../images/new/elec.png) no-repeat
  background-size cover
.elec-qty_s
  background-image url(../../../images/new/elec.png)
.elec-qty_border
  position absolute
  z-index 152
  _wh(100%, 100%)
  background center / 100% 100% url(../../../images/new/elec_bg.png) no-repeat
.elec-txt
  position relative
  z-index 153
  _font(20px, 43px, #fff,,center)
  font-family Adobe Heiti Std
.header_user_wraper
  position relative
  _fj(flex-start)
  height 77px
.header_user_wraper_i
  _fj(flex-start)
  height 77px
.user_name
  _font(22px, 77px, #fff,,left)
  font-family: SourceHanSansCN-Regular
  padding-left 50px
  margin-right 4px
  background left center / 50px 52px url(../../../images/new/user_icon.png) no-repeat
.icon_admin
  _font(32px, 60px, #54C0B3,,left)
  margin-right 2px
.header_state_wraper
  _fj(flex-start)
  height 77px
  margin-left 5px
.header_dropdown_wraper
  position absolute
  top 90%
  left 50%
  transform translateX(-50%)
  z-index 1000
  width 180px
  background: rgba(7,31,62,0.95);
  border: 1px solid #4980BD;
  ul
    width 100%
    li
      width 100%
      _font(30px, 80px, #fff,,)
      padding 0 20px
      &:first-child
        color #3CC1FF
.popper__arrow
  position absolute
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
  border-width: 6px;
  filter: drop-shadow(0 2px 12px rgba(0,0,0,.03))
  top: -6px;
  left: 50%;
  transform: translateX(-6px)
  margin-right: 3px;
  border-top-width: 0;
  border-bottom-color: #4980BD;
  &:after
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    content: " ";
    border-width: 6px;
    top: 1px;
    margin-left: -6px;
    border-top-width: 0;
    border-bottom-color: rgba(7,31,62,0.95);
.side-bar-container
  .el-menu
    border-right 0
    background-color transparent
  .el-menu-item
    height 120px
    _font(36px, 40px, #fff,,)
    font-family: YouSheBiaoTiHei
    white-space wrap
    background center / 100% 100% url(../../../images/new/sidebar_bg.png) no-repeat
    _fj(center)
    padding 0 43px 10px 87px !important
  .el-menu-item.is-active
    background center / 100% 100% url(../../../images/new/sidebar_active_bg.png) no-repeat
.hud_left
  position absolute
  left 0
  _wh(53px, 735px)
  background center / 100% 100% url(../../../images/new/hud_left.png) no-repeat
.hud_right
  position absolute
  right 0
  _wh(53px, 735px)
  background center / 100% 100% url(../../../images/new/hud_right.png) no-repeat
.bottom_bg
  position absolute
  bottom 0
  _wh(100%, 92px)
  background center bottom / 100% 100% url(../../../images/new/bottom_bg.png) no-repeat
.side-bar-container
  .el-menu-item-long
    padding 0 30px 10px 87px !important
.lang_change_wraper
  _wh(90px, 77px)
  padding-top 20.5px
  margin-left 45px
  /deep/ .el-input, /deep/ .el-select .el-input .el-select__caret
    font-size: 20px;
    height 36px
    line-height 36px
  /deep/ .el-input__inner
    font-size: 20px;
    line-height: 36px;
    height: 36px;
    border: 1px solid #4980bd;
    border-radius 0
    padding-left 5px
    padding-right 15px
  /deep/ .el-input__suffix
    right 5px
  /deep/ .el-icon-arrow-up
    width 10px
.enClass
  .horizontal-menu-container .el-menu-item
    font-size 24px
  .side-bar-container .el-menu-item
    font-size 20px
    line-height 22px
    padding 0 14px 10px 20px !important
    white-space pre-line
  .state-item
    font-size 12px
  .header_dropdown_wraper
    width 300px
  .form_item__label_pass
    width 205px
  .form_item__content_pass
    width calc(100% - 205px)
</style>
