<template>
  <el-form ref="objRef" :model="form" :rules="rules" label-width="80px">
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="业务类型" prop="objType">
          <el-select v-model="form.objType" placeholder="请选择业务类型" style="width: 100%">
            <el-option
                v-for="dict in biz_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="应用程序" :rules="{required: true, message: '应用程序不能为空', trigger: 'blur'}"
                      v-if="form.objType==1">
          <el-select
              v-model="form.appId"
              filterable
              remote
              reserve-keyword
              placeholder="请输入应用程序名称"
              remote-show-suffix
              :remote-method="remoteMethod"
              :loading="loading"
              style="width: 100%"
          >
            <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
    <el-form-item label="对象名称" prop="objName">
      <el-input v-model="form.objName" placeholder="请输入对象名称"/>
    </el-form-item>
    <el-form-item label="IP地址" prop="objAddr">
      <el-input v-model="form.objAddr" placeholder="请输入IP地址"/>
    </el-form-item>
    <el-form-item label="端口" prop="objPort">
      <el-input v-model="form.objPort" placeholder="请输入端口"/>
    </el-form-item>
    <el-form-item label="备注">
      <el-input v-model="form.remark" type="textarea" placeholder="请输入备注" :autosize="{maxRows:6,minRows:3}" maxlength="300" show-word-limit/>
    </el-form-item>
  </el-form>
</template>
<script setup lang="ts">
import {listApp} from "@/api/obj/app";
import {addObj, getObj,updateObj} from "@/api/obj/obj";
import {nextTick, onMounted, ref} from "vue";

const props = defineProps(['rowId'])
const {proxy, emit} = getCurrentInstance();
const {biz_type} = proxy.useDict('biz_type');
const form = ref({})
const loading = ref(false)
const options = ref([])

const rules = {
  objType: [
    {required: true, message: "业务类型不能为空", trigger: "change"}
  ],
  objName: [
    {required: true, message: "对象名称不能为空", trigger: "blur"}
  ],
  objAddr: [
    {required: true, message: "IP地址不能为空", trigger: "blur"}
  ],
  objPort: [
    {required: true, message: "端口不能为空", trigger: "blur"}
  ],
}

// watchEffect(() => {
//   if (props.rowId) {
//     nextTick(()=>{
//       editForm()
//     })
//   }
// })

onMounted(() => {
  if (props.rowId) {
    nextTick(() => {
      editForm()
    })
  }
  remoteMethod("")
})

const editForm = () => {
  getObj(props.rowId).then(res => {
    const {objId, objType, appId, objName, objAddr, objPort} = res.data
    form.value = {objId, objType, appId, objName, objAddr, objPort}

  });
}

const resetForm = () => {
  form.value = {
    objId: null,
    objType: null,
    appId: null,
    objName: null,
    objAddr: null,
    objPort: null,
  }
  proxy.resetForm("objRef");
}

const remoteMethod = (appName: string) => {
    const params = {
      pageNum: 1,
      pageSize: 10,
      appName,
    }
    loading.value = true
    listApp(params).then(res => {
      options.value = res.rows.map(item => {
        return {
          value: item.appId,
          label: item.appName
        }
      })
      loading.value = false
    })
}

const submitForm = () => {
  proxy.$refs.objRef.validate(valid => {
    if (valid) {
      const req = form.value.objId !==null ? updateObj : addObj
      req(form.value).then(response => {
        // proxy.$modal.msgSuccess("新增成功");
        resetForm();
        emit("updateData", response)
        nextTick(()=>{
          emit("nextStep", 1)
        })
      });
    }
  });
}

defineExpose({resetForm, submitForm})

</script>
<style scoped lang="scss">
</style>
