<template>
  <el-card class="c-card">
    <div slot="header" class="clearfix c-title">
      <h2>最近执行正误统计</h2>       
    </div>
    <div class="c-body">
      <ve-histogram  :data="chartData" :log='false' :settings="chartSettings"></ve-histogram>
    </div>          
  </el-card>
</template>

<script type="text/ecmascript-6">
import VeHistogram from "v-charts/lib/histogram.min";
/**
 * @author 白雨浓
 * @date 17-9-22 下午2:09
 *
 * 图表1 >> 根据日期 显示最近的 正确,错误,异常数
 **/
export default {
  components: { VeHistogram },
  name: "SisChart1",
  data() {
    this.chartSettings = {
      metrics: ["正确", "异常", "错误"],
      dimension: ["日期"]
    };
    return {
      chartData: {
        columns: ["日期", "正确", "错误", "异常"],
        rows: [
          { 日期: "1/1", 正确: 1393, 异常: 1093, 错误: 800 },
          { 日期: "1/2", 正确: 3530, 异常: 3230, 错误: 800 },
          { 日期: "1/3", 正确: 2923, 异常: 2623, 错误: 800 },
          { 日期: "1/4", 正确: 1723, 异常: 1423, 错误: 800 },
          { 日期: "1/5", 正确: 3792, 异常: 3492, 错误: 800 },
          { 日期: "1/6", 正确: 4593, 异常: 4293, 错误: 800 }
        ]
      }
    };
  },
  created() {},
  mounted() {
    this.$nextTick(() => {
      this.loadRecentResultData();
    });
  },
  methods: {
    /** 加载最近5天的结果 */
    loadRecentResultData() {
      // this.$$get('/chart/recent/list')
      //   .then(res => {
      //     if (res.data.code < 1)
      //       throw res.data.msg;
      //
      //     this.chartData.rows = [];
      //
      //     for (const result of res.data.data) {
      //       this.chartData.rows.unshift({
      //         '日期': this.$date.format(result.date, 'yyyy-MM-dd'),
      //         '正确': result.trueNum,
      //         '错误': result.falseNum,
      //         '异常': result.exceptionNum
      //       })
      //     }
      //   })
      //   .catch(err => this.$$msg.err(err))
    }
  }
};
</script>

<style scope lang="stylus" rel="stylesheet/stylus">
.c-card{
  .c-title{
    h2{
      font-size 18px
      text-align center
      font-weight normal
    }
  }
}
</style>
