<template>
  <div class="chart-block">
    <!-- 左侧 柱状+折线图 -->
    <div class="chart-container">
      <v-chart class="bar-line-chart" :options="barLineOption"  style="width: 390px;height: 250px;"/>
    </div>

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

<script>
import VChart from 'vue-echarts'
import * as 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: 'ChartBlock',
  components: { VChart },
  data() {
    return {
      /* 柱状图 + 折线图 */
      barLineOption: {
        backgroundColor: 'transparent', // 让背景透明，方便在大屏布局中适配
        tooltip: { trigger: 'axis',
           formatter: (params) => {
            console.log(params)
            return `碳减排量：${params[0].value}kg<br/>行驶里程：${params[1].value}km`;
          }
         },
        legend: {
          data: ['碳减排量(kg)', '行驶里程(km)'],
          textStyle: { color: '#000000' }
        },
        grid: {
          left: '18%',
          right: '18%',
          top: '10%',
          bottom: '10%'
        },
        xAxis: {
          type: 'category',
          data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
          axisLine: { lineStyle: { color: '#000000' } },
          axisLabel: { color: '#000000' }
        },
        yAxis: [
          {
            type: 'value',
            // name: '碳减排量',
            axisLine: { lineStyle: { color: '#000000' } },
            axisLabel: { color: '#000000' },
            splitLine: { 
              show: true,
              lineStyle: { color: '#e8e8e8', type: 'dashed' }
            },
            axisLabel: {
              formatter: '{value}kg'
            }
          },
          {
            type: 'value',
            // name: '行驶里程',
            axisLine: { lineStyle: { color: '#000000' } },
            axisLabel: { color: '#000000' },
            splitLine: { 
              show: true,
              lineStyle: { color: '#e8e8e8', type: 'dashed' }
            },
            axisLabel: {
              formatter: '{value}km'
            }
          }
        ],
        series: [
          {
            name: '碳减排量(kg)',
            type: 'bar',
            data: [1000, 1500, 1800, 1200, 2000, 2500, 1800, 2200, 3000, 3500,2600, 3600],
            itemStyle: { color: '#1890ff' },
            barWidth: 14
          },
          {
            name: '行驶里程(km)',
            type: 'line',
            yAxisIndex: 1,

            data: [3500, 400, 4200, 3800, 4500, 4800, 4200, 4600, 4900, 5200, 4700, 5500],
            itemStyle: { color: '#52c41a' },
            smooth: true,
            lineStyle: { width: 2 },
            symbol: 'circle',
            symbolSize: 8
          }
        ]
      },

      /* 环形图1 - 年度碳减排量 */
      pieOptionOne: {
        backgroundColor: 'transparent',
        tooltip: { show: false },
        title: {
          text: '0吨',
          //subtext: '年度碳减排量',
          left: 'center',
          top: '40%',
          textStyle: { color: '#000000', fontSize: 18 },
          subtextStyle: { color: '#000000', fontSize: 18}
        },
        graphic: [
          {
            type: 'text',
            left: '0px',     // 根据需要调整文字与图表的间距
            top: 'center',  // 垂直居中
            style: {
              text: '年\n度\n碳\n减\n排\n量',  // 每个字符换行显示
              fill: '#000000',
              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: '#1890ff' } },
              { value: 95, name: 'other', itemStyle: { color: '#f0f0f0' } }
            ]
          }
        ]
      },

      /* 环形图2 - 年度行驶里程 */
      pieOptionTwo: {
        backgroundColor: 'transparent',
        tooltip: { show: false },
        title: {
          text: '0万',
          //subtext: '年度行驶里程',
          left: 'center',
          top: '40%',
          textStyle: { color: '#000000', fontSize: 18 },
          subtextStyle: { color: '#000000', fontSize: 12 }
        },
        graphic: [
          {
            type: 'text',
            left: '0px',     // 根据需要调整文字与图表的间距
            top: 'center',  // 垂直居中
            style: {
              text: '年\n度\n行\n驶\n里\n程',  // 每个字符换行显示
              fill: '#000000',
              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: '#52c41a' } },
              { value: 15, name: 'other', itemStyle: { color: '#f0f0f0' } }
            ]
          }
        ]
      },
      monthItems:[],
      monthCarbon:[],
      monthMileage:[]
    }
  },
  mounted() {
    this.getMonthData();
    this.getYearData();
  },
  methods: {
    getMonthData() {
        currentGET("big2").then((res) => {
          console.log('月度碳足迹');          
          this.monthItems = res.data;
          console.log(this.monthItems);
          this.monthItems.forEach((item) => {
            console.log(item.monthCarbon);
            console.log(item.monthMileage);
            this.monthCarbon.push(item.monthCarbon);
            this.monthMileage.push(item.monthMileage);
          });
          console.log('碳减排：'+ this.monthCarbon);
          console.log('里程数：'+ this.monthMileage);
          this.barLineOption.series[0].data = this.monthCarbon;
          this.barLineOption.series[1].data = this.monthMileage;        
        });
    },
    getYearData() {
        currentGET("big3").then((res) => {
          console.log('年度碳减排量');
          console.log(res);
          this.pieOptionOne.title.text = res.data.yearCarbonTon + '吨';
          this.pieOptionTwo.title.text = res.data.yearMileage + '万km';
        });
    }
  }
}
</script>

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

.chart-container {
  margin-left: -30px;
  width: 50%;
  height: 100%;
}

.bar-line-chart {
  width: 100%;
  height: 100%;
}

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

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