<template>
  <div>
    <basic-container>
      <avue-data-display :option="option"></avue-data-display>
    </basic-container>
    <basic-container>
      <el-row :gutter="0">
        <el-col :span="8">
          <el-button :type="queryType === 'full-year' ? 'primary' : '-'" round size="mini" @click="switchQuery('full-year')">全年</el-button>
          <el-button :type="queryType === 'nearly_one' ? 'primary' : '-'" size="mini" round @click="switchQuery('nearly_one')">近60天</el-button>
          <el-button :type="queryType === 'nearly_tow' ? 'primary' : '-'" size="mini" round @click="switchQuery('nearly_tow')">近30天</el-button>
          <el-button :type="queryType === 'week' ? 'primary' : '-'" size="mini" round @click="switchQuery('week')">近一周</el-button>
        </el-col>
      </el-row>
      <el-row :gutter="0">
        <el-col :span="24"><div class="k-chart" id="main"></div></el-col>
      </el-row>
      <el-row :gutter="0">
        <el-col :span="12"><div class="k-chart" id="main2"></div></el-col>
        <el-col :span="12"><div class="k-chart" id="main3"></div></el-col>
      </el-row>
    </basic-container>

  </div>
</template>

<script>
import {dataReport, dataReportByDate, orderGoodsProportion} from "@/api/finance/order.js";
export default {
  created() {
    this.option.data[0].click = function () {
      this.openBox(1);
    }.bind(this);
  },
  data() {
    return {
      queryType: 'full-year',
      option: {
        span: 6,
        data: [
          {
            title: '交易总单数',
            count: 0,
            icon: 'el-icon-warning',
            color: 'rgb(49, 180, 141)',
            click: null,
          },
          {
            title: '交易总金额',
            count: 0,
            icon: 'el-icon-view',
            color: 'rgb(56, 161, 242)',
            decimals:2,
          },
          {
            title: '今日交易单数',
            count: 0,
            icon: 'el-icon-setting',
            color: 'rgb(117, 56, 199)',
          },
          {
            title: '今日交易总金额',
            count: 0,
            icon: 'el-icon-setting',
            color: 'rgb(117, 56, 199)',
            decimals:2,
          },
        ]
      },
      charts: [
        {id: 'main',name: '进货图表', chart: null, type: 'bar', desc: "单数"},
        {id: 'main2',name: '商品来源占比', chart: null, type: 'bar', desc: "金额"},
        {id: 'main3',name: '专区类型占比', chart: null, type: 'line', desc: "人数"},
      ]
    }
  },
  methods: {
    drawChart2(res, charts) {
      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#409EFF'
            }
          }
        },
        legend: {
          data: ['交易金额', '订单数量']
        },
        xAxis: [
          {
            type: 'category',
            data: res.desc,
            axisPointer: {
              type: 'shadow'
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '交易金额',
            axisLabel: {
              formatter: '{value} 元'
            }
          },
          {
            type: 'value',
            name: '订单数量',
            axisLabel: {
              formatter: '{value} 单'
            }
          }
        ],
        series: [
          {
            name: '交易金额',
            type: 'bar',
            tooltip: {
              valueFormatter: function (value) {
                return value + ' 元';
              }
            },
            data: res.totalAmount
          },
          {
            name: '订单数量',
            type: 'line',
            smooth: true,
            yAxisIndex: 1,
            tooltip: {
              valueFormatter: function (value) {
                return value + ' 单';
              }
            },
            data: res.totalCount
          }
        ]
      };
      let myechart = echarts.init(document.getElementById(charts.id))
      myechart.setOption(option);
    },
    drawChart(data, charts) {
      let option = {
        title: {
          text: charts.name,
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            type: 'pie',
            radius: '50%',
            label: {
              normal: {
                show: true,
                formatter: '{b} ({d}%)'
              }
            },
            data: data,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      let myechart = echarts.init(document.getElementById(charts.id))
      myechart.setOption(option);
    },
    initData() {
      dataReport().then(res => {
        const today = res.data.data;
        this.option.data[0].count = today.totalOrderCount;
        this.option.data[1].count = today.totalOrderAmount;
        this.option.data[2].count = today.totalOrderCountToday;
        this.option.data[3].count = today.totalOrderAmountToday;
      });
      this.orderStatic();
    },
    switchQuery(type) {
      this.queryType = type;
      this.orderStatic();
    },
    orderStatic() {
      dataReportByDate(this.queryType).then(res => {
        this.drawChart2(res.data.data, this.charts[0]);
        this.drawChart(res.data.data, this.charts[1]);
        this.drawChart(res.data.data, this.charts[2]);
      });
      orderGoodsProportion(this.queryType).then(res => {
        this.drawChart(res.data.data.source, this.charts[1]);
        this.drawChart(res.data.data.zone, this.charts[2]);
      });
    }
  },
  mounted() {
    this.initData();
  }
}
</script>

<style>
.k-chart {
  width: 100%;
  height: 450px;
}
</style>
