<template>
  <div class="chart-2">
    <div class="pie">
      <ve-pie :data="chartData" :settings="chartSettings"></ve-pie>
      <p class="title" v-text="batName"></p>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import VePie from 'v-charts/lib/pie.min'
  /**
   * @author 白雨浓
   * @date 17-9-22 下午2:09
   *
   * 图表2 >> 显示最新执行的系统的统计正确错误百分比
   **/
  export default{
    components: {VePie},
    name: 'SisChart2',
    data(){
      return {
        chartData: {},
        batName: ''
      }
    },
    created () {
      this.chartData = {
        columns: ['类别', '个数'],
        rows: []
      };
      this.chartSettings = {
        dimension: '类别',
        metrics: '个数'
      }
    },
    mounted(){
      this.$nextTick(() => {
        this.loadNewestResultData();
      })
    },
    methods: {
      /** 加载最新结果数据 */
      loadNewestResultData(){
        // this.$$get(`/chart/newest`)
        //   .then(res => {
        //     if (res.data.code < 1)
        //       throw res.data.msg;
        //
        //     const result = res.data.data;
        //
        //     if (result === undefined)
        //       return false;
        //
        //     this.chartData.rows = [
        //       {'类别': '正确', '个数': result.trueNum},
        //       {'类别': '异常', '个数': result.exceptionNum},
        //       {'类别': '错误', '个数': result.falseNum}
        //     ];
        //     this.batName = result.batName;
        //   })
        //   .catch(err => this.$$msg.err(err))
      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  .chart-2 {
    width 100%
    height 100%
    .pie {
      position relative
      margin 20px
      .title {
        position absolute
        display block

        width w = 300px
        height 30px

        left 50%
        bottom -20px

        margin-left -(w/ 2)

        text-align center
        color #666
      }
    }
  }
</style>
