<template>
  <div
    style="width: 800px;height: 505px;position: absolute;left:50%;top: 50%;margin-left: -400px;margin-top: -300px;border:1px solid red;border: 1px solid #dbdbdb;box-shadow: 0 0 3px #3b3b3b75;"
  >
    <el-row gutter="0">
      <el-row gutter="0" style="margin: 0;padding: 0;">
      </el-row>
      <el-row gutter="0" class="menu_title">计算机辅助管理系统</el-row>

      <el-row v-for="(list1) in menuList" :key="list1" gutter="20" style="padding: 10px;">
        <el-col v-for="(list) in list1" :key="list.zxtbm" span="6">
          <div class="menu_item" @click="handleLink(list.zxtbm,list.title)">
            <el-image class="img" :src="list.icon" />
            <el-row class="desc">
              <el-row style="font-size: 18px">{{ list.title }}</el-row>
              <el-row style="font-size: 10px">{{ list.title2 }}</el-row>
              <el-row style="font-size: 10px">{{ list.title3 }}</el-row>
            </el-row>
            <el-row />
          </div>
        </el-col>
      </el-row>

    </el-row>
  </div>
</template>

<script>

import { mapGetters } from 'vuex'
export default {
  name: 'Menu',
  data() {
    return {
      menuList: [[
        { icon: require('@/assets/icon/btn_gj.jpg'), title: '管系制造', title2: '管系制造部', title3: '业务管理系统', zxtbm: 'GJ' },
        { icon: require('@/assets/icon/btn_mp.jpg'), title: '生产管理', title2: '生产管理部', title3: '业务管理系统', zxtbm: 'MP' },
        { icon: require('@/assets/icon/btn_jy.jpg'), title: '经营结算', title2: '经营结算', title3: '业务管理系统', zxtbm: '' },
        { icon: require('@/assets/icon/btn_jj.jpg'), title: '技术管理', title2: '技术部', title3: '业务管理系统', zxtbm: 'JJ' }
      ], [
        { icon: require('@/assets/icon/btn_tx.jpg'), title: '铁舾制造', title2: '铁舾制造部', title3: '业务管理系统', zxtbm: '' },
        { icon: require('@/assets/icon/btn_qc.jpg'), title: '质量管理', title2: '质量管理部', title3: '业务管理系统', zxtbm: 'QC' },
        { icon: require('@/assets/icon/btn_ms.jpg'), title: '采购管理', title2: '营销部附件采购', title3: '业务管理系统', zxtbm: 'MS' },
        { icon: require('@/assets/icon/btn_sp.jpg'), title: '信息管理', title2: '信息沟通/审批', title3: '管理系统', zxtbm: '' }
      ], [
        { icon: require('@/assets/icon/btn_dy.jpg'), title: '单元制造', title2: '单元制造部', title3: '业务管理系统', zxtbm: '' },
        { icon: require('@/assets/icon/btn_hse.jpg'), title: 'HSE管理', title2: '安技环保部', title3: '业务管理系统', zxtbm: '' },
        { icon: require('@/assets/icon/btn_im.jpg'), title: '仓库管理', title2: '营销部仓库', title3: '业务管理系统', zxtbm: '' },
        { icon: require('@/assets/icon/btn_da.jpg'), title: '档案管理', title2: '档案资料', title3: '业务管理系统', zxtbm: '' }
      ], [
        { icon: require('@/assets/icon/btn_hr.jpg'), title: '人力资源', title2: '人事管理', title3: '业务管理系统', zxtbm: '' },
        { icon: require('@/assets/icon/btn_em.jpg'), title: '设备管理', title2: '资源保障部', title3: '业务管理系统', zxtbm: '' },
        { icon: require('@/assets/icon/btn_js.jpg'), title: '工程结算', title2: '工程收入支出', title3: '结算管理系统', zxtbm: '' },
        { icon: require('@/assets/icon/btn_cx.jpg'), title: '综合查询', title2: '企业经营', title3: '信息查询系统', zxtbm: '' }
      ], [
        { icon: require('@/assets/icon/btn_dj.jpg'), title: '党建管理', title2: '党的建设', title3: '业务管理系统', zxtbm: '' },
        { icon: require('@/assets/icon/btn_qs.jpg'), title: '质量体系', title2: '质量体系', title3: '业务管理系统', zxtbm: '' },
        { icon: require('@/assets/icon/btn_ys.jpg'), title: '预算管理', title2: '全面预算', title3: '业务管理系统', zxtbm: '' },
        { icon: require('@/assets/icon/btn_sy.jpg'), title: '系统管理', title2: '系统安全', title3: '设置管理系统', zxtbm: 'SY' }
      ]]
    }
  },
  watch: {
    $route: {
      handler: function(route) {
        const query = route.query
        if (query) {
          this.redirect = query.redirect
          this.otherQuery = this.getOtherQuery(query)
        }
      },
      immediate: true
    }
  },
  methods: {
    getOtherQuery(query) {
      return Object.keys(query).reduce((acc, cur) => {
        if (cur !== 'redirect') {
          acc[cur] = query[cur]
        }
        return acc
      }, {})
    },
    handleLink(zxtbm, zxtmc) {
      /* this.$router.push({
          path: '/login?redirect=' + this.redirect + '&zxtbm=' + zxtbm + '&zxtmc=' + zxtmc,
          query: this.otherQuery
        })*/


         this.$store.dispatch('user/logout')
       // this.$router.push(`/menu?redirect=/`)

      const routeUrl = this.$router.resolve({
        path: '/login?redirect=' + this.redirect + '&zxtbm=' + zxtbm + '&zxtmc=' + zxtmc,
        query: this.otherQuery
      })
      window.open(routeUrl.href, '_blank')
    }
  }
}

</script>

<style lang="scss">
  .menu_title {
    background: #000071;
    margin: 0;
    padding: 0;
    text-align: center;
    font-size: 20px;
    margin-top: -5px;
    color: #fff;
    padding: 3px;
  }

  .menu_item {
    height: 60px;
    width: 100%;
    height: 60px;
    border: 1px solid lightgrey;
    border-radius: 5px;
    box-shadow: 2px 2px 2px 0px #0000002e;
    cursor: pointer;
    padding-left: 5px;
  }

  .menu_item .desc {
    width: calc(100% - 60px);
    height: 100%;
    float: left;
    text-align: center;
    padding-top: 5px;
  }

  .menu_item .img {
    width: 60px;
    height: 100%;
    float: left;
  }

  .menu_item:hover {
    border-radius: 5px;
    box-shadow: 2px 2px 2px 0px #00abff2e;
  }
</style>
