<template>
  <div class="page m100">
    <div class="page-left-box">
      <!--  总览-->
      <div class="title">
        <span>总览</span>
        <div class="titleDate">
          <div
            v-for="(item, index) in overviewDate"
            :key="index"
            :class="[activeDate == index ? 'dateAc' : 'date']"
            @click="switchDate(index)"
          >
            {{ item.name }}
          </div>
        </div>
      </div>
      <div
        class="margin10 box-bg"
        style="
          display: flex;
          flex-wrap: wrap;
          flex-direction: column;
          align-content: space-around;
          justify-content: space-evenly;
        "
      >
        <div
          v-for="(item, index) in overviewList"
          :class="'overview-item' + index"
        >
          <span class="unit" style="margin-left: 1rem">{{ item.name }}</span>
          <p class="overviewValue">
            <span class="value">{{ item.num }}</span>
            <span class="unit">{{ item.unit }}</span>
          </p>
        </div>
      </div>
      <!--  碳流图-->
      <div class="title margin10">
        <span>碳流图</span>
      </div>
      <div class="margin10 box-bg" id=""></div>
      <!--  碳排放趋势-->
      <div class="title margin10">
        <span>碳排放趋势</span>
        <div class="titleDate">
          <div
            v-for="(item, index) in trendDate"
            :key="index"
            :class="[trendActiveDate == index ? 'dateAc' : 'date']"
            @click="trandSwitchDate(index)"
          >
            {{ item.name }}
          </div>
        </div>
      </div>
      <div class="margin10 box-bg">
        <div id="carbonTrends" style="width: 100%; height: 100%"></div>
        <div class="carbonTrendsReport"></div>
      </div>
    </div>
    <div class="page-right-box">
      <!--  碳排放强度 -->
      <div class="title">
        <span>碳排放强度</span>
      </div>
      <div class="margin10 box-bg" id="carbonIntensity"></div>
      <!--  各系统碳排放量统计-->
      <div class="title margin10">
        <span>各系统碳排放量统计</span>
      </div>
      <div class="margin10 box-bg" id="carbonEmissionStatistics"></div>
      <!--  碳中和-->
      <div class="title margin10">
        <span>碳中和</span>
      </div>
      <div class="margin10 box-bg">
        <div id="carbonNeutrality" style="width: 100%; height: 100%"></div>
        <div class="carbonNeutralityBg"></div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import * as echarts from "echarts";
import "echarts-gl";
import { getPie3D, getParametricEquation } from "@/utils/carbonNeutrality";

const getImageUrl = (name) => {
  return new URL(name, import.meta.url).href;
};
const overviewDate = ref([
  {
    name: "年",
  },
  {
    name: "月",
  },
]);
//总览
const activeDate = ref(0);
const overviewList = ref([
  {
    name: "总排放量",
    num: 83,
    unit: "万tCO2",
  },
  {
    name: "碳抵消量",
    num: 83,
    unit: "万tCO2",
  },
  {
    name: "碳减排量",
    num: 83,
    unit: "万tCO2",
  },
]);
//总览切换时间
function switchDate(index) {
  activeDate.value = index;
}
//碳趋势切换时间
function trandSwitchDate(index) {
  trendActiveDate.value = index;
}
//碳趋势
const trendActiveDate = ref(0);
const trendDate = ref([
  {
    name: "月",
  },
  {
    name: "日",
  },
]);
//碳趋势图表
function getCarbonTrends() {
  let myChart = echarts.init(document.getElementById("carbonTrends"));
  const option = {
    // backgroundColor: "#05224d",
    tooltip: {},
    grid: {
      top: "18%",
      left: "4%",
      right: "4%",
      bottom: "4%",
      containLabel: true,
    },
    xAxis: [
      {
        type: "category",
        axisLine: {
          //坐标轴轴线相关设置。数学上的x轴
          show: true,
          lineStyle: {
            // type:'dashed',
            color: "#557775",
            // color: "#233e64",
          },
        },
        axisLabel: {
          //坐标轴刻度标签的相关设置
          textStyle: {
            color: "#DDFFFD",
            margin: 40,
          },
        },

        axisTick: { show: false },
        boundaryGap: true,
        data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
      },
    ],
    yAxis: [
      {
        type: "value",
        name: "单位:万tCO2",
        nameTextStyle: {
          color: "#DDFFFD",
          // align: "right",
          padding: [0, 10, 0, 0],
        },
        min: 0,
        max: 2000,
        splitNumber: 5,
        splitLine: {
          show: true,
          lineStyle: {
            type: "dashed",
            color: "rgba(1, 39, 37, 0.30)",
          },
        },
        axisLine: { show: false },
        axisLabel: {
          textStyle: {
            color: "#DDFFFD",
          },
        },
        axisTick: { show: false },
      },
    ],
    series: [
      {
        name: "异常流量",
        type: "line",
        smooth: true, //是否平滑曲线显示
        // 			symbol:'circle',  // 默认是空心圆（中间是白色的），改成实心圆
        symbolSize: 0,

        lineStyle: {
          color: "#5BFAF1", // 线条颜色
        },
        areaStyle: {
          //区域填充样式
          //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              { offset: 0, color: "rgba(91, 250, 241, 0.40)" },
              { offset: 1, color: "rgba(91, 250, 241, 0)" },
            ],
            false
          ),

          shadowColor: "rgba(53,142,215, 0.9)", //阴影颜色
          shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
        },
        data: [200, 300, 400, 500, 600, 700, 800],
      },
    ],
  };
  myChart.setOption(option);
}
//碳排放强度
function getCarbonIntensity() {
  const offsetX = 10; //bar宽
  const offsetY = 5; //倾斜角度
  // 绘制左侧面
  const CubeLeft = echarts.graphic.extendShape({
    shape: {
      x: 0,
      y: 0,
    },
    buildPath: function (ctx, shape) {
      const xAxisPoint = shape.xAxisPoint;
      const c0 = [shape.x - 7, shape.y];
      const c1 = [shape.x + 7, shape.y];
      const c2 = [xAxisPoint[0] + 7, xAxisPoint[1]];
      const c3 = [xAxisPoint[0] - 7, xAxisPoint[1]];
      ctx
        .moveTo(c0[0], c0[1])
        .lineTo(c1[0], c1[1])
        .lineTo(c2[0], c2[1])
        .lineTo(c3[0], c3[1])
        .closePath();
      ctx.stroke();
    },
  });
  // 绘制右侧面
  const CubeRight = echarts.graphic.extendShape({
    shape: {
      x: 0,
      y: 0,
    },
    buildPath: function (ctx, shape) {
      const xAxisPoint = shape.xAxisPoint;
      const c1 = [shape.x + 7, shape.y];
      const c2 = [xAxisPoint[0] + 7, xAxisPoint[1]];
      const c3 = [xAxisPoint[0] + 7 + 7, xAxisPoint[1] - 10];
      const c4 = [shape.x + 7 + 7, shape.y - 5];
      ctx
        .moveTo(c1[0], c1[1])
        .lineTo(c2[0], c2[1])
        .lineTo(c3[0], c3[1])
        .lineTo(c4[0], c4[1])
        .closePath();
      ctx.stroke();
    },
  });
  // 绘制顶面
  const CubeTop = echarts.graphic.extendShape({
    shape: {
      x: 0,
      y: 0,
    },
    buildPath: function (ctx, shape) {
      const c1 = [shape.x - 7, shape.y];
      const c2 = [shape.x + 8, shape.y];
      const c3 = [shape.x + 15, shape.y - 5];
      const c4 = [shape.x - 2, shape.y - 5];
      ctx
        .moveTo(c1[0], c1[1])
        .lineTo(c2[0], c2[1])
        .lineTo(c3[0], c3[1])
        .lineTo(c4[0], c4[1])
        .closePath();
      ctx.stroke();
    },
  });
  // 注册三个面图形
  echarts.graphic.registerShape("CubeLeft", CubeLeft);
  echarts.graphic.registerShape("CubeRight", CubeRight);
  echarts.graphic.registerShape("CubeTop", CubeTop);
  let xAxisData = ["1月", "2月", "3月", "4月", "5月", "6月", "7月"];
  let seriesData = [100, 200, 400, 250, 360, 250, 340];
  // 绿色渐变
  // let colorArr = [["#12D5AF"], ["#0BC19D", "rgba(13,8,16,0)"], ["#68EFD4", "rgba(14,185,151,0)"]]
  // 蓝色渐变
  let colorArr = [
    ["rgba(0, 170, 193, 1)"],
    ["rgba(0, 224, 255, 1)", "rgba(0, 224, 255,0)"],
    ["rgba(0, 224, 255, 1)", "rgba(0, 224, 255,0)"],
  ];
  let myChart = echarts.init(document.getElementById("carbonIntensity"));
  const option = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
      formatter: function (params, ticket, callback) {
        const item = params[1];
        return item.name + " : " + item.value;
      },
    },
    color: "#01DDF9",
    legend: {
      icon: "rect",
      right: "4%",
      top: "3%",
      itemWidth: 20, // 标签宽度为20px
      itemHeight: 10, // 标签高度为10px
      textStyle: {
        color: "rgba(221, 255, 253, 1)",
      },
      data: ["单位面积碳排放强度限值"],
    },
    grid: {
      left: "4%",
      right: "5%",
      top: "18%",
      bottom: "5%",
      containLabel: true,
    },
    xAxis: {
      type: "category",
      data: xAxisData,
      axisLine: {
        show: true,
        lineStyle: {
          width: 1,
          type: "solid",
          color: "rgba(255, 255, 255, 0.20)",
        },
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        color: "rgba(221, 255, 253, 1)",
        fontSize: 14,
        interval: 0,
        // 使用函数模板，函数参数分别为刻度数值（类目），刻度的索引
        // formatter: function (value) {
        //   const length = value.length;
        //   if (length > 3) {
        //     const start = Math.floor(length / 2);
        //     const str =
        //       value.slice(0, start) + "\n" + value.slice(start, length);
        //     return str;
        //   }
        //   return value;
        // },
      },
    },
    yAxis: {
      type: "value",
      name: "单位:万tCO2/人·年",
      nameTextStyle: {
        color: "#DDFFFD",
        padding: [0, 0, 0, 35],
      },
      max:500,
      min:0,
      //   minInterval: 1,
      // y轴（竖直线）
      axisLine: {
        show: false,
      },
      // y轴横向 标线
      splitLine: {
        show: true,
        lineStyle: {
          type: "dashed",
          color: "rgba(1, 39, 37, 0.30)",
        },
      },
      // y轴刻度线
      axisTick: {
        show: false,
      },
      // y轴文字
      axisLabel: {
        fontSize: 14,
        color: "#DDFFFD",
      },
    },
    series: [
      {
        type: "custom",
        name: "单位面积碳排放强度限值",
        renderItem: (params, api) => {
          const location = api.coord([api.value(0), api.value(1)]);
          return {
            type: "group",
            children: [
              // 左侧面
              {
                type: "CubeLeft",
                shape: {
                  api,
                  xValue: api.value(0),
                  yValue: api.value(1),
                  x: location[0],
                  y: location[1],
                  xAxisPoint: api.coord([api.value(0), 0]),
                },
                style: {
                  fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: colorArr[1][0],
                    },
                    {
                      offset: 1,
                      color: colorArr[1][1],
                    },
                  ]),
                },
              },
              // 右侧面
              {
                type: "CubeRight",
                shape: {
                  api,
                  xValue: api.value(0),
                  yValue: api.value(1),
                  x: location[0],
                  y: location[1],
                  xAxisPoint: api.coord([api.value(0), 0]),
                },
                style: {
                  fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: colorArr[2][0],
                    },
                    {
                      offset: 1,
                      color: colorArr[2][1],
                    },
                  ]),
                },
              },
              // 顶部
              {
                type: "CubeTop",
                shape: {
                  api,
                  xValue: api.value(0),
                  yValue: api.value(1),
                  x: location[0],
                  y: location[1],
                  xAxisPoint: api.coord([api.value(0), 0]),
                },
                style: {
                  fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: colorArr[0][0],
                    },
                    {
                      offset: 1,
                      color: colorArr[0][0],
                    },
                  ]),
                },
              },
            ],
          };
        },
        data: seriesData,
      },
      {
        type: "bar",
        label: {
          normal: {
            show: false,
            position: "top",
            formatter: (e) => {
              return e.value;
            },
            fontSize: 16,
            color: "#43C4F1",
            offset: [0, -5],
          },
        },
        itemStyle: {
          color: "transparent",
        },
        tooltip: {},
        data: seriesData,
        markLine: {
          symbol: "none",
          data: [
            {
              yAxis: 400,
              lineStyle: {
                color: "rgba(255, 221, 0, 1)",
                type: "dashed",
                width: 1,
              },
              label: {
                show: false,
                position: "end",
              },
            },
          ],
        },
      },
    ],
  };
  myChart.setOption(option);
}
//各系统碳排放量统计
function getCarbonEmissionStatistics() {
  let myChart = echarts.init(
    document.getElementById("carbonEmissionStatistics")
  );
  let option = {
    grid: {
      left: "5%",
      right: "5%",
      bottom: "-10%",
      top: "8%",
      containLabel: true,
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "none",
      },
      formatter: function (params) {
        return (
          params[0].name +
          "<br/>" +
          "<span style='display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:rgba(36,207,233,0.9)'></span>" +
          params[0].seriesName +
          "" +
          Number(
            (params[0].value.toFixed(4) / 10000).toFixed(2)
          ).toLocaleString() +
          " kWh<br/>"
        );
      },
    },
    xAxis: {
      show: false,
      type: "value",
    },
    yAxis: [
      {
        type: "category",
        inverse: true,
        axisLabel: {
          padding: [0, 0, 10, -10],
          verticalAlign: "bottom",
          inside: true,
          show: true,
          textStyle: {
            color: "#fff",
            fontSize: "14",
          },
        },
        splitLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        data: ["空调系统", "照明系统", "消防系统", "电梯系统", "展陈系统"],
      },
      {
        type: "category",
        inverse: true,
        axisTick: "none",
        axisLine: "none",
        show: true,
        axisLabel: {
          padding: [0, 0, 10, -10],
          verticalAlign: "bottom",
          inside: true,
          textStyle: {},
          formatter: function (value) {
            return (
              "{a|" + (value / 10000).toLocaleString() + "}" + "{b|万tCO2}"
            );
          },
          rich: {
            a: {
              fontSize: "16",
              color: "rgba(0, 255, 240, 1)",
              padding: [0, 6, 0, 0],
            },
            b: {
              color: "#fff",
              fontSize: "12",
            },
          },
        },
        data: [50000000, 22000000, 10000000, 5000000, 1],
      },
    ],
    series: [
      {
        name: "",
        type: "bar",
        zlevel: 1,
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
            {
              offset: 0,
              color: "rgba(29, 169, 153, 1)",
            },
            {
              offset: 1,
              color: "rgba(223, 243, 240, 1)",
            },
          ]),
        },
        barWidth: 8,
        data: [50000000, 22000000, 10000000, 5000000, 200],
      },
      {
        name: "背景",
        type: "bar",
        barWidth: 10,
        barGap: "-115%",
        data: [50000000, 50000000, 50000000, 50000000, 50000000],
        itemStyle: {
          color: "rgba(5, 33, 31, 0.32)",
        },
      },
    ],
  };
  myChart.setOption(option);
}
const optionData = ref([
  {
    name: "CCER",
    value: 176,
  },
  {
    name: "绿电",
    value: 288,
  },
  {
    name: "绿证",
    value: 88,
  },
]);
const color = [
  "rgba(0, 140, 255, 1)",
  "rgba(1, 225, 242, 1)",
  "rgba(27, 255, 118, 1)",
];
function setLabel() {
  optionData.value.forEach((item, index) => {
    item.itemStyle = {
      color: color[index],
    };
    item.label = {
      normal: {
        show: true,
        color: color[index],
        // position: "right",
        padding: [0, -50],
        // distance:-10,
        offset: [0, 3],
        formatter: [
          "{d|{d}%}",
          //   '{c|{c}}{b|台}',
          "{b|{b}}",
        ].join("\n"), // 用\n来换行
        rich: {
          b: {
            lineHeight: 30,
            align: "left",
            fontSize: 12,
            color: "#fff",
          },
          c: {
            fontSize: 15,
            // color: '#fff',
            textShadowColor: "#1c90a6",
            textShadowOffsetX: 0,
            textShadowOffsetY: 2,
            textShadowBlur: 5,
            color: color[index],
          },
          d: {
            color: color[index],
            fontSize: 18,
            fontWeight: 600,
            align: "left",
          },
        },
      },
    };
    item.labelLine = {
      normal: {
        length2: 100,
        lineStyle: {
          width: 1,
          color: color[index],
        },
      },
    };
  });
}
//碳中和
function getCarbonNeutrality() {
  setLabel();
  let myChart = echarts.init(document.getElementById("carbonNeutrality"));
  let option = getPie3D(optionData.value, 0, 270, 26, 40, 1);

  // myChart.setOption(option);
  // 是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption
  option.series.push({
    name: "", //自己根据场景修改
    backgroundColor: "transparent",
    type: "pie",
    label: {
      opacity: 1,
      fontSize: 13,
      lineHeight: 20,
    },
    startAngle: -40, // 起始角度，支持范围[0, 360]。
    clockwise: false, // 饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
    radius: ["20%", "60%"],
    center: ["50%", "50%"],
    data: optionData.value,
    itemStyle: {
      opacity: 0, //这里必须是0，不然2d的图会覆盖在表面
    },
  });
  myChart.setOption(option);
  // bindListen(myChart);
}
//加载完dom执行
onMounted(() => {
  //碳趋势图表
  getCarbonTrends();
  //碳排放强度
  getCarbonIntensity();
  //各系统碳排放量统计
  getCarbonEmissionStatistics();
  //碳中和
  getCarbonNeutrality();
});
</script>

<style lang="scss" scoped>
.titleDate {
  display: flex;
  justify-content: space-between;
  width: 25%;
  font-size: 14px;
  font-weight: normal;
  .date {
    padding: 0 0.8rem;
    background-image: url("@/assets/images/small-icon.png");
    background-size: 100% 100%;
    cursor: pointer;
  }
  .dateAc {
    padding: 0 0.8rem;
    background-image: url("@/assets/images/small-icon-select.png");
    background-size: 100% 100%;
    cursor: pointer;
  }
}
.overview-item0 {
  width: 24.125rem;
  height: 27%;
  background: url("@/assets/images/carbonEmission/totalEmissions.png") no-repeat;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.overview-item1 {
  width: 24.125rem;
  height: 27%;
  background: url("@/assets/images/carbonEmission/carbonOffsettingAmount.png")
    no-repeat;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.overview-item2 {
  width: 24.125rem;
  height: 27%;
  background: url("@/assets/images/carbonEmission/carbonEmissionReduction.png")
    no-repeat;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.overviewValue {
  left: 10%;
  position: relative;
  .unit {
    font-size: 0.8rem;
    color: rgba(221, 255, 253, 1);
  }
  .value {
    margin-right: 0.3rem;
    font-size: 1.5rem;
    font-weight: 700;
    color: rgba(91, 250, 241, 1);
  }
}
.carbonTrendsReport {
  width: 27.2%;
  height: 10%;
  position: relative;
  background: url("@/assets/images/carbonEmission/carbonEmission StatisticsReport.png")
    no-repeat;
  background-size: 100% 100%;
  bottom: 97%;
  left: 70%;
  cursor: pointer;
}
.carbonNeutralityBg {
  width: 68.7%;
  height: 50.5%;
  background: url("@/assets/images/carbonEmission/carbonNeutralityBg.png")
    no-repeat;
  background-size: 100% 100%;
  position: relative;
  z-index: 999;
  bottom: 60%;
  left: 16%;
}
</style>
