<template>
  <div>
    <div class="wel__title"><i class="el-icon-s-operation title" style="margin-right: 10px;color: #e2524a;"></i>待办事项</div>
    <!-- <el-row :gutter="20" >
      <el-col :span="6" v-for="(item,index) in todoMenu" :key="index" @click.native="gotoDetail(item)">
        <div class="wel__text">
          <div class="wel__text-top">{{data['' + item.code]}}</div>
          <div class="wel__text-bottom">{{item.name}}</div>
        </div>
      </el-col>
    </el-row> -->
    <avue-data-panel :option="option"></avue-data-panel>
  </div>
</template>

<script>
  import {getRoutes} from "@/api/system/menu";
  // import {getTodoData} from "@/api/common/todo";

  export default {
    name: "todo",
    data(){
      return{
        modal: false,
        badgeValue:'',
        tempTodo: ['deviceJob','reportJob','personJob','gridInspection','corridorMonitoring'],
        menus: [],//列表的菜单
        todoMenu: [],//列表的菜单
        data: {},
        option: {
                span:6,
                data: []
              },

      }
    },
    created(){
      let _this = this;
      // _this.getCountData();
    },
    methods:{
      loadMenu(){
        let _this = this;
        getRoutes().then(function(res){
          if (res.data.code == 200){
            _this.menus = res.data.data;
            _this.getTodoMenu(_this.menus);
          }
        });
      },
      getTodoMenu(menus){
        let _this = this;
        menus.forEach((item,index) => {
          if (!(item.children && item.children.length > 0)){
            //叶子节点
            if (_this.tempTodo.includes(item.code)){
              // _this.todoMenu.push(item);
              let obj = {
                click: function (item) {
                  _this.gotoDetail(item)
                },
              }
              switch(index){
                case 0: obj['icon'] = 'el-icon-setting';obj['color'] = 'rgb(117, 56, 199)';
                break;
                case 1: obj['icon'] = 'iconfont iconiconshebei wel__iconfont';obj['color'] = '#0b3cce';
                break;
                case 2: obj['icon'] = 'iconfont iconrenyuan wel__iconfont';obj['color'] = '#19d4ae';
                break;
                case 3: obj['icon'] = 'iconfont iconservicemeshfuwuwangge wel__iconfont';obj['color'] = '#1169ae';
                break;
                case 4: obj['icon'] = 'iconfont iconiconlouceng wel__iconfont';obj['color'] = '#f9d616';
                break;
              }
              obj['title'] = item.name
              obj['count'] = _this.data[item.code+""]
              obj['path'] = item.path
              _this.option.data.push(obj)
            }
          }else{
            //非叶子节点
            _this.getTodoMenu(item.children);
          }
        })
      },
      // getCountData(){
      //   getTodoData().then(res => {
      //     this.data = res.data.data;
      //     this.loadMenu()
      //   });
      // },
      gotoDetail(item){
        if(item.path){
          this.$router.push({
              name: item.title,
              params: {
                todo: true
              }
          });

        }
      }
    },
  }
</script>

<style lang="scss">
  .wel {
    &__iconfont{
        font-size: 52px;
      }
    &__title {
      font-size: 16px;
      height:40px;
      font-weight: bold;
    }
  }
  .avue-data-panel .item-count{
     font-weight: 500;
  }
</style>
