""" @author: yy @desc：部件新增 @date: 2025-07-25 01:17:31 """
<template>
  <MOSTY.Modal v-if="visible" v-model:visible="visible" v-model:loading="loading" :title="title" @ok="handleSave">
    <el-form :model="form" :rules="rules" label-width="auto" ref="formRef" style="width: 100%">
      <div class="wrapper">
        <el-row :gutter="24">
          <el-col :span="8">
            <el-form-item label="物联终端名称" prop="name">
              <el-input v-model="form.name" placeholder="请输入物联终端名称" :disabled="mode === 'view'" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="设备ID" prop="sbid">
              <el-input v-model="form.sbid" placeholder="请输入设备ID" :disabled="mode === 'view'" />
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-form-item label="安装位置" prop="azwz">
              <el-input v-model="form.azwz" placeholder="请输入安装位置" :disabled="mode === 'view'" />
            </el-form-item>
          </el-col>
        </el-row>
      </div>
    </el-form>
  </MOSTY.Modal>
</template>
<script setup>
import { computed, ref, watch, nextTick } from "vue"
import { ElMessage } from "element-plus"
import * as MOSTY from "@/components/MyComponents/index"
import { getApi2, postApi2 } from "@/api/tobAcco_api.js"

const emit = defineEmits(["update:visible", "success"])
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  mode: {
    type: String,
    default: "add"
  },
  title: {
    type: String,
    default: ""
  },
  // 主配置ID
  id: {
    type: String,
    default: ""
  },
  // 编辑时，请求详情的ID
  editId: {
    type: String,
    default: ""
  },
  // 场所ID
  placeid: {
    type: String,
    required: true
  },
  // 场所名称
  placeName: {
    type: String,
    required: true
  }
})

const visible = computed({
  get() {
    return props.visible
  },
  set(val) {
    emit("update:visible", val)
  }
})

const loading = ref(false)
const formRef = ref(null)

const form = ref({
  name: "", //物联终端名称
  sbid: "", //设备ID
  azwz: "" //位置描述
})

// 使用自定义组合式函数

const rules = ref({
  name: [{ required: true, message: "请输入物联终端名称", trigger: ["change"] }],
  sbid: [{ required: true, message: "请输入设备ID", trigger: ["change"] }],
  azwz: [{ required: true, message: "请输入安装位置", trigger: ["change"] }]
})

const handleSave = async () => {
  try {
    loading.value = true
    await formRef.value.validate()
    await postApi2(
      { ...form.value, sssbid: props.id, id: props.editId, placeid: props.placeid, placename: props.placeName },
      props.editId ? "/mosty-wljc/sbglTcc/updateAtta" : "/mosty-wljc/sbglTcc/insertAtta"
    )
    ElMessage.success("保存成功")
    visible.value = false
    emit("success")
  } catch (error) {
    console.log("error", error)
  } finally {
    loading.value = false
  }
}

// 编辑时，获取详情
const getDetail = async () => {
  try {
    const res = await getApi2({ id: props.editId }, "/mosty-wljc/sbglTcc/detailAtta")
    Object.assign(form.value, {
      name: res?.name,
      sbid: res?.sbid,
      azwz: res?.azwz
    })
    nextTick(() => {
      updateSelectOptions()
    })
  } catch (error) {
    console.log("error", error)
  }
}

watch(
  () => props.visible,
  val => {
    if (val && props.editId) {
      getDetail()
    }
  },
  { immediate: true }
)
</script>
<style lang="scss" scoped>
.wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  .title {
    font-weight: 400;
    font-size: 16px;
    color: #333333;
    margin: 0px 0 20px;
  }
}
</style>
