<template>
  <div class="bigBox" :style="{ height: bigHeight }">
    <PageTitle :title="data.config.title">
      <el-button type="primary" @click="submit(ruleFormRef, ruleFormRefs)" v-if="data.config.saveBtnShow">保存</el-button>
      <el-button @click="black">关闭</el-button>
    </PageTitle>
    <div class="box_cont">
      <div class="searchBox" ref="searchBox">
        <el-form class="mosty-from-wrap" ref="ruleFormRef" label-width="155px" :model="data.fromObj" :inline="true"
          :rules="rules" :disabled="!data.config.saveBtnShow">
          <el-form-item label="消防设施名称:" prop="devtype" required
            :rules="[{ required: true, message: '请输入消防设施名称', trigger: 'blur' }]">
            <el-select v-model="data.fromObj.devtype" @change="changexfss" placeholder="请选择消防设施" style="width: 250px">
              <el-option v-for=" item in XFSSTYPE" :key="item" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="火灾自动报警系统类型:" v-if="hzzdshow">
            <el-select v-model="data.fromObj.xfxtlx" placeholder="火灾自动报警系统类型" style="width: 250px">
              <el-option v-for="item in D_BZ_HZZDBJXTLX" :key="item" :label="item.label"
                :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="自动灭火系统类型:" v-if="zdpsshow">
            <el-select v-model="data.fromObj.xfxtlx" placeholder="请选择自动灭火系统类型" style="width: 250px">
              <el-option v-for="item in D_BZ_ZDMHXTLX" :key="item" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="消防栓系统类型:" v-if="snshow">
            <el-select v-model="data.fromObj.xfxtlx" placeholder="请选择消防栓系统类型" style="width: 250px">
              <el-option v-for="item in D_BZ_XFSXTLX" :key="item" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="内部编号:" prop="nbbh" :rules="[{ required: true, message: '请输入消防设施名称', trigger: 'blur' }]">
            <el-input v-model="data.fromObj.nbbh" placeholder="请输入内部编号" style="width: 250px"></el-input>
          </el-form-item>
          <el-form-item label="状态:" required prop="status"
            :rules="[{ required: true, message: '请选择状态', trigger: 'blur' }]">
            <el-select v-model="data.fromObj.status" placeholder="请选择状态" style="width: 250px">
              <el-option v-for="item in D_BZ_SBSSZT" :key="item" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="品牌-型号:">
            <el-input v-model="data.fromObj.brand" placeholder="请输入请输入品牌-型号" style="width: 250px"></el-input>
          </el-form-item>
          <el-form-item label="金额(万元):">
            <el-input-number controls-position="right" v-model="data.fromObj.money" placeholder="请输入金额"
              style="width: 250px"></el-input-number>
          </el-form-item>
          <el-form-item label="装置数量:">
            <el-input-number controls-position="right" v-model="data.fromObj.number" placeholder="请输入装置数量"
              style="width: 250px" />
          </el-form-item>
          <el-form-item label="单位:" prop="unit" required
            :rules="[{ required: true, message: '请选择单位', trigger: 'blur' }]">
            <el-select v-model="data.fromObj.unit" placeholder="请选择单位" clearable style="width: 250px">
              <el-option v-for="item in D_BZ_WPDW" :key="item" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="安装时间:" prop="azsj" required
            :rules="[{ required: true, message: '请选择安装时间', trigger: 'blur' }]">
            <el-date-picker v-model="data.fromObj.azsj" type="date" value-format="YYYY-MM-DD" placeholder="请选择安装时间"
              style="width: 250px" />
          </el-form-item>
          <el-form-item label="验收时间:" prop="yssj" :rules="[{ required: true, message: '请选择验收时间', trigger: 'blur' }]">
            <el-date-picker v-model="data.fromObj.yssj" type="date" value-format="YYYY-MM-DD" placeholder="请选择验收时间"
              style="width: 250px" />
          </el-form-item>
          <el-form-item label="场所名称:" prop="placename">
            <el-select v-model="placename" @change="cahngecsmc" clearable placeholder="请选择场所名称：" style="width: 250px">
              <el-option v-for="item in csmclist" :key="item" :label="item.placename" :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item label="部位名称:" prop="allname">
            <el-select v-model="data.fromObj.allname" @change="cahngebw" style="width: 250px" clearable
              placeholder="请选择部位名称：">
              <el-option v-for="item in bwlist" :key="item" :label="item.allname" :value="item.id"
                style="width: 250px" />
            </el-select>
          </el-form-item>
          <div class="ld_box">
            <el-form-item label="责任人:" prop="zrrname">
              <el-input v-model="data.fromObj.zrrname" disabled clearable style="width: 170px" />
            </el-form-item>
            <el-button type="primary" @click="ChooesDdld('01')">选择</el-button>
          </div>
          <el-form-item label="责任部门:" prop="zrbmname">
            <el-input v-model="data.fromObj.zrbmname" disabled clearable style="width: 250px" />
          </el-form-item>
          <el-form-item label="出厂日期:" prop="cssj">
            <el-date-picker v-model="data.fromObj.cssj" value-format="YYYY-MM-DD" type="date" placeholder="请选择安装时间"
              style="width: 250px" />
          </el-form-item>
          <el-form class="mosty-from-wrap" ref="ruleFormRefs" label-width="155px" :model="data.extendattr"
            :inline="true" :rules="rules" :disabled="!data.config.saveBtnShow">
            <!-- 火灾自动报警系统特殊字段 -->
            <el-form-item label="主机规格型号:" v-if="hzzdshow" prop="ext_zjggxh">
              <el-input v-model="data.extendattr.ext_zjggxh" placeholder="请输入主机规格型号" style="width: 250px"></el-input>
            </el-form-item>
            <el-form-item label="主机数量:" v-if="hzzdshow" prop="ext_zjcount">
              <el-input-number controls-position="right" v-model="data.extendattr.ext_zjcount" placeholder="请输入主机数量"
                style="width: 250px"></el-input-number>
            </el-form-item>
            <el-form-item label="火灾探测器规格型号:" v-if="hzzdshow" prop="ext_hztcggxh">
              <el-input v-model="data.extendattr.ext_hztcggxh" placeholder="请输入火灾探测器规格型号"
                style="width: 250px"></el-input>
            </el-form-item>
            <el-form-item label="火灾探测器数量:" v-if="hzzdshow" prop="ext_hztccount">
              <el-input-number controls-position="right" v-model="data.extendattr.ext_hztccount"
                placeholder="请输入火灾探测器数量" style="width: 250px"></el-input-number>
            </el-form-item>
            <el-form-item label="手动报警按钮规格型号:" v-if="hzzdshow" prop="ext_sdbjnnggxh">
              <el-input v-model="data.extendattr.ext_sdbjnnggxh" placeholder="请输入手动报警按钮规格型号"
                style="width: 250px"></el-input>
            </el-form-item>
            <el-form-item label="手动报警按钮数量:" v-if="hzzdshow" prop="ext_sdbjnncount">
              <el-input-number controls-position="right" v-model="data.extendattr.ext_sdbjnncount"
                placeholder="请输入手动报警按钮数量" style="width: 250px"></el-input-number>
            </el-form-item>
            <el-form-item label="声光报警器规格型号:" v-if="hzzdshow" prop="ext_sgbjggxh">
              <el-input v-model="data.extendattr.ext_sgbjggxh" placeholder="请输入声光报警器规格型号"
                style="width: 250px"></el-input>
            </el-form-item>
            <el-form-item label="声光报警器数量:" v-if="hzzdshow" prop="ext_sgbjcount">
              <el-input-number controls-position="right" v-model="data.extendattr.ext_sgbjcount"
                placeholder="请输入声光报警器数量" style="width: 250px"></el-input-number>
            </el-form-item>
            <el-form-item label="区域显示器规格型号:" v-if="hzzdshow" prop="ext_qyxsggxh">
              <el-input v-model="data.extendattr.ext_qyxsggxh" placeholder="请输入区域显示器规格型号"
                style="width: 250px"></el-input>
            </el-form-item>
            <el-form-item label="区域显示器数量:" v-if="hzzdshow" prop="ext_qyxscount">
              <el-input-number controls-position="right" v-model="data.extendattr.ext_qyxscount"
                placeholder="请输入区域显示器数量" style="width: 250px"></el-input-number>
            </el-form-item>
            <!-- 自动喷水灭火系统特殊字段 -->
            <el-form-item label="控制主机规格型号:" v-if="zdpsshow" prop="ext_zjggxh02">
              <el-input v-model="data.extendattr.ext_zjggxh02" placeholder="请输入控制主机规格型号"
                style="width: 250px"></el-input>
            </el-form-item>
            <el-form-item label="控制主机数量:" v-if="zdpsshow" prop="ext_zjcount02">
              <el-input-number controls-position="right" v-model="data.extendattr.ext_zjcount02" placeholder="请输入控制主机数量"
                style="width: 250px"></el-input-number>
            </el-form-item>
            <el-form-item label="喷水泵规格型号:" v-if="zdpsshow" prop="ext_psbggxh02">
              <el-input v-model="data.extendattr.ext_psbggxh02" placeholder="请输入喷水泵规格型号"
                style="width: 250px"></el-input>
            </el-form-item>
            <el-form-item label="喷水泵数量:" v-if="zdpsshow" prop="ext_psbcount02">
              <el-input-number controls-position="right" v-model="data.extendattr.ext_psbcount02" placeholder="请输入喷水泵数量"
                style="width: 250px"></el-input-number>
            </el-form-item>
            <el-form-item label="喷头规格型号:" v-if="zdpsshow" prop="ext_ptggxh02">
              <el-input v-model="data.extendattr.ext_ptggxh02" placeholder="请输入喷头规格型号" style="width: 250px"></el-input>
            </el-form-item>
            <el-form-item label="喷头数量:" v-if="zdpsshow" prop="ext_ptcount02">
              <el-input-number controls-position="right" v-model="data.extendattr.ext_ptcount02" placeholder="请输入喷头数量"
                style="width: 250px"></el-input-number>
            </el-form-item>
            <!-- 31103 管网式气体灭火系统/31104 预制式气体灭火系统 -->
            <el-form-item label="控制主机规格型号:" v-if="gwsshow" prop="ext_zjggxh02">
              <el-input v-model="data.extendattr.ext_zjggxh02" placeholder="请输入控制主机规格型号"
                style="width: 250px"></el-input>
            </el-form-item>
            <el-form-item label="控制主机数量:" v-if="gwsshow" prop="ext_zjcount02">
              <el-input-number controls-position="right" v-model="data.extendattr.ext_zjcount02" placeholder="请输入控制主机数量"
                style="width: 250px"></el-input-number>
            </el-form-item>
            <el-form-item label="喷头规格型号:" v-if="gwsshow" prop="ext_ptggxh02">
              <el-input v-model="data.extendattr.ext_ptggxh02" placeholder="请输入喷头规格型号" style="width: 250px"></el-input>
            </el-form-item>
            <el-form-item label="喷头数量:" v-if="gwsshow" prop="ext_ptcount02">
              <el-input-number controls-position="right" v-model="data.extendattr.ext_ptcount02" placeholder="请输入喷头数量"
                style="width: 250px"></el-input-number>
            </el-form-item>
            <el-form-item label="区域控制器规格型号:" v-if="gwsshow" prop="ext_qykzggxh03">
              <el-input v-model="data.extendattr.ext_qykzggxh03" placeholder="请输入区域控制器规格型号"
                style="width: 250px"></el-input>
            </el-form-item>
            <el-form-item label="区域控制器数量:" v-if="gwsshow" prop="ext_qykzcount03">
              <el-input-number controls-position="right" v-model="data.extendattr.ext_qykzcount03"
                placeholder="请输入区域控制器数量" style="width: 250px"></el-input-number>
            </el-form-item>
            <el-form-item label="钢瓶规格型号:" v-if="gwsshow" prop="ext_gpggxh03">
              <el-input v-model="data.extendattr.ext_gpggxh03" placeholder="请输入钢瓶规格型号" style="width: 250px"></el-input>
            </el-form-item>
            <el-form-item label="钢瓶数量:" v-if="gwsshow" prop="ext_gpcount03">
              <el-input-number controls-position="right" v-model="data.extendattr.ext_gpcount03" placeholder="请输入钢瓶数量"
                style="width: 250px"></el-input-number>
            </el-form-item>
            <!-- 31105/31106	 室内/室外消火栓系统特殊字段 -->
            <el-form-item label="消火栓规格型号:" v-if="snshow" prop="ext_hydrantxhgg">
              <el-input v-model="data.extendattr.ext_hydrantxhgg" placeholder="请输入消火栓规格型号"
                style="width: 250px"></el-input>
            </el-form-item>
            <el-form-item label="消防泵规格型号:" v-if="snshow" prop="ext_xfbggxh">
              <el-input v-model="data.extendattr.ext_xfbggxh" placeholder="请输入消防泵规格型号" style="width: 250px"></el-input>
            </el-form-item>
            <el-form-item label="水泵接合器规格型号:" v-if="snshow" prop="ext_sbjhqggxh">
              <el-input v-model="data.extendattr.ext_sbjhqggxh" placeholder="请输入水泵接合器规格型号"
                style="width: 250px"></el-input>
            </el-form-item>
            <el-form-item label="生产厂家:" prop="ext_sccj">
              <el-input v-model="data.extendattr.ext_sccj" placeholder="请输入生产厂家" style="width: 250px"></el-input>
            </el-form-item>
          </el-form>
          <el-form-item label="维保联系电话:">
            <el-input-number controls-position="right" v-model="data.extendattr.ext_wbljdh" placeholder="请输入维保人电话"
              style="width: 250px"></el-input-number>
          </el-form-item>

          <el-form-item label="安装具体位置:">
            <el-input v-model="data.extendattr.ext_location" placeholder="请输入安装具体位置" style="width: 720px"></el-input>
          </el-form-item>
          <el-form-item label="备注:" prop="bz">
            <el-input v-model="data.fromObj.bz" type="textarea" :rows="6" show-word-limit maxlength="200"
              style="width: 1195px" />
          </el-form-item>
          <el-collapse v-model="activeNames" style="width: 100%">
            <el-collapse-item title="消防设施二维码" name="1" v-if="data.fromObj.id">
              <el-form-item label="" label-width="30px !important">
                <MOSTY.ErwmImg
                  :url="qrcodeImg(data.fromObj.id, '311', placename, data.fromObj.allname, `${proxy.$getDictVal(data.fromObj.devtype, XFSSTYPE)}(${data.fromObj.nbbh})`)"
                  :filename='"消防设施二维码"' :id="'htmlsmewmflss'" />
              </el-form-item>
            </el-collapse-item>
            <el-collapse-item title="附件" name="2">
              <div class="mt7">
                <el-button class="addbtn" type="primary" @click="addInfo">
                  <el-icon>
                    <CirclePlus />
                  </el-icon>
                  <span>新增</span>
                </el-button>
              </div>
              <div class="tabbox">
                <el-table :data="tbEquipmentAnnexes" border stripe style="width: 100%" :height="tableHeight"
                  :key="keyCount" @row-click="handlecheckChange">
                  <!-- <el-table-column label="#" type="index" /> -->
                  <!-- <el-table-column prop="id" label="id"></el-table-column> -->
                  <el-table-column sortable prop="ext_name" align="center" label="设备名称"></el-table-column>
                  <el-table-column sortable prop="ext_brand" align="center" label="品牌"></el-table-column>
                  <el-table-column sortable prop="ext_ggxh" align="center" label="规格型号"></el-table-column>
                  <el-table-column sortable prop="ext_count" align="center" label="数量"></el-table-column>
                  <el-table-column sortable prop="ext_nbbh" align="center" label="内部编号"></el-table-column>
                  <el-table-column sortable prop="ext_location" align="center" label="安装位置"></el-table-column>
                  <el-table-column sortable align="center" label="操作" v-if="data.config.saveBtnShow">
                    <template #default="scope">
                      <span class="operate" style="color: yellowgreen" @click="editInfo(scope)">编辑</span>
                      <span class="operate" style="color: yellowgreen" @click="delInfo(scope.row)">删除</span>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </el-collapse-item>
            <el-collapse-item title="维保记录列表" name="3" v-if="data.config.wbjlShow">
              <div>
                <el-button class="addbtn" type="primary" @click="addwbinput">
                  <el-icon>
                    <CirclePlus />
                  </el-icon>
                  <span>新增</span>
                </el-button>
                <el-button class="addbtn" type="primary" @click="submitwbtab">
                  <el-icon>
                    <Select />
                  </el-icon>
                  <span>保存</span>
                </el-button>
                <el-button class="addbtn" type="primary" @click="deletewbtab">
                  <el-icon>
                    <DeleteFilled />
                  </el-icon>
                  <span>删除</span>
                </el-button>
              </div>
              <div class="tabbox">
                <el-table :data="data.fromObj.tbMaintenanceRecords" border stripe style="width: 100%"
                  :height="tableHeight" :key="keyCount" @row-click="handlewbChange">
                  <el-table-column sortable prop="maintenanceorg" align="center" label="维保单位">
                    <template #default="{ row }">
                      <el-input v-if="row.input == true" type="text" v-model="row.maintenanceorg" />
                      <span v-else>{{ row.maintenanceorg }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column sortable prop="maintenancepeople" label="维保人">
                    <template #default="{ row }">
                      <el-input v-if="row.input == true" type="text" v-model="row.maintenancepeople" />
                      <span v-else>{{ row.maintenancepeople }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column sortable prop="maintenancetel" label="维保电话">
                    <template #default="{ row }">
                      <el-input-number controls-position="right" v-if="row.input == true" type="text"
                        v-model="row.maintenancetel" />
                      <span v-else>{{ row.maintenancetel }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column sortable prop="maintenancedescription" label="维保描述">
                    <template #default="{ row }">
                      <el-input v-if="row.input == true" type="text" v-model="row.maintenancedescription" />
                      <span v-else>{{ row.maintenancedescription }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column sortable prop="maintenancetime" align="center" label="维保时间">
                    <template #default="{ row }">
                      <el-date-picker v-if="row.input == true" v-model="row.maintenancetime" style="width: 100%"
                        type="date" value-format="YYYY-MM-DD" />
                      <span v-else>{{ row.maintenancetime }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column sortable prop="bz" label="备注">
                    <template #default="{ row }">
                      <el-input v-if="row.input == true" type="text" v-model="row.bz" />
                      <span v-else>{{ row.bz }}</span>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </el-collapse-item>
          </el-collapse>
        </el-form>
      </div>
    </div>
    <!-- 附件弹出框 -->
    <el-dialog v-model="dialogVisible" :title="data.title" width="50%" :before-close="handleClose">
      <el-form class="mosty-from-wrap" ref="elform" label-width="130px" :model="fromObj" :inline="true" :rules="rules">
        <el-form-item label="设备名称:" prop="xzzw">
          <el-input v-model="fromObj.ext_name" clearable style="width: 250px" />
        </el-form-item>
        <el-form-item label="品牌:" prop="xzzw">
          <el-input v-model="fromObj.ext_brand" clearable style="width: 250px" />
        </el-form-item>
        <el-form-item label="规格型号:" prop="xzzw">
          <el-input v-model="fromObj.ext_ggxh" clearable style="width: 250px" />
        </el-form-item>
        <el-form-item label="数量:" prop="xzzw">
          <el-input-number controls-position="right" v-model="fromObj.ext_count" clearable style="width: 250px" />
        </el-form-item>
        <el-form-item label="内部编号:" prop="xzzw">
          <el-input v-model="fromObj.ext_nbbh" clearable style="width: 250px" />
        </el-form-item>
        <el-form-item label="安装位置:" prop="xzzw">
          <el-input v-model="fromObj.ext_location" clearable style="width: 250px" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="submitry"> 保存 </el-button>
          <el-button @click="handleClose">取消</el-button>
        </span>
      </template>
    </el-dialog>
    <ChooseUser v-model="chooseUserVisible" :Single="singleShow" :data="memberList" :leaderid="leaderid"
      @choosedUsers="getSonValue"></ChooseUser>
  </div>
</template>

<script setup>
import {
  reactive,
  ref,
  watchEffect,
  getCurrentInstance,
  onMounted,
  watch,
  nextTick
} from "vue";
import * as MOSTY from "@/components/MyComponents/index";
import Choosebm from "@/components/MyComponents/ChooseDept/index.vue";
import { ElMessage } from "element-plus";
import { getApi, deleteApi, putApi, postApi } from "@/api/tobAcco_api.js";

import ChooseUser from "@/components/MyComponents/ChooseUser/Leader.vue";
import PageTitle from "@/components/PageTitle/PageTitle.vue";
import * as rule from "@/utils/rules.js";
import { qrcodeImg } from "@/utils/tools.js";
import { Html2canvasImg } from "@/utils/html2pdf.js";
const { proxy } = getCurrentInstance();
const { D_BZ_WPDW } = proxy.$dict("D_BZ_WPDW");
const { XFSSTYPE } = proxy.$dict("XFSSTYPE");
const { D_BZ_SBSSZT } = proxy.$dict("D_BZ_SBSSZT");
const { D_BZ_HZZDBJXTLX } = proxy.$dict("D_BZ_HZZDBJXTLX"); //火灾自动报警系统类型
const { D_BZ_ZDMHXTLX } = proxy.$dict("D_BZ_ZDMHXTLX"); //自动灭火系统类型
const { D_BZ_XFSXTLX } = proxy.$dict("D_BZ_XFSXTLX"); //消防栓系统类型
const props = defineProps({
  saveBtnShow: {
    type: Boolean,
    default: true
  },
  editObj: {
    type: Object,
    default: () => { }
  }
});
const fromObj = ref({});
const dialogVisible = ref(false);
const activeNames = ref(["1"]);
const emit = defineEmits("changePage");
const ruleFormRef = ref();
const ruleFormRefs = ref();
const tbEquipmentAnnexes = ref([]);
const data = reactive({
  fromObj: {
    tbEquipmentAnnexes: []
  },
  extendattr: {},
  config: {
    title: "",
    saveBtnShow: true,
    wbjlShow: false,
    jcrzShow: false
  },

});
//点击带队领导选择按钮
const chooseUserVisible = ref(false); //选择领导弹窗
const singleShow = ref(true); //单选多选
const leaderid = ref("");
const zzlx = ref(null);
const rules = reactive({
  placename: [{ required: false, message: "请选择所属场所", trigger: "change" }],
  allname: [{ required: true, message: "请选择所属部位", trigger: "change" }],
  zrrname: [{ required: true, message: "请选择责任人", trigger: "change" }],
  zrbmname: [{ required: true, message: "请选择责任部门", trigger: "change" }],
  ext_zjggxh: [
    { required: true, message: "请输入主机规格型号", trigger: "change" }
  ],
  ext_zjcount: [
    { required: true, message: "请输入主机数量", trigger: "change" }
  ],
  ext_sccj: [
    { required: true, message: "请输入生产厂家", trigger: "change" }
  ],
  ext_hztcggxh: [
    { required: true, message: "请输入火灾探测器规格型号", trigger: "change" }
  ],
  ext_hztccount: [
    { required: true, message: "请输入火灾探测器数量", trigger: "change" }
  ],
  ext_sdbjnnggxh: [
    { required: true, message: "请输入手动报警按钮规格型号", trigger: "change" }
  ],
  ext_sdbjnncount: [
    { required: true, message: "请输入手动报警按钮数量", trigger: "change" }
  ],
  ext_sgbjggxh: [
    { required: true, message: "请输入声光报警器规格型号", trigger: "change" }
  ],
  ext_sgbjcount: [
    { required: true, message: "请输入声光报警器数量", trigger: "change" }
  ],
  ext_qyxsggxh: [
    { required: true, message: "请输入区域显示器规格型号", trigger: "change" }
  ],
  ext_qyxscount: [
    { required: true, message: "请输入区域显示器数量", trigger: "change" }
  ],
  ext_zjggxh02: [
    { required: true, message: "请输入控制主机规格型号", trigger: "change" }
  ],
  ext_zjcount02: [
    { required: true, message: "请输入控制主机数量", trigger: "change" }
  ],
  ext_psbggxh02: [
    { required: true, message: "请输入喷水泵规格型号", trigger: "change" }
  ],
  ext_psbcount02: [
    { required: true, message: "请输入喷水泵数量", trigger: "change" }
  ],
  ext_ptggxh02: [
    { required: true, message: "请输入喷头规格型号", trigger: "change" }
  ],
  ext_ptcount02: [
    { required: true, message: "请输入喷头数量", trigger: "change" }
  ],
  ext_zjggxh02: [
    { required: true, message: "请输入控制主机规格型号", trigger: "change" }
  ],
  ext_zjcount02: [
    { required: true, message: "请输入控制主机数量", trigger: "change" }
  ],
  ext_ptggxh02: [
    { required: true, message: "请输入喷头规格型号", trigger: "change" }
  ],
  ext_ptcount02: [
    { required: true, message: "请输入喷头数量", trigger: "change" }
  ],
  ext_qykzggxh03: [
    { required: true, message: "请输入区域控制器规格型号", trigger: "change" }
  ],
  ext_qykzcount03: [
    { required: true, message: "请输入区域控制器数量", trigger: "change" }
  ],
  ext_gpggxh03: [
    { required: true, message: "请输入钢瓶规格型号", trigger: "change" }
  ],
  ext_gpcount03: [
    { required: true, message: "请输入钢瓶数量", trigger: "change" }
  ],
  ext_hydrantxhgg: [
    { required: true, message: "请输入消火栓规格型号", trigger: "change" }
  ],
  ext_xfbggxh: [
    { required: true, message: "请输入消防泵规格型号", trigger: "change" }
  ],
  ext_sbjhqggxh: [
    { required: true, message: "请输入水泵接合器规格型号", trigger: "change" }
  ],
  cssj: [{ required: true, message: "请选择出厂日期", trigger: "change" }]
});
const placename = ref("");
const allname = ref("");
const csmclist = ref([]);
const bwlist = ref([]);
function ChooesDdld(val) {
  zzlx.value = val;
  leaderid.value = "";
  if (val == "01") {
    leaderid.value = data.fromObj.zrrid;
  }
  singleShow.value = true;
  chooseUserVisible.value = true;
}

const getSonValue = (value) => {
  if (zzlx.value == "01") {
    data.fromObj.zrrname = value[0].userName;
    data.fromObj.zrrid = value[0].id;
    data.fromObj.zrbmname = value[0].deptName;
    data.fromObj.zrbmcode = value[0].deptId;
  }
};

const currentRowwb = ref(); //选中的表格数据
//新增维保记录表格
function addwbinput() {
  let tab = {
    maintenanceorg: "",
    maintenancepeople: "",
    maintenancetel: "",
    maintenancedescription: "",
    maintenancetime: "",
    bz: "",
    input: true
  };
  if (data.fromObj.tbMaintenanceRecords) {
    data.fromObj.tbMaintenanceRecords.push(tab);
  } else {
    let arr = [];
    arr.push(tab);
    data.fromObj.tbMaintenanceRecords = arr;
  }
}
//保存表格数据
function submitwbtab() {
  data.fromObj.tbMaintenanceRecords.forEach((el) => {
    el.input = false;
  });
}
//删除表格数据
function deletewbtab() {
  data.fromObj.tbMaintenanceRecords.forEach((item, index) => {
    if (currentRowwb.value == item) {
      data.fromObj.tbMaintenanceRecords.splice(index, 1);
    }
  });
}
//选中当前表格行
function handlewbChange(val) {
  currentRowwb.value = val;
  if (data.config.saveBtnShow) {
    data.fromObj.tbMaintenanceRecords.forEach((el) => {
      if (el == val) {
        el.input = true;
      } else {
        el.input = false;
      }
    });
  }
}
//新增
function addInfo() {
  fromObj.value = {};
  dialogVisible.value = true;
  data.title = "附件新增";
}
const current = ref();
//修改
function editInfo(row) {
  current.value = row.$index;
  fromObj.value = row.row;
  dialogVisible.value = true;
  data.title = "附件修改";
}
//删除
function delInfo(row) {
  tbEquipmentAnnexes.value.forEach((item, index) => {
    if (row == item) {
      tbEquipmentAnnexes.value.splice(index, 1);
    }
  });
}
//新增修改完毕
const submitry = () => {
  if (data.title == "附件新增") {
    if (tbEquipmentAnnexes.value) {
      tbEquipmentAnnexes.value.push(fromObj.value);
      dialogVisible.value = false;
    } else {
      let arr = [];
      arr.push(fromObj.value);
      tbEquipmentAnnexes.value = arr;
      dialogVisible.value = false;
    }
  }
  if (data.title == "附件修改") {
    tbEquipmentAnnexes.value[current.value] = fromObj.value;
    dialogVisible.value = false;
  }
};
const hzzdshow = ref(false);
const zdpsshow = ref(false);
const gwsshow = ref(false);
const snshow = ref(false);
watch(
  () => data.fromObj.devtype,
  (newValue) => {
    if (newValue == "31101") {
      hzzdshow.value = true;
      zdpsshow.value = false;
      gwsshow.value = false;
      snshow.value = false;
    }
    if (newValue == "31102") {
      zdpsshow.value = true;
      hzzdshow.value = false;
      gwsshow.value = false;
      snshow.value = false;
    }
    if (newValue == "31103" || newValue == "31104") {
      gwsshow.value = true;
      hzzdshow.value = false;
      zdpsshow.value = false;
      snshow.value = false;
    }
    if (newValue == "31105" || newValue == "31106") {
      if (newValue == "31106") {
        data.fromObj.xfxtlx = "2";
        data.fromObj.devtype = "31105";
      }
      hzzdshow.value = false;
      zdpsshow.value = false;
      gwsshow.value = false;
      snshow.value = true;
    }
    if (
      newValue != "31101" &&
      newValue != "31102" &&
      newValue != "31103" &&
      newValue != "31104" &&
      newValue != "31105" &&
      newValue != "31106"
    ) {
      snshow.value = false;
      hzzdshow.value = false;
      zdpsshow.value = false;
      gwsshow.value = false;
    }
  }
);
const changexfss = (val) => { };

// 保存
const submit = async (ruleFormRef, ruleFormRefs) => {
  if (!ruleFormRef || !ruleFormRefs) return;
  await ruleFormRef.validate((valid) => {
    if (valid) {
      if (data.fromObj) {
        const arr = Object.entries(data.extendattr).map(([key, value]) => ({
          name: key,
          value
        }));
        const obj = Object.entries(tbEquipmentAnnexes.value).map(
          ([key, value]) => ({
            name: key,
            value
          })
        );
        data.fromObj.catalogid = "311";
        data.fromObj.extendattr = arr ? JSON.stringify(arr) : "";
        let Array = {
          extendattr: obj ? JSON.stringify(obj) : ""
        };
        data.fromObj.tbEquipmentAnnexes.push(Array);
        if (data.config.title == "新增") {
          postApi(data.fromObj, "/mosty-jcgl/equipment/addEquipmentOne")
            .then((res) => {
              ElMessage.success("新增成功");
              emit("changePage", "Main");
            })
        } else if (data.config.title == "编辑") {
          postApi(data.fromObj, "/mosty-jcgl/equipment/updateEquipmentOne")
            .then((res) => {
              ElMessage.success("修改成功");
              emit("changePage", "Main");
            })
        }
      }
    } else {
      ElMessage.error("请输入必填项!");
    }
  });
};


//获取详情
function getmain(id) {
  if (id) {
    getApi({ id: id }, "/mosty-jcgl/equipment/queryEquipmentById").then(
      (res) => {
        if (res) {
          data.fromObj = JSON.parse(JSON.stringify(res));
          data.fromObj.tbEquipmentAnnexes = data.fromObj.tbEquipmentAnnexes
            ? data.fromObj.tbEquipmentAnnexes
            : [];
          let arr = JSON.parse(data.fromObj.extendattr);
          data.extendattr = arr.reduce((acc, cur) => {
            acc[cur.name] = cur.value;
            return acc;
          }, {});
          if (data.fromObj.devtype == "31106") {
            data.fromObj.devtype == "31105";
            data.fromObj.xfxtlx = "2";
          }

          data.fromObj.allname = data.fromObj.partname;
          placename.value = data.fromObj.sitename;
        }
      }
    );
    getApi(
      { devid: id },
      "/mosty-jcgl/equipmentAnnex/queryEquipmentAnnexByDevid"
    ).then((res) => {
      if (res) {
        data.fromObj.tbEquipmentAnnexes = res;
        if (
          data.fromObj.tbEquipmentAnnexes[0] &&
          data.fromObj.tbEquipmentAnnexes[0].extendattr
        ) {
          let obj = JSON.parse(data.fromObj.tbEquipmentAnnexes[0].extendattr);
          let objArr = obj.reduce((bcc, bur) => {
            bcc[bur.name] = bur.value;
            return bcc;
          }, {});
          for (let key in objArr) {
            tbEquipmentAnnexes.value.push(objArr[key]);
          }
        }
      }
    });
  }
}
const black = () => {
  if (data.config.saveBtnShow) {
    proxy.$modal.confirm('离开会丢失页面中修改的内容，确认离开吗？')
      .then(() => {
        // 关闭上一次的表单校验
        ruleFormRef.value.clearValidate();
        emit("changePage", "Main");
      })
      .catch(() => {
        // catch error
      })
  } else {
    // 关闭上一次的表单校验
    ruleFormRef.value.clearValidate();
    emit("changePage", "Main");
  }

};

//根据操作人 查询 场所
function getcsData() {
  getApi({}, "/mosty-jcgl/site/getSiteListByUser").then((res) => {
    csmclist.value = res;
  });
}
//获取场所选择
const cahngecsmc = (val) => {
  csmclist.value.forEach((item) => {
    if (item.id == val) {
      data.fromObj.siteid = item.id;
      data.fromObj.sitename = item.placename;
      getbwdata(item.id);
    }
  });
};
//根据操作人 获取部位信息
function getbwdata(id) {
  getApi({ partId: id }, "/mosty-jcgl/part/getpartListByUser").then((res) => {
    bwlist.value = res;
  });
}
//获取当前部位
const cahngebw = (val) => {
  bwlist.value.forEach((item) => {
    if (item.id == val) {
      data.fromObj.partid = item.id;
      data.fromObj.partname = item.areaname;
    }
  });
};
onMounted(() => {
  activeNames.value = ["1", "2", "3", "4", "5"];
  getmain(props.editObj.id);
  getcsData();
});
watchEffect(() => {
  if (props.editObj) {
    data.config = JSON.parse(JSON.stringify(props.editObj));
  }
});
function handleClose() {
  proxy.$modal.confirm('离开会丢失页面中修改的内容，确认离开吗？')
    .then(() => {
      dialogVisible.value = false
    })
    .catch(() => {
      // catch error
    })

}
</script>

<style lang="scss" scoped>
::-webkit-scrollbar {
  width: 0 !important;
  height: 0;
}

.box_cont {
  height: calc(100vh - 15vh);
  overflow-y: scroll;
}

.searchBox {
  width: 1200px;
  margin: 20px auto;
}

.ld_box {
  display: flex;
  margin-right: 20px;
}

.el-form {
  width: 100%;
  align-items: center;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.el-form-item {
  display: flex;
  margin-right: 20px;
}



.addbtn {
  margin-bottom: 10px;
}

.bigBox {
  display: block !important;
  padding: 0 14px;
  box-sizing: border-box;
}

.tabbox {
  max-height: 300px;
  overflow-y: scroll;

  .input {
    width: 100%;
    height: 100%;
  }
}

::v-deep .el-table .cell {
  padding: 0 0 !important;
}

::v-deep .el-table--border .el-table__cell .cell {
  padding-left: 0px !important;

  >input {
    width: 100%;
    height: 33px;
  }
}

::v-deep .el-upload-list {
  width: 50%;
}
</style>