<template>
	<div></div>
<!--  <d2-container class="page">
		<div class="up">
				<el-button class="up-button_1" @click="toPage('1')"  icon="el-icon-service">教工人数</el-button>
				<el-button class="up-button_2" @click="toPage('2')"  icon="el-icon-bell">学生人数</el-button>
				<el-button class="up-button_3" @click="toPage('3')"  icon="el-icon-mobile-phone">设备数</el-button>
				<el-button class="up-button_4" @click="toPage('4')"  icon="el-icon-date">发卡数</el-button>
		</div>
		    <div class="top top-left">
		    <div class="top-title">
					<span>消费记录</span>  
					<div class="days-select">
					  <div @click="daysClick('7')" :class="{'active-button':isDays}">7天</div>
					  <div @click="daysClick('30')" :class="{'active-button':!isDays}">30天</div>
					</div>
				</div>
		</div>
		<div class="top_1">
		  <div class="top_1-title">部门教工统计</div>
		  <div style="position: relative;width: 100%">
		    <ve-pie :settings="chartSettings" :legend-visible="false" width="100%" :data="pieData"/>
		  </div>
		</div>
		   <div class="top top-left" style="margin-top: 10px;">
		    <div class="top-title">
					<span>多门通行记录统计</span>  
					<div class="days-select">
					  <div @click="daysClick('7')" :class="{'active-button':isDays}">7天</div>
					  <div @click="daysClick('30')" :class="{'active-button':!isDays}">30天</div>
					</div>
				</div>
		</div>
		<div class="top_1" style="margin-top: 10px;">
		  <div class="top_1-title">班级学生统计</div>
		  <div style="position: relative;width: 100%">
		    <ve-pie :settings="chartSettings" :legend-visible="false" width="100%" :data="pieData"/>
		  </div>
		</div>
  </d2-container> -->
</template>

<script>
import { mapState } from 'vuex'
//import { LineData,PieData } from '../../../api/index/index'
export default {
  data () {
    this.chartSettings = {
      radius: 100,
      offsetY: 130
    }
    return {
      menuList:[{
        title:'部门管理',
        icon:'fa fa-group',
        path:'/system/apartment'
      },{
        title:'员工管理',
        icon:'fa fa-user-circle-o',
        path: '/system/staff'
      },{
        title:'设备登记',
        icon:'fa fa-pencil',
        path: '/equipment/register'
      },{
        title:'联机设备',
        icon:'fa fa-bolt',
        path: '/equipment/online'
      },{
        title:'考勤记录',
        icon:'fa fa-bell',
        path: '/data/check'
      },{
        title:'消费记录',
        icon:'fa fa-ticket',
        path: '/data/cost'
      }],
      pieData: {
        columns: ['empTypeName', 'count'],
        rows: []
      },
      pieSettings :{
        labelMap: {
          empTypeName: '类型',
          count: '用户数'
        }
      },
      moz:false,
      isDays:true,
      lineData:{
        columns: [],
        rows: []
      }
    }

  },
  computed: {
    ...mapState('d2admin/releases', [
      'version'
    ])
  },
  methods:{
    itemClick (item) {
      this.$router.push(item.path)
    },
		toPage(val){
			if(val === '1'){
				this.$router.push('/system/teacher')
			}else if(val === '2'){
				this.$router.push('/system/student')
			}else if(val === '3'){
				this.$router.push('/equipment/register')
			}else if(val === '4'){
				this.$router.push('/card/user')
			}
		},
    daysClick (day) {
     /* console.log(123)
      if (day === '7') {
        this.isDays = true
        LineData({
          days:day
        }).then(res=>{
          this.lineData ={
            columns: [],
            rows: []
          }
          res.data = [res.data]
          this.lineData.columns = ['Month']
          res.data.forEach((obj,idx)=>{
            this.lineData.columns.push(obj.orgName)
            if (idx === 0) {
              for (let k in obj) {
                if (k !== 'orgName'){
                  this.lineData.rows.push({
                    Month:k
                  })
                }
              }
            }
          })

          this.lineData.rows.forEach(obj=>{
            this.lineData.columns.forEach(res=>{
              if (res !== 'Month') {
                obj[res] = ''
              }
            })

          })

          res.data.forEach((obj)=>{
            for (let k in obj) {
              if (k !== 'orgName'){
                this.lineData.rows.forEach(res=>{
                  for (let p in res) {
                    if (p === obj['orgName'] && k  === res.Month) {
                      if (p !== 'Month') {
                        res[p] = obj[k]
                      }
                    }
                  }
                })
              }
            }
          })






          // console.log(this.lineData)
        })

      } else {
        this.isDays = false
        LineData({
          days:day
        }).then(res=>{
          this.lineData ={
            columns: [],
            rows: []
          }
          res.data = [res.data]
          this.lineData.columns = ['Month']
          res.data.forEach((obj,idx)=>{
            this.lineData.columns.push(obj.orgName)
            if (idx === 0) {
              for (let k in obj) {
                if (k !== 'orgName'){
                  this.lineData.rows.push({
                    Month:k
                  })
                }
              }
            }
          })

          this.lineData.rows.forEach(obj=>{
            this.lineData.columns.forEach(res=>{
              if (res !== 'Month') {
                obj[res] = ''
              }
            })

          })

          res.data.forEach((obj)=>{
            for (let k in obj) {
              if (k !== 'orgName'){
                this.lineData.rows.forEach(res=>{
                  for (let p in res) {
                    if (p === obj['orgName'] && k  === res.Month) {
                      if (p !== 'Month') {
                        res[p] = obj[k]
                      }
                    }
                  }
                })
              }
            }
          })
        })

      } */
    }
  },
  mounted () {
  /*  console.log(window)

    LineData({
      days:'7'
    }).then(res=>{
      res.data = [res.data]
      this.lineData.columns = ['Month']
      res.data.forEach((obj,idx)=>{
        this.lineData.columns.push(obj.orgName)
        if (idx === 0) {
          for (let k in obj) {
            if (k !== 'orgName'){
              this.lineData.rows.push({
                Month:k
              })
            }
          }
        }
      })

      this.lineData.rows.forEach(obj=>{
          this.lineData.columns.forEach(res=>{
            if (res !== 'Month') {
              obj[res] = ''
            }
          })

      })

      res.data.forEach((obj)=>{
        for (let k in obj) {
          if (k !== 'orgName'){
            this.lineData.rows.forEach(res=>{
             for (let p in res) {
               if (p === obj['orgName'] && k  === res.Month) {
                 if (p !== 'Month') {
                   res[p] = obj[k]
                 }
               }
             }
            })
          }
        }
      })






      // console.log(this.lineData)
    })
    PieData ().then(res=>{
      this.pieData.rows = res.data
    }) */
  }
}
</script>

<style lang="scss">
.page {
  .d2-container-full__body{
    overflow: auto !important;
  }
	.bottom{
		  &-left{
		  width: calc(32% - 10px);
		  margin-top: 20px;
			margin-right: 30px;
		  float: left;
		  height: 50vh;
		  min-height: 380px;
		  border-radius: 5px;
		  border: 1px solid #f2f2f2;
		  box-sizing: border-box;
		}
		&-right{
		  width: calc(33% - 10px);
		  margin-top: 20px;
		  float: right;
		  height: 50vh;
		  min-height: 380px;
		  border-radius: 5px;
		  border: 1px solid #f2f2f2;
		  box-sizing: border-box;
		}
	}

	
	
	.up{
		height: 100px;
		&-button_1{
			width: calc(25% - 10px);
			margin-top: 20px;
			height: 65%;
			background:#6495ED;
			color: #f7f8f9;
			font-size: 18px
		}
		&-button_2{
			width: calc(25% - 10px);
			margin-top: 20px;
			height:65%;
			background:#9370DB;
			color: #f7f8f9;
			font-size: 18px
		}
		&-button_3{
			width: calc(25% - 10px);
			margin-top: 20px;
			height: 65%;
			background:#FFA07A;
			color: #f7f8f9;
			font-size: 18px
		}
		&-button_4{
			width: calc(25% - 10px);
			margin-top: 20px;
			height: 65%;
			background:#87CEFA;
			color: #f7f8f9;
			font-size: 18px
		}
	}
 /* .top{
		width: 100%;
		float: left;
		height: 35vh;
		&-title{
		  color: #666;
		  font-size: 15px;
		  background: #f7f8f9;
		  border-bottom: 1px solid #f2f2f2;
		  box-sizing: border-box;
		  height: 12%;
		  padding-left: 20px;
		  display: flex;
		  flex-direction: row;
		  align-items: center;
		  justify-content: space-between;
		  padding-right: 20px;
		  .days-select{
		    width: 150px;
		    height: 30px;
		    display: flex;
		    flex-direction: row;
		    align-items: center;
		    justify-content: space-between;
		    div {
		      z-index: 10000;
		      border: 1px solid #f2f2f2;
		      border-radius: 3px;
		      width: 50%;
		      height: 100%;
		      line-height: 30px;
		      text-align: center;
		      cursor: pointer;
		    }
		    .active-button {
		      background-color: dodgerblue;
		      color: white;
		    }
		  }
		}
		&-left{
			width: 65%;
			background: #87CEFA;
		}
	} */
  .top_1{
    float: left;
    width: calc(35% - 10px);
    height: 35vh;
    min-height: 300px;
    border-radius: 5px;
    border: 1px solid #f2f2f2;
    box-sizing: border-box;
    &-title{
      color: #666;
      font-size: 15px;
      background: #f7f8f9;
      border-bottom: 1px solid #f2f2f2;
      box-sizing: border-box;
      height: 15%;
      padding-left: 20px;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      padding-right: 20px;
      .days-select{
        width: 150px;
        height: 30px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        div {
          z-index: 10000;
          border: 1px solid #f2f2f2;
          border-radius: 3px;
          width: 50%;
          height: 100%;
          line-height: 30px;
          text-align: center;
          cursor: pointer;
        }
        .active-button {
          background-color: dodgerblue;
          color: white;
        }
      }
    }
    &-left{
      margin-right: 20px;
      &-items {
        width: 100%;
        height: 80%;
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        align-items: center;
        justify-content: center;
      }
      &-item {
        cursor: pointer;
        color: #999;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        width: 33.33%;
        span {
          margin-top: 20px;
          font-size: 16px;
        }
      }
    }
  }
 .top{
    float: left;
    width: calc(65% - 10px);
    height: 35vh;
    min-height: 300px;
    border-radius: 5px;
    border: 1px solid #f2f2f2;
    box-sizing: border-box;
    &-title{
      color: #666;
      font-size: 15px;
      background: #f7f8f9;
      border-bottom: 1px solid #f2f2f2;
      box-sizing: border-box;
      height: 15%;
      padding-left: 20px;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      padding-right: 20px;
      .days-select{
        width: 150px;
        height: 30px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        div {
          z-index: 10000;
          border: 1px solid #f2f2f2;
          border-radius: 3px;
          width: 50%;
          height: 100%;
          line-height: 30px;
          text-align: center;
          cursor: pointer;
        }
        .active-button {
          background-color: dodgerblue;
          color: white;
        }
      }
    }
    &-left{
      margin-right: 20px;
      &-items {
        width: 100%;
        height: 80%;
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        align-items: center;
        justify-content: center;
      }
      &-item {
        cursor: pointer;
        color: #999;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        width: 33.33%;
        span {
          margin-top: 20px;
          font-size: 16px;
        }
      }
    }
  }
}


</style>
