<template>
  <div class="chartsContent">
    <el-card shadow="never" v-if="type === 'LeafRootOutline'">
      <div slot="header" class="clearfix">
        <h4 style="color: black; font-size: 16px; font-weight: 700">
          叶根轮廓拟合图
        </h4>
        <div style="font-size: 12px; color: #666">
          江西大唐国际新能源有限公司\金华山风电场\01#风机 2024/3/1 11:00:00
        </div>
      </div>
      <div class="line-chart" ref="chart"></div>
    </el-card>
    <el-card shadow="never" v-else-if="type === 'LeafRootRelativeOutline'">
      <div slot="header" class="clearfix">
        <h4 style="color: black; font-size: 16px; font-weight: 700">
          叶根相对平均轮廓拟合图
        </h4>
        <div style="font-size: 12px; color: #666">
          江西大唐国际新能源有限公司\金华山风电场\01#风机 2024/3/1 11:00:00
        </div>
      </div>
      <div class="line-chart" ref="chart" style="width: 100%"></div>
    </el-card>
    <el-card shadow="never" v-else-if="type === 'LeafTipProfile'">
      <div slot="header" class="clearfix">
        <h4 style="color: black; font-size: 16px; font-weight: 700">
          叶尖轮廓拟合图
        </h4>
        <div style="font-size: 12px; color: #666">
          江西大唐国际新能源有限公司\金华山风电场\01#风机 2024/3/1 11:00:00
        </div>
      </div>
      <div class="line-chart" ref="chart" style="width: 100%"></div>
    </el-card>
    <el-card shadow="never" v-else-if="type === 'LeafTipRelativeProfile'">
      <div slot="header" class="clearfix">
        <h4 style="color: black; font-size: 16px; font-weight: 700">
          叶尖相对平均轮廓拟合图
        </h4>
        <div style="font-size: 12px; color: #666">
          江西大唐国际新能源有限公司\金华山风电场\01#风机 2024/3/1 11:00:00
        </div>
      </div>
      <div class="line-chart" ref="chart" style="width: 100%"></div>
    </el-card>
  </div>
</template>

<script>
import * as echarts from "echarts"; // 导入 echarts 库
import screenfull from "screenfull";

export default {
  props: {
    type: {
      default: "",
    },
  },
  data() {
    return {
      currentIndex: 0, // 默认索引
      tableData: [], // 数据
      originalChartStyle: {}, // 用于存储原始样式
      // 控制标注的显示/隐藏
      markPointVisible: false,
      markLineVisible: false,
    };
  },
  watch: {
    // 监听标注的显示状态变化
    markPointVisible(newVal, oldVal) {
      if (newVal !== oldVal) {
        this.updateChart(); // 更新图表
      }
    },
    markLineVisible(newVal, oldVal) {
      if (newVal !== oldVal) {
        this.updateChart(); // 更新图表
      }
    },
  },
  mounted() {
    this.initializeChart();
    // 监听键盘事件
    window.addEventListener("keydown", this.handleKeyDown);
  },
  destroyed() {
    // 移除键盘事件监听
    window.removeEventListener("keydown", this.handleKeyDown);
  },
  methods: {
    // 初始化图表
    initializeChart() {
      this.$nextTick(() => {
        const chartDom = this.$refs.chart;
        this.chartInstance = echarts.init(chartDom);

        const defaultData = [
          Math.floor(Math.random() * 300),
          Math.floor(Math.random() * 300),
          Math.floor(Math.random() * 300),
        ];
        const defaultLabels = ["2024/1/1", "2024/1/2", "2024/1/3"];
        this.updateChart(defaultData, defaultLabels);

        // 保存初始样式
        this.originalChartStyle = {
          width: chartDom.style.width,
          height: chartDom.style.height,
          backgroundColor: chartDom.style.backgroundColor,
        };
      });
    },
    // 更新图表数据
    updateChart(data, labels) {
      const defaultData = Array.from({ length: 5000 }, () =>
        Math.floor(Math.random() * 300)
      );
      const defaultLabels = Array.from(
        { length: 5000 },
        (_, index) => `2024/1/${index + 1}`
      );
      const option = {
        color: [
          "#D7EFB7",
          // "#9CD9BD",
          // "#7ACCC1",
          // "#5DBFC4",
          "#46AFC5",
          // "#379CC2",
          // "#3286BB",
          // "#406DAB",
          "#3856A0",
          // "#314291",
          // "#28357A",
          "#1A285E",
        ],
        toolbox: {
          feature: {
            dataZoom: { yAxisIndex: "none" },
            restore: {},
            saveAsImage: {},
            myCustomTool: {
              show: true,
              title: "上一条",
              icon: `image://${new URL(
                "@/assets/analyse/08.png",
                import.meta.url
              )}`,
              // icon: `image://${require("@/assets/analyse/08.png")}`,
              onclick: () => this.previousRow(),
            },
            myCustomTool2: {
              show: true,
              title: "下一条",
              icon: `image://${new URL(
                "@/assets/analyse/09.png",
                import.meta.url
              )}`,
              // icon: `image://${require("@/assets/analyse/09.png")}`,
              onclick: () => this.nextRow(),
            },
            myCustomTool3: {
              show: true,
              title: "标注",
              icon: `image://${new URL(
                "@/assets/analyse/mark.png",
                import.meta.url
              )}`,
              // icon: `image://${require("@/assets/analyse/mark.png")}`,
              onclick: () => this.WhetherToDisplay(),
            },
            myCustomTool4: {
              show: true,
              title: "全屏",
              icon: `image://${new URL(
                "@/assets/analyse/fullScreen.png",
                import.meta.url
              )}`,
              // icon: `image://${require("@/assets/analyse/fullScreen.png")}`,

              onclick: () => this.fullScreen(),
            },
            myCustomTool5: {
              show: true,
              title: "退出全屏",
              icon: `image://${new URL(
                "@/assets/analyse/exitFullScreen.png",
                import.meta.url
              )}`,
              // icon: `image://${require("@/assets/analyse/exitFullScreen.png")}`, // 替换为你自己的图标路径

              onclick: () => this.exitFullScreen(),
            },
          },
        },
        xAxis: {
          type: "category",
          name: "时间(s)",
          nameLocation: "middle",
          boundaryGap: false,
          data: [
            1990, 1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999, 2000,
            2001, 2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011,
            2012, 2013, 2014, 2015, 2016,
          ],
          nameTextStyle: {
            // fontSize: 14, // 字体大小
            fontWeight: "bold", // 字体加粗
            // color: "#333", // 字体颜色
            padding: [20, 0, 0, 0], // 调整名称与 X 轴的距离
          },
        },
        yAxis: {
          type: "value",
          name: "距离(m)",
          nameLocation: "middle",
          nameTextStyle: {
            // fontSize: 14, // 字体大小
            fontWeight: "bold", // 字体加粗
            // color: "#333", // 字体颜色
            padding: [0, 0, 40, 0], // 调整 padding
          },
          boundaryGap: [0, "100%"],
        },
        tooltip: {
          trigger: "axis",
          position: function (pt) {
            return [pt[0], "10%"];
          },
        },
        series: [
          {
            name: "叶片1根部轮廓",
            type: "line",
            showSymbol: false,
            data: [
              1.63, 1.9, 2.16, 2.55, 2.7, 2.69, 2.65, 2.87, 2.9, 3.1, 3.47,
              3.89, 4.54, 5.33, 5.95, 6.44, 6.94, 7.45, 7.61, 8.44, 9.35, 9.58,
              10.06, 10.6, 10.94, 11.49, 11.03, 11.11,
            ],
          },
          {
            name: "叶片2根部轮廓",
            type: "line",
            showSymbol: false,
            data: [
              12.84, 13.03, 13.05, 13.89, 13.72, 12.97, 13.21, 14.02, 14.54,
              15.07, 14.94, 14.55, 13.84, 12.7, 12.06, 11.93, 11.6, 10.84,
              10.26, 10.18, 10.21, 9.86, 10.1, 9.96, 10.25, 11.1, 11.08, 10.7,
            ],
          },
          {
            name: "叶片3根部轮廓",
            showSymbol: false,
            type: "line",
            data: [
              7.38, 7.73, 7.46, 7.85, 7.68, 7.45, 6.94, 6.7, 5.98, 6.25, 6.28,
              5.74, 5.51, 5.35, 5.25, 5.03, 4.83, 4.57, 4.58, 4.33, 4.6, 4.42,
              4.38, 3.95, 3.82, 3.7, 3.75, 3.71,
            ],
          },
          {
            name: "平均轮廓",
            showSymbol: false,
            type: "line",
            data: [
              "-",
              "-",
              23.55,
              21.24,
              21.26,
              21.32,
              20.88,
              20.23,
              21.2,
              20.36,
              18.28,
              18.93,
              18.85,
              19.19,
              18.79,
              18.1,
              18.06,
              17.88,
              17.38,
              17.06,
              16.04,
              15.98,
              15.17,
              15.17,
              15.16,
              14.77,
              14.91,
              14.76,
            ],
          },
        ],
      };
      // 切换标注的显示状态
      option.series = option.series.map((serie) => ({
        ...serie,
        markPoint: this.markPointVisible
          ? {
              data: [
                { type: "max", name: "Max" },
                { type: "min", name: "Min" },
              ],
            }
          : { data: [] },
        markLine: this.markLineVisible
          ? {
              data: [{ type: "average", name: "Avg" }],
            }
          : { data: [] },
      }));
      this.chartInstance.setOption(option, true); // 强制刷新
      this.chartInstance.setOption(option);
    },
    // 标注是否显示
    WhetherToDisplay() {
      // 切换显示状态
      this.markPointVisible = !this.markPointVisible;
      this.markLineVisible = !this.markLineVisible;
    },
    previousRow() {
      let newIndex =
        this.currentIndex > 0
          ? this.currentIndex - 1
          : this.tableData.length - 1;
      this.$emit("update:currentIndex", newIndex);
    },
    nextRow() {
      console.log("下一条");
      let newIndex =
        this.currentIndex < this.tableData.length - 1
          ? this.currentIndex + 1
          : 0;
      this.$emit("update:currentIndex", newIndex);
    },
    toggleFullScreen() {
      const chartDom = this.$refs.chart;
      if (screenfull.isEnabled) {
        screenfull.toggle(chartDom);
      }
    },
    fullScreen() {
      const chartDom = this.$refs.chart;
      if (screenfull.isEnabled) {
        // 设置全屏样式
        chartDom.style.position = "absolute";
        chartDom.style.top = 0;
        chartDom.style.left = 0;
        chartDom.style.width = "100vw";
        chartDom.style.height = "100vh";
        chartDom.style.backgroundColor = "#ffffff";

        // 进入全屏
        screenfull.request(chartDom);
        this.chartInstance.resize();

        // 监听全屏变化
        screenfull.on("change", this.handleFullScreenChange);
      }
    },
    exitFullScreen() {
      const chartDom = this.$refs.chart;
      if (screenfull.isEnabled) {
        screenfull.exit();
        // 监听全屏变化
        screenfull.on("change", this.handleFullScreenChange);
      }
    },
    // 处理全屏变化的回调
    handleFullScreenChange() {
      const chartDom = this.$refs.chart;
      if (!screenfull.isFullscreen) {
        // 退出全屏时恢复样式
        chartDom.style.position = this.originalChartStyle.position || "";
        chartDom.style.top = this.originalChartStyle.top || "";
        chartDom.style.left = this.originalChartStyle.left || "";
        chartDom.style.width = this.originalChartStyle.width || "100%";
        chartDom.style.height = this.originalChartStyle.height || "250px";
        chartDom.style.backgroundColor =
          this.originalChartStyle.backgroundColor || "#fff";

        // 调整图表尺寸
        this.chartInstance.resize();

        // 可选：移除事件监听（如果不再需要）
        screenfull.off("change", this.handleFullScreenChange);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-card__body {
  width: 100%;
  // height: 250px;
  position: relative;
}
.line-chart {
  width: 100%;
  height: 250px;
  background-color: #fff;
  position: relative;
}
.line-chart > div {
  width: 100%;
  height: 250px;
}
.eigenvalue {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 10px;
  width: 100px;
  border: 1px solid black;
  padding: 5px;
  background: #fff;
  z-index: 99;
  h5 {
    line-height: 16px;
    height: 16px;
  }
}
</style>
