<template>
  <div>
    <div class="i-layout-page-header">
      <PageHeader :title="$route.meta.title" :content="$route.meta.description" hidden-breadcrumb />
    </div>
    <Card :bordered="false" dis-hover class="ivu-mt">
      <view-table ref="table" v-if="page" @on-load-data="onLoadData">
        <div slot="middle">
          <view-chart ref="chart"></view-chart>
        </div>
      </view-table>
    </Card>
  </div>
</template>
<script>
  import mixinPage from '../../mixins/page';
  import viewChart from '../../components/view/view-chart.vue';
  import { mapActions } from 'vuex';

  export default {
    name: 'template-reportPage',
    mixins: [mixinPage],
    components: { viewChart },
    data() {
      return {
        page: {},
        tableView: null
      };
    },
    computed: {},
    created() {
      this.init(this.$route.meta.data.id);
    },
    watch: {
      $route() {
        this.init(this.$route.meta.data.id);
      }
    },
    methods: {
      ...mapActions('admin/viewPage', { loadPage: 'load' }),
      ...mapActions('admin/dataView', { loadView: 'load' }),
      // 初始化
      async init(pageID) {
        let res = await this.loadPage(pageID);
        this.page = res.customPage;

        res = await this.loadView(this.page.tableViewCode);
        this.tableView = res.dataView;

        setTimeout(() => {
          this.$refs.table.init(this.page.tableViewCode, () => {
            this.$refs.table.loadData();
          });

          this.$refs.chart.initWithTable(this.tableView, this.$refs.table.data);
        });
      },
      // 数据加载完成
      onLoadData() {
        this.$refs.chart.loadChart(this.$refs.table.data);
      }
    }
  };
</script>
