<template>
  <!-- 左侧  曲线图 -->
  <div class="chart-block">
    <!-- 左侧 折线图 -->
    <div class="chart-container">
      <div ref="chart" class="bar-line-chart"></div>
    </div>

      <!-- 右侧 两个环形图 -->
    <div class="chart-container-right">
      <v-chart class="pie-chart" :options="pieOptionOne" style="width: 150px;height:100px;margin-left: -11%;margin-top: 5%;"/>
      <v-chart class="pie-chart" :options="pieOptionTwo" style="width: 150px;height:100px;margin-left: -11%;margin-top: 5%;"/>
    </div>
  </div>
</template>

<script>
import VChart from 'vue-echarts';
import echarts from 'echarts';
import 'echarts/lib/chart/bar'
import 'echarts/lib/chart/line'
import 'echarts/lib/chart/pie'
import 'echarts/lib/component/legend'
import 'echarts/lib/component/tooltip'
import { currentGET } from 'api/modules';


export default {
  name: 'LeftBottomChart',  
  components: { VChart },
  data() {
    return {
      /* 环形图1 - 月度用氢量 */
      pieOptionOne: {
        backgroundColor: 'transparent',
        tooltip: { show: false },
        title: {
          text: '0吨',
          //subtext: '月度用氢量',
          left: 'center',
          top: '40%',
          textStyle: { color: '#fff', fontSize: 18 },
          subtextStyle: { color: '#fff', fontSize: 18}
        },
        graphic: [
          {
            type: 'text',
            left: '0px',     // 根据需要调整文字与图表的间距
            top: 'center',  // 垂直居中
            style: {
              text: '月\n度\n用\n氢\n量',  // 每个字符换行显示
              fill: '#fff',
              font: '16px sans-serif',
            }
          }
        ],
        series: [
          {
            name: '月度用氢量',
            type: 'pie',
            radius: ['70%', '90%'],
            hoverAnimation: false,
            label: { show: false },
            labelLine: { show: false },
            data: [
              { value: 5, name: '用氢量', itemStyle: { color: '#7d70f9' } },
              { value: 95, name: 'other', itemStyle: { color: '#2f4c6e' } }
            ]
          }
        ]
      },

      /* 环形图2 - 年度用氢量 */
      pieOptionTwo: {
        backgroundColor: 'transparent',
        tooltip: { show: false },
        title: {
          text: '0万',
          //subtext: '年度用氢量',
          left: 'center',
          top: '40%',
          textStyle: { color: '#fff', fontSize: 18 },
          subtextStyle: { color: '#fff', fontSize: 12 }
        },
        graphic: [
          {
            type: 'text',
            left: '0px',     // 根据需要调整文字与图表的间距
            top: 'center',  // 垂直居中
            style: {
              text: '年\n度\n用\n氢\n量',  // 每个字符换行显示
              fill: '#fff',
              font: '16px sans-serif',
            }
          }
        ],
        series: [
          {
            name: '年度用氢量',
            type: 'pie',
            radius: ['70%', '90%'],
            hoverAnimation: false,
            label: { show: false },
            labelLine: { show: false },
            data: [
              { value: 85, name: '用氢量', itemStyle: { color: '#00BAFF' } },
              { value: 15, name: 'other', itemStyle: { color: '#2f4c6e' } }
            ]
          }
        ]
      },
      monthItems:[],
      monthHydrogen:[],
      monthMileage:[],
      monthCarbon:[],
      seriesData:['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
    }    
  },
  mounted() {
    this.getMonthData();
  },
  methods: {
    getMonthData() {
        currentGET("big2").then((res) => {
          console.log('月度碳减排');          
          this.monthItems = res.data;
          console.log(this.monthItems);
          const currentMonth = new Date().getMonth() + 1; // 加1以得到1-12的月份
          this.monthItems.forEach((item) => {
            // this.monthHydrogen.push(item.monthHydrogen);
            // this.monthMileage.push(item.monthMileage);
            let month = parseInt(item.months.substring(5,7));
            if(month === currentMonth){
                this.pieOptionOne.title.text =  item.monthHydrogen + '\nkg';
            }
            this.monthMileage[month-1] = item.monthMileage;
            this.monthCarbon[month-1] = item.monthCarbon;
            this.monthHydrogen[month-1] = item.monthHydrogen;
          });
          //console.log('用氢量：'+ this.monthHydrogen);
          //console.log('里程数：'+ this.monthMileage);
          this.getYearData();
          this.initChart();

        });
    },
    initChart() 
    {
      let chart = echarts.init(this.$refs.chart);
      let option = {
        grid:{
          left:'18%'
        },
        tooltip: {
          trigger: 'axis',
          //   formatter: (params) => {
          //   console.log(params)
          //   return `用氢量：${params[0].value}kg<br/>用电量：${params[1].value}kWh<br/>行驶里程：${params[2].value}km`;
          // }
          formatter: (params) => {
            console.log(params)
            return `用氢量：${params[0].value}kg<br/>行驶里程：${params[1].value}km`;
          }
        },
        legend: {
          //data: ['用氢量', '用电量', '行驶里程'],
          data: ['用氢量(kg)', '行驶里程(km)'],
          textStyle: { color: '#eee' }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
          axisLine: { lineStyle: { color: '#fff' } }
        },
        yAxis: {
          type: 'value',
          axisLine: { lineStyle: { color: '#29A0CA' } },
          splitLine: { lineStyle: { color: '#091a40' } },
          axisLabel: {
            align: 'left',
            margin:70,
            width: 100, //将内容的宽度固定
            // overflow: 'truncate', //超出的部分截断
            formatter: '{value}kg'
          }

        },
        series: [
          {
            name: '用氢量(kg)',
            type: 'line',
            //data: [5000, 7000, 10000, 8000, 6000, 11000, 9000, 7000, 5000, 7050, 10020, 8900],
             data: this.monthHydrogen,
            // data: [11865.86,11687.64,18874.66,11311.62, 0, 0, 0, 0, 0, 0, 0, 0],
            itemStyle: { color: '#3399ff' }
          },
          // {
          //   name: '用电量',
          //   type: 'line',
          //   //data: [6000, 8000, 12000, 10000, 5000, 10000, 9500, 7200, 5000, 3000, 10000, 8500],
          //   data: [60, 80, 120, 0, 0, 0, 0, 0, 0, 0, 0, 0],
          //   //itemStyle: { color: '#3f89ff' }
          //   itemStyle: { color: '#29a0ca' }
          // },
          {
            name: '行驶里程(km)',
            type: 'line',
            //data: [4000, 9000, 9500, 7000, 9000, 12000, 10000, 8000, 5000, 7000, 10000, 8000],
            data: this.monthMileage,
            //data: [20219.1,332767.1,1671592.3,330955, 0, 0, 0, 0, 0, 0, 0, 0],
            itemStyle: { color: '#a060ff' }
          }
        ]
      };
      chart.setOption(option);
    },
    getYearData() {
        currentGET("big3").then((res) => {
          console.log('年度碳减排量');
          console.log(res);
          this.pieOptionTwo.title.text = res.data.yearHydrogen + '\nkg';
        });
    }
  }
};
</script>

<style scoped>
.chart-block {
  display: flex;
  justify-content: space-around;
  align-items: center;
  /* 自行控制宽高，若嵌入大屏可由外层决定大小 */
  width: 800px;
  height: 300px;
  /* 背景可保持透明，方便嵌入大屏的背景 */
  background: transparent;
}
.chart-container {
  margin-left: -20px;
  
  width: 55%;
  height:100%;
}

.bar-line-chart {
  width: 100%;
  height: 100%;
}
/* 右侧两个环形图的布局 */
.chart-container-right {
  padding-right: 20px;
  width: 44%;
  height: 100%;
}

.pie-chart {
  width: 150px;
  height: 160px;
}
</style>
