<!--
 * @Author: SunTao 328867980@qq.com
 * @Date: 2024-10-15 14:27:36
 * @LastEditors: SunTao 328867980@qq.com
 * @LastEditTime: 2024-10-16 10:28:42
 * @FilePath: \znxjxt-ui\src\views\xj\route\route-section\components\section-add.vue
 * @Description: 道路段-新增/编辑弹窗
-->

<template>
  <div class="add-content">
    <div>
      <div class="left-form">
        <el-form ref="dialogForm" :model="dialogForm" :rules="rules" label-width="100px">
          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="路段编码" prop="segmentCode">
                <el-input v-model="dialogForm.segmentCode" placeholder="请输入路段编码" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="路段名称" prop="segmentName">
                <el-input v-model="dialogForm.segmentName" placeholder="请输入路段名称" clearable></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="道路类型" prop="roadType">
                <el-select v-model="dialogForm.roadType" placeholder="请选择道路类型">
                  <el-option v-for="dict in dict.type.bas_road_type" :key="dict.value" :label="dict.label"
                    :value="dict.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="管理站" prop="deptId">
                <el-select v-model="dialogForm.deptId" placeholder="请选择管理站">
                  <el-option v-for="dict in deptIdList" :key="dict.value" :label="dict.label"
                    :value="dict.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="起点桩" prop="stakeStart">
                <el-input v-model="dialogForm.stakeStart" placeholder="请填写起点桩" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="终点桩" prop="stakeEnd">
                <el-input v-model="dialogForm.stakeEnd" placeholder="请填写终点桩" clearable></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="路宽" prop="width">
                <el-input-number v-model="dialogForm.width" controls-position="right" placeholder="请填写路宽" :min="0"
                  style="width: 100%"></el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="里程" prop="mileage">
                <el-input-number v-model="dialogForm.mileage" controls-position="right" placeholder="请填写里程" :min="0"
                  style="width: 100%"></el-input-number>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="车道数量" prop="laneCount">
                <el-input-number v-model="dialogForm.laneCount" controls-position="right" placeholder="请填写车道数量" :min="0"
                  style="width: 100%"></el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="养护级别" prop="curingLevel">
                <el-input v-model="dialogForm.curingLevel" placeholder="请填写养护级别" clearable></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="最大限速" prop="maxSpeedLimit">
                <el-input-number v-model="dialogForm.maxSpeedLimit" controls-position="right" placeholder="请填写最大限速"
                  :min="0" style="width: 100%"></el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="选择路线" prop="routeId">
                <el-select v-model="dialogForm.routeId" placeholder="请选择路线" clearable>
                  <el-option v-for="item in routeList" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="24">
              <el-form-item label="路段坐标点" prop="coordinates">
                <el-input type="textarea" :disabled="true" v-model="dialogForm.coordinates" rows="4"
                  resize="none"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="24">
              <el-form-item label="范围坐标点" prop="polygon">
                <el-input type="textarea" :disabled="true" v-model="dialogForm.polygon" rows="4"
                  resize="none"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="24">
              <el-form-item label="备注">
                <el-input v-model="dialogForm.mark"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="right-map">
        <fssm-map :showLine="true" :showDraw="true" id="add_map" ref="mapContainer"
          @endEoordinateLine="getEndEoordinate" @endEoordinate="getEndPolygon" :editCoordinates="editCoordinates"
          :editCoordinatesLine="editCoordinatesLine"></fssm-map>
      </div>
    </div>
    <div class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </div>
</template>

<script>
import { addSection, updateSection } from "@/api/xj/section";
import FssmMap from "@/components/map/fssm-map.vue";
export default {
  name: "SectionAdd",
  components: {
    FssmMap,
  },
  dicts: ["bas_road_type", "bas_direction"],
  props: {
    dialogItem: {
      type: Object,
      default: () => { },
    },
    routeList: {
      type: Array,
      default: () => [],
    },
    deptIdList: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      // 表单绑定
      dialogForm: {
        segmentCode: "",
        segmentName: "",
        roadType: "",
        deptId: "",
        stakeStart: "",
        stakeEnd: "",
        width: "",
        mileage: "",
        laneCount: "",
        curingLevel: "",
        city: "沈阳市",
        district: "和平区",
        maxSpeedLimit: "",
        routeId: "",
        coordinates: "",
        polygon: "",
        mark: "",
      },
      // 表单验证规则
      rules: {
        segmentCode: [
          { required: true, message: "路段编码不能为空", trigger: "blur" },
        ],
        segmentName: [
          { required: true, message: "路段名称不能为空", trigger: "blur" },
        ],
        roadType: [
          { required: true, message: "请选择道路类型", trigger: "change" },
        ],
        deptId: [
          { required: true, message: "请选择管理站", trigger: "change" },
        ],
        stakeStart: [
          { required: true, message: "起点不能为空", trigger: "blur" },
          {
            pattern: /^K\d{4}\+\d{3}$/,
            message: "请按照K0000+000格式进行填写",
          },
        ],
        stakeEnd: [
          { required: true, message: "终点不能为空", trigger: "blur" },
          {
            pattern: /^K\d{4}\+\d{3}$/,
            message: "请按照K0000+000格式进行填写",
          },
        ],
        width: [{ required: true, message: "路宽不能为空", trigger: "blur" }],
        mileage: [{ required: true, message: "里程不能为空", trigger: "blur" }],
        laneCount: [
          { required: true, message: "车道数量不能为空", trigger: "blur" },
        ],
        curingLevel: [
          { required: true, message: "养护级别不能为空", trigger: "blur" },
        ],
        maxSpeedLimit: [
          { required: true, message: "最大限速不能为空", trigger: "blur" },
        ],
        routeId: [{ required: true, message: "请选择路线", trigger: "change" }],
        coordinates: [
          { required: true, message: "请在右侧地图添加路段", trigger: "blur" },
        ],
        polygon: [
          { required: true, message: "请在右侧地图添加范围", trigger: "blur" },
        ],
      },
      // 编辑线段坐标点
      editCoordinatesLine: [],
      // 编辑范围坐标点
      editCoordinates: [],
    };
  },
  watch: {
    // 监听弹窗数据
    dialogItem: {
      handler(val) {
        if (val.title === "修改") {
          this.dialogForm = val.item;
          this.editCoordinates = val.item?.polygon?.split(";")?.map((item) => {
            return item.split(",");
          });
          this.editCoordinatesLine = val.item?.coordinates?.split(";")
            ?.map((item) => {
              return item.split(",");
            });
        }
      },
      immediate: true,
    },
  },
  mounted() { },
  methods: {
    /**
     * @description: 获取线段坐标点
     * @param {coordinates}
     * @return {*}
     */
    getEndEoordinate(coordinates) {
      this.$set(this.dialogForm, "coordinates", coordinates.join(";"));
    },

    /**
     * @description: 获取范围坐标点
     * @param {polygon}
     * @return {*}
     */
    getEndPolygon(polygon) {
      this.$set(this.dialogForm, "polygon", polygon.join(";"));
    },

    /**
     * @description: 点击确定事件
     * @return {*}
     */
    submitForm() {
      this.$refs["dialogForm"].validate((valid) => {
        if (valid) {
          if (this.dialogItem.title === "修改") {
            updateSection(this.dialogForm).then(({ data, code }) => {
              if (code === 200) {
                this.$emit("addCancel");
              }
            });
          } else {
            addSection(this.dialogForm).then(({ data, code }) => {
              if (code === 200) {
                this.$emit("addCancel");
              }
            });
          }
        }
      });
    },

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

<style lang="scss" scoped>
.add-content {
  width: 100%;
  height: 40rem;

  >div {
    height: 37.5rem;
    display: flex;

    .left-form {
      width: 50%;
      height: 100%;
    }

    .right-map {
      width: 50%;
      height: 100%;
      padding: 0 1rem 1rem 1rem;

      #add_map {
        cursor: default !important;
        width: 100%;
        height: 100%;
      }
    }
  }

  .dialog-footer {
    height: 2.5rem;
    width: 100%;
    display: flex;
    justify-content: flex-end;
  }
}
</style>