<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" @on-load-data="onLoadData">
        <template #middle>
          <div>
            <view-chart ref="chart"></view-chart>
          </div>
        </template>
      </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: this.$route.name,
    mixins: [mixinPage],
    components: { viewChart },
    data() {
      return {
        page: {},
        tableView: null
      };
    },
    computed: {},
    mounted() {
      this.init(this.$route.meta.data.id);
    },
    // watch: {
    //   $route() {
    //     if (this.$route.meta.data.id) {
    //       //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, () => {
            if (!this.$refs.table.tableView.autoLoadDisable) {
              this.$refs.table.loadData();
            }
          });

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