<template>
<div>
  <mu-paper class="no-body-gutter summay_card">
    <grid :rows="chartListTop.length" v-if="chartListTop">
      <grid-item v-for="(item,index) in chartListTop" :key="index" v-on:item-click="handleItem(item)">
        <div :class="[{'chart-wrap-second':chartListTop.length == 2 }, {'chart-wrap-one': chartListTop.length == 1}, {'chart-wrap-img': item.ChartType !== 0 || item.ChartType !== 1 || item.ChartType !== 8}]" slot="num">
            <IEcharts :option="item.chartSerie" :style="chartListTop.length == 2 ? styles1 : styles2" v-if="item.ChartType == 0 || item.ChartType == 1 || item.ChartType == 8"/>
            <div v-else-if="item.ChartType == 9">12</div>
            <div v-else class="chart-img">
              <img src="../assets/2.svg" alt="" />
            </div>
          </div>
        <span  slot="label" v-text="item.componentName"></span>
      </grid-item>
    </grid>
  </mu-paper>
  <mu-paper class="no-body-gutter summay_card">
    <grid rows="3" >
      <grid-item v-for="(item,index) in chartList" :key="index" v-on:item-click="handleItem(item)">
        <div class="chart-wrap-third" slot="num">
          <IEcharts :option="item.chartSerie" :style="styles" v-if="item.ChartType == 0 || item.ChartType == 1 || item.ChartType == 8"/>
          <div v-else-if="item.ChartType == 9">12</div>
          <div v-else class="chart-img">
            <img src="../assets/2.svg" alt="" />
          </div>
        </div>
        <span  slot="label" v-text="item.componentName"></span>
      </grid-item>
    </grid>
  </mu-paper>
  <!-- <bs-chart :series="boardList1[0].series.series"></bs-chart> -->
</div>
</template>
<script>
// import banners from 'muse-ui/banners'
// import board from 'muse-ui/board'
import Paper from 'muse-ui/Paper';
import { Grid, GridItem } from '../../src/grid';
import charts from './charts';
// import loading from 'muse-ui/loading'
let echarts = require('echarts');
import 'echarts/lib/chart/bar';
import IEcharts from '../../src/echarts/full.js';
export default {
    name: 'app',
    components:{
      // 'mu-board':board,
      'mu-paper':Paper,
      'grid':Grid,
      'grid-item': GridItem,
      'bs-chart': charts,
      'IEcharts':IEcharts
      // 'mu-banners':banners,
      // 'mu-loading':loading
    },
    data:function(){
      return {
        "loading":true,
        "bannerList":[
          {
            "name":"banner-1",
            "url":"http://dfiles.tita.gift/Portal/245474/482a22c9d82d4210a17ffcf6385f34fa.png","jumpUrl":"http://1.1"
          }
        ],
        styles2:{
          width: '100px',
          height: '100px'
        },
        styles1:{
          width: '80px',
          height: '80px'
        },
        styles:{
          width: '40px',
          height: '40px'
        },
        chartListTop:[
          // {
          //   jumpUrl: "",
          //   componentName: 'dfasfdsafdsafdsafdsfasfdasfdsafdasfds',
          //   api: "widget/todocount",
          //   chartSerie: {
          //     title: {
          //     },
          //     tooltip: {},
          //     grid:{
          //         bottom: 1,
          //         left: 0,
          //         right: 0,
          //         top: 3,
          //     },
          //     color:[ "#5ebafc","#f5b070","#70e6d0","#9bcfff","#c0c1fa","#61dded","#f09bb6","#97cba6","#f2cf9c","#95b4f0","#d2a8e8","#ed80a0","#edb09d","#c9dbe9","#97aebd","#d0e5a0"],
          //     xAxis: {
          //       data: ['', '', ''],
          //       show: false
          //     },
          //     yAxis: {
          //       show: false
          //     },
          //     chartSerie:  [{
          //       "yDecimaldigit": 0,
          //       "xFormatPercent": false,
          //       "id": "需求总数",
          //       "data": [1, 2, 1, 3],
          //       "yFieldId": "00000000-0000-0000-0000-000000000000",
          //       "yFormatPercent": false,
          //       "xDecimaldigit": 0,
          //       "type": "line",
          //       "name": "需求总数",
          //     }, {
          //       "yDecimaldigit": 0,
          //       "xFormatPercent": false,
          //       "id": "应聘人数",
          //       "data": [2245, 10162, 1189],
          //       "yFieldId": "00000000-0000-0000-0000-000000000000",
          //       "yFormatPercent": false,
          //       "xDecimaldigit": 0,
          //       "type": "bar",
          //       "name": "应聘人数",
          //     }],
          //   },
          //   ChartType:12
          // },
          {
          	"pageUrl": "//cloud.italent.link/attendance/#/indexPage?metaObjName=Attendance.AttendanceStatistics&app=Attendance&navViewName=Attendance.AttendanceDataRecordWapNavView&mtitle=考勤",
          	"dataType": 0,
          	"names": "异常考勤",
          	"componentName": "异常考勤异常考勤异常考勤异常考勤异常考勤",
          	"state": 0,
          	"value": 0,
          	"dataColor": "#ff9500",
          	"api": "proxy/attendance/employeeAvgWork?date=''",
          	"type": "employeeAvgWork",
            "chartSerie":{
              title: {
              },
              grid:{
                  bottom: 1,
                  left: 0,
                  right: 0,
                  top: 3,
              },
              tooltip: {},
              xAxis: {
                data: ['Shirt', 'Sweater', 'Chiffon Shirt'],
                show: false
              },
              yAxis: {
                show: false
              },
              series:  [{
            			"yDecimaldigit": 0,
            			"xFormatPercent": false,
            			"id": "需求总数",
            			"data": [1, 2, 3],
            			"yFieldId": "00000000-0000-0000-0000-000000000000",
            			"yFormatPercent": false,
            			"xDecimaldigit": 0,
            			"type": "bar",
            			"name": "需求总数",
            		}],
            },
            ChartType:9

          }
        ],
        boardList2:[
          {
          	"pageUrl": "//cloud.italent.link/attendance/#/indexPage?metaObjName=Attendance.AttendanceStatistics&app=Attendance&navViewName=Attendance.AttendanceDataRecordWapNavView&mtitle=考勤",
          	"dataType": 0,
          	"names": "异常考勤",
          	"name": "异常考勤",
            "componentName": "异常考勤异常考勤异常考勤异常考勤异常考勤",
          	"state": 0,
          	"value": 0,
          	"dataColor": "#ff9500",
          	"api": "proxy/attendance/employeeAvgWork?date=''",
          	"type": "employeeAvgWork",
            chartSerie:{
              title: {
              },
              tooltip: {},
              xAxis: {
                data: ['Shirt', 'Sweater', 'Chiffon Shirt'],
                show: false
              },
              yAxis: {
                show: false,
                max: 36
              },
              series: [{
                name: 'Sales',
                type: 'bar',
                data: [5, 33, 36],
                barWidth: 15
              }]
            },
            ChartType: 0
          },
          {
          	"pageUrl": "//cloud.italent.link/attendance/#/indexPage?metaObjName=Attendance.AttendanceStatistics&app=Attendance&navViewName=Attendance.AttendanceDataRecordWapNavView&mtitle=考勤",
          	"dataType": 0,
          	"names": "异常考勤",
          	"name": "异常考勤",
            "componentName": "异常考勤异常考勤异常考勤异常考勤异常考勤",
          	"state": 0,
          	"value": 0,
          	"dataColor": "#ff9500",
          	"api": "proxy/attendance/employeeAvgWork?date=''",
          	"type": "employeeAvgWork",
            chartSerie:{
              title: {
              },
              tooltip: {},
              xAxis: {
                data: ['Shirt', 'Sweater', 'Chiffon Shirt'],
                show: false
              },
              yAxis: {
                show: false,

              },
              series: [{
                name: 'Sales',
                type: 'bar',
                data: [5, 33, 36],
                barWidth: 15
              }]
            },
            ChartType: 8
        }],
        chartList: [{
        	"pageUrl": "",
        	"dataType": 0,
        	"names": "待办",
        	"name": "待办",
        	"state": 3,
        	"value": "0",
        	"dataColor": "#ff7360",
        	"api": "widget/todocount",
        	"type": "todo",
          "chartSerie": {
            title: {
            },
            tooltip: {},
            xAxis: {
              data: ['Shirt', 'Sweater', 'Chiffon Shirt'],
              show: false
            },
            yAxis: {
              show: false
            },
            series: [{
              name: 'Sales',
              type: 'bar',
              data: [ 10, 10, 20],
              barWidth: 8
            }]
          },
          ChartType: 0
        }, {
        	"pageUrl": "",
        	"dataType": 0,
        	"names": "待办",
        	"name": "待办",
          "componentName": "异常考勤异常考勤异常考勤异常考勤异常考勤",
        	"state": 3,
        	"value": "0",
        	"dataColor": "#ff7360",
        	"api": "widget/todocount",
        	"type": "todo",
          chartSerie: {
            title: {
            },
            tooltip: {},
            xAxis: {
              data: ['Shirt', 'Sweater', 'Chiffon Shirt'],
              show: false
            },
            yAxis: {
              show: false
            },
            series: [{
              name: 'Sales',
              type: 'bar',
              data: [ 10, 10, 20],
              barWidth: 8
            }]
          },
          ChartType:2
        },{
        	"pageUrl": "",
        	"dataType": 0,
        	"names": "待办",
        	"name": "待办",
        	"state": 3,
        	"value": "0",
        	"dataColor": "#ff7360",
        	"api": "widget/todocount",
        	"type": "todo",
          chartSerie: {
            title: {
            },
            tooltip: {},
            xAxis: {
              data: ['Shirt', 'Sweater', 'Chiffon Shirt'],
              show: false
            },
            yAxis: {
              show: false
            },
            series: [{
              name: 'Sales',
              type: 'bar',
              data: [ 10, 10, 20],
              barWidth: 8
            }]
          },
          ChartType: 8
        },{
        	"pageUrl": "//cloud.italent.link/attendance/#/indexPage?metaObjName=Attendance.AttendanceStatistics&app=Attendance&navViewName=Attendance.AttendanceDataRecordWapNavView&mtitle=考勤",
        	"dataType": 0,
        	"names": "异常考勤",
        	"name": "异常考勤",
        	"state": 0,
        	"value": 0,
        	"dataColor": "#ff9500",
        	"api": "proxy/attendance/employeeAvgWork?date=''",
        	"type": "employeeAvgWork",
          chartSerie:{
            title: {
            },
            tooltip: {},
            xAxis: {
              data: ['Shirt', 'Sweater', 'Chiffon Shirt'],
              show: false
            },
            yAxis: {
              show: false
            },
            series: [{
              name: 'Sales',
              type: 'bar',
              data: [5, 33, 36]
            }]
          },
          ChartType: 2
        },{
        	"pageUrl": "//cloud.italent.link/attendance/#/indexPage?metaObjName=Attendance.AttendanceStatistics&app=Attendance&navViewName=Attendance.AttendanceDataRecordWapNavView&mtitle=考勤",
        	"dataType": 0,
        	"names": "异常考勤",
        	"name": "异常考勤",
          "componentName": "异常考勤异常考勤异常考勤异常考勤异常考勤",
        	"state": 0,
        	"value": 0,
        	"dataColor": "#ff9500",
        	"api": "proxy/attendance/employeeAvgWork?date=''",
        	"type": "employeeAvgWork",
          chartSerie:{
            title: {
            },
            tooltip: {},
            xAxis: {
              data: ['Shirt', 'Sweater', 'Chiffon Shirt'],
              show: false
            },
            yAxis: {
              show: false
            },
            series: [{
              name: 'Sales',
              type: 'bar',
              data: [5, 33, 36]
            }]
          },
          ChartType: 0
        }, {
        	"pageUrl": "//cloud.italent.link/attendance/#/basePage?pageType=RemainVacationPage&bgColorTransparent=true&mtitle=年假余额&bgColor=38C1CE",
        	"dataType": 0,
        	"names": "年假余额",
        	"name": "年假余额",
        	"state": 0,
        	"value": 0,
        	"dataColor": "#36b336",
        	"api": "proxy/attendance/vacationRemainDetail",
        	"type": "vacationRemainDetail",
          chartSerie: {
            title: {
            },
            tooltip: {},
            xAxis: {
              data: ['Shirt', 'Sweater', 'Chiffon Shirt','  '],
              show: true
            },
            yAxis: {
              show: true
            },
            grid:{
                bottom: 0,
                left: 0,
                right: 0,
                top: 0
            },
            series:  [{
                "yDecimaldigit": 0,
                "xFormatPercent": false,
                "id": "需求总数",
                "data": [100,2,3,1000],
                "yFieldId": "00000000-0000-0000-0000-000000000000",
                "yFormatPercent": false,
                "xDecimaldigit": 0,
                "type": "line",
                "name": "需求总数",
              }],
          },
          ChartType: 0
        }]
      }
    },
    mounted:function(){
      var self = this;
    },
    methods: {
    }
  }
</script>
<style>
#app{
  background: #f3f4f5;
}

.chart-wrap-third{
  width: 40px;
  height: 40px;
  margin-top: 24px;
  margin-bottom: 8px;
  font-size: 30px;
}
.bsui-grid__num{
  display: flex;
  justify-content: center;

}
.mu-paper{
  box-shadow: 0 0 0 0 !important;
  border-radius: 0 !important;
}
.chart-wrap-second{
  width: 80px;
  height: 80px;
  margin-top: 10px;
  margin-bottom: 12px;
  font-size: 40px;
  line-height: 80px;
}
.chart-wrap-one{
  width: 100px;
  height: 100px;
  margin-top: 30px;
  margin-bottom: 12px;
  font-size: 40px;
  line-height: 100px;

}
.chart-wrap-one img{
  width: 100px;
  height: 100px;
}
.chart-wrap-second img{
  width: 80px;
  height: 80px;
}
.chart-wrap-third img{
  width: 40px;
  height: 40px;
}
.chart-wrap-img{
  margin-bottom: 12px;
}
</style>
