<template>
  <div>
    <ve-line
      v-if="chartData.rows.length > 0"
      :data="chartData"
      :settings="chartSettings"
    ></ve-line>
  </div>
</template>

<script>
import { fetchCommonTable } from "@/api/common"; // 通用axios 请求
import VeLine from "v-charts/lib/line.common";

export default {
  components: {
    VeLine,
  },
  props: {
    dateData: {
      type: Array,
      requier: true,
    },
    videoId: {
      type: String,
    },
  },

  data() {
    this.chartSettings = {
      labelMap: {
        click_cnt: "点击数",
      },
      dimension: ["second"],
      metrics: ["click_cnt"],
      scale: [false, false],
      xAxisType: "value",
      yAxisType: "normal",
    };
    return {
      chartData: {
        columns: ["second", "click_cnt"],
        rows: [],
      },
    };
  },

  created() {
    // this._fetchCommonTable();
  },

  methods: {
    // 进入组件时初始化请求
    init() {
      this._fetchCommonTable();
    },

    _fetchCommonTable() {
      let params = {
        sqlId: 1331,
        videoId: this.videoId,
        startDate: this.dateData[0],
        endDate: this.dateData[1],
      };
      fetchCommonTable(params).then((res) => {
        this.chartData.rows = res.result.data;
      });
    },
  },
};
</script>

<style>
</style>