<template>
  <div>
<!--    <h1>电桩</h1>-->
<!--    <hr />-->
<!--    <el-table-->
<!--      stripe-->
<!--      border-->
<!--      :data="tableData"-->
<!--      style="width: 100%">-->
<!--      <el-table-column-->
<!--        label="序号"-->
<!--        type="index"-->
<!--      >-->
<!--      </el-table-column>-->
<!--      <el-table-column-->
<!--        prop="pileSn"-->
<!--        label="编号">-->
<!--      </el-table-column>-->
<!--      <el-table-column-->
<!--        prop="stationName"-->
<!--        label="名称"-->
<!--      >-->
<!--      </el-table-column>-->
<!--      <el-table-column-->
<!--        prop="stationAddress"-->
<!--        label="电站">-->
<!--      </el-table-column>-->
<!--      <el-table-column-->
<!--        prop="type"-->
<!--        label="接口">-->
<!--      </el-table-column>-->
<!--      <el-table-column-->
<!--        prop="power"-->
<!--        label="功率">-->
<!--      </el-table-column>-->
<!--      <el-table-column-->
<!--        prop="degree"-->
<!--        label="度数">-->
<!--      </el-table-column>-->
<!--      <el-table-column-->
<!--        prop="electricityPrice"-->
<!--        label="电费">-->
<!--      </el-table-column>-->
<!--      <el-table-column-->
<!--        prop="servicePrice"-->
<!--        label="服务费">-->
<!--      </el-table-column>-->
<!--      <el-table-column-->
<!--        prop="chargingNumber"-->
<!--        label="充电次数">-->
<!--      </el-table-column>-->
<!--    </el-table>-->
    <h1>概况</h1>
    <hr />
    <div style="display: flex;justify-content: space-between">
      <div class="box">
        <div>总充电电量</div>
        <div class="box-text">
          <b class="box-h1">{{ generalSituation.totalChargingDegree }}</b>
          <i>度</i>
          <el-image
            style="width: 80px; height: 80px"
            :src="require('@/assets/images/lightning.png')"
          ></el-image>
        </div>
        <div class="progress"></div>
      </div>
      <div class="box">
        <div>总充电费用</div>
        <div class="box-text">
          <b class="box-h1">{{ generalSituation.totalChargingAmount }}</b>
          <i>元</i>
          <!-- <image src="/assets/images/login-background.jpg"></image> -->
          <el-image
            style="width: 80px; height: 80px"
            :src="require('@/assets/images/zongfeiyong.png')"
          ></el-image>
        </div>
        <div class="progress"></div>
      </div>
      <div class="box">
        <div>总充电订单数</div>
        <div class="box-text">
          <b class="box-h1">{{ generalSituation.totalChargingQuantity }}</b>
          <i>笔</i>
          <el-image
            style="width: 80px; height: 80px"
            :src="require('@/assets/images/dingdan.png')"
          ></el-image>
        </div>
        <div class="progress"></div>
      </div>
      <div class="box">
        <div>总充电设备数量</div>
        <div class="box-text">
          <b class="box-h1">{{ generalSituation.totalPileQuantity }}</b>
          <i>座</i>
          <el-image
            style="width: 80px; height: 80px"
            :src="require('@/assets/images/shebei.png')"
          ></el-image>
        </div>
        <div class="progress"></div>
      </div>
      <div class="box"  v-hasRole="['admin', 'common']">
        <div>总客户余额</div>
        <div class="box-text">
          <b class="box-h1">{{ generalSituation.totalMemberAmount }}</b>
          <i>元</i>
          <el-image
            style="width: 80px; height: 80px"
            :src="require('@/assets/images/yue.png')"
          ></el-image>
        </div>
        <div class="progress"></div></div>
<!--      <div class="box">-->
<!--        <div>总服务费金额</div>-->
<!--        <div class="box-text">-->
<!--          <b class="box-h1">{{ generalSituation.totalPileQuantity }}</b>-->
<!--          <i>元</i>-->
<!--          <el-image-->
<!--            style="width: 80px; height: 80px"-->
<!--            :src="require('@/assets/images/shebei.png')"-->
<!--          ></el-image>-->
<!--        </div>-->
<!--        <div class="progress"></div>-->
<!--      </div>-->
    </div>
    <h1>订单</h1>
    <hr />
    <el-button style="background-color: #1ab394; color: #ffffff"
      >最近30天</el-button
    >
    <div ref="chart" :style="{ width: '100%', height: '500px' }"></div>
    <hr />
    <!-- <h1>启动充电渠道</h1> -->
    <!-- <div ref="chartDom" :style="{ width: '50%', height: '550px' }"></div> -->
    <!-- <hr /> -->
    <!-- <hr /> -->
    <!-- <h1>设备</h1> -->
  </div>
</template>
<script>
import Echarts from "echarts";
import { getGeneralSituation, getOrderInfo } from "@/api/index";

export default {
  data() {
    return {
      chart: null,
      generalSituation: {},
      orderInfo: [],
      tableData: [{
        pileSn:'9527',
        stationName:'有电充充电桩',
        stationAddress:'昆山市黄埔江南路',
        type:'直流',
        power:'2131',
        degree:'215',
        electricityPrice:'565',
        servicePrice:'9274',
        chargingNumber:'624',

      }]
    };
  }, //图表实例
  created() {
    this.getGeneral();
  },
  mounted() {
    this.init();
    this.rose();
  },
  methods: {
    async getGeneral() {
      const { obj } = await getGeneralSituation({});
      console.log("首页信息", obj);
      this.generalSituation = obj;
    },
    async getOrder() {
      const { obj } = await getOrderInfo({});
      this.orderInfo = obj;
      console.log("订单信息", this.orderInfo);
    },
    async init() {
      await this.getOrder();
      this.$nextTick(() => {
        this.chart = Echarts.init(this.$refs.chart);
        console.log("柱状图", this.orderInfo);
        let str = this.orderInfo.map((item) => {
          return item.date;
        });
        console.log(str);
        let option = {
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow",
            },
          },
          toolbox: {
            feature: {
              dataView: { show: true, readOnly: false },
              magicType: { show: true, type: ["line", "bar"] },
              restore: { show: true },
              saveAsImage: { show: true },
            },
          },
          legend: {
            data: [
              "总订单金额",
              "尖时段总用电量",
              "峰时段总用电量",
              "平时段总用电量",
              "谷时段总用电量",
            ],
          },
          dataZoom: {
            show: false,
            start: 0,
            end: 100,
          },
          grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true,
          },
          xAxis: [
            {
              type: "category",
              boundaryGap: true,
              data: str,
              axisLine: { onZero: false },
            },
          ],
          animation: true,
          animationDuration: 2000,
          yAxis: [
            {
              type: "value",
              name: "电费",
              position: "left",
              alignTicks: true,
              axisLabel: {
                formatter: "{value} ￥",
              },
            },
            {
              type: "value",
              name: "电量",
              position: "right",
              alignTicks: true,
              axisLabel: {
                formatter: "{value} kwh",
              },
            },
          ],
          series: [
            {
              name: "总用电量",
              type: "line",
              data: this.orderInfo.map((item) => {
                return item.totalElectricity;
              }),
              symbolSize: 1,
              symbol: "circle",
              itemStyle: {
                normal: {
                  color: "rgba(252,120,48,0)",
                  barBorderRadius: 0,
                },
              },
            },
            {
              name: "总订单金额",
              type: "line",
              yAxisIndex: 0,
              data: this.orderInfo.map((item) => {
                return item.totalOrderAmount;
              }),
            },
            {
              name: "尖时段总用电量",
              type: "bar",
              yAxisIndex: 1,
              stack: "one",
              emphasis: {
                focus: "series",
                blurScope: "coordinateSystem",
              },
              data: this.orderInfo.map((item) => {
                return item.totalSharpUsedElectricity;
              }),
              barWidth: "35%", //柱子宽度
              // barGap: 1, //柱子之间间距
              itemStyle: {
                normal: {
                  color: "#ff4949",
                  opacity: 1,
                  barBorderRadius: 1, //柱子菱角
                },
              },
            },
            {
              name: "峰时段总用电量",
              type: "bar",
              yAxisIndex: 1,
              stack: "one",
              emphasis: {
                focus: "series",
                blurScope: "coordinateSystem",
              },
              data: this.orderInfo.map((item) => {
                return item.totalPeakUsedElectricity;
              }),
              barWidth: "35%",
              itemStyle: {
                normal: {
                  color: "#ffba00",
                  opacity: 1,
                  barBorderRadius: 1, //柱子菱角
                },
              },
            },
            {
              name: "平时段总用电量",
              type: "bar",
              yAxisIndex: 1,
              stack: "one",
              data: this.orderInfo.map((item) => {
                return item.totalFlatUsedElectricity;
              }),
              emphasis: {
                focus: "series",
                blurScope: "coordinateSystem",
              },
              itemStyle: {
                normal: {
                  color: "#12ce65",
                  opacity: 1,
                  barBorderRadius: 1, //柱子菱角
                },
              },
            },
            {
              name: "谷时段总用电量",
              type: "bar",
              yAxisIndex: 1,
              stack: "one",
              data: this.orderInfo.map((item) => {
                return item.totalValleyUsedElectricity;
              }),
              emphasis: {
                focus: "series",
                blurScope: "coordinateSystem",
              },
              itemStyle: {
                normal: {
                  color: "#909399",
                  opacity: 1,
                  barBorderRadius: 1, //柱子菱角
                },
              },
            },
          ],
        };
        this.chart.setOption(option);
      });
    },
    rose() {
      this.$nextTick(() => {
        this.chartDom = Echarts.init(this.$refs.chartDom);
        let option = {
          legend: {
            top: "bottom",
          },
          toolbox: {
            show: true,
            feature: {
              mark: { show: true },
              dataView: { show: true, readOnly: false },
              restore: { show: true },
              saveAsImage: { show: true },
            },
          },
          series: [
            {
              name: "Nightingale Chart",
              type: "pie",
              radius: [50, 250],
              center: ["50%", "50%"],
              roseType: "area",
              itemStyle: {
                borderRadius: 8,
              },
              data: [
                { value: 40, name: "rose 1" },
                { value: 38, name: "rose 2" },
                { value: 32, name: "rose 3" },
                { value: 30, name: "rose 4" },
                { value: 28, name: "rose 5" },
                { value: 26, name: "rose 6" },
                { value: 22, name: "rose 7" },
                { value: 18, name: "rose 8" },
              ],
            },
          ],
        };
        this.chartDom.setOption(option);
      });
    },
  },
};
</script>

<style>
.box {
  padding: 10px;
  font-size: 18px;
  color: #ffffff;
  background-color: #1ab3b3;
  border-radius: 8px;
  box-shadow: 0 15px 10px -11px #1ab394;
}
.box-h1 {
  margin-top: -14px;
  font-size: 47px;
}
.box-text {
  margin-top: -13px;
}
.progress {
  border: 3px solid #fff;
  margin-right: 30%;
}
</style>
