<template>
  <div class="app-containerjsjg">
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
          v-hasPermi="['system:sjJsdb:add']">新增</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-row :gutter="10" class="content-row">
      <!-- 左侧表格 -->
      <el-col :span="15">
        <el-table border v-loading="loading" :data="sjJsdbList" @selection-change="handleSelectionChange"
          height="calc(100vh - 260px)">
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column label="井号" align="center" prop="jh" min-width="95" show-overflow-tooltip />
          <el-table-column label="套管层次" align="center" prop="tgcc" min-width="95" show-overflow-tooltip />
          <el-table-column label="钻头直径mm" align="center" prop="ztzj" min-width="100" show-overflow-tooltip />
          <el-table-column label="井深" align="center" prop="js" min-width="70" show-overflow-tooltip />
          <el-table-column label="套管外径" align="center" prop="tgwj" min-width="80" show-overflow-tooltip />
          <el-table-column label="套管顶部深度" align="center" prop="tgdbsd" min-width="100" show-overflow-tooltip />
          <el-table-column label="套管鞋深度" align="center" prop="tgxsd" min-width="90" show-overflow-tooltip />
          <el-table-column label="人工井底深度" align="center" prop="rgjdsd" min-width="100" show-overflow-tooltip />
          <el-table-column label="阻流环深度1" align="center" prop="zlhsd" min-width="100" show-overflow-tooltip />
          <el-table-column label="水泥外返深度" align="center" prop="snwfsd" min-width="100" show-overflow-tooltip />
          <el-table-column label="扶正器" align="center" prop="tgfzq" min-width="80" show-overflow-tooltip />
          <el-table-column label="套管附件1" align="center" prop="tgfj1" min-width="90" show-overflow-tooltip />
          <el-table-column label="套管附件2" align="center" prop="tgfj2" min-width="90" show-overflow-tooltip />
          <el-table-column label="套管附件3" align="center" prop="tgfj3" min-width="90" show-overflow-tooltip />
          <el-table-column label="套管附件4" align="center" prop="tgfj4" min-width="90" show-overflow-tooltip />
          <el-table-column label="套管附件深度1" align="center" prop="tgfj1sd" min-width="110" show-overflow-tooltip />
          <el-table-column label="套管附件深度2" align="center" prop="tgfj2sd" min-width="110" show-overflow-tooltip />
          <el-table-column label="套管附件深度3" align="center" prop="tgfj3sd" min-width="110" show-overflow-tooltip />
          <el-table-column label="套管附件深度4" align="center" prop="tgfj4sd" min-width="110" show-overflow-tooltip />
          <el-table-column label="套补距" align="center" prop="tbj" min-width="80" show-overflow-tooltip />
          <el-table-column label="阻流环深度2" align="center" prop="zlhsd1" min-width="100" show-overflow-tooltip />
          <el-table-column label="阻流环深度3" align="center" prop="zlhsd2" min-width="100" show-overflow-tooltip />
          <el-table-column label="套管附件5" align="center" prop="tgfj5" min-width="90" show-overflow-tooltip />
          <el-table-column label="套管附件6" align="center" prop="tgfj6" min-width="90" show-overflow-tooltip />
          <el-table-column label="套管附件7" align="center" prop="tgfj7" min-width="90" show-overflow-tooltip />
          <el-table-column label="套管附件8" align="center" prop="tgfj8" min-width="90" show-overflow-tooltip />
          <el-table-column label="套管附件深度5" align="center" prop="tgfj5sd" min-width="110" show-overflow-tooltip />
          <el-table-column label="套管附件深度6" align="center" prop="tgfj6sd" min-width="110" show-overflow-tooltip />
          <el-table-column label="套管附件深度7" align="center" prop="tgfj7sd" min-width="110" show-overflow-tooltip />
          <el-table-column label="套管附件深度8" align="center" prop="tgfj8sd" min-width="110" show-overflow-tooltip />
          <el-table-column label="操作" align="center" min-width="120" fixed="right"
            class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
                v-hasPermi="['system:sjJsdb:edit']">修改</el-button>
              <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
                v-hasPermi="['system:sjJsdb:remove']">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize" :page-sizes="[20, 40, 60, 80, 100]" @pagination="getList"
          style="padding: 10px 0;" />
      </el-col>

      <!-- 右侧井身结构图 -->
      <el-col :span="9">
        <div class="jsjgt-wrapper">
          <div class="jsjgt-title">井身结构图</div>
          <div class="jsjgt-body">
            <svg class="svg2"></svg>
            <div v-if="!currentJh" class="jsjgt-empty">请先选择井号</div>
          </div>
        </div>
      </el-col>
    </el-row>

    <!-- 添加或修改设计-井身结构数据对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="60%" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="110px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="井号" prop="jh">
              <el-input v-model="form.jh" placeholder="请输入井号" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="套管层次" prop="tgcc">
              <el-input v-model="form.tgcc" placeholder="请输入套管层次" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="钻头直径mm" prop="ztzj">
              <el-input v-model="form.ztzj" placeholder="请输入钻头直径" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="井深" prop="js">
              <el-input v-model="form.js" placeholder="请输入井深" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="套管外径" prop="tgwj">
              <el-input v-model="form.tgwj" placeholder="请输入套管外径" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="套管顶部深度" prop="tgdbsd">
              <el-input v-model="form.tgdbsd" placeholder="请输入套管顶部深度" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="套管鞋深度" prop="tgxsd">
              <el-input v-model="form.tgxsd" placeholder="请输入套管鞋深度" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="人工井底深度" prop="rgjdsd">
              <el-input v-model="form.rgjdsd" placeholder="请输入人工井底深度" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="阻流环深度1" prop="zlhsd">
              <el-input v-model="form.zlhsd" placeholder="请输入阻流环深度1" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="水泥外返深度" prop="snwfsd">
              <el-input v-model="form.snwfsd" placeholder="请输入水泥外返深度" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="扶正器" prop="tgfzq">
              <el-input v-model="form.tgfzq" placeholder="请输入扶正器" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="套管附件1" prop="tgfj1">
              <el-input v-model="form.tgfj1" placeholder="请输入套管附件1" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="套管附件2" prop="tgfj2">
              <el-input v-model="form.tgfj2" placeholder="请输入套管附件2" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="套管附件3" prop="tgfj3">
              <el-input v-model="form.tgfj3" placeholder="请输入套管附件3" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="套管附件4" prop="tgfj4">
              <el-input v-model="form.tgfj4" placeholder="请输入套管附件4" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="套管附件深度1" prop="tgfj1sd">
              <el-input v-model="form.tgfj1sd" placeholder="请输入套管附件深度1" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="套管附件深度2" prop="tgfj2sd">
              <el-input v-model="form.tgfj2sd" placeholder="请输入套管附件深度2" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="套管附件深度3" prop="tgfj3sd">
              <el-input v-model="form.tgfj3sd" placeholder="请输入套管附件深度3" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="套管附件深度4" prop="tgfj4sd">
              <el-input v-model="form.tgfj4sd" placeholder="请输入套管附件深度4" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="套补距" prop="tbj">
              <el-input v-model="form.tbj" placeholder="请输入套补距" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="阻流环深度2" prop="zlhsd1">
              <el-input v-model="form.zlhsd1" placeholder="请输入阻流环深度2" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="阻流环深度3" prop="zlhsd2">
              <el-input v-model="form.zlhsd2" placeholder="请输入阻流环深度3" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="套管附件5" prop="tgfj5">
              <el-input v-model="form.tgfj5" placeholder="请输入套管附件5" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="套管附件6" prop="tgfj6">
              <el-input v-model="form.tgfj6" placeholder="请输入套管附件6" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="套管附件7" prop="tgfj7">
              <el-input v-model="form.tgfj7" placeholder="请输入套管附件7" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="套管附件8" prop="tgfj8">
              <el-input v-model="form.tgfj8" placeholder="请输入套管附件8" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="套管附件深度5" prop="tgfj5sd">
              <el-input v-model="form.tgfj5sd" placeholder="请输入套管附件深度5" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="套管附件深度6" prop="tgfj6sd">
              <el-input v-model="form.tgfj6sd" placeholder="请输入套管附件深度6" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="套管附件深度7" prop="tgfj7sd">
              <el-input v-model="form.tgfj7sd" placeholder="请输入套管附件深度7" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="套管附件深度8" prop="tgfj8sd">
              <el-input v-model="form.tgfj8sd" placeholder="请输入套管附件深度8" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import * as d3 from "d3";
import { listSjJsdb, getSjJsdb, delSjJsdb, addSjJsdb, updateSjJsdb, getSjJsjgt } from "@/api/system/sjJsdb";

export default {
  name: "SjJsdb",
  props: {
    wellInfo: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      // 井身结构图相关参数
      width: 600,
      height: 800,
      marginTop: 20,
      marginRight: 30,
      marginBottom: 30,
      marginLeft: 40,
      maxX: 0,
      maxY: 0,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 设计-井身结构数据表格数据
      sjJsdbList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 20,
        jh: null,
        tgcc: null,
        ztzj: null,
        js: null,
        tgwj: null,
        tgdbsd: null,
        tgxsd: null,
        rgjdsd: null,
        zlhsd: null,
        snwfsd: null,
        tgfzq: null,
        tgfj1: null,
        tgfj2: null,
        tgfj3: null,
        tgfj4: null,
        tgfj1sd: null,
        tgfj2sd: null,
        tgfj3sd: null,
        tgfj4sd: null,
        tbj: null,
        zlhsd1: null,
        zlhsd2: null,
        tgfj5: null,
        tgfj6: null,
        tgfj7: null,
        tgfj8: null,
        tgfj5sd: null,
        tgfj6sd: null,
        tgfj7sd: null,
        tgfj8sd: null
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        jh: [
          { required: true, message: "井号不能为空", trigger: "blur" }
        ],
        tgcc: [
          { required: true, message: "套管层次不能为空", trigger: "blur" }
        ],
        ztzj: [
          { required: true, message: "钻头直径不能为空", trigger: "blur" }
        ],
        js: [
          { required: true, message: "井深不能为空", trigger: "blur" }
        ],
        tgwj: [
          { required: true, message: "套管外径不能为空", trigger: "blur" }
        ],
        tgdbsd: [
          { required: true, message: "套管底壁深度不能为空", trigger: "blur" }
        ],
      },
      currentJh: null,
    };
  },
  created() {
    this.queryParams.jh = this.wellInfo && this.wellInfo.jh ? this.wellInfo.jh : null;
    this.currentJh = this.queryParams.jh;
    this.getList();
    if (this.currentJh) {
      this.getJsjgSvg();
    }
  },
  watch: {
    'wellInfo.jh'(newJh) {
      const normalizedJh = newJh || null;
      if (normalizedJh !== this.queryParams.jh) {
        this.queryParams.jh = normalizedJh;
        this.currentJh = normalizedJh;
        this.queryParams.pageNum = 1;
        this.getList();
        if (this.currentJh) {
          this.getJsjgSvg();
        } else {
          this.clearSvg();
        }
      }
    }
  },
  methods: {
    /** 查询设计-井身结构数据列表 */
    getList() {
      this.loading = true;
      listSjJsdb(this.queryParams).then(response => {
        this.sjJsdbList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // =================== 井身结构图 ===================
    clearSvg() {
      d3.select(".svg2").selectAll("*").remove();
    },
    // 获取井身结构图数据（设计模块）
    getJsjgSvg() {
      if (!this.currentJh) {
        this.clearSvg();
        return;
      }
      getSjJsjgt({ jh: this.currentJh }).then(res => {
        if (res && res.code === 200 && res.jsJgmap) {
          this.maxX = Number(res.jsJgmap.maxX);
          this.maxY = Number(res.jsJgmap.maxY);
          this.getScalesSvg2(res.jsJgmap);
        } else {
          this.clearSvg();
        }
      }).catch(() => {
        this.clearSvg();
      });
    },
    getScalesSvg2(res) {
      this.clearSvg();
      const x = d3.scaleLinear([0, Number(res.maxX)], [0, this.width]);
      const y = d3.scaleLinear([Number(res.maxY), 0], [this.height - this.marginBottom, this.marginTop]);

      const line = d3.line()
        .x(d => x(d.value))
        .y(d => y(d.depth));

      const svg2 = d3.select(".svg2")
        .attr("viewBox", [0, 0, this.width, this.height])
        .attr("width", this.width)
        .attr("height", this.height)
        .attr("style", "max-width: 100%; height: auto; font: 10px sans-serif; padding:20px")
        .style("-webkit-tap-highlight-color", "transparent")
        .style("overflow", "visible");

      svg2.append("rect")
        .attr("width", this.width)
        .attr("height", this.height)
        .style("fill", "transparent"); // 设置背景色为浅灰色

      svg2.append("g")
        .attr("transform", `translate(0,${this.marginTop})`)
        .call(d3.axisTop(x).ticks(this.width / 100).tickSizeOuter(0));

      const tickCount = 50;
      const tickInterval = Math.max(1, Math.floor(Number(res.maxY) / tickCount));
      const tickValues = d3.range(0, Number(res.maxY) + 1, tickInterval);
      const tickFormat = (value) => {
        return value % 5 === 0 ? value : "";
      };
      const yAxis = d3.axisRight(y)
        .tickValues(tickValues)
        .tickFormat(tickFormat);
      svg2.append("g")
        .attr("transform", "translate(10,0)")
        .call(yAxis);

      svg2.selectAll(".tick text").style("fill", "#000");
      svg2.selectAll(".tick line").style("stroke", "#000");
      svg2.selectAll(".domain").style("stroke", "#000");

      const gradient = svg2.append("defs")
        .append("linearGradient")
        .attr("id", "gray-to-white-to-gray")
        .attr("x1", "0%")
        .attr("y1", "0%")
        .attr("x2", "100%")
        .attr("y2", "0%");
      gradient.append("stop")
        .attr("offset", "0%")
        .attr("stop-color", "gray")
        .attr("stop-opacity", 1);
      gradient.append("stop")
        .attr("offset", "50%")
        .attr("stop-color", "white")
        .attr("stop-opacity", 1);
      gradient.append("stop")
        .attr("offset", "100%")
        .attr("stop-color", "gray")
        .attr("stop-opacity", 1);

      const area = d3.area()
        .x0(d => x(d.value1))
        .x1(d => x(d.value2))
        .y0(d => y(d.depth1))
        .y1(d => y(d.depth2));

      // 深色填充区域（例如井筒内部）
      if (Array.isArray(res.svg2ConstructFillDark)) {
        for (let k = 0; k < res.svg2ConstructFillDark.length; k++) {
          const item = res.svg2ConstructFillDark[k];
          if (!item || !item.fill) continue;
          svg2.append("path")
            .attr("transform", `translate(0,0)`)
            .datum(item.fill)
            .attr("class", "area-dark")
            .attr("d", area)
            .attr("fill", "rgb(60,60,60)");
        }
      }

      if (Array.isArray(res.svg2ConstructFillGrey)) {
        for (let k = 0; k < res.svg2ConstructFillGrey.length; k++) {
          const item = res.svg2ConstructFillGrey[k];
          if (!item || !item.fill) continue;
          const path = svg2.append("path")
            .attr("transform", `translate(0,0)`)
            .datum(item.fill)
            .attr("class", "area")
            .attr("d", area);
          if (item.gradient === true) {
            path.style("fill", "url(#gray-to-white-to-gray)");
          } else {
            path.attr("fill", "silver");
          }
        }
      }

      const triangleLeft = { x1: 0, y1: 0, x2: -10, y2: 0, x3: 0, y3: -10 };
      const triangleRight = { x1: 0, y1: 0, x2: 0, y2: -10, x3: 10, y3: 0 };

      if (Array.isArray(res.svg2ConstructLeft)) {
        for (let j = 0; j < res.svg2ConstructLeft.length; j++) {
          const seg = res.svg2ConstructLeft[j];
          if (!seg || !seg.leftLine) continue;
          svg2.append("path")
            .attr("transform", `translate(0,0)`)
            .attr("fill", "none")
            .attr("stroke", "#000")
            .attr("stroke-width", 2)
            .attr("d", line(seg.leftLine));
          if (seg.leftLine[1]) {
            svg2.append("path")
              .datum(seg.leftLine[1])
              .attr("class", "triangle-point")
              .attr("fill", "rgb(0,0,0)")
              .attr("d", this.drawTriangle(triangleLeft))
              .attr("transform", d => `translate(${x(d.value)},${y(d.depth)})`);
          }
        }
      }

      if (Array.isArray(res.svg2ConstructRight)) {
        for (let j = 0; j < res.svg2ConstructRight.length; j++) {
          const seg = res.svg2ConstructRight[j];
          if (!seg || !seg.rightLine) continue;
          svg2.append("path")
            .attr("transform", `translate(0,0)`)
            .attr("fill", "none")
            .attr("stroke", "#000")
            .attr("stroke-width", 2)
            .attr("d", line(seg.rightLine));
          if (seg.rightLine[1]) {
            svg2.append("path")
              .datum(seg.rightLine[1])
              .attr("class", "triangle-point")
              .attr("fill", "rgb(0,0,0)")
              .attr("d", this.drawTriangle(triangleRight))
              .attr("transform", d => `translate(${x(d.value)},${y(d.depth)})`);
          }
        }
      }

      // 标注用的直线生成器（左右说明箭头）
      const arrowLine = d3.line()
        .x(d => x(d[0]))
        .y(d => y(d[1]))
        .curve(d3.curveLinear);

      // 左侧标注点与文字
      if (Array.isArray(res.svg2ConstructPointLeft)) {
        for (let i = 0; i < res.svg2ConstructPointLeft.length; i++) {
          const item = res.svg2ConstructPointLeft[i];
          if (!item || !Array.isArray(item.point) || item.point.length < 2) continue;

          // 箭头线
          svg2.append("path")
            .attr("d", arrowLine(item.point))
            .attr("stroke", "#000")
            .attr("fill", "none")
            .attr("stroke-width", 1)
            .attr("stroke-linecap", "round");

          // 起点实心圆
          const circleX = x(item.point[0][0]);
          const circleY = y(item.point[0][1]);
          svg2.append("circle")
            .attr("cx", circleX)
            .attr("cy", circleY)
            .attr("r", 3)
            .attr("fill", "#000")
            .attr("stroke", "none");

          // 文本位置在箭头起点右侧稍上
          const textX = x(item.point[0][0] + 20);
          const textY = y(item.point[0][1] - 3);
          const group = svg2.append("g")
            .attr("transform", "translate(0,0)");
          const text = group.append("text")
            .attr("x", textX + 10)
            .attr("y", textY)
            .attr("fill", "#000")
            .attr("font-size", "12px");

          if (item.describe1) {
            text.append("tspan")
              .attr("x", textX + 10)
              .attr("y", textY)
              .attr("font-weight", "bold")
              .text(item.describe1);
          }
          if (item.describe2) {
            text.append("tspan")
              .attr("x", textX + 10)
              .attr("y", textY + 16)
              .attr("font-weight", "bold")
              .text(item.describe2);
          }
          if (item.describe3) {
            text.append("tspan")
              .attr("x", textX + 10)
              .attr("y", textY + 32)
              .attr("font-weight", "bold")
              .text(item.describe3);
          }
        }
      }

      // 右侧标注点与文字
      if (Array.isArray(res.svg2ConstructPointRight)) {
        for (let i = 0; i < res.svg2ConstructPointRight.length; i++) {
          const item = res.svg2ConstructPointRight[i];
          if (!item || !Array.isArray(item.point) || item.point.length < 2) continue;

          svg2.append("path")
            .attr("d", arrowLine(item.point))
            .attr("stroke", "#000")
            .attr("fill", "none")
            .attr("stroke-width", 1)
            .attr("stroke-linecap", "round");

          const circleX = x(item.point[0][0]);
          const circleY = y(item.point[0][1]);
          svg2.append("circle")
            .attr("cx", circleX)
            .attr("cy", circleY)
            .attr("r", 3)
            .attr("fill", "#000")
            .attr("stroke", "none");

          const textX = x(item.point[0][0] + 20);
          const textY = y(item.point[0][1] - 3);
          const group = svg2.append("g")
            .attr("transform", "translate(0,0)");
          const text = group.append("text")
            .attr("x", textX + 10)
            .attr("y", textY)
            .attr("fill", "#000")
            .attr("font-size", "12px");

          if (item.describe1) {
            text.append("tspan")
              .attr("x", textX + 10)
              .attr("y", textY)
              .attr("font-weight", "bold")
              .text(item.describe1);
          }
          if (item.describe2) {
            text.append("tspan")
              .attr("x", textX + 10)
              .attr("y", textY + 16)
              .attr("font-weight", "bold")
              .text(item.describe2);
          }
          if (item.describe3) {
            text.append("tspan")
              .attr("x", textX + 10)
              .attr("y", textY + 32)
              .attr("font-weight", "bold")
              .text(item.describe3);
          }
        }
      }
    },
    drawTriangle(triangle) {
      return "M" + triangle.x1 + "," + triangle.y1 +
        "L" + triangle.x2 + "," + triangle.y2 +
        "L" + triangle.x3 + "," + triangle.y3 + "Z";
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        jh: null,
        tgcc: null,
        ztzj: null,
        js: null,
        tgwj: null,
        tgdbsd: null,
        tgxsd: null,
        rgjdsd: null,
        zlhsd: null,
        snwfsd: null,
        tgfzq: null,
        tgfj1: null,
        tgfj2: null,
        tgfj3: null,
        tgfj4: null,
        tgfj1sd: null,
        tgfj2sd: null,
        tgfj3sd: null,
        tgfj4sd: null,
        tbj: null,
        zlhsd1: null,
        zlhsd2: null,
        tgfj5: null,
        tgfj6: null,
        tgfj7: null,
        tgfj8: null,
        tgfj5sd: null,
        tgfj6sd: null,
        tgfj7sd: null,
        tgfj8sd: null
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.form.jh = this.wellInfo && this.wellInfo.jh ? this.wellInfo.jh : null;
      this.open = true;
      this.title = "添加设计-井身结构数据";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids
      getSjJsdb(id).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改设计-井身结构数据";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateSjJsdb(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addSjJsdb(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal.confirm('是否确认删除设计-井身结构数据编号为"' + ids + '"的数据项？').then(function () {
        return delSjJsdb(ids);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => { });
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('system/sjJsdb/export', {
        ...this.queryParams
      }, `sjJsdb_${new Date().getTime()}.xlsx`)
    }
  }
};
</script>
<style scoped lang="scss">
.app-containerjsjg {
  height: calc(100vh - 180px);
  margin: 5px;
}

.content-row {
  height: 100%;
}

.jsjgt-wrapper {
  height: calc(100vh - 260px);
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  background-color: #fff;
  overflow: hidden;
}

.jsjgt-title {
  padding: 6px 12px;
  font-size: 14px;
  font-weight: 600;
  color: #333;
  border-bottom: 1px solid #e4e7ed;
  background-color: #f5f7fa;
}

.jsjgt-body {
  flex: 1;
  display: flex;
  align-items: stretch;
  justify-content: center;
}

.jsjgt-body .svg2 {
  flex: 1;
}

.jsjgt-empty {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #c0c4cc;
}

::v-deep .el-table__cell>.cell {
  font-weight: normal;
}

::v-deep .el-table--medium .el-table__cell {
  padding: 0px 0 !important;
}

::v-deep.pagination-container {
  padding: 5px !important;
  margin: 0;
}
</style>
