<template>
  <div>
    <el-form ref="FBData" :model="FBData" label-width="90px">
      <el-row>
        <el-col :span="14">
          <div class="svgContainer">
            <div style="display: flex;align-items: center;">
              <div style="font-size: 14px;color: slategrey;transform: rotate(-90deg);width: 68px;">
                垂深(m)
              </div>
              <svg class="dwfbSvg"></svg>

            </div>
            <div style="text-align: center;font-size: 14px;color: slategrey">地温条件(℃)</div>
          </div>
        </el-col>
        <el-col :span="10">
          <el-form :model="DistributionTab" ref="DistributionTab" size="small" :inline="true" label-width="108px">
            <div style="margin-left: 4%">
              <el-form-item>
                <el-radio v-model="selectedOption" label="1">地温-梯度定义</el-radio>
                <el-radio v-model="selectedOption" label="2">地温分布定义</el-radio>
              </el-form-item>
            </div>
            <div v-if="selectedOption === '1'" style="margin-bottom: 5%">
              <el-form-item label="地面温度" prop="dmwd">
                <el-input style="width: 100px" v-model="DistributionTab.dmwd" placeholder="请输入" clearable/>
                <el-select style="width: 98px; margin: 0 5px" disabled v-model="DistributionTab.dw" placeholder="˚C">
                  <el-option v-for="item in Options" :key="item.id" :label="item.dw" :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="地温梯度" prop="dwtd">
                <el-input style="width: 100px" v-model="DistributionTab.dwtd" placeholder="请输入" clearable/>
                <el-select style="width: 98px; margin: 0 5px" disabled v-model="DistributionTab.dw"
                           placeholder="˚C/100m">
                  <el-option v-for="item in Options" :key="item.id" :label="item.dw" :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button size="mini" type="primary" plain @click="handSave">保存</el-button>
              </el-form-item>

              <el-card style="height: calc(100vh - 310px);">
                <div style="
                      display: flex;
                      flex-direction: row;
                      justify-content: space-between;
                    ">
                  <div>
                    <span>输出结果</span>
                  </div>
                  <div style="margin: 10px 10px">
                    <el-button plain size="mini" type="primary" @click="handResAdd">新增</el-button>
                  </div>
                </div>
                <el-table height="380" :data="tableDataRes" border style="width: 100%; max-height: 380px">
                  <el-table-column prop="js" label="井深m" align="center">
                  </el-table-column>
                  <el-table-column prop="cs" label="垂深m" align="center">
                  </el-table-column>
                  <el-table-column prop="wd" label="温度℃" align="center">
                  </el-table-column>

                  <el-table-column label="操作" align="center" width="100px" fixed="right">
                    <template slot-scope="scope">
                      <i class="el-icon-edit" style="
                            font-size: 20px;
                            color: #1c84c6;
                            margin-right: 15px;
                          " @click="handleResEdit(scope.row)"></i>
                      <i class="el-icon-delete" style="
                            font-size: 20px;
                            color: #1c84c6;
                            margin-right: 15px;
                          " @click="handleResDelete(scope.row)"></i>
                    </template>
                  </el-table-column>
                </el-table>
                <pagination small v-show="total > 0" :total="total" :page.sync="queryRes.pageNum"
                            :limit.sync="queryRes.pageSize" @pagination="getResList"/>
              </el-card>
            </div>

            <div v-if="selectedOption === '2'" style="text-align: right">
              <div style="margin: -8% 4% 4%; max-height: 330px; height: 330px">
                <div style="display: inline-block; margin-bottom: 5px">
                  <el-button plain size="mini" type="primary" @click="handFBAdd">新增</el-button>
                </div>
                <el-table height="230" :data="FBTabData" border style="width: 100%">
                  <el-table-column prop="cs" label="垂深m" align="center">
                  </el-table-column>
                  <el-table-column prop="wd" label="温度˚C" align="center">
                  </el-table-column>
                  <el-table-column label="操作" align="center" width="100px" fixed="right">
                    <template slot-scope="scope">
                      <i class="el-icon-edit" style="
                            font-size: 20px;
                            color: #1c84c6;
                            margin-right: 15px;
                          " @click="handleFBEdit(scope.row)"></i>
                      <i class="el-icon-delete" style="
                            font-size: 20px;
                            color: #1c84c6;
                            margin-right: 15px;
                          " @click="handleFBDelete(scope.row)"></i>
                    </template>
                  </el-table-column>
                </el-table>
                <pagination small v-show="total > 0" :total="total" :page.sync="queryRes.pageNum"
                            :limit.sync="queryRes.pageSize" @pagination="getFBList"/>
              </div>

              <el-card style="height: calc(100vh - 490px); margin-top: -5%">
                <div style="
                      display: flex;
                      flex-direction: row;
                      justify-content: space-between;
                    ">
                  <div>
                    <span>输出结果</span>
                  </div>
                  <div style="margin: 10px 10px">
                    <el-button plain size="mini" type="primary" @click="handResAdd">新增</el-button>
                  </div>
                </div>
                <el-table height="190" :data="tableDataRes" border style="width: 100%; max-height: 240px">
                  <el-table-column prop="js" label="井深m" align="center">
                  </el-table-column>
                  <el-table-column prop="cs" label="垂深m" align="center">
                  </el-table-column>
                  <el-table-column prop="wd" label="温度℃" align="center">
                  </el-table-column>

                  <el-table-column label="操作" align="center" width="100px" fixed="right">
                    <template slot-scope="scope">
                      <i class="el-icon-edit" style="
                            font-size: 20px;
                            color: #1c84c6;
                            margin-right: 15px;
                          " @click="handleResEdit(scope.row)"></i>
                      <i class="el-icon-delete" style="
                            font-size: 20px;
                            color: #1c84c6;
                            margin-right: 15px;
                          " @click="handleResDelete(scope.row)"></i>
                    </template>
                  </el-table-column>
                </el-table>
                <pagination small v-show="total > 0" :total="total" :page.sync="queryRes.pageNum"
                            :limit.sync="queryRes.pageSize" @pagination="getResList"/>
              </el-card>
            </div>

            <el-dialog :title="title" :visible.sync="openFB" width="50%" append-to-body center>
              <el-form ref="formFB" :model="formFB" label-width="80px" :rules="rules">
                <el-row>
                  <el-form-item label="垂深m" prop="cs">
                    <el-input v-model="formFB.cs" placeholder="请输入垂深m"/>
                  </el-form-item>
                </el-row>
                <el-row>
                  <el-form-item label="温度" prop="wd">
                    <el-input v-model="formFB.wd" placeholder="请输入温度"/>
                  </el-form-item>
                </el-row>

                <!-- <el-row>
                  <el-form-item label="井号代码" prop="jhdm">
                    <el-input
                      v-model="formFB.jhdm"
                      placeholder="请输入井号"
                    />
                  </el-form-item>
                </el-row>
                <el-row>
                  <el-form-item label="井号" prop="jh">
                    <el-input
                      v-model="formFB.jh"
                      placeholder="请输入井号代码"
                    />
                  </el-form-item>
                </el-row> -->
                <el-row>
                  <el-form-item label="描述" prop="remark">
                    <el-input v-model="formFB.remark" placeholder="请输入"/>
                  </el-form-item>
                </el-row>
              </el-form>

              <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitFBForm">确 定</el-button>
                <el-button @click="cancelFB">取 消</el-button>
              </div>
            </el-dialog>
          </el-form>
        </el-col>
      </el-row>
    </el-form>
    <el-dialog :title="title" :visible.sync="openRes" width="50%" append-to-body center>
      <el-form ref="formRes" :model="formRes" label-width="80px" :rules="rules">
        <el-row>
          <el-form-item label="垂深m" prop="cs">
            <el-input v-model="formRes.cs" placeholder="请输入垂深m"/>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="井深m" prop="js">
            <el-input v-model="formRes.js" placeholder="请输入井深m"/>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="温度" prop="wd">
            <el-input v-model="formRes.wd" placeholder="请输入温度"/>
          </el-form-item>
        </el-row>

        <!-- <el-row>
          <el-form-item label="井号代码" prop="jhdm">
            <el-input v-model="formRes.jhdm" placeholder="请输入井号" />
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="井号" prop="jh">
            <el-input v-model="formRes.jh" placeholder="请输入井号代码" />
          </el-form-item>
        </el-row> -->
        <el-row>
          <el-form-item label="描述" prop="remark">
            <el-input v-model="formRes.remark" placeholder="请输入"/>
          </el-form-item>
        </el-row>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitResForm">确 定</el-button>
        <el-button @click="cancelRes">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import * as d3 from "d3";
import {
  getDcxlt,  //地层序列图
  listStratumData, //地层序列
  getStratum,
  addStratum,
  updateStratum,
  delStratum,
  listPoreData, //孔隙压力系数
  getPore,
  addPore,
  updatePore,
  delPore,
  listSpecialData, //标识特殊岩性层
  getSpecial,
  addSpecial,
  updateSpecial,
  delSpecial,
  getDwfbt,  //地温分布图
  getGroundTemperature, //地温分布
  addGroundTemperature,
  updateGroundTemperature,
  listDistribution, //分布定义
  addDistribution,
  updateDistribution,
  delDistribution,
  listRes, //输出结果
  addRes,
  updateRes,
  delRes,
} from "@/api/geologicalScheme/stratigraphicSequence/stratigraphicInformation";

export default {
  name: "geologyDwfb",
  data() {
    return {
      FBData: {}, //地温分布数据
      DistributionTab: {
        dmwd: "",
        dw: "",
      },
      selectedOption: "1", // 默认选中地温-梯度定义
      Options: [{id: 1, dw: "m"}],
      tableDataRes: [
        {
          js: "0.00",
          cs: "0.00",
          wd: "15.3",
        },
        {
          js: "5915.02",
          cs: "4900.27",
          wd: "182.2",
        },
      ],
      queryRes: {
        pageNum: 1,
        pageSize: 5,
      },
      FBTabData: [],
      openFB: false,
      openRes: false,
      title: "",
      formFB: {},
      formRes: {},
      rules: {
        jh: [{required: true, message: "井号不能为空", trigger: "blur"}],
        jhdm: [
          {required: true, message: "井号代码不能为空", trigger: "blur"},
        ],
      },
      total: 0,
      dwfbSvg: {},
      curvePath: {},
      //svg x y轴
      x1: {},
      y1: {},
      svgLine: {},
      width: 600,
      svgWidth: 600,
      height: 650,
      marginTop: 20,
      marginRight: 0,
      marginBottom: 30,
      marginLeft: 40,
    }
  },
  mounted() {
    this.getDwfbPic()
    this.getDistributionList();
    this.getResList();
    this.getFBList();

  },
  methods: {
    //地温分布图
    getDwfbPic() {
      getDwfbt({jhdm: this.$route.query.jhdm}).then(res => {
        console.log('地温分布图', res.dxxlmap)
        if (res.code == 200) {
          this.drawDwfbSvg(res.dxxlmap)

        }
      })
    },
    //画地层序列图
    drawDwfbSvg(data) {
      d3.select(".dwfbSvg").selectAll('*').remove();
      /*****************************************************svg1第一个曲线模块*************************************************/
      //x轴比例尺
      this.x1 = d3.scaleLinear([data.xmin, data.xmax], [this.marginLeft, this.width]);
      this.y1 = d3.scaleLinear([data.ymax, data.ymin], [this.height - this.marginBottom, this.marginTop]);
      // 创建svg容器
      this.dwfbSvg = d3.select(".dwfbSvg")
        .attr("viewBox", [0, 0, this.svgWidth, this.height])
        .attr("width", this.width)
        .attr("height", this.height)
        .attr("style", "max-width: 100%; height: auto; height: intrinsic; font: 14px sans-serif;")
        .style("-webkit-tap-highlight-color", "transparent")
      // .style("overflow", "visible")
      // .on("pointerenter pointermove", pointermoved)
      // .on("pointerleave", this.pointerleft)
      // .on("touchstart", event => event.preventDefault());
      // 根据比例尺 创建曲线一x坐标轴
      this.dwfbSvg.append("g")
        .attr("class", "curveXcale noPath")
        // .attr("transform", `translate(0,${this.marginTop})`)
        .attr("transform", `translate(0,${this.height - this.marginBottom})`)
        .call(d3.axisBottom(this.x1).ticks(6).tickSizeOuter(0))
        // .call(d3.axisTop(x).ticks(this.width / 200).tickSizeOuter(0))
        .call(g => g.selectAll(".tick line").clone()
          .attr("y2", -(this.height - 50)) //-(height-marginTop-marginBottom)
          // .attr("stroke-opacity", 0.1)
          .attr("stroke", "#ccc"))
      // 根据比例尺 创建y坐标轴
      this.dwfbSvg.append("g")
        .attr("class", "Ycale noPath")
        .attr("transform", `translate(${this.width},0)`)
        .call(d3.axisLeft(this.y1).ticks(6).tickSizeOuter(0))
      this.dwfbSvg.append("g")
        .attr("class", "curveYcale noPath")
        .attr("transform", `translate(${this.marginLeft},0)`)
        .call(d3.axisLeft(this.y1).ticks(6).tickSizeOuter(0))
        // .call(g => g.select(".domain").remove())
        .call(g => g.selectAll(".tick line").clone()
            .attr("x2", this.width - this.marginLeft)  //width - marginLeft
            .attr("stroke", "#ccc")
          // .attr("stroke-opacity", 0.1)
          // .attr("stroke-dasharray", "5,5")
        )
      this.dwfbSvg.selectAll(".Ycale text")
        .style("fill", "transparent");
      this.dwfbSvg.selectAll(".noPath path")
        .style("stroke", "#ccc");
      //y坐标轴名称
      // .call(g => g.append("text")
      //   .attr("x", -this.marginLeft)
      //   .attr("y", 10)
      //   .attr("fill", "currentColor")
      //   .attr("text-anchor", "start")
      //   .text("垂深(m)"));
      // 创建折线
      this.svgLine = d3.line()
        .x(d => this.x1(d.x))
        .y(d => this.y1(d.y));
      // 绘制曲线
      this.curvePath = this.dwfbSvg.append("path")
        .attr("class", "svg1CurveLine")
        // .data(this.aapl2) //取数据，点击事件的d可以打印出数据
        .attr("fill", "none")   //填充
        .attr("stroke", 'rgb(238,188,7)')
        .attr("stroke-width", 3)   //线粗细
        .attr("d", this.svgLine(data.czdata))
      //在0点绘制两条线
      const y0Data = [
        {
          x: 0,
          y: data.ymax
        }, {
          x: 0,
          y: data.ymin
        }
      ]
      const x0Data = [
        {
          x: data.xmin,
          y: 0
        }, {
          x: data.xmax,
          y: 0
        }
      ]
      this.dwfbSvg.append("path")
        .attr("class", "x0Line")
        .attr("fill", "none")   //填充
        .attr("stroke", '#000')
        .attr("stroke-width", 1)   //线粗细
        .attr("d", this.svgLine(x0Data))
      this.dwfbSvg.append("path")
        .attr("class", "x0Line")
        .attr("fill", "none")   //填充
        .attr("stroke", '#000')
        .attr("stroke-width", 1)   //线粗细
        .attr("d", this.svgLine(y0Data))
      // 画点
      for (let i = 0; i < data.czdata.length; i++) {
        const circleX = this.x1(data.czdata[i].x); // 圆心的x坐标
        const circleY = this.y1(data.czdata[i].y); // 圆心的y坐标
        const circleRadius = 4; // 圆点的半径
        // 在SVG容器中绘制一个实心圆点
        this.dwfbSvg.append("circle")
          .attr("cx", circleX) // 设置圆心x坐标
          .attr("cy", circleY) // 设置圆心y坐标
          .attr("r", circleRadius) // 设置半径
          .attr("fill", "rgb(234,160,68)") // 设置填充颜色为黑色
          .attr("stroke", "none"); // 不设置描边
      }

    },
    /** 地温分布查询列表 */
    getDistributionList() {
      this.loading = true;
      const jhdm = this.$route.query.jhdm;
      getGroundTemperature(jhdm).then((response) => {
        // console.log(response, "地温分布res");
        this.DistributionTab = response.data;
        this.loading = false;
      });
    },
    /** 输出结果查询列表 */
    getResList() {
      this.loading = true;
      this.jhdm = this.$route.query.jhdm;
      listRes({jhdm: this.jhdm}).then((response) => {
        // console.log(response, "输出结果res");
        this.tableDataRes = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    /** 分布定义查询列表 */
    getFBList() {
      this.loading = true;
      this.jhdm = this.$route.query.jhdm;
      listDistribution({jhdm: this.jhdm}).then((response) => {
        // console.log(response, "输出结果res");
        this.FBTabData = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    reset() {
      this.formDcxl = {
        cs: "",
        xs: "",
        cwds: "",
        dcid: "",
        color: "",
        jhdm: "",
        jh: "",
        remark: "",
      };

      this.formRes = {
        cs: "",
        js: "",
        wd: "",
        jh: "",
        jhdm: "",
        remark: "",
      };
      this.formFB = {
        cs: "",
        wd: "",
        jh: "",
        jhdm: "",
        remark: "",
      };

      this.resetForm("formDcxl");
      this.resetForm("formFB");
      this.resetForm("formRes");
    },
    /****分布定义修改 */
    handleFBEdit(row) {
      this.openFB = true;
      this.formFB = {...row};
    },


    /*** 分布定义删除 */
    handleFBDelete(row) {
      const id = row.id;
      this.$modal
        .confirm('是否确认删除编号为"' + id + '"的数据项？')
        .then(function () {
          return delDistribution(id);
        })
        .then(() => {
          this.getFBList();
          this.getDwfbPic()
          this.$emit('getDwfbPic')
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => {
        });
    },

    /**** 新增 */
    handFBAdd() {
      this.reset();
      this.openFB = true;
      this.title = "新增";
    },
    /** 地温分布保存 */
    handSave() {
      this.$refs["DistributionTab"].validate((valid) => {
        if (valid) {
          if (this.DistributionTab.id != null) {
            const val = {
              id: this.DistributionTab.id,
              jh: this.$route.query.jh,
              jhdm: this.$route.query.jhdm,
              dwdy: this.DistributionTab.dwdy,
              dmwd: parseFloat(this.DistributionTab.dmwd),
              dwtd: parseInt(this.DistributionTab.dwtd),
              remark: this.DistributionTab.remark,
            };
            updateGroundTemperature(val).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.getDistributionList();
              this.getDwfbPic()
              this.$emit('getDwfbPic')
            });
          } else {
            const val = {
              jh: this.$route.query.jh,
              jhdm: this.$route.query.jhdm,
              dwdy: this.DistributionTab.dwdy,
              dmwd: parseFloat(this.DistributionTab.dmwd),
              dwtd: parseInt(this.DistributionTab.dwtd),
              remark: this.DistributionTab.remark,
            };
            addGroundTemperature(val).then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.getDistributionList();
              this.getDwfbPic()
              this.$emit('getDwfbPic')
            });
          }
        }
      });
    },
    /**** 新增 */
    handResAdd() {
      this.reset();
      this.openRes = true;
      this.title = "输出结果新增";
    },
    /****输出结果修改 */
    handleResEdit(row) {
      this.openRes = true;
      this.formRes = {...row};
    },
    /*** 删除 */
    handleResDelete(row) {
      const id = row.id;
      this.$modal
        .confirm('是否确认删除编号为"' + id + '"的数据项？')
        .then(function () {
          return delRes(id);
        })
        .then(() => {
          this.getResList();
          this.getDwfbPic()
          this.$emit('getDwfbPic')
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => {
        });
    },
    /****  分布定义编辑 */
    submitFBForm() {
      this.$refs["formFB"].validate((valid) => {
        if (valid) {
          if (this.formFB.id != null) {
            const val = {
              id: this.formFB.id,
              jh: this.$route.query.jh,
              jhdm: this.$route.query.jhdm,
              cs: parseFloat(this.formFB.cs),
              wd: parseInt(this.formFB.wd),
              remark: this.formFB.remark,
            };
            updateDistribution(val).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.openFB = false;
              this.getFBList();
              this.getDwfbPic()
              this.$emit('getDwfbPic')
            });
          } else {
            const val = {
              jh: this.$route.query.jh,
              jhdm: this.$route.query.jhdm,
              cs: parseFloat(this.formFB.cs),
              wd: parseInt(this.formFB.wd),
              remark: this.formFB.remark,
            };
            addDistribution(val).then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.openFB = false;
              this.getFBList();
              this.getDwfbPic()
              this.$emit('getDwfbPic')
            });
          }
        }
      });
    },
    /***关闭 */
    cancelFB() {
      this.openFB = false;
    },
    /****  编辑 */
    submitResForm() {
      this.$refs["formRes"].validate((valid) => {
        if (valid) {
          if (this.formRes.id != null) {
            const val = {
              id: this.formRes.id,
              jh: this.$route.query.jh,
              jhdm: this.$route.query.jhdm,
              cs: parseFloat(this.formRes.cs),
              wd: parseInt(this.formRes.wd),
              js: parseInt(this.formRes.js),
              remark: this.formRes.remark,
            };
            updateRes(val).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.openRes = false;
              this.getResList();
              this.getDwfbPic()
              this.$emit('getDwfbPic')
            });
          } else {
            const val = {
              jh: this.$route.query.jh,
              jhdm: this.$route.query.jhdm,
              cs: parseFloat(this.formRes.cs),
              wd: parseInt(this.formRes.wd),
              js: parseInt(this.formRes.js),
              remark: this.formRes.remark,
            };
            addRes(val).then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.openRes = false;
              this.getResList();
              this.getDwfbPic()
              this.$emit('getDwfbPic')
            });
          }
        }
      });
    },
    /***关闭 */
    cancelRes() {
      this.openRes = false;
    },


  },


}
</script>

<style scoped>
.svgContainer {
  height: calc(100vh - 180px);
  border: 1px solid #ccc;
  margin: 20px;
  padding-right: 10px;
}
</style>
