<!--
 * @Author: SunTao 328867980@qq.com
 * @Date: 2024-10-17 11:01:18
 * @LastEditors: SunTao 328867980@qq.com
 * @LastEditTime: 2024-12-05 17:40:36
 * @FilePath: \znxjxt-ui\src\views\xj\route\route-terminal\components\terminal-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="clientId">
              <el-input v-model="dialogForm.clientId" placeholder="请输入设备编号" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="所属车辆" prop="plateNo">
              <el-input v-model="dialogForm.plateNo" placeholder="请输入所属车辆" clearable></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <!-- <el-col :span="12">
            <el-form-item label="作业范围" >
              <el-select
                v-model="dialogForm.areas"
                placeholder="请选择作业范围"
                multiple
                collapse-tags
              >
                <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-col :span="24">
            <el-form-item label="备注" prop="remark">
              <el-input type="textarea" v-model="dialogForm.remark" 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="false"
      ></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 { addTerminal, updateTerminal } from "@/api/xj/terminal";
import FssmMap from "@/components/map/fssm-map";
export default {
  components: { FssmMap },
  name: "TerminalAdd",
  props: {
    dialogItem: {
      type: Object,
      default: () => { },
    },
  },
  data() {
    return {
      // 表单绑定
      dialogForm: {
        clientId: "",
        plateNo: "",
        areas: [],
        remark: "",
      },
      rules: {
        clientId: [
          { required: true, message: "设备编号不能为空", trigger: "blur" },
        ],
        plateNo: [
          { required: true, message: "所属车辆不能为空", trigger: "blur" },
        ],
        areas: [
          { required: true, message: "请选择作业范围", trigger: "change" },
        ],
        coordinates: [
          {
            required: true,
            message: "请在下方地图添加作业范围",
            trigger: "blur",
          },
        ],
      },
      // 根据id查询到的区域坐标
      editCoordinates: [],
    };
  },
  watch: {
    dialogItem: {
      handler(val) {
        if (val.title === "修改") {
          this.dialogForm = JSON.parse(JSON.stringify(val.item))
        }
      },
      immediate: true,
      deep: true,
    },
  },
  created() { },
  methods: {
    /* 获取多边形坐标方法 */
    geteoordinate(list) {
      this.dialogForm.coordinates = list.join(";");
    },
    /* 点击取消事件 */
    cancel() {
      this.$emit("addCancel");
    },
    /* 点击确认事件 */
    submitForm() {
      this.$refs["dialogForm"].validate((valid) => {
        if (valid) {
          if (this.dialogItem.title === "修改") {
            updateTerminal(this.dialogForm).then(({ data, code }) => {
              if (code === 200) {
                this.$emit("addCancel");
              }
            });
          } else {
            addTerminal(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>