""" @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="actionTitle" @ok="handleSave">
    <el-form :model="form" :rules="rules" label-width="auto" ref="formRef">
      <div class="wrapper">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="监控点名称" prop="sxtmc">
              <el-input v-model="form.sxtmc" :disabled="actionType === 'view'" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="信号类型" prop="xhlx">
              <MOSTY.DictRidioAndSelectV2 v-if="actionType !== 'view'" v-model="form.xhlx" :dictKey="DICT_TYPE.D_WLJC_NVRLX" />
              <span v-else>{{ form.xhlxmc }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="设备外观" prop="sxtlx">
              <MOSTY.DictRidioAndSelectV2 v-if="actionType !== 'view'" v-model="form.sxtlx" :dictKey="DICT_TYPE.D_BZ_SXTLX" />
              <span v-else>{{ form.sxtlxmc }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="20">
            <el-form-item label="功能类别" prop="gnlb">
              <MOSTY.DictRidioAndSelectV2 v-if="actionType !== 'view'" v-model="form.gnlb" :dictKey="DICT_TYPE.D_WLJC_SXTGNLX" />
              <span v-else>{{ form.gnlbmc }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="设备IP" prop="sxtip">
              <el-input v-model="form.sxtip" :disabled="actionType === 'view'" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="端口" prop="sxtdk">
              <el-input v-model="form.sxtdk" :disabled="actionType === 'view'" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="通道号" prop="sxttdh">
              <el-input v-model="form.sxttdh" :disabled="actionType === 'view'" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-divider />
        <div class="title">位置信息</div>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="场所" prop="placename">
              <el-input v-model="form.placename" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item :label="othData.areaLabel" prop="buildingid">
              <el-select v-model="form.buildingid" clearable placeholder="请选择" :disabled="actionType === 'view'" @change="changeJzwmc">
                <el-option v-for="item in jzwlist" :key="item" :label="item.buildingname" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8" v-if="othData.publicarea != '1'">
            <el-form-item label="楼层" prop="floorid">
              <el-select v-model="form.floorid" clearable placeholder="请选择" :disabled="actionType === 'view'" @change="changeLcmc">
                <el-option v-for="item in lclist" :key="item" :label="item.floorname" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item :label="othData.partLabel" prop="partid">
              <el-select v-model="form.partid" clearable placeholder="请选择" :disabled="actionType === 'view'" @change="changeBw">
                <el-option v-for="item in bwlist" :key="item" :label="item.partname ? item.partname : item.qtmc" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-form-item label="具体位置描述" prop="azwz">
              <el-input v-model="form.azwz" placeholder="请输入具体位置描述" :disabled="actionType === 'view'" :maxlength="50" show-word-limit />
            </el-form-item>
          </el-col>
        </el-row>
      </div>
    </el-form>
  </MOSTY.Modal>
</template>
<script setup>
import { computed, nextTick, ref, watch } from "vue"
import { ElMessage } from "element-plus"
import * as MOSTY from "@/components/MyComponents/index"
import { DICT_TYPE } from "@/components/MyComponents/Dict/const/dict"
import { getApi2, postApi2 } from "@/api/tobAcco_api.js"
import { usePosition } from "@/hooks/usePosition"

const emit = defineEmits(["update:visible", "success"])
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  // 主配置ID
  id: {
    type: String,
    default: ""
  },
  // 编辑时，请求详情的ID
  editId: {
    type: String,
    default: ""
  },
  // 操作类型 add/edit/view
  actionType: {
    type: String,
    default: ""
  },
  // 操作标题
  actionTitle: {
    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 { form, othData, jzwlist, lclist, bwlist, changeJzwmc, changeLcmc, changeBw, updateSelectOptions } = usePosition(
  props,
  {
    sxtmc: "", // 监控点名称
    xhlx: null, // 信号类型
    xhlxmc: "", // 信号类型名称
    sxtlx: null, // 设备外观
    sxtlxmc: "", // 设备外观名称
    gnlb: null, // 功能类别
    gnlbmc: "", // 功能类别名称
    sxtip: "", // 设备IP
    sxtdk: null, // 端口
    sxttdh: null, // 通道号
    azwz: "" // 位置描述
  },
  { buildingid: "buildingid" }
)

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

const rules = ref({
  bjlx: [{ required: true, message: "请选择部件类型", trigger: ["change"] }],
  bjmc: [{ required: true, message: "请输入部件名称", trigger: ["change"] }],
  bjbm: [
    { required: true, message: "请输入部件地址编号", trigger: ["change"] },
    { pattern: /^[0-9]+$/, message: "请输入数字", trigger: ["change"] }
  ],
  ssfq: [
    { required: true, message: "请输入所属分区", trigger: ["change"] },
    { pattern: /^[0-9]+$/, message: "请输入数字", trigger: ["change"] }
  ],
  sshl: [{ required: true, message: "请输入回路号", trigger: ["change"] }],
  buildingid: [{ required: true, message: "请选择建筑物", trigger: ["change"] }],
  floorid: [{ required: true, message: "请选择楼层", trigger: ["change"] }],
  partid: [{ required: true, message: "请选择部位", trigger: ["change"] }],
  azwz: [{ required: true, message: "请输入位置描述", trigger: ["change"] }]
})

const handleSave = async () => {
  try {
    loading.value = true
    await formRef.value.validate()
    await postApi2({ ...form.value, buildingid: form.value.buildingid, sssbid: props.id, sssbwlpzbid: props.id, id: props.editId }, "/mosty-wljc/spjk/replaceAtta")
    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/spjk/detailAtta")
    Object.assign(form.value, {
      sxtmc: res?.sxtmc, // 监控点名称
      xhlx: res?.xhlx, // 信号类型
      xhlxmc: res?.xhlxmc, // 信号类型名称
      sxtlx: res?.sxtlx, // 设备外观
      sxtlxmc: res?.sxtlxmc, // 设备外观名称
      gnlb: res?.gnlb, // 功能类别
      gnlbmc: res?.gnlbmc, // 功能类别名称
      sxtip: res?.sxtip, // 设备IP
      sxtdk: res?.sxtdk, // 端口
      sxttdh: res?.sxttdh, // 通道号
      placeid: props.placeid, // 场所
      placename: props.placeName, // 场所名称
      buildingid: res?.buildingid,
      buildingname: res?.buildingname,
      floorid: res?.floorid,
      floorname: res?.floorname,
      partid: res?.partid,
      partname: res?.partname,
      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>
