<template>
  <div id="fullscreen" ref="fullscreen" class="fullscreen">
    <!--    <div style="width: 500px;height:770px;filter:blur(10);z-index: 999">-->
    <!--      <d-m-t ref="dmtDashBoard" containerheight="800px" containerwidth="1640px" />-->
    <!--    </div>-->
    <el-card style="min-height:calc(100vh - 84px);background-size:100% 100%">
               <!-- <a-button type="primary" @click="fullScreen()">全屏</a-button> -->
      <div class="dashboard-container">
        <div class="sudoku_row">
          <!-- <div v-for="(value3, index3) in fathers1" :key="'info2-' + index3" style="width:100%">
            <div style="margin-top: 20px" />
            <el-divider content-position="left">{{ value3.title }}</el-divider>
            <a v-for="(value4, index4) in sons1" v-if="value4.pid === value3.id" :key="index4" target="_blank"
              :href="value4.path">
              <el-card class="sudoku_item" shadow="hover"
                style="height:130px;width:150px;margin: 5px;display: inline-block;background: rgba(255,255,255,0.4)">
                <svg-icon :icon-class="value4.icon" :style="{ color: Color(index4) }" class="bgc"
                  style="display:block;margin: auto;border: 0 solid black;width:50px;height:50px" />
                <br>
                <div style="color:black;text-align:center;margin-top: -10px">{{ value4.title }}</div>
              </el-card>
            </a>
          </div> -->
          <div v-for="(value1, index1) in fathers" :key="index1" style="width:100%">
            <div style="margin-top: 20px" />
            <el-divider content-position="left">{{ value1.title }}</el-divider>
            <router-link v-for="(value2, index2) in sons" v-if="value2.pid === value1.id" :key="index2"
              :to="value2.path">
              <el-card class="sudoku_item" shadow="hover"
                style="height:130px;width:150px;margin: 5px;display: inline-block;background: rgba(255,255,255,0.4)">
                <svg-icon :icon-class="value2.icon" :style="{ color: Color(index2) }" class="bgc"
                  style="display:block;margin: auto;border: 0 solid black;width:50px;height:50px" />
                <br>
                <div style="color:black;text-align:center;margin-top: -10px">{{ value2.title }}</div>
              </el-card>
            </router-link>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import request from '@/utils/request'
import Router from '@/router/index'

// import DMT from '../../components/DMT/index'
export default {
  name: 'Dashboard',
  // components: { DMT },
  data() {
    return {
      a: '',
      sudokus: [],
      curSelect: null,
      number: '',
      timer: '',
      fathers: [],
      sons: [],
      fathers1: [],
      sons1: [],
      // 上一次点击时间
      lastTime: null,
      // 当前时间
      currentTime: null,
      // 超时时间, 如果半个小时都没有点击页面就算超时
      sys_timeout: 12 * 60 * 60 * 1000,
      // 检查的时间，每隔5分钟检查一次有没有超时
      check_time: 5 * 60 * 1000,
      // 计时器
      whole_timer: null,
    }
  },
  created() {
    // 启动这个定时器
    this.isLoginOut()
  },
  computed: {
    ...mapGetters([
      'name',
      'token',
      'id'
    ])
  },
  mounted() {
    // this.getFileList()
    // this.timer = setInterval(this.getFileList, 60 * 60 * 1000) // 60 分钟一刷新
    this.initFirstModule()
    this.initSecondModule()
  },
  beforeDestroy() {
    // clearInterval(this.timer)
  },
  methods: {
    toView(path) {

    },
    fullScreen() {
     
     const result = logintm()
      // 全屏
      // var full = document.getElementById('fullscreen')
      // this.launchIntoFullscreen(full)
    },
    exitFullscreen() {
      if (document.exitFullscreen) {
        document.exitFullscreen()
      } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen()
      } else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen()
      }
    },
    checkFull() {
      // 判断浏览器是否处于全屏状态 （需要考虑兼容问题）
      // 火狐浏览器
      let isFull = document.mozFullScreen ||
        document.fullScreen ||
        // 谷歌浏览器及Webkit内核浏览器
        document.webkitIsFullScreen ||
        document.webkitRequestFullScreen ||
        document.mozRequestFullScreen ||
        document.msFullscreenEnabled
      if (isFull === undefined) {
        isFull = false
      }
      return isFull
    },
    launchIntoFullscreen(element) {
      if (element.requestFullscreen) {
        element.requestFullscreen()
      } else if (element.mozRequestFullScreen) {
        element.mozRequestFullScreen()
      } else if (element.webkitRequestFullscreen) {
        element.webkitRequestFullscreen()
      } else if (element.msRequestFullscreen) {
        element.msRequestFullscreen()
      }
    },
    // 获取自己写的静态路由
    getRouter() {
      var constantRouterMap = Router.options.routes[0]
      this.fathers1.push({
        id: 1000,
        title: constantRouterMap.meta.title
      })
      for (let i = 0; i < constantRouterMap.children.length; i++) {
        this.sons1.push({
          id: i,
          pid: 1000,
          path: constantRouterMap.children[i].path,
          icon: constantRouterMap.children[i].meta.icon,
          title: constantRouterMap.children[i].meta.title
        })
      }
    },
    async initFirstModule() {
      await request({
        url: '',
        method: 'post',
        data: {
          type: '3',
          name: `select * from 登录基础数据_二级菜单  where 账号代码= ${this.token} and pid = 0 and 是否启用 = 1 order by id `
        }
      }).then(data => {
        this.fathers = []
        data.data.map(v => {
          this.fathers.push({
            id: v.id,
            title: v.title
          })
        })
      })
    },
    Color(index) {
      // const colorAngle = Math.floor(Math.random() * 360 + index)
      // return 'hsla(' + colorAngle + ',70%,30%,1)'
      // 返回固定颜色
      return 'rgb(37, 89, 164)'
    },
    async initSecondModule() {
      await request({
        url: '',
        method: 'post',
        data: {
          type: '1',
          name: '菜单模块系统_项目角色模块列表_二级_查询数据',
          param: `角色编号=${this.token}`
        }
      }).then(data => {
        this.sons = []
        data.data.map(v => {
          this.sons.push({
            id: v.id,
            pid: v.pid,
            path: v.componet,
            icon: v.icon,
            title: v.title
          })
        })
        // this.getRouter()
      })
    },
    // async getFileList() {
    //   await request({
    //     url: '',
    //     method: 'post',
    //     data: {
    //       type: '3',
    //       name: `select * from 基础表_角色模块信息 inner join 基础表_模块信息 on 基础表_角色模块信息.id = 基础表_模块信息.id where 角色编号=${this.token} and 是否通知 = 1`
    //     }
    //   }).then(data => {
    //     this.sudokus = []
    //     for (let i = 0; i < data.data.length; i++) {
    //       this.getMessageNum(data.data[i].消息通知来源, data.data[i].通知条件, data, i)
    //     }
    //     console.log(this.sudokus)
    //   })
    // },
    // async getMessageNum(tableName, condition, rawData, i) {
    //   await request({
    //     url: '',
    //     method: 'post',
    //     data: {
    //       type: '3',
    //       name: `select count(*) from ${tableName} where ${condition}`
    //     }
    //   }).then(res => {
    //     this.sudokus.push({
    //       id: rawData.data[i].id,
    //       name: rawData.data[i].title,
    //       icon: rawData.data[i].icon,
    //       router: rawData.data[i].path,
    //       value: res.data[0].Column1
    //     })
    //   })
    // }
    isTimeOut() {
      // 页面上一次的点击时间
      this.lastTime = this.$store.state.login.lastTime
      this.currentTime = new Date().getTime()
      // 超时了
      if ((this.currentTime - this.lastTime) > this.sys_timeout) {
        return true
      } else {
        return false
      }
    },
    isLoginOut() {
      // console.log("11111:" + this)
      // 每次用定时器之前先清除一下
      clearInterval(this.whole_timer)
      // 这里要备份一下this指针
      const _this = this
      this.whole_timer = setInterval(function() {
        // 判断一下是否超时，如果超时了就退出
        if (_this.isTimeOut()) {
          // console.log("22222:" + this)
          _this.$store.dispatch('FedLogOut')
          _this.$router.push(`/login?redirect=${_this.$route.fullPath}`)
          // 如果退出了就清除这个定时器，这里要延迟一秒清除，因为跳转到登录界面会有一点点延迟~
          setTimeout(function() {
            clearInterval(_this.whole_timer)
          }, 1000)
        }
      }, _this.check_time)
    },
  }
}
</script>
<style lang="scss" rel="stylesheet/scss">
.dashboard-container .el-divider__text {
  color: gray;
  font-size: 22px;
  background-color: rgba(255, 255, 255, 0.8);
}
</style>
<style lang="scss" rel="stylesheet/scss" scoped>
/*.text {*/
/*font-size: 14px;*/
/*}*/

/*.item {*/
/*margin-bottom: 18px;*/
/*}*/

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

.box-card {
  width: 100%
}

.item {
  margin-top: 10px;
  margin-right: 40px;
}

.sudoku_row {
  display: flex;
  align-items: center;
  width: 100%;
  flex-wrap: wrap;
}

.sudoku_item {
  margin-bottom: 20px;
  margin-left: 20px;
  //border: 0 solid red;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 15%;
  height: 80px;
  /*padding-top: 10px;*/
  /*padding-bottom: 10px;*/
  border: 2px solid rgb(208, 222, 234);
}

.sudoku_item:hover {
  border: 2px solid white;
}

.opacity {
  opacity: 0.4;
  background: #e5e5e5;
}

.sudoku_item img {
  margin-top: 10px;
  display: block;
}

.dashboard {
  &-container {
    margin: 30px;
  }

  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}

</style>
