<template>
  <div class="recommend">
    <!-- 表单 -->
    <form-query
      @dateChange="handleDate"
      @pkgChange="handlePkg"
      @handleQuery="handleQuery"
    />

    <!-- 表格 -->
    <table-info :tableData="tableData" @checkDetail="checkDetail" />

    <!-- 查看json详情数据 -->
    <json-check ref="jsonCheck" :jsonData="jsonData" />

    <!-- 播放视频 -->
    <video-dialog />
  </div>
</template>

<script>
import FormQuery from "./child_cpn/FormQuery";
import TableInfo from "./child_cpn/TableInfo";
import JsonCheck from "./child_cpn/JsonCheck";
import VideoDialog from "./child_cpn/VideoDialog";

import { getTime } from "@/utils/utils";
import { fetchCommonTable } from "@/api/common";

export default {
  components: {
    FormQuery,
    TableInfo,
    JsonCheck,
    VideoDialog,
  },

  data() {
    return {
      conditions: {
        pkg: "",
        startDate: "",
        sqlId: 1332,
      },
      tableData: [],
      jsonData: "{}",
    };
  },

  created() {
    this.conditions.startDate = getTime();
  },

  methods: {
    _fetchCommonTable() {
      fetchCommonTable(this.conditions).then((res) => {
        this.tableData = res.result.data;
      });
    },

    handleDate(val) {
      this.conditions.startDate = val;
      this._fetchCommonTable();
    },

    handlePkg(val) {
      this.conditions.pkg = val;
      this._fetchCommonTable();
    },

    // 点击筛选
    handleQuery() {
      this._fetchCommonTable();
    },

    // 点击查看json详细信息
    checkDetail(data) {
      this.jsonData = data;
      this.$nextTick(() => {
        this.$refs.jsonCheck.init();
      });
    },
  },
};
</script>

<style src='./index.css'></style>