<!--
 * @Author: SunTao 328867980@qq.com
 * @Date: 2024-10-16 10:00:40
 * @LastEditors: SunTao 328867980@qq.com
 * @LastEditTime: 2024-10-17 09:10:38
 * @FilePath: \znxjxt-ui\src\views\xj\route\route-scope\components\scope-add.vue
 * @Description: 作业范围-新增编辑弹窗
-->

<template>
  <div class="add-content">
    <div class="add-form">
      <el-form
        ref="dialogForm"
        :model="dialogForm"
        :rules="rules"
        label-width="120px"
      >
        <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="roadType">
              <el-select
                v-model="dialogForm.roadType"
                placeholder="请选择绑定车辆"
              >
                <el-option
                  v-for="dict in bindCarList"
                  :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="24">
            <el-form-item label="作业范围" prop="coordinates">
              <el-input
                type="textarea"
                :disabled="true"
                v-model="dialogForm.coordinates"
                rows="3"
                resize="none"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="bottom-map">
      <fssm-map
        @endEoordinate="geteoordinate"
        :editCoordinates="editCoordinates"
        :showChange="true"
        :showZoom="false"
        :showDraw="true"
      ></fssm-map>
    </div>
    <div class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </div>
</template>

<script>
import { addScope, updateScope } from "@/api/xj/scope";
import FssmMap from "@/components/map/fssm-map";
export default {
  components: { FssmMap },
  name: "ScopeAdd",
  props: {
    dialogItem: {
      type: Object,
      default: () => {},
    },
    bindCarList: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      // 表单绑定
      dialogForm: {
        segmentCode: "",
        roadType: "",
        coordinates: "",
      },
      rules: {
        segmentCode: [
          { required: true, message: "作业范围名称不能为空", trigger: "blur" },
        ],
        roadType: [
          { required: true, message: "请选择绑定车辆", trigger: "change" },
        ],
        coordinates: [
          {
            required: true,
            message: "请在下方地图添加作业范围",
            trigger: "blur",
          },
        ],
      },
      // 回显的多边形区域
      editCoordinates: [],
    };
  },
  watch: {
    dialogItem: {
      handler(val) {
        if (val.title === "修改") {
          this.dialogForm = val.item;
          // 获取多边形区域
          // const a =val.item.coordinates;
          const a =
            "123.10796364297124,42.017659779208934;123.12993629922124,41.87346422256831;123.35652931679937,41.789693470615184;123.91271217812749,41.76085435928706;123.74379738320562,42.00530016006831;123.35790260781499,42.05199205459956;123.17662819375249,42.10143053116206;123.10796364297124,42.017659779208934";
          this.dialogForm.coordinates = a;
          this.editCoordinates = a.split(";").map((item) => {
            return item.split(",");
          });
        }
      },
      immediate: true,
      // deep: true,
    },
  },
  created() {},
  methods: {
    /**
     * @description: 获取多边形坐标方法
     * @param {list}
     * @return {*}
     */
    geteoordinate(list) {
      console.log(list,'ssss');
      
      // this.dialogForm.coordinates = list.join(";");
      this.$set(this.dialogForm, "coordinates", list.join(";"));
    },

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

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

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

  .add-form {
    .el-select {
      width: 100%;
    }
  }

  .bottom-map {
    width: 100%;
    height: 30rem;
  }

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