<!--
 * @Author: SunTao 328867980@qq.com
 * @Date: 2025-02-12 16:44:44
 * @LastEditors: SunTao 328867980@qq.com
 * @LastEditTime: 2025-02-14 14:49:00
 * @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="8rem">
      <el-row :gutter="24">
        <el-col :span="24">
          <el-form-item label="匝道名称：" prop="name">
            <el-input v-model="addInterForm.name" 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="匝道Id：" prop="rampId">
            <el-input v-model="addInterForm.rampId" 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="code：" prop="code">
            <el-input v-model="addInterForm.code" 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="起始桩号：" prop="startStake">
            <el-input v-model="addInterForm.startStake" 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="互通立交：" prop="crossName">
            <el-select v-model="addInterForm.crossName" placeholder="请选择互通立交" style="width: 100%" filterable remote
              clearable reserve-keyword :filter-method="handleRemoteMethod" @change="changeCross">
              <el-option v-for="(item, index) in segmentList" :key="`enterprise-name-${index}`" :label="item.label"
                :value="item.label"></el-option> </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </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, getCrossDropDown } from '@/api/xj/hisense/ramp'

export default {
  name: "AddRamp",
  props: {
    // 接收父组件传过来的数据
    dialogItem: {
      type: Object,
      default: () => { },
    },
  },
  data() {
    return {
      // 互通立交下拉数据
      segmentList: [],
      // 新增表单
      addInterForm: {
        name: "",
        rampId: "",
        code: "",
        startStake: "",
        crossName: "",
        crossId: ""
      },
      // 表单校验规则
      rules: {
        name: [{ required: true, message: "请填写名称", trigger: "blur" }],
        rampId: [{ required: true, message: "请填写互通立交id", trigger: "blur" }],
        code: [{ required: false, message: "请填写code", trigger: "blur" }],
        startStake: [{ required: false, message: "请填写桩号", trigger: "blur" }, {
          pattern: /^\d+$/,
          message: "请输入非负整数",
        },],
        crossName: [{ required: false, message: "请选择互通立交", trigger: "change" }]
      }
    }
  },
  watch: {
    dialogItem: {
      handler(val) {
        if (val) {
          this.addInterForm = JSON.parse(JSON.stringify(val))
        }
      }, immediate: true, deep: true
    }
  },
  mounted() {
    this.getDownList()
  },
  methods: {
    /**
     * @description: 模糊搜索
     * @param {*} str 模糊搜索字段
     * @return {*}
     */
    handleRemoteMethod(str) {
      this.addInterForm.crossName = str;
      this.getDownList();
    },

    /**
   * @description: 获取下拉数据
   * @param {*}
   * @return {*}
   */
    getDownList() {
      getCrossDropDown({ name: this.addInterForm.crossName }).then(({ code, data }) => {
        if (code === 200) {
          this.segmentList = data
        }
      })
    },

    /**
     * @description: 获取下拉数据
     * @param {*}
     * @return {*}
     */
    changeCross(value) {
      this.addInterForm.crossId = this.segmentList.filter(item => item.label === value)[0].value
    },

    /**
     * @description: 点击确定事件
     * @return {*}
     */
    submitForm() {
      this.$refs.addInterForm.validate((valid) => {
        if (valid) {
          const data = {
            ...this.addInterForm,
          };
          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;
}

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