<template>
  <div>
    <basic-container>
      <avue-data-display :option="option"></avue-data-display>
      <el-dialog title="抢购人员" append-to-body :visible.sync="userBox" width="48%">
      <avue-crud :data="snapUpPeopleData"
                 :option="userOption"></avue-crud>
      </el-dialog>
    </basic-container>
    <basic-container>
      <avue-data-display :option="option2"></avue-data-display>
    </basic-container>
    <basic-container>
      <el-row :gutter="0">
        <el-col :span="8"><div class="k-chart" id="main"></div></el-col>
        <el-col :span="8"><div class="k-chart" id="main2"></div></el-col>
        <el-col :span="8"><div class="k-chart" id="main3"></div></el-col>
      </el-row>
    </basic-container>

  </div>
</template>

<script>
  import {getStatisticsData, snapUpPeopleYesterday, snapUpPeopleToday} from "@/api/platform/datachart";
  import { mapGetters } from "vuex";
  import {bar, line} from '../../option/echarts/options.js'
  export default {
    created() {
      this.option.data[0].click = function () {
          this.openBox(1);
      }.bind(this);
      this.option2.data[0].click = function () {
        this.openBox(2);
      }.bind(this);
    },
    data() {
      return {
        userBox: false,
        snapUpPeopleData: [],
        userOption: {
          menu: false,
          addBtn: false,
          header: false,
          index: true,
          column: [
            {
              label: '姓名',
              prop: 'realName',
              width: 200,
            }, {
              label: '昵称',
              width: 200,
              prop: 'name'
            }, {
              label: '手机',
              width: 200,
              prop: 'phone'
            }
          ]
        },
        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)',
            },
            {
              title: '今日收款金额',
              count: 0,
              icon: 'el-icon-setting',
              color: 'rgb(117, 56, 199)',
              decimals:2,
            },
            {
              title: '今日打款金额',
              count: 0,
              icon: 'el-icon-setting',
              color: 'rgb(117, 56, 199)',
              decimals:2,
            },
          ]
        },
        option2: {
          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)',

            },
            {
              title: '昨日收款金额',
              count: 0,
              icon: 'el-icon-setting',
              color: 'rgb(117, 56, 199)',
              decimals:2,
            },
            {
              title: '昨日打款金额',
              count: 0.00,
              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: "人数"},
        ]
      }
    },
    computed: {
      ...mapGetters(["colorName"])
    },
    watch: {
      colorName(val){
        this.drawChart(val);
      }
    },
    methods: {
      drawChart(color) {
        for (let i = 0; i < this.charts.length; i++) {
          let option = this.charts[i].type == 'line' ? {...line} : {...bar};
          option.color = color;
          if(this.charts[i].chart) {
            this.charts[i].chart.clear();
            this.charts[i].chart.setOption(option,true);//true重绘
          }else {
            let myechart = echarts.init(document.getElementById(this.charts[i].id));
            myechart.setOption(option);
            this.charts[i].chart = myechart;
          }
        }
      },
      drawChart2(res, charts) {
        const date = [];
        const data = [];
        res.forEach(e => {
          date.push(e.date);
          data.push(e.total)
        })
        let obj = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [{
            type: 'category',
            data: date,
            axisTick: {
              alignWithLabel: true
            }
          }],
          yAxis: [{
            type: 'value'
          }],
          series: [{
            name: charts.desc,
            type: charts.type,
            barWidth: '60%',
            data: data,
            label: {
              show: true,
              position: 'top',
              textStyle: {
                color: 'black',
                fontSize: 16
              }
            }
          }]
        };

        let option = Object.assign({}, {color: this.$store.state.common.colorName, title: {show: true,text: charts.name}}, obj)
        if(charts.chart) {
          charts.chart.clear();
          charts.chart.setOption(option,true);//true重绘
        } else {
          let myechart = echarts.init(document.getElementById(charts.id))
          myechart.setOption(option);
          charts.chart = myechart
        }
      },
      initData() {
        getStatisticsData().then(res => {
          const today = res.data.data.today;
          this.option.data[0].count = today.snapUpPeopleCount;
          this.option.data[1].count = today.orderCount;
          this.option.data[2].count = today.amountCollected;
          this.option.data[3].count = today.amountRemit;

          const yesterday = res.data.data.yesterday;
          this.option2.data[0].count = yesterday.snapUpPeopleCount;
          this.option2.data[1].count = yesterday.orderCount;
          this.option2.data[2].count = yesterday.amountCollected;
          this.option2.data[3].count = yesterday.amountRemit;

          const stockData = res.data.data.stockData;
          this.drawChart2(stockData, this.charts[0]);
          const remitData = res.data.data.remitData;
          this.drawChart2(remitData, this.charts[1]);
          const peopleData = res.data.data.peopleData;
          this.drawChart2(peopleData, this.charts[2]);
        })
      },
      openBox(type) {
        if (type === 1) {
          snapUpPeopleToday().then(res => {
            this.snapUpPeopleData = res.data.data;
            this.userBox = true;
          })
        }
        if (type === 2) {
          snapUpPeopleYesterday().then(res => {
            this.snapUpPeopleData = res.data.data;
            this.userBox = true;
          })
        }
      }
    },
    mounted() {
      // this.drawChart(this.colorName)
      // this.drawChart(this.$store.state.common.colorName)
      this.initData();
    }
  }
</script>

<style>
  .k-chart {
    width: 400px;
    height: 300px;
  }
</style>
