<template>
  <div class="dashboard-editor-container">
    <h1>{{$t('index.welcome')}}</h1>
    <el-form :inline="true" style="margin: 20px 0 10px 0;">
  <el-form-item :label="$t('index.时间范围')">
    <el-date-picker
      v-model="dateRange"
      type="daterange"
      range-separator="-"
      :start-placeholder="$t('index.开始日期')"
      :end-placeholder="$t('index.结束日期')"
      value-format="yyyy-MM-dd"
      style="width: 300px;"
    />
  </el-form-item>
  <el-form-item>
    <el-button type="primary" icon="el-icon-search" @click="handleStatQuery">{{$t('index.查询')}}</el-button>
  </el-form-item>
</el-form>
    <panel-group :sangsuz="sssum"/>

    <el-row style="background:#fff;padding:16px 16px 0 16px;margin-bottom:32px;">
      <div class="hengxb">
        <div :class="mrqx=='newVisitis'?'anniu ddl':'anniu dje'" @click="handleSetLineChartData('newVisitis')">{{$t('index.全年总订单')}}：{{orcount}}</div>
        <div :class="mrqx=='messages'?'anniu ddl':'anniu dje'" @click="handleSetLineChartData('messages')">{{$t('index.全年订单金额')}}：{{ordersum}}</div>
      </div>
      <line-chart v-if="language" :chart-data="oreData"/>
    </el-row>

<!--    <el-row :gutter="32">
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <raddar-chart />
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <pie-chart />
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <bar-chart />
        </div>
      </el-col>
    </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 { getusersl,getordersum } from "@/api/index/index";
import Bus from '../utils/Bus.js'
export default {
  name: 'Index',
  components: {
    PanelGroup,
    LineChart,
    RaddarChart,
    PieChart,
    BarChart
  },
  data() {
    return {
      language:true,
      mrqx:'newVisitis',
      orcount:0,
      ordersum:0,
      lineChartData:{},
      oreData:{},
      sssum:{
        qisSum:0,
        sjiaSum:0,
        storeSum:0,
        userSum:0
      },
      dateRange: null,
    }
  },
  created() {
    this.getSum();
    this.getorderSum();
  },
  mounted () {
    var that = this;
     Bus.$on('l18zh', content => {
        that.language = false;
         this.oreData.actname =  this.mrqx=='newVisitis'?this.$t('index.订单量'):this.$t('index.订单金额');
        setTimeout(function(){
           that.language = true;
        },5)

      });
  },
  methods: {
    getSum() {
      console.log("日期",this.dateRange)
      console.log("日期1",this.dateRange?.[0])
      console.log("日期2",this.dateRange?.[1])
      getusersl( this.dateRange?.[0], this.dateRange?.[1] ).then(res => {
        console.log("数据",res)
        this.sssum = res.data;
      });
    },
    getorderSum() {
      getordersum().then(res => {
        console.log("订单数据",res)
        this.orcount = res.data.orcount;
        this.ordersum = res.data.ordersum;
        this.lineChartData = {
          newVisitis: {
            actualData: res.data.counlist,
            actname:this.$t('index.订单量')
          },
          messages: {
            actualData: res.data.sumlist,
            actname:this.$t('index.订单金额')
          }
        }
        this.oreData = this.lineChartData.newVisitis;
      });
    },
    handleSetLineChartData(type) {
      console.log("type",type)
      console.log("this.lineChartData",this.lineChartData)
      this.mrqx = type;
      this.oreData = this.lineChartData[type];
      this.oreData.actname =  type=='newVisitis'?this.$t('index.订单量'):this.$t('index.订单金额');
    },
    handleStatQuery() {
    // 查询统计数据
    this.getSum();
    // this.getorderSum();
  },
  }
}
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;
  .hengxb{
    display: flex;
    align-items: center;
    width: 600px;
    margin-bottom: 20px;
    .anniu{
      padding:5px 10px;
      border-radius: 5px;
      margin-right: 10px;
    }
    .ddl{
      background-color: #55aaff;
      color: #fff;
    }
    .dje{
      background-color: #f5f5f5;
      color: #bababa;
    }
  }
  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

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