<template>
  <div class="dashboard-editor-container">
    <div class="block" style="margin-bottom: 10px;display: flex;justify-content: flex-end;">
      <el-date-picker @change="changeDate" v-model="search.date" value-format="yyyy-MM-dd" type="daterange"
        :picker-options="pickerOptions" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
        align="right">
      </el-date-picker>
    </div>

    <panel-group :totaldata="totaldata" />
    <el-row :gutter="32">
      <el-col :xs="24" :sm="24" :lg="24">
        <div class="chart-wrapper">
          <div class="chart-title">
            <router-link to="/toolbox/exception">客户与订单</router-link>
          </div>
          <line-chart :chartData="lineArr" />
        </div>

      </el-col>
    </el-row>

  </div>
</template>

<script>
  import PanelGroup from './components/PanelGroup'
  // import BarChart from './components/BarChart'
  import PieChart from './components/PieChart'
  import LineChart from './components/LineChart'

  import {
    getcustomerData,
    getorderData,
    getcustomeritemData,
    getorderitemData
  } from "../../api/dashboard.js"

  export default {
    name: 'DashboardAdmin',
    components: {
      PanelGroup,
      PieChart,
      LineChart
    },
    data() {
      return {
        search: {
          sdate: "",
          edate: "",
          date: []
        },
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        totaldata: {
          customer: {},
          order: {}
        },
        lineArr: {
          xArr: [],
          legendArr: ["客户", "订单", "成交额"],
          series: [{
              name: '客户',
              type: 'line',
              stack: 'Total',
              data: []
            },
            {
              name: '订单',
              type: 'line',
              stack: 'Total',
              data: []
            },
            {
              name: '成交额',
              type: 'line',
              stack: 'Total',
              data: []
            }
          ]
        }
      }
    },
    created: function() {
      let that = this
      this.search.date = this.getCurrMonthDays()
      that.search.sdate = this.search.date[0]
      that.search.edate = this.search.date[1]
    },
    mounted() {
      this.$nextTick(() => {
        this.load();
        this.loadItemData();
      })

    },
    methods: {
      changeDate(e) {
        var that = this;
        this.search.date = e;
        that.search.sdate = e[0];
        that.search.edate = e[1];
        this.load();
      },
      getCurrMonthDays() {
        let date = []
        let start = this.$moment().add('month', 0).format('YYYY-MM') + '-01'
        let start_1 = this.$moment(start).format('YYYY-MM-DD')
        let end = this.$moment(start).add('month', 1).format('YYYY-MM-DD') //因为查询条件不包含这天
        date.push(start_1)
        date.push(end)
        return date

      },
      async load() {
        var that = this;
        await getcustomerData({
          start_date: that.search.sdate,
          end_date: that.search.edate,
        }).then(res => {
          that.totaldata.customer = res;
        })

        await getorderData({
          start_date: that.search.sdate,
          end_date: that.search.edate,
        }).then(res => {
          that.totaldata.order = res;
        })
      },
      loadItemData() {
        var that = this;

        getcustomeritemData().then((res) => {

          for (var m of res) {
            that.lineArr.xArr.push(m.date.split('-')[1] + "-" + m.date.split('-')[2]);
            that.lineArr.series[0].data.push(m.customer_total);
          }
        }).catch((res) => {})

        getorderitemData().then((res) => {

          for (var m of res) {
            that.lineArr.series[1].data.push(m.order_total);
            that.lineArr.series[2].data.push(m.paid_money_total);

          }
        }).catch((res) => {})
      }
    }
  }
</script>

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

    .github-corner {
      position: absolute;
      top: 0px;
      border: 0;
      right: 0;
    }

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

      .chart-title {
        font-size: 16px;
        margin-bottom: 10px;
        display: flex;
        justify-content: space-between;
      }
    }
  }

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