<template>
  <div id="clockFold" style="width: 100%; height: 350px"></div>
</template>

<script>
import * as echarts from 'echarts';
import { formatDateTime } from '@/common/times';

export default {
  props: {
    details: {
      type: Array,
    },
  },
  data() {
    return {
      chartPie: null,
      xData: [],
      yData: [],
      data: [],
    };
  },
  watch: {
    details(value) {
      var xData = [];
      var yData = [];
      value.forEach(function (v, k) {
        xData.push(formatDateTime(v[0]));
        yData.push(v[1]);
      });
      this.data = value;
      this.xData = xData;
      this.yData = yData;
      setTimeout(() => {
        this.drawCharts();
      }, 1000);
    },
  },

  mounted: function () {},
  methods: {
    drawPieChart() {
      console.log(this.data);
      this.chartPie = echarts.init(document.getElementById('clockFold'));
      this.chartPie.setOption({
        title: {
          left: 'center',
          text: '每日考勤打卡次数',
        },
        tooltip: {
          trigger: 'item',
          axisPointer: {
            type: 'shadow',
          },
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.xData,
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            data: this.yData,
            type: 'line',
            areaStyle: {},
          },
        ],
      });
    },
    drawCharts() {
      this.drawPieChart();
    },
  },
};
</script>

<style scoped></style>
