<template>
  <div class="chart-page">
    <section
      class="chart-section"
      style="display: flex; width: 100%;">
      <el-card
        class="chart-card"
        style="flex-shrink: 0; width: 450px; margin-right: 10px;">
        <div slot="header">
          <span>各渠道销售额占比</span>
          <el-button type="text">操作按钮</el-button>
        </div>
        <div
          class="content"
          style="height: 400px;">
          <Chart1 order-data="orderData"/>
        </div>
      </el-card>
      <el-card
        class="chart-card"
        style="flex-grow: 1;">
        <div slot="header">
          <span>各渠道票类占比</span>
          <el-button type="text">操作按钮</el-button>
        </div>
        <div
          class="content"
          style="height: 400px;">
          <Chart2/>
        </div>
      </el-card>
    </section>
    <section
      class="chart-section"
      style="display: flex; width: 100%;">
      <el-card
        class="chart-card"
        style="flex-shrink: 0; width: 550px; margin-right: 10px;">
        <div slot="header">
          <span>分销商销售统计</span>
          <el-button type="text">操作按钮</el-button>
        </div>
        <div
          class="content"
          style="height: 350px;">
          <Chart3/>
        </div>
      </el-card>
      <el-card
        class="chart-card"
        style="flex-grow: 1;">
        <div slot="header">
          <span>分销商订单统计</span>
          <el-button type="text">操作按钮</el-button>
        </div>
        <div
          class="content"
          style="height: 350px;">
          <Chart4/>
        </div>
      </el-card>
    </section>
  </div>
</template>
<script>
import './chartAnalysis.scss'
import Chart1 from './channelAnalysisCharts/chart1.vue'
import Chart2 from './channelAnalysisCharts/chart2.vue'
import Chart3 from './channelAnalysisCharts/chart3.vue'
import Chart4 from './channelAnalysisCharts/chart4.vue'
import { getOrderList } from '@/api/order.js'
export default {
  name: 'ChannelAnalysisCharts',
  components: {
    Chart1,
    Chart2,
    Chart3,
    Chart4
  },
  data () {
    return {
      orderData: {}
    }
  },
  mounted () {
    this.getOrderList()
  },
  watched: {
    orderData: {
      handler (newData, oldData) {
        console.log(this.orderData)
      }
    }

  },
  methods: {
    getOrderList () {
      getOrderList({}).then(res => {
        this.orderData = res
      })
    }
  }
}
</script>
