<template>
  <div >
    <h2 style="text-align: center" v-if="dataSource">{{dateTime}}稽核走势图</h2>
    <div style="text-align: center;padding: 16px 16px;background-color: white" v-if="!dataSource.length">
      <div class="ant-empty-image"><svg width="64" height="41" viewBox="0 0 64 41" xmlns="http://www.w3.org/2000/svg"><g transform="translate(0 1)" fill="none" fillRule="evenodd"><ellipse fill="#F5F5F5" cx="32" cy="33" rx="32" ry="7"></ellipse><g fillRule="nonzero" stroke="#D9D9D9"><path d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"></path><path d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z" fill="#FAFAFA"></path></g></g></svg></div>
      <div>暂无数据</div>
    </div>
    <div>
      <v-chart :force-fit="true" :height="height" :data="data" :scale="scale" >
        <v-tooltip />
        <v-axis />
        <v-legend />
        <v-line position="createTime*num" color="check" />
        <v-point position="createTime*num" color="check" :size="4" :v-style="style" :shape="'circle'" />
      </v-chart>
    </div>

  </div>
</template>

<script>
import { httpAction, getAction } from '@api/manage'
import dateFormat from "@comp/jeecg/JEasyCron/format-date";
let DataSet = require('@antv/data-set');

/*const sourceData = [
  { createTime: '6月1', basicCheckState: 6, standardCheckState: 6,dataCheckState:4, },
  { createTime: '6月2', basicCheckState: 7, standardCheckState: 7,dataCheckState:4 },
  { createTime: '6月3', basicCheckState: 3, standardCheckState: 3,dataCheckState:3 },
  { createTime: '6月4', basicCheckState: 4, standardCheckState: 4,dataCheckState:4 },
  { createTime: '6月5', basicCheckState: 5, standardCheckState: 3,dataCheckState:4 },
  { createTime: '6月6', basicCheckState: 5, standardCheckState: 5,dataCheckState:4 },
  { createTime: '6月7', basicCheckState: 9, standardCheckState: 7,dataCheckState:4 },
  { createTime: '6月8', basicCheckState: 6, standardCheckState: 5,dataCheckState:4 },
  { createTime: '6月9', basicCheckState: 7, standardCheckState: 4,dataCheckState:4 },
  { createTime: '6月10', basicCheckState: 9, standardCheckState: 9,dataCheckState:4 },
  { createTime: '6月11', basicCheckState: 13, standardCheckState: 10,dataCheckState:10 },
  { createTime: '6月12', basicCheckState: 7, standardCheckState: 7,dataCheckState:4 },
  { createTime: '6月13', basicCheckState: 9, standardCheckState: 9,dataCheckState:9 },
  { createTime: '6月14', basicCheckState: 13, standardCheckState: 12,dataCheckState:8 },
  { createTime: '6月15', basicCheckState: 9, standardCheckState: 5,dataCheckState:4 },
  { createTime: '6月16', basicCheckState: 13, standardCheckState: 8,dataCheckState:10 },
  { createTime: '6月17', basicCheckState: 3, standardCheckState: 3,dataCheckState:3 },
  { createTime: '6月18', basicCheckState: 4, standardCheckState: 4,dataCheckState:4 },
  { createTime: '6月19', basicCheckState: 3, standardCheckState: 3,dataCheckState:3 },
  { createTime: '6月20', basicCheckState: 5, standardCheckState: 5,dataCheckState:4 },
  { createTime: '6月21', basicCheckState: 4, standardCheckState: 3,dataCheckState:4 },
  { createTime: '6月22', basicCheckState: 6, standardCheckState: 5,dataCheckState:6 },
  { createTime: '6月23', basicCheckState: 7, standardCheckState: 4,dataCheckState:4 },
  { createTime: '6月24', basicCheckState: 9, standardCheckState: 9,dataCheckState:4 },
  { createTime: '6月25', basicCheckState: 13, standardCheckState: 13,dataCheckState:10 },
  { createTime: '6月26', basicCheckState: 7, standardCheckState: 5,dataCheckState:5 },
  { createTime: '6月27', basicCheckState: 9, standardCheckState: 9,dataCheckState:4 },
  { createTime: '6月28', basicCheckState: 13, standardCheckState: 11,dataCheckState:4 },
  { createTime: '6月29', basicCheckState: 9, standardCheckState: 6,dataCheckState:7 },
  { createTime: '6月30', basicCheckState: 5, standardCheckState: 5,dataCheckState:3 },
];*/

export default {

  data() {
    return {
      queryParam: {},
      dv:{},
      data:{},
      scale:{},
      height: 400,
      style: { stroke: '#fff', lineWidth: 1 },
      dataSource:[],
      dateTime:'',
    };
  },
  created() {
    this.sourceData();
  },
  methods: {

    defaultTme(){
      var now_date = new Date();
      var end_time = dateFormat(now_date,'yyyy-MM-dd hh:mm:ss');
      var before_date = new Date(now_date.getTime()-1000*60*60*24*7)
      var start_time = dateFormat(before_date,'yyyy-MM-dd')+' 00:00:00';
      this.queryParam.endTime=end_time;
      this.queryParam.startTime=start_time;
    },
    sourceData(startTime,endTime,checkState){
     if (startTime&&endTime){
       this.queryParam.endTime=endTime;
       this.queryParam.startTime=startTime;
     }else{
       this.defaultTme()
     }
      this.dateTime=dateFormat(this.queryParam.startTime,'yyyy年MM月dd日')+' ~ '+dateFormat(this.queryParam.endTime,'MM-dd')
      var checkState=2
      this.queryParam.basicCheckState=checkState;
      this.queryParam.standardCheckState=checkState;
      this.queryParam.dataCheckState=checkState;
      getAction("/smsCheck/workLog/check/state",this.queryParam).then(resp=>{
        if (resp.success){
          this.dataSource =  resp.result
        for (let i = 0; i <this.dataSource.length; i++) {
          this.dataSource[i].createTime=dateFormat(this.dataSource[i].createTime,'MM月dd日')
          }
          console.log(this.dataSource)
          this.dv = new DataSet.View().source(this.dataSource);
          this.dv.transform({
            type: 'fold',
            fields: [ 'basicCheckState', 'standardCheckState','dataCheckState'],
            key: 'check',
            value: 'num',
          });
          this.data = this.dv.rows;
          this.scale = [{
            dataKey: 'createTime',
            min: 0,
            max: 1,
          }];

        }
      })

    }
  }
};
</script>
