<template>
  <div class="front-page">
    <div class="page-title" >今日数据</div>
    <div class="data-container">
      <!-- <div class="data-card" style="width: 20%;">
        <div class="data-header">
          {{todayData.spaceNum}}
        </div>
        <div class="data-title">共享车位数</div>
      </div> -->
      <div class="data-card" style="width: 20%;">
        <div class="data-header">
          {{todayData.orderNum}}
        </div>
        <div class="data-title">订单数</div>
      </div>
      <div class="data-card" style="width: 20%;">
        <div class="data-header">
          <span style="font-size: 24px;">￥</span>&nbsp;
          {{ todayData.payPrice? todayData.payPrice.toFixed(2) : 0 }}
        </div>
        <div class="data-title">订单金额</div>
      </div>
      <div class="data-card" style="width: 20%;">
        <div class="data-header">
          <span style="font-size: 24px;">￥</span>&nbsp;
          {{ todayData.royaltyPrice? todayData.royaltyPrice.toFixed(2) : 0 }}
        </div>
        <div class="data-title">平台提成</div>
      </div>
    </div>
    <div style="margin: 20px 5px;font-size: 14px;color: #7F7F7F;">注：订单数、订单金额、平台提成不包含已取消的订单</div>
    <div class="" style="display:flex;  flex-direction: column;width:100%;margin-top: 30px">
      <div >
        <VueEcharts
          :options="chartOption1"
          :chartStyle="{ height: '320px' }"
          id="myChart3"
        />
      </div>
      <div style="margin-top: 0px">
        <VueEcharts
          :options="chartOption2"
          :chartStyle="{ height: '320px' }"
          id="myChart4"
        />
      </div>
    </div>
  </div>
</template>

<script>
const chart1 = {
  title: {
    text: "近30天的订单数",
    textStyle: {
      fontSize: 16,
    },
  },
  tooltip : {
    trigger: 'axis',
    formatter:'订单数:{c}',
    /*axisPointer: {
      type: 'cross',
      label: {
        backgroundColor: '#6a7985'
      }
    }*/
  },
  xAxis: {
    type: "category",
    data: [],
  },
  yAxis: {
    type: "value",
    axisLine: {
      show: false,
    },
    axisTick: {
      show: false,    // 是否显示坐标轴刻度
    },
  },
  series: [
    {
      data:[],
      type: "line",
      itemStyle: {
        normal: {
          color: "#6780CC", //折点颜色
          lineStyle: {
            color: "#6780CC", //折线颜色
          },
        },
      },
    },
  ],
};
const chart2 = {
  title: {
    text: "近30天的订单金额",
    textStyle: {
      fontSize: 16,
    },
  },
  tooltip : {
    trigger: 'axis',
    formatter:'订单金额:{c}',
    /*axisPointer: {
      type: 'cross',
      label: {
        backgroundColor: '#6a7985'
      }
    }*/
  },
  xAxis: {
    type: "category",
    data: [],
  },
  yAxis: {
    type: "value",
    axisLine: {
      show: false,
    },
    axisTick: {
      show: false,    // 是否显示坐标轴刻度
    },
  },
  series: [
    {
      data: [],
      type: "line",
      smooth: true,
      itemStyle: {
        normal: {
          color: "#FFC48A", //折点颜色
          lineStyle: {
            color: "#FF942A", //折线颜色
          },
        },
      },
    },
  ],
};
import CountTo from "vue-count-to";
import VueEcharts from "../components/VueEcharts/VueEcharts.vue";
import { getTodayData, getOrderNumNearly,getPayPriceNearly} from "@/api/index"

export default {
  name: 'Index',
  data() {
    return {
      todayData:{},
      orderNumList:[],
      orderNumDateList:[],
      payPriceList:[],
      payPriceDateList:[],
    };
  },
  components: {
    CountTo,
    VueEcharts,
  },
  mounted() {
    this.initTodayData();
    this.initEchartsData();
  },
  computed: {
    chartOption1() {
      chart1.xAxis.data = this.orderNumDateList;//日期
      chart1.series[0].data = this.orderNumList;//数据
      return Object.assign({}, chart1);
    },
    chartOption2() {
      chart2.xAxis.data = this.payPriceDateList;//日期
      chart2.series[0].data = this.payPriceList;//数据
      return Object.assign({}, chart2);
    },

  },
  methods: {
    // // 今日数据
    // initTodayData() {
    //   getTodayData().then(response => {
    //     this.todayData = response.data
    //   })
    // },
    // initEchartsData(){
    //   // 近30天的订单数
    //   getOrderNumNearly().then(response => {
    //     var result = response.data;
    //     if(result!=null && result!=undefined){
    //       this.orderNumList = result.orderNumList;
    //       this.orderNumDateList = result.dateList;
    //     }
    //   });
    //   // 近30天的订单金额
    //   getPayPriceNearly().then(response => {
    //     var result = response.data;
    //     if(result!=null && result!=undefined){
    //       this.payPriceList = result.payPriceList;
    //       this.payPriceDateList = result.dateList;
    //     }
    //   });
    // },
  }
}
</script>
<style lang="scss" scoped>
.page-title {
  font-size: 18px;
}
.data-container {
  display: flex;
  -ms-flex-pack: distribute;
  justify-content: space-around;
  margin-top: 30px;
}
.data-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #eee;
  padding: 20px 60px;
  border-radius: 20px;
}
.data-header {
  color: #ff6600;
  font-weight: bold;
  font-size: 30px;
}
.data-title {
  margin-top: 10px;
  font-size: 20px;
}
// .dashboard-editor-container {
//   padding: 32px;
//   background-color: #fff;
//   position: relative;

//   .chart-wrapper {
//     background: #fff;
//     padding: 16px 16px 0;
//     margin-bottom: 32px;
//   }
// }
.title {
  margin-top: 10px;
  font-size: 14px;
}

.front-page {
  padding: 20px;
  //display: flex;
  // justify-content: center;
  // align-items: center;
  //height: 80vh;
  //background-image: url("../assets/image/front_page.png");
  // background-size: cover;
}

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