<template>
  <div class="dashboard-editor-container">
	  <el-row :gutter="24" class="panel-group" style="margin-left: 0px;">
	    <el-col  v-for="(menu,idx) of usedMenu" v-if="idx<4"
	    	:key="idx"  :xs="6" :sm="12" :lg="6" class="card-panel-col">
	      <router-link  :to="menu.fullpath" >
	      <div :class=getClassName(idx) >
	        <div class="card-panel-icon-wrapper icon-people">
	          <svg-icon :icon-class="menu.icon" class-name="card-panel-icon" />
	        </div>
	        <div class="card-panel-description">
	         {{menu.title}}
	        </div>
	      </div>
	      </router-link>
	    </el-col>
	  </el-row >
    <el-row :gutter="24"  >
      <el-col :xs="6" :sm="12" :lg="12"  >
        <!--统计最近两周新上架的数量-->
        <div class="chart-wrapper">
        <line-chart :chart-data="lineChartData" :height="chartHeight"/>
        </div>
      </el-col>
      <el-col :xs="6" :sm="12" :lg="12"  >
        <!--路径访问次数占比-->
        <div class="chart-wrapper">
        <pie-chart  :height="chartHeight" :categoryChartData="categoryChartData"/>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="24"  >
      <el-col    :xs="6" :sm="12" :lg="12"  >
        <!--最近一周生成的图片资源包数量-->
        <div class="chart-wrapper">
          <bar-chart  :height="chartHeight" :materialChartData="materialChartData"/>
        </div>
      </el-col>
      <el-col    :xs="6" :sm="12" :lg="12"  >
        <!--最近操作日志信息-->
        <div class="chart-wrapper">
          <TaskTable :height="chartHeight" :taskData="taskData" :allCatentryCount="allCatentryCount"/>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
	import { mapGetters } from 'vuex'
	import {getUseMenu} from '@/api/auth/user'
  import {getChartList} from '@/api/chart'
	import LineChart from './dashboard/components/LineChart'
	import PieChart from './dashboard/components/PieChart'
	import BarChart from './dashboard/components/BarChart'

	import TaskTable from './dashboard/components/TaskTable'


	export default {
	  name: 'index',
	  components: {
	    LineChart,
	    PieChart,
	    BarChart,
	    TaskTable,
	  },
	  data() {
	    return {
	      total: 0,
	      fileLimit:2,
	      urlList:['/pim/catentry'],
	      usedMenu:[],
	      charts: '',
	      chartHeight:'260px',
        categoryChartData:[],  //分类相关报表信息
        materialChartData:[],   //图片相关报表信息
        taskData:[],          //每个渠道推送的数量
        allCatentryCount:null, //商品总数量
        chartData :{
          newVisitis: {},
          messages: {
            expectedData: [200, 192, 120, 144, 160, 130, 140],
            actualData: [180, 160, 151, 106, 145, 150, 130]
          },
          purchases: {
            expectedData: [80, 100, 121, 104, 105, 90, 100],
            actualData: [120, 90, 100, 138, 142, 130, 130]
          },
          shoppings: {
            expectedData: [130, 140, 141, 142, 145, 150, 160],
            actualData: [120, 82, 91, 154, 162, 140, 130]
          }
        },
        lineChartData: {
          expectedData:[],
          actualData:[]
        },
	    }
	  },
	  created() {
	    this.getMenuList()
	  },
	  //调用
	  mounted(){
	    this.$nextTick(function() {
	      // this.drawPie('main')
	    })
	  },
	  methods: {
	    getClassName(index){
	        return "card-panel boxcolor"+index;
	    },
	    getMenuList(){

	      getUseMenu(this.listQuery).then(response => {
	        if(response.data.length>0){
	          this.urlList = response.data
	        }
	        for(let i=0; i<this.addRouters.length;i++){
	          let addrouter=this.addRouters[i];
	          let ppath=addrouter.path;
	          for(let j=0;j<addrouter.children.length;j++){
	            let crouter=addrouter.children[j];
	            let fullpath=ppath+"/"+crouter.path;
	            if(this.urlList.indexOf(fullpath)!=-1){
	              let menu={
	                fullpath:fullpath,
	                name:crouter.name,
	                title:crouter.meta.title,
	                icon:crouter.meta.icon
	              };
	              this.usedMenu.push(menu)
	            }
	          }
	        }
	      });
        getChartList().then(res=>{
             if(res.code==200){
                //商品有关的报表信息(上周、本周的每天上新商品数量,商品的总数量,以及每个渠道推送成功的商品数量)
                let catentryChartRes=res.data.catentryChartRes;
                if(catentryChartRes!=null){
                  //本周每天上新的商品数量
                  let weekCounts=catentryChartRes.weekCount;
                  //上周每天上新的商品数量
                  let previousWeekCount=catentryChartRes.previousWeekCount;
                  if(weekCounts!=null&&weekCounts.length>0){
                    this.lineChartData.actualData=weekCounts;
                  }
                  if(previousWeekCount!=null&&previousWeekCount.length>0){
                    this.lineChartData.expectedData=previousWeekCount;
                  }
                  //所有商品总数量
                  this.allCatentryCount=catentryChartRes.pimCatentryCount;
                  //获取每个渠道推送的数据
                  this.taskData=catentryChartRes.channelCatentryList;
                }
                //获取分类有关信息
               let categoryChartRes=res.data.categoryChartResList;
               if(categoryChartRes!=null&&categoryChartRes.length>0){
                  this.categoryChartData=categoryChartRes;
               }
               //读取图片相关信息
               let materialChartResList=res.data.materialChartResList;
               if(materialChartResList!=null&&materialChartResList.length>0){
                  this.materialChartData=materialChartResList;
               }
             }
        })
	    }
	  },
	  computed: {
	    ...mapGetters([
	      'name',
	      'roles',
	      'permission_routers',
	      'addRouters'
	    ])
	  }
	}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .dashboard-editor-container {
    padding: 9px;
    background-color: #f2EDf3;
    .chart-wrapper {
      border-radius: 20px;
      background: #ffffff;
      margin-top: 15px;
      padding: 16px 16px 0;

    }
  }
  .panel-group {
    height: 108px;
    /*overflow-y: hidden;*/
    .card-panel-col{
      margin-bottom: 10px;
    }
    .boxcolor0{
      background: linear-gradient(to right, #ffbf96, #fe7096);
    }
    .boxcolor1{
      background: linear-gradient(to right, #90caf9, #047edf );
    }
    .boxcolor2{
      background: linear-gradient(to right, #84d9d2, #07cdae);
    }
    .boxcolor3{
      background: linear-gradient(to right,#e4e67c, #cac531);
    }
    .card-panel {
      cursor: pointer;
      font-size: 12px;
      border-radius: 15px;
      position: relative;
      overflow: hidden;
      color: #ffffff;
      border-color: rgba(0, 0, 0, .05);

      .card-panel-icon-wrapper {
        float: left;
        margin: 14px 0 0 14px;
        padding: 16px;
        transition: all 0.38s ease-out;
        border-radius: 6px;
        .svg-icon{
        fill: #FFFFFF;
        }
      }
      .card-panel-icon {
        float: left;
        font-size: 48px;
      }
      .card-panel-description {
        float: right;
        font-size: 15px;
        font-weight: bold;
        margin: 26px;
        margin-left: 0px;
        .card-panel-text {
          line-height: 18px;
          color: rgba(0, 0, 0, 0.45);
          font-size: 20px;
          margin-bottom: 12px;
        }
        .card-panel-num {
          font-size: 20px;
        }
      }
    }
  }
</style>
