<template>
  <div class="common-page qyzz page-t1">
    <div class="option page-row">
      <table-filter ref="filter" :form="form" :Dict="Dict" :rules="rules" :config="form.config" :loadData="loadData" />
    </div>

    <div class="new-container" style="display: flex">
      <div class="canvas-wrapper" style="width: 1000px">
        <!-- 替换为 Canvas 元素 -->
        <canvas ref="canvas" id="mainCanvas" width="1000" style="background: #f0f0f0"></canvas>
      </div>
      <div class="chart-wrapper" style="padding-left: 0px">
        <div ref="chartContainer" style="
            width: 850px;
            height: 550px;
            margin-bottom: 20px;
            margin-left: 10px;
            border: 1px solid gainsboro;
          "></div>
        <div class="chart-btn-group" style="margin-left: 10px;">
          <button size="small" :type="currentChartType === 'line' ? 'primary' : ''" @click="switchChartType('line')">
            折线图
          </button>
          <button size="small" :type="currentChartType === 'column' ? 'primary' : ''"
            @click="switchChartType('column')">
            柱状图
          </button>
        </div>
      </div>
    </div>

    <div class="panel-bottom page-row">
      <div class="ctin-box">
        <div class="content-within">
          <div class="content-fix">
            <div class="toolbar">
              <div>
                <el-button v-for="(item, key) in form.config.otherBtn" size="mini" :type="item.type" :icon="item.icon"
                  @click="item.callback.call(_self, $event)">{{ item.name }}</el-button>
              </div>
              <div>
                <el-button v-for="(item, key) in form.config.rightBtn" size="mini" :type="item.type" :icon="item.icon"
                  @click="item.callback.call(_self, $event)">{{ item.name }}</el-button>
              </div>
            </div>
            <!-- 表格渲染 -->
            <cu-table ref="cuTable" :table="table" :Dict="Dict" :config="form.config" :loadData="loadData" />
          </div>
        </div>
      </div>
    </div>

    <!-- 表单渲染 -->
    <cu-form ref="cuForm" :form="form" :Dict="Dict" :rules="rules" :submit="submitForm" :cancel="cancelForm"
      :watchKeys="['paperfilename']" />
  </div>
</template>

<script>
import Highcharts from "highcharts";
import { reqApi, Config } from "@/assets/js/httpApi.js";
import { Tools } from "@/assets/js/common.js";
import DateRangePicker from "@/components/DateRangePicker";
import TableFilter from "@/components/TableFilter";
import cuForm from "@/components/cuForm";
import cuTable from "@/components/cuTable";
import request from "@/utils/request";

export default {
  name: "Dashboard",
  components: {
    DateRangePicker,
    TableFilter,
    cuForm,
    cuTable,
  },
  data() {
    return {
      chartDataEmpty: false,
      canvasDataEmpty: false,
      Dict: { selectList: [] },
      table: {
        page: 1,
        size: 10,
        total: 0,
        loading: false,
        dataList: [],
      },
      rules: {},
      form: {
        title: "",
        visible: false,
        reqType: "add",
        historyDialog: false,
        status: { cu: 0 },
        query: {},
        search: {},
        item: {},
        file: 0,
        config: {},
      },
      // 新增图表相关数据
      chartVisible: true, // 图表弹窗可见性
      deviceList: [{ id: "test001", name: "测试设备1" }], // 设备列表数据
      selectedDevice: null, // 选中设备ID
      dateRange: [null, null], // 日期范围选择
      currentChartType: "line", // 当前图表类型（line/column）
      chartLoading: false, // 图表加载状态
      chartInstance: null, // Highcharts实例引用

      // ...原有data属性保持不变...
      canvas: null, // Canvas 实例
      ctx: null, // 2D 上下文
      bgImage: null, // 背景图对象
      waterImage: null, // 新增：water.png 图片对象
      poImage: null, // 新增：po.png 图片对象
      waterValue: 0, // 新增：水位值

      canvasDataReal: {
        poConfigsWH: [{ // 基础信息配置对象 用于换算具体画布xy坐标点
          xieMianW: 0, // 第一个坡斜面距离第一个坡平面的水平距离。
          pingMianW: 0, // 第一个坡平面距离平面宽度。
          pingMianH: 0, // 第一个坡平面距离平面高度。
          kongW: 0, // 目前设定打孔的位置在坡平面上距离左侧起始点的距离
          kongH: 0, // 目前孔的深度
          maishen: 0 // 水位到管口的垂直距离
        }],
        otherConfig: {
          gantanW: 0, // 干滩距离水平面的宽度（根据最后一个坡平面坐标点计算xy。）
          tuduiW: 0, // 干滩距离水平面中间的土堆
          shuiW: 0, // 水平面的宽度
          shuiH: 0, // 水平面的高度
        },
        // Canvas绘制配置（支持批量扩展）
        poConfigsXY: [ // 根据poConfigsWH 计算具体的xy坐标点，每个对象计算出两对坐标点。分别是斜面和平面点
        ],
        guanConfigsXY: [ // 根据poConfigsXY和poConfigsWH的孔信息 计算具体的xy坐标点，每个对象计算出两对坐标点。分别是孔起始坐标和结束坐标
        ],
        gantanConfigsXY: [
        ],
        jrxConfigsXY: [
        ],
        shuiweiConfigsXY: [
        ],
        tuduiConfigsXY: [
        ],
        jingjiexianConfigsXY: [
        ],
        lineConfigs: [
          // { points: [], color: "red", lineWidth: 2 }, // 红色连接线配置
          // { points: [], color: "yellow", lineWidth: 2 }, // 黄色连接线配置
        ],
      },
      // canvasData: [
      //   {
      //     name: "剖面名称",
      //     height: "剖面高度",
      //     width: "剖面宽度",
      //     code: "剖面编号",
      //     sdeg: "水区扇形起始角度",
      //     diameter: "总直径",
      //     jrxStepsDtoList: [
      //       {
      //         name: "台阶名称",
      //         code: "台阶编号",
      //         height: "高度(米)",
      //         width: "宽度(米)",
      //         slope: "坡度(deg)"
      //       }
      //     ],
      //     equipmentDataList: [
      //       {
      //         sensorid: "设备id",
      //         sensorname: "设备名称",
      //         unit: "设备单位",
      //         stage: "水位（传感器到水面的距离）",
      //         depth: "浸润线埋深(水位到管口的距离)(m)",
      //         smhb: "// 水面海拔",
      //         time: "时间",
      //         holeDepth: "孔口高程",
      //         jrxTrepanning: "浸润线开口深度",
      //         redAlarm: "红色预警 此预警值针对的是depth 浸润线埋深",
      //         orangeAlarm: "橙色预警",
      //         yellowAlarm: "黄色预警",
      //         blueAlarm: "蓝色预警"
      //       }
      //     ]
      //   }
      // ]
    };
  },
  created() {
    // 获取基本信息
    this.pageApi = Config.getModuleInfo(this);
    this.Dict = this.pageApi.Dict;
    this.form.config = this.pageApi.config;
    this.rules = reqApi.getRules(this.Dict.baseInfo) || this.Dict.rules || {};
    this.pageApi.created && this.pageApi.created();

    // 新增：获取地址栏deviceId参数并设置到form.query.code
    const deviceId = this.$route.query.deviceId;
    if (deviceId) {
      this.form.query.sensorid = deviceId; // 将deviceId赋值到查询条件的code字段
    }
    // this.handleCanvasData(this.canvasData);
  },
  mounted() {
    this.$nextTick(() => {
      this.loadData();
      this.initChart1()
      this.getCanvasData();
    });

    // 获取选择列表字典
    var selectList = this.Dict.selectList;
    Tools.asyncLoop.call(this, selectList, function (key, value, next) {
      if (typeof value === "function") {
        value.call(this.Dict).then(function (res) {
          selectList[key] = res;
          next();
        });
      } else {
        next();
      }
    });
  },
  methods: {
    // 最新
    // calculateWidth(height, angleDegrees) {
    //   // 1. 将角度从度转换为弧度（JavaScript的Math.tan()使用弧度）
    //   const angleRadians = angleDegrees * Math.PI / 180;

    //   // 2. 计算角度的正切值
    //   const tanValue = Math.tan(angleRadians);

    //   // 3. 计算水平距离 L = H / tan(θ)
    //   const width = height / tanValue;

    //   return width;

    //     // 使用示例
    //     const height = 40;    // 垂直高度
    //     const angle = 25;     // 坡度角度（度）
    //     const result = calculateWidth(height, angle);

    //     console.log(`宽度 = ${result.toFixed(2)}`);
    //     // 输出：宽度 = 85.78
    // },

    /** 绘制文字标注 */
    drawText(config) {
      this.ctx.save();
      this.ctx.setTransform(1, 0, 0, 1, 0, 0); // 恢复默认坐标系（左上角原点）
      this.ctx.font = `10px Arial`; // 文字大小8px
      this.ctx.fillStyle = "#000"; // 黄色
      this.ctx.textAlign = "center"; // 水平居中
      this.ctx.textBaseline = "top"; // 垂直顶部对齐

      // 绘制文字（考虑Y轴方向转换）
      const drawY = this.canvas.height - config.y; // 转换为默认坐标系Y轴
      this.ctx.fillText(config.text, config.x, drawY + 5); // Y轴偏移5px避免重叠
      this.ctx.restore();
    },
    /** 清空画布内容及配置 */
    clearCanvas() {
      if (this.ctx) {
        // 清除画布绘制内容（基于当前坐标系）
        this.ctx.save();
        this.ctx.setTransform(1, 0, 0, 1, 0, 0); // 恢复默认坐标系
        this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height); // 清空整个画布
        this.ctx.restore();
      }
      // 重置配置数据（避免残留）
      this.canvasDataReal.poConfigs = [];
      this.canvasDataReal.guanConfigs = [];
      this.canvasDataReal.lineConfigs = [];
    },
    getCanvasData() {
      const params = { ...this.form.query };
      request({
        url: "tab/jrx/dissect/visual-xinHua",
        method: "get",
        params,
      }).then(async (res) => {
        const data = res.body;
        if (!data.length) {
          // 数据为空时清空画布
          this.clearCanvas();
          return;
        }
        this.waterValue = data[0].wtValue;
        await this.handleCanvasData(data);

        this.initCanvas();
      });
    },
    handleCanvasData(list = []) {
      return new Promise((resolve) => {
        // 新增Promise封装
        let canvasWidth = 1000; // 默认宽度
        let canvasHeight = 600; // 默认高度
        // 更新Canvas元素属性和样式
        const canvasEl = this.$refs.canvas;
        if (canvasEl) {
          // 实际绘图区域尺寸（关键属性）
          canvasEl.width = canvasWidth;
          canvasEl.height = canvasHeight;
          // 显示尺寸（与绘图区域保持一致）
          canvasEl.style.width = `${canvasWidth}px`;
          canvasEl.style.height = `${canvasHeight}px`;
        }

        // 数据清洗
        const poumian = list[0]; // 坡面数据
        const poCount = poumian.jrxStepsDtoList.length;
        const lineCount = 5;
        const po_pad_right = -140; // poCount > 4 ? 130 : 180; // 第一个台阶距离画布的距离
        const poH = 450;
        const line_color = ["red", "orange", "yellow", "blue", "white"];
        this.canvasDataReal.poConfigs = [];
        this.canvasDataReal.guanConfigs = [];
        this.canvasDataReal.lineConfigs = [];

        //第一层台阶的开孔深度和设备图片相除的系数
        const sbHeightModulus =
          poumian.equipmentDataList[0].jrxTrepanning / 130;

        // 存储设备数据列表（关键新增，用于后续获取depth值）
        this.equipmentDataList = poumian.equipmentDataList || [];
        // 坡数据数据格式处理
        poumian.jrxStepsDtoList.forEach((po, poIndex) => {
          this.canvasDataReal.poConfigs.push({
            x: -140,
            y: canvasHeight - (poIndex) * poH,
            width: canvasWidth - (poIndex) * po_pad_right,
            height: poH,
          });
        });
        // 管孔数据数据格式处理
        poumian.equipmentDataList.forEach((equipment, equipIndex) => {
          const po = this.canvasDataReal.poConfigs[equipIndex];
          // 管孔数据数据格式处理
          if (equipIndex == 1) {
            this.canvasDataReal.guanConfigs.push({
              x: po.width * 0.234 + 100 * (equipIndex + 1),
              y: canvasHeight - po.height + 133,
              width: 7, // 可以设置不同的宽度
              height: (equipment.jrxTrepanning / sbHeightModulus),
              image: "guanImage", // 使用不同的图片
            });
            console.log('管子1111')
          } else {
            this.canvasDataReal.guanConfigs.push({
              x: po.width * 0.234 + 100 * (equipIndex + 1),
              y: canvasHeight - po.height + 208,
              width: 7,
              height: equipment.jrxTrepanning / sbHeightModulus,
              image: "guanImage",
            });
          }
        });

        // 警戒线逻辑- 初始话基本数据结构
        for (let index1 = 0; index1 < lineCount; index1++) {
          this.canvasDataReal.lineConfigs.push({
            // 设置
            points: [],
            color: line_color[index1],
            lineWidth: 2,
            cha: 4 * index1,
          });
        }
        // 警戒线种类下，根据管孔设备个数，设定对应的坐标点point
        this.canvasDataReal.lineConfigs.forEach((line, index) => {
          let lineValKey = line.color == "white" ? "depth" : line.color + "Alarm";
          // 几个管孔几个坐标点
          poumian.equipmentDataList.forEach((equip, subindex) => {
            let xOffset = 0;
            let baseY = 0;

            // 对于彩色线（非白色），使用统一的计算方式，确保线条是直线
            if (line.color !== "white") {
              // 对所有彩色线使用相同的计算逻辑，不使用不同的分母
              xOffset = line.cha / 20; // 使用统一的分母值
              // 直接根据设备数据计算y坐标
              baseY = this.canvasDataReal.guanConfigs[subindex].y + equip[lineValKey] / sbHeightModulus;
            } else {
              baseY = this.canvasDataReal.guanConfigs[subindex].y + this.canvasDataReal.guanConfigs[subindex].height;
            }

            line.points.push({
              x: this.canvasDataReal.guanConfigs[subindex].x + 1 + xOffset,
              y: baseY
            });
          });
        });
        resolve(); // 数据处理完成后触发resolve
      });
    },
    /** 初始化 Canvas 画布及坐标系 */
    initCanvas() {
      // 获取 Canvas 元素和上下文
      this.canvas = this.$refs.canvas; // document.getElementById('mainCanvas')
      if (!this.canvas) {
        console.error("Canvas 元素未找到");
        return;
      }
      this.ctx = this.canvas.getContext("2d");

      // 坐标系变换：将原点移至左下角（默认原点在左上角）
      this.ctx.translate(0, this.canvas.height); // 向下移动画布高度
      this.ctx.scale(1, -1); // 翻转 Y 轴方向（上为正）

      // // 加载背景图并绘制
      // this.loadBackgroundImage();
      // 加载所有图片并绘制
      this.loadAllImages();
    },

    // 绘制water.png（独立方法）
    drawWaterImage() {
      this.ctx.save();
      this.ctx.setTransform(1, 0, 0, 1, 0, 0);
      this.ctx.drawImage(
        this.waterImage,
        500,
        this.canvas.height - (180 + this.waterValue * 1.2),
        550,
        550
      );
      this.ctx.restore();
    },

    // 绘制单个po.png（支持配置参数）
    drawPoImage(config) {
      this.ctx.save();
      this.ctx.setTransform(1, 0, 0, 1, 0, 0);
      // 动态计算y坐标（若未指定则默认画布底部-高度）
      this.ctx.drawImage(
        this.poImage,
        config.x,
        config.y,
        config.width,
        config.height
      );
      this.ctx.restore();
    },

    // 绘制单个guan.png（支持不同图片类型）
    drawGuanImage(config) {
      this.ctx.save();
      this.ctx.setTransform(1, 0, 0, 1, 0, 0);
      const targetImage = this[config.image]; // 根据配置获取具体图片对象（如guanImage/guanImage1）
      this.ctx.drawImage(
        targetImage,
        config.x,
        config.y,
        config.width,
        config.height
      );
      this.ctx.restore();
    },

    drawSecondPipeImage(config) {
      this.ctx.save();
      this.ctx.setTransform(1, 0, 0, 1, 0, 0);

      // 可以使用不同的绘制逻辑
      const targetImage = this[config.image] || this.guanImage;
      this.ctx.drawImage(
        targetImage,
        config.x,
        config.y,
        config.width,
        config.height
      );
      this.ctx.restore();
    },

    // 绘制连接线（支持多坐标点）白色
    drawLine(config) {
      this.ctx.save();
      this.ctx.setTransform(1, 0, 0, 1, 0, 0);
      this.ctx.strokeStyle = config.color;
      this.ctx.lineWidth = config.lineWidth;
      this.ctx.beginPath();

      // 修复语法错误并改进白色线对齐逻辑
      if (config.color === 'white' && this.canvasDataReal.guanConfigs.length > 0) {
        // 确保至少有两个点可以连接
        if (config.points && config.points.length >= 2) {
          config.points.forEach((point, index) => {
            index === 0 ? this.ctx.moveTo(point.x, point.y) : this.ctx.lineTo(point.x, point.y);
          });
        }
      } else {
        config.points.forEach((point, index) => {
          // index === 0 ? this.ctx.moveTo(point.x - 400, point.y + 220) : this.ctx.lineTo(point.x, point.y);
          // index === 0 ? this.ctx.moveTo(point.x - 400, point.y + 190) : this.ctx.lineTo(point.x, point.y);
        });
      }

      this.ctx.stroke();
      this.ctx.restore();
    },

    // 绘制背景图（独立方法）
    drawBackground() {
      this.ctx.save();
      this.ctx.setTransform(1, 0, 0, 1, 0, 0);
      this.ctx.drawImage(
        this.bgImage,
        0,
        0,
        this.canvas.width,
        this.canvas.height
      );
      this.ctx.restore();
    },
    // 绘制文字 箭头
    createCustomLineWithText(config) {
      // 配置参数默认值
      const defaultConfig = {
        points: [],
        color: '#000000',
        lineWidth: 2,
        showLine: true,
        text: '',
        textPosition: 'middle',
        textDirection: 'horizontal',
        textAngle: 0,
        textOffset: 10,
        textColor: '#000000',
        fontSize: 10,
        showArrow: false,
        showArrowAtStart: false,
        arrowSize: 8
      };

      // 合并配置
      const finalConfig = { ...defaultConfig, ...config };

      if (!this.ctx || !finalConfig.points || finalConfig.points.length < 1) {
        console.error('Canvas上下文或坐标点不足');
        return;
      }

      this.ctx.save();
      this.ctx.setTransform(1, 0, 0, 1, 0, 0); // 恢复默认坐标系

      // 只有当showLine为true且lineWidth大于0时才绘制线条
      if (finalConfig.showLine && finalConfig.lineWidth > 0 && finalConfig.points.length >= 2) {
        this.ctx.strokeStyle = finalConfig.color;
        this.ctx.lineWidth = finalConfig.lineWidth;
        this.ctx.beginPath();

        finalConfig.points.forEach((point, index) => {
          if (index == 0) {
            this.ctx.moveTo(point.x, point.y);
          } else {
            this.ctx.lineTo(point.x, point.y);
          }
        });

        this.ctx.stroke();

        // 新增：绘制箭头
        if (finalConfig.showArrow && finalConfig.points.length >= 2) {
          const points = finalConfig.points;
          const lastPoint = points[points.length - 1];
          const prevPoint = points[points.length - 2];

          // 计算箭头方向
          const angle = Math.atan2(lastPoint.y - prevPoint.y, lastPoint.x - prevPoint.x);

          // 设置箭头样式
          this.ctx.fillStyle = finalConfig.color;

          // 绘制箭头三角形
          this.ctx.beginPath();
          this.ctx.moveTo(lastPoint.x, lastPoint.y);
          this.ctx.lineTo(
            lastPoint.x - finalConfig.arrowSize * Math.cos(angle - Math.PI / 6),
            lastPoint.y - finalConfig.arrowSize * Math.sin(angle - Math.PI / 6)
          );
          this.ctx.lineTo(
            lastPoint.x - finalConfig.arrowSize * Math.cos(angle + Math.PI / 6),
            lastPoint.y - finalConfig.arrowSize * Math.sin(angle + Math.PI / 6)
          );
          this.ctx.closePath();
          this.ctx.fill();
        }
      }

      if (finalConfig.showArrowAtStart && finalConfig.points.length >= 2) {
        const points = finalConfig.points;
        const firstPoint = points[0];
        const secondPoint = points[1];

        // 计算起点箭头方向（与线段方向相反）
        const angle = Math.atan2(secondPoint.y - firstPoint.y, secondPoint.x - firstPoint.x) + Math.PI;

        // 设置箭头样式
        this.ctx.fillStyle = finalConfig.color;

        // 绘制起点箭头三角形
        this.ctx.beginPath();
        this.ctx.moveTo(firstPoint.x, firstPoint.y);
        this.ctx.lineTo(
          firstPoint.x - finalConfig.arrowSize * Math.cos(angle - Math.PI / 6),
          firstPoint.y - finalConfig.arrowSize * Math.sin(angle - Math.PI / 6)
        );
        this.ctx.lineTo(
          firstPoint.x - finalConfig.arrowSize * Math.cos(angle + Math.PI / 6),
          firstPoint.y - finalConfig.arrowSize * Math.sin(angle + Math.PI / 6)
        );
        this.ctx.closePath();
        this.ctx.fill();
      }

      // 绘制文字
      if (finalConfig.text) {
        this.ctx.font = `${finalConfig.fontSize}px Arial`;
        this.ctx.fillStyle = finalConfig.textColor;

        // 计算文字位置
        let textX, textY;
        const { points } = finalConfig;

        switch (finalConfig.textPosition) {
          case 'start':
            textX = points[0].x;
            textY = points[0].y;
            break;
          case 'end':
            textX = points[points.length - 1].x;
            textY = points[points.length - 1].y;
            break;
          default:
            if (points.length >= 2) {
              const midIndex = Math.floor(points.length / 2);
              textX = (points[midIndex - 1].x + points[midIndex].x) / 2;
              textY = (points[midIndex - 1].y + points[midIndex].y) / 2;
            } else {
              textX = points[0].x;
              textY = points[0].y;
            }
            break;
        }

        // 根据方向调整文字
        switch (finalConfig.textDirection) {
          case 'vertical':
            this.ctx.save();
            this.ctx.translate(textX, textY);
            this.ctx.rotate(-Math.PI / 2); // 旋转90度
            this.ctx.textAlign = 'center';
            this.ctx.textBaseline = 'middle';
            this.ctx.fillText(finalConfig.text, 0, -finalConfig.textOffset);
            this.ctx.restore();
            break;
          case 'angle':
            const angleRad = finalConfig.textAngle * Math.PI / 180;
            this.ctx.save();
            this.ctx.translate(textX, textY);
            this.ctx.rotate(angleRad);
            this.ctx.textAlign = 'center';
            this.ctx.textBaseline = 'middle';
            this.ctx.fillText(finalConfig.text, 0, -finalConfig.textOffset);
            this.ctx.restore();
            break;
          default: // horizontal
            this.ctx.textAlign = 'center';
            this.ctx.textBaseline = 'bottom';
            this.ctx.fillText(finalConfig.text, textX, textY - finalConfig.textOffset);
            break;
        }
      }

      this.ctx.restore();
    },

    // 重构后的统一绘制入口（通过配置驱动）
    drawAllImages() {
      // 1. 绘制背景图
      this.drawBackground();
      // 绘制water.png
      this.drawWaterImage();
      // 2. 绘制po.png（遍历配置数组）
      this.canvasDataReal.poConfigs.forEach((config, index) => {
        this.drawPoImage(config);
      });

      // 3. 绘制guan.png（遍历配置数组）
      this.canvasDataReal.guanConfigs.forEach((config, index) => {
        if (index == 1) {
          // 执行针对第二个管子的特殊绘制方法
          this.drawSecondPipeImage(config);
        } else {
          // 正常绘制其他管子
          this.drawGuanImage(config);
        }
      });

      // 修改 drawAllImages 方法中的蓝色阴影绘制部分
      this.canvasDataReal.lineConfigs.forEach((lineConfig) => {
        if (lineConfig.color === 'white' && lineConfig.points.length >= 2) {
          this.ctx.save();
          this.ctx.setTransform(1, 0, 0, 1, 0, 0); // 恢复默认坐标系

          // 直接使用白色线的原始坐标点，确保完全对齐
          const whiteLinePoints = lineConfig.points;
          const canvasHeight = this.canvas.height;

          // 遍历相邻点对，生成梯形阴影
          for (let i = 0; i < whiteLinePoints.length - 1; i++) {
            const start = whiteLinePoints[i];
            const end = whiteLinePoints[i + 1];

            // 构建梯形四个顶点（确保与白色线完全重合）
            const trapezoid = [
              { x: start.x, y: start.y }, // 顶部左端点（与白色线起点完全对齐）
              { x: end.x, y: end.y },     // 顶部右端点（与白色线终点完全对齐）
              { x: end.x, y: canvasHeight }, // 底部右端点
              { x: start.x, y: canvasHeight } // 底部左端点
            ];

            // 绘制蓝色阴影
            this.ctx.fillStyle = 'rgba(59, 175, 251, 0.3)'; // 海蓝色，透明度30%
            this.ctx.beginPath();
            trapezoid.forEach((point, index) => {
              index === 0 ? this.ctx.moveTo(point.x, point.y) : this.ctx.lineTo(point.x, point.y);
            });
            this.ctx.closePath();
            this.ctx.fill();
          }

          this.ctx.restore();
        }
      });

      // 确保在阴影绘制之后再绘制白色线条
      this.canvasDataReal.lineConfigs.forEach((config) => {
        this.drawLine(config);
      });

      const colorsToConnect = ['red', 'orange', 'yellow', 'blue'];

      // 为每种颜色定义对应的目标位置坐标
      const targetPoints = {
        'red': { x: 550, y: 304 },
        'orange': { x: 560, y: 307 },
        'yellow': { x: 570, y: 310 },
        'blue': { x: 580, y: 313 }
      };
      // 第二条 ....
      colorsToConnect.forEach(color => {
        // 找到对应颜色的线配置
        const lineConfig = this.canvasDataReal.lineConfigs.find(config => config.color === color);
        if (lineConfig && lineConfig.points.length > 0) {
          const lastPoint = lineConfig.points[lineConfig.points.length - 1];

          // 获取该颜色对应的目标位置
          const targetPoint = targetPoints[color];

          // 绘制新的连接线，保持与原线相同的颜色和线宽
          this.ctx.save();
          this.ctx.setTransform(1, 0, 0, 1, 0, 0);
          this.ctx.strokeStyle = color;
          this.ctx.lineWidth = lineConfig.lineWidth || 2;
          this.ctx.beginPath();
          this.ctx.moveTo(lastPoint.x - 500, lastPoint.y + 300);
          this.ctx.lineTo(targetPoint.x, targetPoint.y);
          this.ctx.stroke();
          this.ctx.restore();
        }
      });

      // 5. 绘制白色警戒线所有点的文字标注（修改部分）
      this.canvasDataReal.lineConfigs.forEach((lineConfig) => {
        if (lineConfig.color === "white" && lineConfig.points.length > 0) {
          // 1. 收集所有设备信息，包括设备名称中的数字
          const deviceData = [];

          lineConfig.points.forEach((point, subindex) => {
            const equipment = this.equipmentDataList[subindex];
            if (equipment) {
              deviceData.push({
                point,
                equipment,
                subindex,
              });
            }
          });
          
          // 4. 绘制文本，使用交换后的深度值
          deviceData.forEach(device => {
            this.drawText({
              x: device.point.x,
              y: this.canvas.height - device.point.y,
              text: `浸润线埋深：${device.equipment.depth}m`,
            });
          });
        }
      });
      // 浸润线
      this.createCustomLineWithText({
        points: [
          { x: 350, y: 300 },
          { x: 400, y: 370 },
        ],
        color: '#000',
        lineWidth: 1,
        text: '浸润线',
        textPosition: 'start', // 文字位置：start、middle、end
        textDirection: 'horizontal', // 文字方向：horizontal、vertical、angle
        textOffset: 9,
        textColor: '#000',
        fontSize: 14,
        showArrow: true,
        arrowSize: 8
      });
      // 正常高水位
      this.createCustomLineWithText({
        points: [
          { x: 585, y: 285 },
          { x: 585, y: 370 },
        ],
        color: '#000',
        lineWidth: 1,
        text: '正常高水位',
        textPosition: 'end',
        textDirection: 'horizontal',
        textOffset: -20,
        textColor: '#000',
        fontSize: 14
      });
      // 平滩
      this.createCustomLineWithText({
        points: [
          { x: 587, y: 285 },
          { x: 520, y: 285 },
        ],
        color: '#000',
        lineWidth: 1,
        text: '干滩',
        textPosition: 'middle',
        textDirection: 'horizontal',
        textOffset: 20,
        textColor: 'orange',
        fontSize: 15,
        showArrow: true,
        showArrowAtStart: true,
        arrowSize: 7
      });
      // 大坝库
      this.createCustomLineWithText({
        points: [
          { x: 750, y: 270 },
          { x: 700, y: 355 },
        ],
        color: '#000',
        lineWidth: 1,
        text: '大坝库',
        textPosition: 'start',
        textDirection: 'horizontal',
        textOffset: 10,
        textColor: '#2c4f7c',
        fontSize: 15
      });
      // 传感器
      this.createCustomLineWithText({
        points: [
          { x: 300, y: 480 },
          { x: 400, y: 370 },
        ],
        text: '渗压传感器',
        showLine: false,
        textPosition: 'start',
        textDirection: 'horizontal',
        textOffset: 15,
        textColor: '#000',
        fontSize: 11
      });
      this.createCustomLineWithText({
        points: [
          { x: 505, y: 400 },
          { x: 400, y: 370 },
        ],
        text: '渗压传感器',
        showLine: false,
        textPosition: 'start',
        textDirection: 'horizontal',
        textOffset: 15,
        textColor: '#000',
        fontSize: 11
      });
    },
    /** 加载所有图片并绘制 */
    loadAllImages() {
      // 加载背景图（原有）
      this.bgImage = new Image();
      this.bgImage.src = require("@/assets/images/jrx/bg.png");

      // // 加载 water.png
      this.waterImage = new Image();
      this.waterImage.src = require("@/assets/images/jrx/shui.png");

      // 加载 shan.png
      this.poImage = new Image();
      this.poImage.src = require("@/assets/images/jrx/shan.png");

      // 加载 guan.png
      this.guanImage = new Image();
      this.guanImage.src = require("@/assets/images/jrx/guan0.png");

      // 等待所有图片加载完成
      Promise.all([
        new Promise((resolve) => (this.bgImage.onload = resolve)),
        new Promise((resolve) => (this.waterImage.onload = resolve)),
        new Promise((resolve) => (this.poImage.onload = resolve)),
        new Promise((resolve) => (this.guanImage.onload = resolve))
      ])
        .then(() => {
          // 所有图片加载完成后绘制
          this.drawAllImages();
        })
        .catch(() => {
          console.error("部分图片加载失败");
        });
    },

    /** 初始化图表（关键修改：调整图例位置） */
    initChart1() {
      let params = {
        sort: "date,desc",
      };
      if (this.form.query.daterange) {
        params.daterange = this.form.query.daterange.join(",");
      }
      if (this.form.query.sensorid) {
        params.code = this.form.query.sensorid;
      }
      request({
        url: "data/st/imghistory",
        method: "get",
        params,
      }).then((res) => {
        const data = res.body;
        // const data = this.getChartData().body
        // console.log("data", data);
        const chartData = this.seriesDataFormat(data, { datekey: "date" });

        var warningLine = undefined; // this.form.config.warningLine;
        var option = {
          valEnabled: true,
          opacity: 1,
          lineWidth: 3,
        };
        var alarmData = this.discernValidAlarmValue(
          data.alarm,
          data.lists,
          chartData.series,
          warningLine,
          option
        );
        // const chartData = data

        // console.log("chartCData", chartData);
        Highcharts.setOptions({
          global: {
            useUTC: false,
          },
          lang: {
            resetZoom: "重置缩放比例",
          },
        });

        this.chartInstance = new Highcharts.chart(this.$refs.chartContainer, {
          chart: {
            //type: '',
            backgroundColor: "transparent",
            //marginTop:30,
            //marginBottom:30,
            //marginLeft:30,
            zoomType: "x", // xy
          },
          valEnabled: true,
          opacity: 1,
          lineWidth: 3,
          title: {
            text: "",
          },
          subtitle: {
            text: "",
          },
          tooltip: {
            enabled: false,
            borderWidth: 10,
          },
          xAxis: {
            type: "datetime",
            // 最为关键的代码：如果为空数组，则导致日期格式化失效！！
            categories: chartData.categories[0] && chartData.categories,
            lineWidth: 0,
            //lineColor:'#ff0000',
            gridLineColor: "#aaa",

            dateTimeLabelFormats: {
              millisecond: "%H:%M:%S.%L",
              second: "%H:%M:%S",
              minute: "%H:%M",
              hour: "%H:%M",
              day: "%m-%d",
              week: "%m-%d",
              month: "%Y-%m",
              year: "%Y",
            },
          },
          yAxis: {
            title: {
              text: "",
            },
            labels: {
              x: -6,
            },
            gridLineColor: "#aaa",
            max: null,
          },
          plotOptions: {
            column: {
              borderWidth: 0,
              //y:50,
              //itemMarginTop:50,
            },
            bar: {
              borderWidth: 0,
            },
          },
          tooltip: {
            // {point.y:.4f}	// 保留4位小数
            //headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
            pointFormat:
              '<tr><td style="color:{series.color};padding:0">{series.name}:</td>' +
              '<td style="padding:0"><b>{point.y}' +
              data.danwei +
              "</b> </td></tr>",
            footerFormat: "</table>",
            shared: true,
            useHTML: true,
            dateTimeLabelFormats: {
              millisecond: "%H:%M:%S.%L",
              second: "%H:%M:%S",
              minute: "%H:%M",
              hour: "%H:%M",
              day: "%m-%d %H时",
              week: "%m-%d",
              month: "%Y-%m",
              year: "%Y",
            },
          },
          legend: {
            enabled: chartData.series.length > 1 ? true : false,
            // 图例定位
            layout: "horizontal", // 水平布局:“horizontal”, 垂直布局:“vertical”
            floating: false, // 图列是否浮动
            align: "right",

            // 图例容器
            //width:'100%',		// number	|| String
            padding: 2, // 内边距
            margin: 2,
            borderRadius: 5,
            //borderWidth:1,
            verticalAlign: "top",

            // 图例项
            //itemWidth:120,		// 宽度
            itemDistance: 10, // 间距	20
            y: -10,
            itemMarginTop: 2,
            itemStyle: {},
            itemHoverStyle: {},
          },
          credits: {
            enabled: false,
          },
          series: chartData.series,
        });
      });
    },
    seriesDataFormat(data, opts) {
      var names = data.names || [],
        list = data.list || data.lists,
        series = [],
        categories = [],
        maxVal = 0;
      if (names[0] && list) {
        var colors = [
          "#7CB5EC",
          "#90ED7D",
          "#F7A35C",
          "#8085E9",
          "#F15C80",
          "#E4D354",
          "#2B908F",
          "#F45B5B",
          "#91E8E1",
          "#0769CB",
          "#00ABBD",
          "#ffd886",
          "#9F2E61",
          "#4D670C",
        ];

        var len = names.length;
        for (var i = 0; i < len; i++) {
          var item = names[i];
          var serie = {
            name: item.name,
            data: [],
            key: item.key,
            type: data.chartType,
            color: colors[i],
          };
          opts && serie.type && (serie.type = opts.type);
          series.push(serie);
        }

        for (var item of list) {
          var values = item.values;
          //var datetime = item[opts.datekey || 'dateUnit'];
          //var time = datetime.indexOf(' ') > 0 ? datetime.split(' ')[1] : datetime;
          var timestamp = item["date"];

          //categories.push(timestamp);
          for (var serie of series) {
            var value = values[serie.key] * 1;
            Math.abs(value) > maxVal && (maxVal = Math.abs(value));
            serie.data.push([timestamp, value]);
          }
        }
      }
      return { series: series, categories: categories, maxVal: maxVal };
    },
    discernValidAlarmValue(alarms, list, series, direction, opts) {
      var xLength = (list || []).length,
        maxAlarm = 0,
        opts = opts || {};
      if (alarms && xLength) {
        var value = alarms.value;

        // discern
        var levelDist = [
          { color: "red", name: "红色报警线" },
          { color: "orange", name: "橙色报警线" },
          { color: "yellow", name: "黄色报警线" },
          { color: "blue", name: "蓝色报警线" }
        ],
          alarmLine = {},
          setAlarmSerie = function (value, name, color) {
            // 修改蓝色色值
            color === "blue" && (color = "#3BAFFB");
            var sx = list[0].date,
              ex = list[xLength - 1].date;
            var serie = {
              name: name,
              type: "spline",
              data: [
                { x: sx, y: value },
                { x: ex, y: value },
              ],
              color: color,
              enableMouseTracking: false,
              legend: false,
              showInLegend: false,
              dashStyle: "ShortDot",
              lineWidth: opts.lineWidth || 1,
              states: {
                inactive: {
                  opacity: opts.opacity,
                },
              },
              dataLabels: {
                enabled: opts.valEnabled || false, // 数据值, 2022/11/11(周五) 因多条报警线暂时关闭
                //backgroundColor:'red',
                verticalAlign: "middle",
                padding: 0,
                defer: false,
                allowOverlap: true,
                color: color,
                style: {
                  textOutline: "none",
                },
              },
              tooltip: {
                //footerFormat:'',
                //pointFormat:'',
                headerFormat: "",
                //nullFormat:'',
              },
              marker: {
                enabled: false,
              },
              zIndex: -10,
            };
            series.push(serie);
          };

        /* 智能报警线
      var level = (~~alarms.alarmLevel || levelDist.length+1) - 1;
      var nearLevel = level ? level - 1 : level;
      var alarm = levelDist[level];
      var nearAlarm = levelDist[nearLevel];
      nearAlarm.value = value[nearAlarm.color];
      alarmLine[nearAlarm.color] = nearAlarm;
      if(alarm){
        alarm.value = value[alarm.color];
        alarmLine[alarm.color] = alarm;
      }; */

        // 多条报警线
        for (var item of levelDist) {
          item.value = value[item.color];
          alarmLine[item.color] = item;
        }

        // add
        for (var key in alarmLine) {
          var line = alarmLine[key];
          line.value > maxAlarm && (maxAlarm = line.value);
          setAlarmSerie(line.value, line.name, line.color);
          direction && setAlarmSerie(0 - line.value, line.name, line.color);
        }
      }
      return { series, maxAlarm };
    },

    /** 切换图表类型 */
    switchChartType(type) {
      this.currentChartType = type;
      if (this.chartInstance) {
        this.chartInstance.series.forEach((series) => {
          series.update({ type: this.currentChartType });
        });
      }
    },
    loadData: reqApi.common.getRequst,
    cancelForm() {
      this.form.visible = false;
    },
    submitForm(form, item) {
      reqApi.common.submitForm.call(this, form, item);
    },
  },
};
</script>
<style rel="stylesheet/scss" lang="scss" scope>
.qyzz {}
</style>
