<template>
  <div class="app-container" style="width: 1280px!important;padding: 30px!important;">
    <el-row :gutter="10">
      <el-col :span="6"><div class="grid-content bg-purple">当周总数量<br><br>{{currentWeek.amount}} </div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple">当周总金额<br><br>{{currentWeek.fee | currency('￥')}}</div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple">上周总数量<br><br>{{lastWeek.amount}}</div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple">上周总金额<br><br>{{lastWeek.fee | currency('￥')}}</div></el-col>
    </el-row>

<!--    <el-row :gutter="10">-->
<!--      <el-col :span="12">-->
<!--        <div id="main1" style=" float:left; height: 500px; width: 600px;"></div>-->
<!--      </el-col>-->
<!--      <el-col :span="12">-->
<!--        <div id="main2" style=" float:right;height: 500px; width: 600px;"></div>-->
<!--      </el-col>-->
<!--    </el-row>-->
  </div>
</template>

<script>
  let echarts = require('echarts/lib/echarts')
  // 引入饼状图组件
  require('echarts/lib/chart/pie')
  // 引入提示框和title组件
  require('echarts/lib/component/tooltip')
  require('echarts/lib/component/title')
  import {overview} from '@/api/order/order'

  export default {
    name: "OrderOverview",
    data() {
      return {
        currentWeek: {amount: 0, fee: 0},
        lastWeek: {amount: 0, fee: 0},
        currentRate: [],
        lastRate: [],
        toolTypes: []
      }
    },
    created() {

    },
    mounted() {
      this.initData();
    },
    methods: {
      //初始化数据
      initData() {
        overview().then(response => {
          if (response.currentWeek)
            this.currentWeek = response.currentWeek;
          if (response.lastWeek)
            this.lastWeek = response.lastWeek;
          if (response.currentRate) {
            let currentRate = response.currentRate;
            for (let i in currentRate) {
              this.currentRate.push({
                name: currentRate[i].name,
                value: currentRate[i].fee
              })
            }
            this.toolTypes = response.toolTypes;
            // // 基于准备好的dom，初始化echarts实例
            // var myChart = echarts.init(document.getElementById('main1'));
            // // 绘制图表
            // myChart.setOption({
            //   title: {
            //     text: '本周测试工具类别占比',//主标题
            //     subtext: '',//副标题
            //     x: 'center',//x轴方向对齐方式
            //   },
            //   tooltip: {
            //     trigger: 'item',
            //     formatter: "{a} <br/>{b} : {c} ({d}%)"
            //   },
            //   legend: {
            //     orient: 'vertical',
            //     bottom: 'bottom',
            //     data: this.toolTypes
            //   },
            //   series: [
            //     {
            //       name: '工具分类占比',
            //       type: 'pie',
            //       radius: '55%',
            //       center: ['50%', '60%'],
            //       data: this.currentRate,
            //       itemStyle: {
            //         emphasis: {
            //           shadowBlur: 10,
            //           shadowOffsetX: 0,
            //           shadowColor: 'rgba(0, 0, 0, 0.5)'
            //         }
            //       }
            //     }
            //   ]
            // });
          }
          if (response.lastRate != null) {
            let lastRate = response.lastRate;
            for (let i in lastRate) {
              this.lastRate.push({
                name: lastRate[i].name,
                value: lastRate[i].fee
              })
            }
            // // 基于准备好的dom，初始化echarts实例
            // var lastChart = echarts.init(document.getElementById('main2'));
            // // 绘制图表
            // lastChart.setOption({
            //   title: {
            //     text: '上周测试工具类别占比',//主标题
            //     subtext: '',//副标题
            //     x: 'center',//x轴方向对齐方式
            //   },
            //   tooltip: {
            //     trigger: 'item',
            //     formatter: "{a} <br/>{b} : {c} ({d}%)"
            //   },
            //   legend: {
            //     orient: 'vertical',
            //     bottom: 'bottom',
            //     data: this.toolTypes
            //   },
            //   series: [
            //     {
            //       name: '工具分类占比',
            //       type: 'pie',
            //       radius: '55%',
            //       center: ['50%', '60%'],
            //       data: this.lastRate,
            //       itemStyle: {
            //         emphasis: {
            //           shadowBlur: 10,
            //           shadowOffsetX: 0,
            //           shadowColor: 'rgba(0, 0, 0, 0.5)'
            //         }
            //       }
            //     }
            //   ]
            // });

          }
        })
      }
    }
  }
</script>

<style scoped>
  .el-row {
    margin-bottom: 20px;
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    font-size: 22px;
    border-radius: 4px;
    min-height: 36px;
    height: 110px;
    padding: 10px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>
