<template>
  <div class="dashboard-editor-container">

    <panel-group
      :today-price="todayPrice"
      :today-visit-count="todayVisitCount"
      :today-order-count="todayOrderCount"
      @handleSetLineChartData="handleSetLineChartData" />

    <el-row style="background:#fff;padding:16px 10px 0;margin-bottom:32px;">
      <line-chart :chart-data="lineChartData" />
    </el-row>

  </div>
</template>

<script>
import PanelGroup from './dashboard/PanelGroup'
import LineChart from './dashboard/LineChart'
import RaddarChart from './dashboard/RaddarChart'
import PieChart from './dashboard/PieChart'
import BarChart from './dashboard/BarChart'
import { indexTabData, indexLineChartData } from "@/api/mall/indexData";

let lineChartData = {
  // 今日成交额
  purchases: {
    actualData: [120, 90, 100, 138, 142, 130, 130],
    dateList: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    desc: '成交额'
  },
  // 今日总访客
  newVisitis: {
    actualData: [120, 82, 91, 154, 162, 140, 145],
    dateList: ['1', '2', '3', '4', '5', '6', '7'],
    desc: '访客数量'
  },
  // 今日订单数
  shoppings: {
    actualData: [120, 82, 91, 154, 162, 140, 130],
    dateList: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    desc: '订单数'
  }
}

export default {
  name: 'Index',
  components: {
    PanelGroup,
    LineChart,
    RaddarChart,
    PieChart,
    BarChart
  },
  data() {
    return {
      lineChartData: lineChartData.purchases,
      // 今日成交额
      todayPrice: 0.00,
      // 今日总访客
      todayVisitCount: 0,
      // 今日订单数
      todayOrderCount: 0,
    }
  },
  created() {
    this.getIndexTabData();
    this.getIndexLineChartData();
  },
  methods: {
    /** 首页顶部数据 */
    getIndexTabData(){
      indexTabData().then(res =>{
        if (res.code === 200){
          this.todayPrice = res.todayPrice
          this.todayVisitCount = res.todayVisitCount
          this.todayOrderCount = res.todayOrderCount
        }
      })
    },
    /** 折线图数据 */
    getIndexLineChartData(){
      indexLineChartData().then(res =>{
        if (res.code === 200){
          lineChartData.purchases.actualData = res.oneWeekPrice
          lineChartData.newVisitis.actualData = res.oneWeekVisitCount
          lineChartData.shoppings.actualData = res.oneWeekOrderCount

          lineChartData.purchases.dateList = res.oneWeekDateList
          lineChartData.newVisitis.dateList = res.oneWeekDateList
          lineChartData.shoppings.dateList = res.oneWeekDateList
        }
      })
    },
    handleSetLineChartData(type) {
      this.lineChartData = lineChartData[type]
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

@media (max-width:1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>
