<!--
 * @Author: SunTao 328867980@qq.com
 * @Date: 2025-02-12 16:44:44
 * @LastEditors: SunTao 328867980@qq.com
 * @LastEditTime: 2025-02-17 13:42:25
 * @FilePath: \znxjxt-ui\src\views\xj\hisense\inter-change\components\add-inter.vue
 * @Description: 海信-工区-新增/编辑
-->
<template>
  <div class="dialog-content">
    <el-form class="addForm" ref="addInterForm" :model="addInterForm" :rules="rules" label-width="11rem">
      <el-row :gutter="24">
        <el-col :span="24">
          <el-form-item label="工区名称：" prop="taskAreaName">
            <el-input v-model="addInterForm.taskAreaName" placeholder="请填写名称" style="width: 100%" clearable>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="24">
          <el-form-item label="工区code：" prop="taskAreaCode">
            <el-input v-model="addInterForm.taskAreaCode" placeholder="请填写code" style="width: 100%" clearable>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="24">
          <el-form-item label="matBaseTaskAreaId：" prop="matBaseTaskAreaId">
            <el-input v-model="addInterForm.matBaseTaskAreaId" placeholder="请填写matBaseTaskAreaId" style="width: 100%"
              clearable>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="24">
          <el-form-item label="parRoadCode：" prop="parRoadCode">
            <el-input v-model="addInterForm.parRoadCode" placeholder="请填写桩号" style="width: 100%" clearable>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="工区位置">
        <fssm-map ref="diseaseMap" @map-click="getMapClick" class="no-hand-cursor"></fssm-map>
      </el-form-item>
    </el-form>
    <div class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </div>
</template>

<script>
import { add, updata } from '@/api/xj/hisense/task-area'
// 地图
import FssmMap from "@/components/map/fssm-map.vue";
import { Feature } from "ol";
import { Point } from "ol/geom";
import { Style } from "ol/style";
import * as styleExports from "ol/style";
import VectorLayer from "ol/layer/Vector";
import { Vector as VectorSource } from "ol/source";

export default {
  name: "AddArea",
  components: {
    FssmMap
  },
  props: {
    // 接收父组件传过来的数据
    dialogItem: {
      type: Object,
      default: () => { },
    },
  },
  data() {
    return {
      // 新增表单
      addInterForm: {
        taskAreaName: "",
        taskAreaCode: "",
        matBaseTaskAreaId: "",
        parRoadCode: "",
      },
      // 表单校验规则
      rules: {
        taskAreaName: [{ required: true, message: "请填写名称", trigger: "blur" }],
        taskAreaCode: [{ required: true, message: "请填写工区code", trigger: "blur" }],
        matBaseTaskAreaId: [{ required: true, message: "请填写matBaseTaskAreaId", trigger: "blur" }],
        parRoadCode: [{ required: true, message: "请填写parRoadCode", trigger: "blur" },
          // {
          //   pattern: /^(0|[1-9]\d*)(\.\d{1,3})?$/,
          //   message: "请输入非负数",
          // },
        ],
      },
      //图层对象
      markLayerPoints: null,
      // 新增/编辑打点数组
      markers: [],
    }
  },
  watch: {
    dialogItem: {
      handler(val) {
        if (val) {
          this.addInterForm = JSON.parse(JSON.stringify(val))
          if (val.lngLat) {
            this.markers = val.lngLat.split(',').map(Number)
            this.$nextTick(() => {
              const map = this.$refs.diseaseMap.instance.get("map");
              map.getView().setCenter(this.markers);
            });
            this.drawMapPoint();
          }
        }
      }, immediate: true, deep: true
    }
  },
  mounted() {

  },
  methods: {
    /**
     * @description: 传回来的地图点击事件获取点位数据
     * @param {*} e
     * @return {*}
     */
    getMapClick(e) {
      const map = this.$refs.diseaseMap.instance.get("map");
      map.removeLayer(this.markLayerPoints);
      const { coordinate } = e;
      this.markers = coordinate;
      this.drawMapPoint();
    },


    /**
     * @description: 绘制地图点位
     * @param {*} val
     * @return {*}
     */
    drawMapPoint() {
      const features = [];
      const point = new Point(this.markers); // 修改坐标格式
      const feature = new Feature({
        geometry: point,
        type: "icon", //  自己设置一个标识
      });
      feature.setStyle([
        new Style({
          image: new styleExports.Circle({
            //点样式
            radius: 6,
            stroke: new styleExports.Stroke({
              color: "#9a9c9e",
              width: 4,
            }),
            fill: new styleExports.Fill({
              color: "blue",
            }),
          }),
        }),
      ]);
      features.push(feature);
      //设置地图的数据源
      const pointSource = new VectorSource({
        features,
      });
      this.markLayerPoints = new VectorLayer({
        source: pointSource,
        properties: {
          type: "point",
        },
      });
      this.$nextTick(() => {
        const map = this.$refs.diseaseMap.instance.get("map");
        map.addLayer(this.markLayerPoints);
      });
    },

    /**
     * @description: 点击确定事件
     * @return {*}
     */
    submitForm() {
      this.$refs.addInterForm.validate((valid) => {
        if (valid) {
          // 验证点位
          // if (this.markers.length < 1) {
          //   this.$modal.msgWarning("请选择工区位置");
          //   return false;
          // }
          const data = {
            ...this.addInterForm,
            lngLat: this.markers.length > 0 ? this.markers.flat().join(",") : "",
          };
          if (this.addInterForm.id) {
            updata(data).then(({ code }) => {
              if (code === 200) {
                this.$modal.msgSuccess("更新成功");
                this.$emit("cancel");
              }
            });
          } else {
            add(data).then(({ code }) => {
              if (code === 200) {
                this.$modal.msgSuccess("新增成功");
                this.$emit("cancel");
              }
            });
          }
        }
      });
    },

    /**
     * @description: 点击取消事件
     * @return {*}
     */
    cancel() {
      this.$emit("cancel");
    },
  },
}
</script>

<style lang="scss" scoped>
.dialog-content {
  width: 100%;
  // height: 20rem;
}

/* 新增地图框样式 */
.no-hand-cursor {
  cursor: default !important;
  width: 100%;
  height: 20rem;
}

/* 页脚 */
.dialog-footer {
  display: flex;
  justify-content: flex-end;
}
</style>
