<!--
 * @Descripttion: 当前组件信息
 * @version: 1.0.0
 * @Author: 无尘
 * @Date: 2019-11-15 10:10:08
 * @LastEditors: 无尘
 * @LastEditTime: 2019-11-21 10:46:33
 -->
<!--
<out-date-active :barChartData="barChartData"  :funnelData="funnelData"></out-date-active>

import outDateActive from '@/components/active/out-date-active.vue';
-->
<template>
  <div class="out-date-active flex flex-space-between">
    <data-statistics-child :activeData="activeData" :barChartData="barChartData" :activityId="itemId"></data-statistics-child>
    <funnel-chart :funnelData="funnelData"></funnel-chart>
  </div>
</template>
<script>
import dataStatisticsChild from '@/components/active/data-statistics-child.vue';
import funnelChart from '@/components/active/funnel-chart.vue';
export default {
  name: 'card-table',
  props: {
    barChartData: {
      type: [Array, Object],
      default() {
        return {};
      }
    },
    funnelData: {
      type: [Array, Object],
      default() {
        return {};
      }
    },
    activityId: {
      type: String,
      default() {
        return '';
      }
    }
  },
  components: {
    funnelChart,
    dataStatisticsChild
  },
  data() {
    return {
      activeData: {
        exposure: 0,
        attend: 0,
        invited: 0,
        attendRate: 0,
        spread: 0
      },
      itemId: this.activityId
    };
  },
  methods: {},
  watch: {
    funnelData(newData, oldData) {
      if (Object.keys(newData).length) {
        this.activeData = JSON.parse(JSON.stringify(newData));
      }
    },
    activityId(newData, oldData) {
      if (newData) {
        this.itemId = newData;
      }
    }
  },
  mounted() {
    const that = this;
    if (Object.keys(that.funnelData).length) {
      that.activeData = JSON.parse(JSON.stringify(that.funnelData));
    }
    that.itemId = that.activityId;
  }
};
</script>
<style lang="less" scoped>
.out-date-active {
  width: 100%;
}
</style>
