<template>
  <el-card style="min-height:calc(100vh - 84px);background: white;background-size:100% 100%">
    <div class="dashboard-container">
      <div class="sudoku_row" >
        <svg-icon icon-class="人员" style="width: 35px;height: 35px"/>
        <div class="dashboard-text" style="color:black">/{{ name }}</div>
        <el-divider content-position="right" style="margin:24px"/>
        <!--        <div v-for="(sudoku,index) in sudokus" :class="curSelect === sudoku.id?'opacity':''" :key="index+9999" shadow="hover" class="sudoku_item" style="background: white;border: 2px solid rgb(208,222,234)">-->
        <!--          <router-link v-if="sudoku.router!=undefined" :to="sudoku.router" style="width: 100%">-->
        <!--            <el-badge :value="sudoku.value" class="dashbadge" style="width: 100%;text-align:center">-->
        <!--              <svg-icon :icon-class="sudoku.icon" :style="{color:colors[index]}" style="width: 25px;height: 25px"/>-->
        <!--              <h2 :style="{color:colors[index]}" style="margin: 0px;height: 30px;display: inline-block;line-height: 30px">{{ sudoku.name }}</h2>-->
        <!--            </el-badge>-->
        <!--          </router-link>-->
        <!--        </div>-->

        <div v-for="(value1,index1) in fathers" :key="index1" style="width:100%;background: white;margin-bottom: 15px">
          <div style="width: 100%;height: 40px;line-height: 40px;background: rgb(127,172,237);color:white">
            <svg-icon :icon-class="value1.icon" style="color: white;margin: 5px 5px 0px 10px;border: 0 solid black;width:20px;height:20px"/>
            {{ value1.title }}
          </div>
          <router-link v-for="(value2,index2) in sons" v-if="value2.pid === value1.id" :key="index2" :to="value2.path">
            <el-card shadow="hover" class="sudoku_item1"
                     style="height:130px;width:175px;margin: 5px;display: inline-block;background: rgba(255,255,255,0.4);border: 2px solid rgb(208,222,234)"
                      :style="{background : value2.color ? value2.color : 'rgba(255,255,255,0.4)' }">
              <svg-icon :icon-class="value2.icon" class="bgc" style="color: rgb(37,89,164);display:block;margin: auto;border: 0px solid black;width:40px;height:40px"/>
              <h4 style="margin-top: 10px;color:rgb(37,89,164);text-align:center">{{ value2.title }}</h4>
            </el-card>
          </router-link>
        </div>
      </div>
    </div>
  </el-card>

</template>

<script>
import { mapGetters } from 'vuex'
import request from '@/utils/request'
export default {
  name: 'Dashboard',
  data() {
    return {
      colors: ['rgb(162,126,253)', 'rgb(254,178,0)', 'rgb(66,222,144)', 'rgb(68,176,254)', 'rgb(255,87,116)'],
      sudokus: [],
      curSelect: null,
      number: '',
      timer: '',
      fathers: [],
      sons: []
    }
  },
  computed: {
    ...mapGetters([
      'name',
      'token'
    ])
  },
  mounted() {
    this.getFileList()
    this.timer = setInterval(this.getFileList, 60 * 60 * 1000) // 60 分钟一刷新
    this.initFirstModule()
    this.initSecondModule()
  },
  beforeDestroy() {
    clearInterval(this.timer)
  },
  methods: {
    async initFirstModule() {
      await request({
        url: '',
        method: 'post',
        data: {
          type: '1',
          name: `菜单系统模块_首页信息_查询数据1`,
          param: '角色编号=' + this.token
        }
      }).then(data => {
        this.fathers = []
        data.data.map(v => {
          this.fathers.push({
            id: v.id,
            title: v.title,
            icon: v.icon
          })
        })
      })
    },
    Color(index) {
      const colorAngle = Math.floor(Math.random() * 360 + index)
      return 'hsla(' + colorAngle + ',70%,30%,1)'
    },
    async initSecondModule() {
      await request({
        url: '',
        method: 'post',
        data: {
          type: '1',
          name: `菜单系统模块_首页信息_查询数据2`,
          param: '角色编号=' + this.token
        }
      }).then(data => {
        this.sons = []
        data.data.map(v => {
          this.sons.push({
            id: v.id,
            pid: v.pid,
            path: v.path,
            icon: v.icon,
            title: v.title,
            color: v.color
          })
        })
      })
    },
    async getFileList() {
      await request({
        url: '',
        method: 'post',
        data: {
          type: '1',
          name: `菜单系统模块_通知信息_查询数据`,
          param: '角色编号=' + this.token
        }
      }).then(data => {
        this.sudokus = []
        for (let i = 0; i < data.data.length; i++) {
          this.getMessageNum(data.data[i].消息通知来源, data.data[i].通知条件, data, i)
        }
      })
    },
    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
        })
      })
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss">
  .dashboard-container .el-divider__text {
    color: gray;
    font-size: 22px;
    background-color: rgba(255,255,255,0.8);
  }
</style>
<style rel="stylesheet/scss" lang="scss" scoped>
  .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-top: 24ps;
    margin-bottom: 20px;
    margin-right: 20px;
    border: 0 solid red;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width:240px;
    height: 80px;
    /*padding-top: 20px;*/
    /*padding-bottom: 10px;*/
  }
  .sudoku_item:hover {
    border: 2px solid white;
  }
  .sudoku_item img{
    margin-bottom: 3px;
    display: block;
  }
  .sudoku_item1{
    margin-top: 24ps;
    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: 20px;
    /*padding-bottom: 10px;*/
  }
  .sudoku_item1:hover {
    border: 2px solid rgb(135,187,224);
  }
  .sudoku_item1 img{
    margin-bottom: 3px;
    display: block;
  }
  .opacity{
    opacity: 0.4;
    background: #e5e5e5;
  }
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
<style>
  .el-badge__content {
    background-color: rgb(255,151,91);
  }
  /*#dashbadge {*/
    /*background-color: rgb(255,151,91);*/
  /*}*/
</style>
