<template>
  <div>
    <el-container class="main-container">
      <div class="header">
        <div class="headerbox">
          <h1>反欺凌信息采集及评测系统</h1>
          <div class="goto"><span @click="gotoLogin">您好，{{ userName }} 退出</span></div>
          <div class="headerMail" @click="gotMailsClick" v-if="meuns[4].meun == true"><i class="mailIcon"></i><i class="yuanRed" v-if="meuns[4].staurt == 1"></i></div>
          <div class="headerTimes">{{ newtime }}</div>
          <div class="clear"></div>
        </div>
      </div>
      <div class="leftFixed" id="leftId">
        <el-menu
          :default-active="idex"
          class="el-menu-vertical-demo nebyVertuaklc"
          :collapse="isCollapse"
          style="padding-top:20px;"
        >
          <div v-for="(item,i) in meuns" :key="i">
            <el-submenu :index="i" v-if="item.url == null" v-show="item.meun == true">
              <template slot="title">
                <i class="navIcon" :style="{'background':'url('+item.icon+') no-repeat 0 0/100%'}"></i>
                <i class="navIconCur" :style="{'background':'url('+item.iconCur+') no-repeat 0 0/100%'}"></i>
                <span slot="title" class="itemSpan">{{ item.title }}</span>
              </template>
              <div v-for="(itemSub, index) in item.childNav" :key="index" >
                <el-menu-item :index="itemSub.url" v-if="itemSub.meun == true" @click="tabClick(itemSub.url)"><span class="subItemSpan">{{ itemSub.title }}</span></el-menu-item>
              </div>
            </el-submenu>
            <div v-else>
                <div v-if="item.meun == true">
                  <el-menu-item :index="item.url" @click="tabClick(item.url)">
                    <i class="navIcon" :style="{'background':'url('+item.icon+') no-repeat 0 0/100%'}"></i>
                    <i class="navIconCur" :style="{'background':'url('+item.iconCur+') no-repeat 0 0/100%'}"></i>
                    <span slot="title" class="itemSpan">{{ item.title }}</span>
                  </el-menu-item>
                </div>
            </div>
          </div>
        </el-menu>
      </div>
      <el-main class="main" id="rightId">
        <div :is=currentPaths></div>
        <upreport :classStyle="styleDatas"></upreport>
      </el-main>
    </el-container>
  </div>
</template>
<script>
import { detelLogin, permissionList, adminLoginqx } from '../axios/api'
import upreport from '../components/upreport.vue'
import apipage from '../view/apipage/apipage.vue'
import basicinfocoll from '../view/basicinfocoll/basicinfocoll.vue'
import normalwork from '../view/normalwork/normalwork.vue'
import userlist from '../view/userlist/userlist.vue'
import menulist from '../view/menu/menulist.vue'
import schoolInfo from '../view/schoolinfo/schoolinfo.vue'
import rolelist from '../view/role/role.vue'
import messagecent from '../view/messagecent/messagecentlist.vue'
import reportcter from '../view/reportcter/reportcter.vue'

export default {
  name: 'navigation',
  components: {
    apipage,
    basicinfocoll,
    normalwork,
    userlist,
    menulist,
    schoolInfo,
    rolelist,
    messagecent,
    reportcter,
    upreport
  },
  data () {
    return {
      styleDatas: {
        top: '100px',
        right: '200px'
      },
      userName: '',
      isCollapse: false,
      idex: 'homes',
      meuns: [
        {
          url: 'basicinfocoll',
          route: 'basicinfocoll',
          path: 'basicinfocoll',
          icon: require('../assets/icon13.png'),
          iconCur: require('../assets/icon17.png'),
          title: '基础信息采集',
          name: 'basicinfocoll',
          role: [],
          meun: false,
          more: false
        },
        {
          url: 'normalwork',
          route: 'normalwork',
          path: 'normalwork',
          icon: require('../assets/icon13.png'),
          iconCur: require('../assets/icon17.png'),
          title: '常态工作记录',
          name: 'normalwork',
          role: [],
          meun: false
        },
        {
          url: 'reportcter',
          route: 'reportcter',
          path: 'reportcter',
          icon: require('../assets/icon13.png'),
          iconCur: require('../assets/icon17.png'),
          title: '上报中心',
          name: 'reportcter',
          role: [],
          meun: false
        },
        {
          url: null,
          route: '',
          path: '',
          title: '权限管理',
          icon: require('../assets/icon15.png'),
          iconCur: require('../assets/icon19.png'),
          name: 'permissionMassage',
          role: [],
          meun: false,
          childNav: [
            {
              url: 'userlist',
              route: 'userlist',
              path: 'userlist',
              name: 'userlist',
              title: '用户管理',
              role: [],
              meun: false
            },
            {
              url: 'rolelist',
              route: 'rolelist',
              path: 'rolelist',
              name: 'rolelist',
              title: '角色管理',
              role: [],
              meun: false
            },
            {
              url: 'menulist',
              route: 'menulist',
              path: 'menulist',
              name: 'menulist',
              title: '菜单管理',
              role: [],
              meun: false
            }
          ]
        },
        {
          url: 'messagecent',
          route: 'messagecent',
          path: 'messagecent',
          icon: require('../assets/icon16.png'),
          iconCur: require('../assets/icon20.png'),
          title: '消息中心',
          name: 'messagecent',
          role: [],
          meun: false,
          staurt: 2
        },
        {
          url: 'schoolInfo',
          route: 'schoolInfo',
          path: 'schoolInfo',
          icon: require('../assets/icon28.png'),
          iconCur: require('../assets/icon29.png'),
          title: '学校基本信息',
          name: 'schoolInfo',
          role: [],
          meun: false
        },
        // {
        //   url: 'apipage',
        //   route: 'apipage',
        //   path: 'apipage',
        //   name: 'apipage',
        //   title: 'api文档',
        //   role: [],
        //   meun: false
        // }
      ],
      quanxian: '3',
      currentPaths: 'homes',
      newtime: '',
      leftNavHeight: ''
    }
  },
  props: {
    currentPath: {
      type: String,
      default: ''
    }
  },
  created () {
    let that = this
    function updateDateTime () {
      const now = new Date() // 获取当前时间
      const hours = now.getHours().toString().padStart(2, '0') // 获取小时，并确保是两位数
      const minutes = now.getMinutes().toString().padStart(2, '0') // 获取分钟，并确保是两位数
      const seconds = now.getSeconds().toString().padStart(2, '0') // 获取秒数，并确保是两位数
      // 格式化时间字符串，例如 "2023-04-01 15:30:45"
      const datetimeString = `${now.getFullYear()}-${(now.getMonth() + 1).toString().padStart(2, '0')}-${now.getDate().toString().padStart(2, '0')} ${hours}:${minutes}:${seconds}`
      that.newtime = datetimeString // 更新页面上的时间显示
    }
    // 页面加载完成后立即更新时间，然后每1000毫秒（1秒）更新一次时间
    updateDateTime() // 初始更新
    setInterval(updateDateTime, 1000) // 每秒更新一次时间\
    // 获取页面高度
    var leftNavHeight = document.documentElement.clientHeight - 70
    that.leftNavHeight = leftNavHeight
    adminLoginqx().then(res => {
      if (res == false) {
        that.$messageOne({message: '网络异常，请检测网络是否链接！', type: 'error', duration: 3000})
        return
      }
      if (res.code == 10000) {        
        if (res.role != null) {
          that.quanxian = res.role.id
        } else {
          that.quanxian = 0
        }
        if (res.system == 1) {
          that.userName = res.username
          setTimeout(() => {
            let menulist = that.meuns
            for (var i = 0; i < menulist.length; i++) {
              var child = menulist[i].childNav
              menulist[i].meun = true
              if (child != undefined) {
                for (var k = 0; k < child.length; k++) {
                  child[k].meun = true
                }
              }
            }
          }, 0)
        } else {
          that.userName = res.username
          permissionList().then(res => {
            if (res.code == 10000) {
              let datas = res.data
              let array = []
              for (var i = 0; i < datas.length; i++) {
                let sarray = []
                let namRoles = datas[i].roles
                for (var j = 0; j < namRoles.length; j++) {
                  sarray.push(namRoles[j].id)
                }
                let obj = {}
                obj.name = datas[i].name
                obj.roles = sarray
                array.push(obj)
              }
              localStorage.setItem('permissonListDatas', JSON.stringify(array))
              let meunsArray = that.meuns
              for (var i = 0; i < meunsArray.length; i++) {
                let names = meunsArray[i].name
                let childNavs = meunsArray[i].childNav
                for (var j = 0; j < array.length; j++) {
                  let arrNames = array[j].name
                  if (names == arrNames) {
                    meunsArray[i].role = array[j].roles
                  }
                }
                if (childNavs != undefined) {
                  for (var s = 0; s < childNavs.length; s++) {
                    let childnams = childNavs[s].name
                    for (var k = 0; k < array.length; k++) {
                      let arrNames = array[k].name
                      if (childnams == arrNames) {
                        childNavs[s].role = array[k].roles
                      }
                    }
                  }
                }
              }
              that.meuns = meunsArray
              setTimeout(() => {
                let menulist = that.meuns
                let qxVal = that.quanxian
                for (var i = 0; i < menulist.length; i++) {
                  var qx = menulist[i].role
                  var child = menulist[i].childNav
                  for (var j = 0; j < qx.length; j++) {
                    if (qxVal == qx[j]) {
                      menulist[i].meun = true
                    }
                  }
                  if (child != undefined) {
                    for (var k = 0; k < child.length; k++) {
                      var qxChild = child[k].role
                      for (var l = 0; l < qxChild.length; l++) {
                        if (qxVal == qxChild[l]) {
                          child[k].meun = true
                        }
                      }
                    }
                  }
                }
              }, 0)
            } else if (res.code == '10002') {
              that.$messageOne({message: res.message, type: 'error', duration: 3000})
              that.$router.push({name: 'Login'})
            } else {
              that.$messageOne({message: res.message, type: 'error', duration: 3000})
            }
          }).catch(error => {
            that.$router.push({name: 'Login'})
            that.$messageOne({message: error, type: 'error', duration: 3000})
          })
        }
      } else {
        that.$messageOne({message: res.message, type: 'error', duration: 3000})
        that.$router.push({name: 'Login'})
      }
    }).catch(error => {
      that.$messageOne({message: error, type: 'error', duration: 3000})
    })
  },
  mounted () {
    let that = this
    let navTabs = localStorage.getItem('navTabs')
    that.idex = navTabs
    that.currentPaths = navTabs
    document.body.style.background = '#e8e8e8'
    document.body.style.height = 'auto'
  },
  methods: {
    gotoLogin () {
      let that = this
      that.$confirm('确定退出系统?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        detelLogin().then(res => {
          that.$messageOne({message: '退出登录', type: 'success', duration: 3000})
          localStorage.removeItem('UserToken')
          that.$router.push({name: 'Login'})
          localStorage.setItem('navTabs', 'homes')
        }).catch(error => {
          that.$messageOne({message: error, type: 'error', duration: 3000})
        })
      }).catch(() => {
        that.$messageOne({message: '取消退出!', type: 'info', duration: 3000})
      })
    },
    tabClick (obj) {
      this.currentPaths = obj
      this.idxs = obj
      localStorage.setItem('navTabs', obj)
    },
    gotMailsClick () {
      localStorage.setItem('navTabs', 'messagecent')
      this.$router.go()
    }
  }
}
</script>
<style scoped>
.header{height:70px;font-size:24px;line-height:70px;background: linear-gradient( 270deg, #5C9AEF 0%, #113887 100%);color:#fff;position:fixed;top:0;left:0;z-index:999;width:100%;}
.headerbox{padding:0 40px;}
.header h1{font-weight:500;font-size: 24px;color: #fff;text-align: left;font-style: normal;float:left;}
.header .leftOCbtn{width:220px;float:left;position:relative;top:5px;}
.leftFixed{width:240px;position:fixed;top:70px;left:0;z-index:990;background:#fff url('../assets/icon12.png') no-repeat bottom left/100%;height:1000px;}
.leftFixed >>> .el-menu{background:none;}
.leftFixed >>> .el-menu-item,.leftFixed >>> .el-submenu__title{height:40px;line-height:36px;margin-bottom:15px;font-size: 16px;color: #161617;text-align: left;font-style: normal;}
.leftFixed >>> .el-menu-item.is-active{background: #0071DB;color:#fff;}
.leftFixed >>> .el-menu-item.is-active .navIcon{display:none;}
.leftFixed >>> .el-menu-item.is-active .navIconCur{display:inline-block;}
.leftFixed .subItemSpan{padding-left:17px;}
.leftFixed .itemSpan{padding-left:14px;}
.main{margin:70px 0 0 240px;padding:10px;}
.opBtn{float:right;}
.el-icon-user-solid{color:#fff;}
.el-menu{border:0;}
.goto{float:right;font-weight: 500;
  font-size: 16px;
  color: #FFFFFF;
  text-align: right;
  font-style: normal;
  cursor:pointer;
}
.headerTimes{float:right;font-weight: 500;
  font-size: 16px;
  color: #FFFFFF;
  text-align: right;
  font-style: normal;
  padding-right:34px;
}
.headerMail{float:right;padding:0 34px 0 0;width:32px;position:relative;}
.headerMail .mailIcon{background:url('../assets/icon11.png') no-repeat 0 0/100%;width:32px;height:30px;display:block;cursor: pointer;position:relative;top:20px;}
.headerMail .yuanRed{width: 8px;height: 8px;background: #FF0000;border: 2px solid #3161B3;border-radius:50%;position:absolute;top:20px;right:30px;z-index:9999;display:block;}
.nebyVertuaklc{height:800px;overflow-y:auto;overflow-x:hidden;}
.navIcon{width:20px;height:20px;display:inline-block;}
.navIconCur{width:20px;height:20px;display:inline;}
</style>
