""" @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="部件新增" @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="bjlx">
              <MOSTY.DictRidioAndSelectV2 v-model="form.bjlx" :dictKey="DICT_TYPE.D_WLJC_XFZJBJLX" selectType="select" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="部件名称" prop="bjmc">
              <el-input v-model="form.bjmc" placeholder="请输入部件名称" :maxlength="50" show-word-limit />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="部件地址编号" prop="bjbm">
              <el-input v-model="form.bjbm" placeholder="请输入部件地址编号(数字)" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="所属分区" prop="ssfq">
              <el-input v-model="form.ssfq" placeholder="请输入所属分区" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="回路号" prop="sshl">
              <el-input v-model="form.sshl" placeholder="请输入回路号" />
            </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="请选择" @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="请选择" @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-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item :label="othData.partLabel" prop="partid">
              <el-select v-model="form.partid" clearable placeholder="请选择" @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="请输入具体位置描述" :maxlength="50" show-word-limit />
            </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 { 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: ""
  },
  // 场所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,
  {
    bjlx: "", // 部件类型
    bjmc: "", // 部件名称
    bjbm: null, // 部件地址编号
    ssfq: null, // 所属分区
    sshl: 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 { jzwlist, lclist, bwlist, cahngejzwmc, cahngelcmc, cahngebw } = useCommonData(form, props)

const handleSave = async () => {
  try {
    loading.value = true
    await formRef.value.validate()
    await postApi2({ ...form.value, sssbwlpzbid: props.id, id: props.editId }, props.editId ? "/mosty-wljc/sbglXfbj/updateAtta" : "/mosty-wljc/sbglXfbj/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/sbglXfbj/detailAtta")
    Object.assign(form.value, {
      bjlx: res?.bjlx,
      bjmc: res?.bjmc,
      bjbm: res?.bjbm,
      ssfq: res?.ssfq,
      sshl: res?.sshl,
      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>
