<template>
  <MOSTY.FromPage :title="props.formData.title" @closeDialog="closeDialog">
    <template #content>
      <MOSTY.Assort :title="'基础信息'" />
      <el-form :model="formData" ref="ruleFormRef" label-position="right" :rules="rules" label-width="180px"
        :disabled="!props.formData.saveBtnShow">
        <el-form-item label="设备设施类型:" prop="sblx">
          <MOSTY.DictTree v-model="formData.sblx" :zdlist="sbsslist" :placeholder="'请选择设备设施类型'" :type="'array'"
            style="width: 337px" @onChange="getxzqh" />
        </el-form-item>
        <el-form-item label="设备设施名称:" prop="name" :rules="[{ required: true, message: '请输入设备设施名称', trigger: 'blur' }]">
          <el-input v-model="formData.name" placeholder="请输入设备设施名称" clearable style="width: 337px"></el-input>
        </el-form-item>
       <el-form-item label="内部编号:" prop="nbbh" v-if="formData.id && props.formData.title != '安全设备设施复制'">
          <el-input v-model="formData.nbbh" disabled style="width: 337px"></el-input>
        </el-form-item>
        <el-form-item label="供水方式:" prop="waterSupplyMode"
          v-if="['200101060100', '200101060200'].includes(formData.sblx)">
         <MOSTY.DictRidioAndSelect :multiple="true" :dictData="D_BZ_GSFS" v-model="formData.waterSupplyMode"
            :placeholder="'请选择供水方式'"
            selectType="select" style="width: 337px" />
        </el-form-item>
        <el-form-item label="水泵类型:" prop="pumpsType" v-if="['200101020300'].includes(formData.sblx)">
          <MOSTY.DictRidioAndSelect :dictData="D_BZ_SBLX" v-model="formData.pumpsType" :placeholder="'请选择水泵类型'"
            selectType="select" style="width: 337px" />
        </el-form-item>
        <el-form-item label="水泵数量:" prop="pumpsNumber"
          v-if="['200101060100', '200101060200', '200101020300'].includes(formData.sblx)">
          <el-input v-model.number="formData.pumpsNumber" type="number" style="width: 337px" />
        </el-form-item>
        <el-form-item label="防排烟类型:" prop="smokeExhaustType" v-if="['200101040400'].includes(formData.sblx)">
          <MOSTY.DictRidioAndSelect :dictData="D_BZ_FPYLX" v-model="formData.smokeExhaustType" :placeholder="'请选择防排烟类型'"
            selectType="select" style="width: 337px" />
        </el-form-item>
        <el-form-item label="水喷淋类型:" prop="waterSprayType"
          v-if="['200101050101', '200101050102', '200101050103'].includes(formData.sblx)">
          <MOSTY.DictRidioAndSelect :dictData="D_BZ_SPLLX" v-model="formData.waterSprayType" :placeholder="'请选择水喷淋类型'"
            selectType="select" style="width: 337px" />
        </el-form-item>
        <el-form-item label="品牌型号:" prop="brand" v-if="!['200101020100', '200101020200'].includes(formData.sblx)">
          <el-input v-model="formData.brand" style="width: 337px" />
        </el-form-item>
        <el-form-item label="类型:" prop="heptafluoropropaneType" v-if="['200101050500'].includes(formData.sblx)">
          <MOSTY.DictRidioAndSelect :dictData="D_BZ_QFBWLX" v-model="formData.heptafluoropropaneType"
            :placeholder="'请选择类型'" selectType="select" style="width: 337px" />
        </el-form-item>
        <el-form-item label="监控类型:" prop="monitoringType" v-if="['200102010000'].includes(formData.sblx)">
          <MOSTY.DictRidioAndSelect :dictData="D_BZ_JKLX" v-model="formData.monitoringType" :placeholder="'请选择监控类型'"
            selectType="select" style="width: 337px" />
        </el-form-item>
        <el-form-item label="防雷装置类型:" prop="lightningProtectionType" v-if="['200101080000'].includes(formData.sblx)">
          <MOSTY.DictRidioAndSelect :dictData="D_BZ_FLSSLX" v-model="formData.lightningProtectionType"
            :placeholder="'请选择防雷装置类型'" selectType="select" style="width: 337px" />
        </el-form-item>
        <el-form-item label="接地体:" prop="groundingBody" v-if="['200101080000'].includes(formData.sblx)">
          <el-input v-model.number="formData.groundingBody" type="number" style="width: 337px">
            <template #append>个</template>
          </el-input>
        </el-form-item>
        <el-form-item label="避雷器:" prop="lightningArrester" v-if="['200101080000'].includes(formData.sblx)">
          <el-input v-model.number="formData.lightningArrester" type="number" style="width: 337px">
            <template #append>个</template>
          </el-input>
        </el-form-item>
        <el-form-item label="检测点:" prop="detectionPoint" v-if="['200101080000'].includes(formData.sblx)">
          <el-input v-model.number="formData.detectionPoint" type="number" style="width: 337px">
            <template #append>个</template>
          </el-input>
        </el-form-item>
        <el-form-item label="空气开关数量:" prop="airSwitchCount " v-if="['200101030500'].includes(formData.sblx)">
          <el-input v-model.number="formData.airSwitchCount" type="number" style="width: 337px" />
        </el-form-item>
        <el-form-item label="消火栓规格型号:" prop="specificationModel"
          v-if="['200101060100', '200101060200'].includes(formData.sblx)">
          <el-input v-model="formData.specificationModel" style="width: 337px" />
        </el-form-item>
        <el-form-item label="消火栓数量:" prop="hydrantsNumber"
          v-if="['200101060100', '200101060200'].includes(formData.sblx)">
          <el-input v-model.number="formData.hydrantsNumber" type="number" style="width: 337px" />
        </el-form-item>
        <el-form-item label="生产厂家:" prop="sccj"
          v-if="!['200101010000', '200101090000', '200101020100', '200101020200'].includes(formData.sblx)">
          <el-input v-model="formData.sccj" style="width: 337px" />
        </el-form-item>
        <el-form-item label="生产日期:"
          v-if="!['200101010000', '200101090000', '200101020100', '200101020200'].includes(formData.sblx)" prop="scsj">
          <el-date-picker v-model="formData.scsj" style="width: 337px" type="date" value-format="YYYY-MM-DD"
            placeholder="请选择生产日期" :disabled-date="disablednowDate1" @change="change('scsj')" />
        </el-form-item>

        <el-form-item :label="Isgetdm(formData.sblx, '20010103') ? '主机安装位置:' : '安装位置:'" prop="location"
          v-if="!['200101040300'].includes(formData.sblx)">
          <el-input v-model="formData.location" style="width: 337px" />
        </el-form-item>
        <el-form-item label="安装日期:" prop="azsj">
          <el-date-picker v-model="formData.azsj" :disabled-date="disabledazrq" @change="change('azsj')"
            style="width: 337px" type="date" value-format="YYYY-MM-DD" placeholder="请选择安装日期" />
        </el-form-item>
        <el-form-item label="安装单位:" prop="azdw">
          <el-input v-model="formData.azdw" style="width: 337px" />
        </el-form-item>
        <el-form-item label="投入使用日期:" prop="trsysj">
          <el-date-picker v-model="formData.trsysj" :disabled-date="disabletrsy" @change="change('trsy')"
            style="width: 337px" type="date" value-format="YYYY-MM-DD" placeholder="请选择投入使用日期" />
        </el-form-item>
        <el-form-item label="投入金额:" prop="money">
          <el-input v-model.number="formData.money" type="number" @blur="formData.money = JEblurFn(formData.money)"
            style="width: 337px">
            <template #append>万元</template>
          </el-input>
        </el-form-item>
        <el-form-item label="装载容积:" prop="rztj" v-if="['200101020100', '200101020200'].includes(formData.sblx)">
          <el-input v-model.number="formData.rztj" type="number" style="width: 337px">
            <template #append>立方米</template>
          </el-input>
        </el-form-item>

        <el-form-item label="气瓶数量:" prop="heptafluoropropaneCount" v-if="['200101050500'].includes(formData.sblx)">
          <el-input v-model.number="formData.heptafluoropropaneCount" type="number" style="width: 337px" />
        </el-form-item>
        <el-form-item label="报警主机数量:" prop="alarmHostsNumber" v-if="['200101030100'].includes(formData.sblx)">
          <el-input v-model.number="formData.alarmHostsNumber" type="number" style="width: 337px" />
        </el-form-item>
        <el-form-item label="温感火灾探测器数量:" prop="thermalFireDetectorsNumber"
          v-if="['200101030100'].includes(formData.sblx)">
          <el-input v-model.number="formData.thermalFireDetectorsNumber" type="number" style="width: 337px" />
        </el-form-item>
        <el-form-item label="烟感火灾探测器数量:" prop="smokeFireDetectorsNumber"
          v-if="['200101030100'].includes(formData.sblx)">
          <el-input v-model.number="formData.smokeFireDetectorsNumber" type="number" style="width: 337px" />
        </el-form-item>
        <el-form-item label="探测器数量:" prop="smokeFireDetectorsNumber" v-if="['200101030500'].includes(formData.sblx)">
          <el-input v-model.number="formData.smokeFireDetectorsNumber" type="number" style="width: 337px" />
        </el-form-item>
        <el-form-item label="手动报警按钮数量:" prop="manualAlarmButtonsNumber" v-if="['200101030100'].includes(formData.sblx)">
          <el-input v-model.number="formData.manualAlarmButtonsNumber" type="number" style="width: 337px" />
        </el-form-item>
        <el-form-item label="声光报警器数量:" prop="soundAndLightAlarmsNumber" v-if="['200101030100'].includes(formData.sblx)">
          <el-input v-model.number="formData.soundAndLightAlarmsNumber" type="number" style="width: 337px" />
        </el-form-item>
        <el-form-item label="区域显示器数量:" prop="areaDisplaysNumber" v-if="['200101030100'].includes(formData.sblx)">
          <el-input v-model.number="formData.areaDisplaysNumber" type="number" style="width: 337px" />
        </el-form-item>
        <el-form-item label="防火等级:" prop="fireRating"
          v-if="['200101040100', '200101040200', '200101040300'].includes(formData.sblx)">
          <MOSTY.DictRidioAndSelect
            :dictData="['200101040100', '200101040300'].includes(formData.sblx) ? D_BZ_FHDJJY : D_TB_FIREGRADE"
            v-model="formData.fireRating" :placeholder="'请选择防火等级'" selectType="select" style="width: 337px" />
        </el-form-item>
        <el-form-item label="喷淋泵数量:" prop="sprayPumpsNumber"
          v-if="['200101050101', '200101050102', '200101050103'].includes(formData.sblx)">
          <el-input v-model.number="formData.sprayPumpsNumber" type="number" style="width: 337px" />
        </el-form-item>
        <el-form-item label="喷头数量:" prop="sprinklerHeadsNumber"
          v-if="['200101050101', '200101050102', '200101050103'].includes(formData.sblx)">
          <el-input v-model.number="formData.sprinklerHeadsNumber" type="number" style="width: 337px" />
        </el-form-item>
        <el-form-item label="控制主机数量:" prop="controlHostsNumber"
          v-if="['200101050101', '200101050102', '200101050103'].includes(formData.sblx)">
          <el-input v-model.number="formData.controlHostsNumber" type="number" style="width: 337px" />
        </el-form-item>
        <el-form-item label="控制主机数量:" prop="heptafluoropropaneHostCount"
          v-if="['200101050500'].includes(formData.sblx)">
          <el-input v-model.number="formData.heptafluoropropaneHostCount" type="number" style="width: 337px" />
        </el-form-item>
        <el-form-item label="钢瓶数量:" prop="heptafluoropropaneVaseCount" v-if="['200101050500'].includes(formData.sblx)">
          <el-input v-model.number="formData.heptafluoropropaneVaseCount" type="number" style="width: 337px" />
        </el-form-item>

        <el-form-item label="硬盘录像及数量:" prop="videoVcrCount" v-if="['200102010000'].includes(formData.sblx)">
          <el-input v-model.number="formData.videoVcrCount" type="number" style="width: 337px" />
        </el-form-item>
        <el-form-item label="摄像头数量:" prop="videoCameraCount" v-if="['200102010000'].includes(formData.sblx)">
          <el-input v-model.number="formData.videoCameraCount" type="number" style="width: 337px" />
        </el-form-item>
        <el-form-item label="硬盘大小:" v-if="['200102010000'].includes(formData.sblx)">
          <el-input v-model="formData.videoDiskCount" style="width: 337px" />
        </el-form-item>
        <el-form-item label="回放时间:" prop="videoPlaybackTime" v-if="['200102010000'].includes(formData.sblx)">
          <el-input v-model="formData.videoPlaybackTime" style="width: 337px" />
        </el-form-item>
        <!-- <el-form-item label="回放时间:" prop="videoPlaybackTime" v-if="['200102010000'].includes(formData.sblx)">
          <el-date-picker v-model="formData.videoPlaybackTime" style="width: 337px" type="datetime"
            value-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择回放时间" />
        </el-form-item> -->
        <el-form-item label="所属场所:" prop="sitename" v-if="['cs', 'jzw', 'lc', 'bw'].includes(addtype)">
          <el-input v-model="formData.sitename" style="width: 337px" disabled />
        </el-form-item>
        <!-- <el-form-item label="所属场所:" prop="sitename" v-if="['aqsbss'].includes(addtype) && formData.id">
          <el-input v-model="formData.sitename" style="width: 337px" disabled />
        </el-form-item> -->
        <!--  && !formData.id -->
        <el-form-item label="所属场所:" prop="sitename" v-if="['aqsbss'].includes(addtype)">
          <el-select v-model="formData.sitename" @change="cahngecsmc" clearable style="width: 337px" placeholder="请选择">
            <el-option v-for="item in csmclist" :key="item.id" :label="item.placename" :value="item.id" />
          </el-select>
        </el-form-item>
        <!-- && !formData.id -->
        <el-form-item :label="formData.publicarea == '1' ? '所属场区:' : '所属建筑物:'" prop="buildingname"
          v-if="['cs', 'aqsbss'].includes(addtype)">
          <el-select v-model="formData.buildingname" @change="cahngejzwmc" clearable style="width: 337px"
            placeholder="请选择">
            <el-option v-for="item in jzwlist" :key="item.id" :label="item.buildingname" :value="item.id" />
          </el-select>
        </el-form-item>
        <!-- 'cs', 'jzw', 'lc', 'bw', 'aqsbss' -->
        <el-form-item :label="formData.publicarea == '1' ? '所属场区:' : '所属建筑物:'" prop="buildingname"
          v-if="['jzw', 'lc', 'bw'].includes(addtype) && formData.id">
          <el-input v-model="formData.buildingname" style="width: 337px" disabled />
        </el-form-item>
        <el-form-item :label="formData.publicarea == '1' ? '所属场区:' : '所属建筑物:'" prop="buildingname"
          v-if="['jzw', 'lc', 'bw'].includes(addtype) && !formData.id">
          <el-input v-model="formData.buildingname" style="width: 337px" disabled />
        </el-form-item>
        <!-- && !formData.id -->
        <el-form-item label="所属楼层:" prop="floorname"
          v-if="['cs', 'jzw', 'aqsbss'].includes(addtype) && formData.publicarea != '1'">
          <el-select v-model="formData.floorname" @change="cahngelcmc" clearable style="width: 337px" placeholder="请选择">
            <el-option v-for="item in lclist" :key="item.id" :label="item.floorname" :value="item.id" />
          </el-select>
        </el-form-item>
        <!-- 'cs', 'jzw', 'lc', 'bw', 'aqsbss' -->
        <el-form-item label="所属楼层:" prop="floorname"
          v-if="['lc', 'bw'].includes(addtype) && formData.id && formData.publicarea != '1'">
          <el-input v-model.number="formData.floorname" style="width: 337px" disabled />
        </el-form-item>
        <el-form-item label="所属楼层:" prop="floorname"
          v-if="['lc', 'bw'].includes(addtype) && !formData.id && formData.publicarea != '1'">
          <el-input v-model.number="formData.floorname" style="width: 337px" disabled />
        </el-form-item>
        <!-- && !formData.id -->
        <el-form-item :label="formData.publicarea == '1' ? '场区部位:' : '所属部位:'" prop="partname"
          v-if="['cs', 'jzw', 'lc', 'aqsbss'].includes(addtype)">
          <el-select v-model="formData.partname" @change="cahngebw" clearable style="width: 337px" placeholder="请选择">
            <el-option v-for="item in bwlist" :key="item.id" :label="item.partname ? item.partname : item.qtmc"
              :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item :label="formData.publicarea == '1' ? '场区部位:' : '所属部位:'" prop="partname"
          v-if="['bw'].includes(addtype) && !formData.id">
          <el-input v-model="formData.partname" disabled style="width: 337px" />
        </el-form-item>
        <!-- 'cs', 'jzw', 'lc', 'bw', 'aqsbss' -->
        <el-form-item :label="formData.publicarea == '1' ? '场区部位:' : '所属部位:'" prop="partname"
          v-if="['bw'].includes(addtype) && formData.id">
          <el-input v-model="formData.partname" disabled style="width: 337px" />
        </el-form-item>
        <el-form-item label="上次维保日期:" prop="scwbrq">
          <el-date-picker v-model="formData.scwbrq" style="width: 337px" type="date" value-format="YYYY-MM-DD"
            placeholder="请选择上次维保日期" :disabled-date="disablednowDate1" />
        </el-form-item>
        <el-form-item label="维保单位:" prop="wborgname">
          <el-select v-model="formData.wborgname" style="width: 337px" @change="changexgf" clearable
            placeholder="请选择维保单位：">
            <el-option v-for="item in xgflist" :key="item.id" :label="item.label" :value="item" />
          </el-select>
        </el-form-item>
        <el-form-item label="维保电话:" prop="phone">
          <el-input v-model="formData.phone" maxlength="11" style="width: 337px"></el-input>
        </el-form-item>
        <el-form-item label="检测周期:" prop="detectionTime">
          <el-input v-model="formData.detectionTime" type="number" style="width: 337px" placeholder="请输入检测周期">
            <template #append>月</template>
          </el-input>
        </el-form-item>
        <el-form-item label="检测日期:" prop="sycjcrq">
          <el-date-picker v-model="formData.sycjcrq" type="date" value-format="YYYY-MM-DD" style="width: 337px"
            placeholder="请选择检测日期" />
        </el-form-item>
        <el-form-item label="维保周期:" prop="inspectTime">
          <el-input v-model="formData.inspectTime" type="number" style="width: 337px" placeholder="请输入维保周期">
            <template #append>月</template>
          </el-input>
        </el-form-item>
        <el-form-item label="报废时间:" prop="scrapTime">
          <el-date-picker v-model="formData.scrapTime" type="date" value-format="YYYY-MM-DD" style="width: 337px"
            placeholder="请选择报废时间" />
        </el-form-item>
        <el-form-item label="状态:" prop="state" :rules="[{ required: true, message: '请选择使用状态', trigger: 'blur' }]"
          v-if="formData.id">
          <div style="width: 337px">
            <MOSTY.DictRidioAndSelect :dictData="D_BZ_SYZT" v-model="formData.state" selectType="radio"
              :disabled="false" />
          </div>
        </el-form-item>
        <el-form-item label="设备资料:" style="width: 100%;" prop="deviceFile">
          <MOSTY.Upload :width="'100%'" :limit="5" :nopicer="true" placeholder="请上传设备资料（pdf,ofd,doc,docx,xls,xlsx,wps）"
            :isImg="false" ShowfileList :disabled="!props.formData.saveBtnShow" v-model="formData.deviceFile"
            :nameshow='true' :gsgfList="['pdf', 'ofd', 'doc', 'docx', 'xls', 'xlsx', 'wps']">
          </MOSTY.Upload>
        </el-form-item>
        <el-form-item label="其它资料:" style="width: 100%;" prop="otherFile">
          <MOSTY.Upload :width="'100%'" :limit="5" :nopicer="true" :isImg="false" ShowfileList
            :disabled="!props.formData.saveBtnShow" placeholder="请上传其他资料（pdf,ofd,doc,docx,xls,xlsx,wps）"
            v-model="formData.otherFile" :nameshow='true'
            :gsgfList="['pdf', 'ofd', 'doc', 'docx', 'xls', 'xlsx', 'wps']">
          </MOSTY.Upload>
        </el-form-item>
        <el-form-item label="图片:" style="width: 100%">
          <div style="display: flex">
            <MOSTY.ErwmImg v-if="formData.id"
              :url="qrcodeImg(props.formData.id, 'sbss', formData.sitename, formData.partname, `${formData.name}(${formData.nbbh})`)"
              :filename='"设备设施二维码"' />
            <MOSTY.Upload :width="'100%'" :limit="5" :nopicer="false" :isImg="true" :ShowfileList="false"
              v-model="formData.file" :nameshow="true" :gsgfList="['jpg', 'png']"
              :disabled="!props.formData.saveBtnShow">
            </MOSTY.Upload>
          </div>
        </el-form-item>
      </el-form>
      <MOSTY.Assort :title="'管理信息'" />
      <el-form :model="formData" ref="ruleFormRef2" label-position="right" :rules="rules2" label-width="150px"
        :disabled="!props.formData.saveBtnShow">
        <el-form-item label="责任部门:" prop="responsibilitydeptname" style="display: flex">
          <el-input v-model="formData.responsibilitydeptname" placeholder="请选择责任部门" readonly clearable
            style="width: 337px">
            <template #append>
              <el-button class="cursor" @click="ChooesDdld('01')">选择</el-button>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="责任人:" prop="responsibilitypersonname" style="display: flex;width:100%;">
          <el-input v-model="formData.responsibilitypersonname" placeholder="请选择责任人" type="textarea" :rows="4" readonly
            style="width: 900px" clearable>
          </el-input>
          <el-button class='cursor ml10' @click="ChooesDdld('03')">选择</el-button>
        </el-form-item>
       <el-form-item label="相关方巡查人员：" prop="xgfRyMc">
          <XiangGFRen :inputWidth="'900px'" :inputHeight="true" v-model:ids="formData.xgfRyId"
            v-model:cName="formData.xgfRyMc" :relatedid="'xgfid111'" @update:ids="updateIds"
            @update:cName="updateName" />
        </el-form-item>
        <!-- <el-form-item label="巡查相关方：" prop="xgfMc">
          <XiangGFSelect style="width: 337px" v-model="formData.xgfMc" v-model:id="formData.xgfId"
            @update:modelValue="updateModelValue" @update:id='updateId' />
        </el-form-item>
        <el-form-item label="相关方责任人：" prop="xgfRyMc">
          <XiangGFRen inputWidth="337px" v-model:ids="formData.xgfRyId" v-model:cName="formData.xgfRyMc"
            :relatedid="formData.xgfId" :disabled="!formData.xgfId" @update:ids="updateIds"
            @update:cName="updateName" />
        </el-form-item> -->

      </el-form>
     <MOSTY.Assort v-if="formData.id && props.formData.title != '安全设备设施复制'" :title="'关联信息(固定信息、动态信息)'" />
      <div>
       <div v-if="formData.id && props.formData.title != '安全设备设施复制'">
          <div class="table-lable">
            <span>固定信息</span>
            <img :src="getImgUrl('img/icon-jt.png')" style="cursor: pointer" @click="isShowgd = !isShowgd" />
          </div>
          <div v-show="isShowgd" v-if="tablist && tablist.length > 0">
            <MOSTY.TabList :tablist="tablist" :obj="formData" :showCount="formData.id ? true : false" :cardtype="'02'"
              :sblx="formData.sblx" :isEdit="props.formData.saveBtnShow" @handleChange="changelicolor"
              @tableChange="tableChange" @resetChange="resetChange" />
          </div>
        </div>
      </div>
      <div>
       <div v-if="formData.id && props.formData.title != '安全设备设施复制'">
          <div class="table-lable">
            <span>动态信息</span>
            <img :src="getImgUrl('img/icon-jt.png')" style="cursor: pointer" @click="isShowdt = !isShowdt" />
          </div>
          <div v-show="isShowdt">
            <MOSTY.TabList :tablist="tablist2" :type="'sb'" :obj="formData" @handleChange="changelicolor2"
              @resetChange="searchChange" />
          </div>
        </div>
      </div>
    </template>
    <template #footer>

      <el-button type="primary" @click="saveData(ruleFormRef)" v-loading="saveloading"
        v-if="props.formData.saveBtnShow">
        <el-icon>
          <DocumentChecked />
        </el-icon>
        保存
      </el-button>
      <el-button @click="closeDialog">
        <el-icon>
          <DocumentDelete />
        </el-icon>
        关闭
      </el-button>
    </template>
    <template #dwbox>
      <!-- 选择部门 -->
      <Choosebm :showDdld="showDept" @closezzjg="closezzjg" @listdata="getSonValue" :zzlx="zzlx" />
      <!-- 选择责任人 -->
      <ChooseUser v-model="chooseUserVisible" :Single="singleShow" @choosedUsers="getSonValue"
        :deptId="formData.responsibilitydeptid" :data='memberList'></ChooseUser>
    </template>
  </MOSTY.FromPage>
</template>

<script setup>
import { getImgUrl } from "@/utils/tools.js"
import { ref, getCurrentInstance, defineAsyncComponent, onMounted } from "vue"
import Choosebm from "@/components/MyComponents/ChooseDept/index.vue"
import ChooseUser from "@/components/MyComponents/ChooseUser/Leader.vue"
import * as MOSTY from "@/components/MyComponents/index"
import * as rule from "@/utils/rules.js"
import { qrcodeImg, disablednowDate1 } from "@/utils/tools.js"
import { getItem } from "@/utils/storage"
import { ElMessage } from "element-plus"
import { JEblurFn } from "@/utils/auth.js"
import { postApi, getApi } from "@/api/tobAcco_api.js"
import XiangGFSelect from "@/components/dialog/component/XiangGFSelect.vue"
import XiangGFRen from "@/components/dialog/component/XiangGFRen.vue"

const props = defineProps({
  formData: {
    type: Object,
    default: {}
  },
  type: {
    default: "",
    type: String
  },
  equipmentType: {
    default: 0,
    type: Number
  }
})
const { proxy } = getCurrentInstance()
const {
  D_BZ_SYZT,
  D_TB_FIREGRADE,
  D_BZ_FHDJJY,
  D_BZ_FPYLX,
  D_BZ_GSFS,
  D_BZ_FLSSLX,
  D_BZ_SPLLX,
  D_BZ_SBLX,
  D_BZ_QFBWLX,
  D_BZ_JKLX
} =
  proxy.$dict("D_BZ_SYZT", "D_TB_FIREGRADE", "D_BZ_FHDJJY",
    "D_BZ_FPYLX", "D_BZ_GSFS", "D_BZ_FLSSLX", "D_BZ_SPLLX", "D_BZ_SBLX", "D_BZ_QFBWLX", "D_BZ_JKLX")
const rules2 = {
  responsibilitydeptname: [{
    required: true,
    message: "请选择责任部门",
    trigger: "blur"
  }],
  responsibilitypersonname: [{
    required: true,
    message: "请选择责任人",
    trigger: "blur"
  }]
}
const rules = {
  ...rule.phoneRule({
    require: false,
    validator: true
  }, "phone"),
  sitename: [{
    required: true,
    message: "请输入场所名称",
    trigger: "blur"
  }],
  buildingname: [{
    required: true,
    message: "请选择所属建筑物",
    trigger: "blur"
  }],
  floorname: [{
    required: true,
    message: "请选择所属楼层",
    trigger: "blur"
  }],
  partname: [{
    required: true,
    message: "请选择所属部位",
    trigger: "blur"
  }],
  sblx: [{
    required: true,
    message: "请选择设备设施类型",
    trigger: "blur"
  }],
  specificationModel: [{
    required: true,
    message: "请输入规格型号",
    trigger: "blur"
  }],
  ...rule.znumberRule({
    validator: true,
    require: false
  }, "money"),
  ...rule.znumberRule({
    validator: true,
    require: true
  }, "rztj"),
  ...rule.intfsRule({
    validator: true,
    require: true
  }, "alarmHostsNumber"),
  ...rule.intfsRule({
    validator: true,
    require: true
  }, "heptafluoropropaneCount"),
  ...rule.intfsRule({
    validator: true,
    require: true
  }, "thermalFireDetectorsNumber"),
  ...rule.intfsRule({
    validator: true,
    require: true
  }, "smokeFireDetectorsNumber"),
  ...rule.intfsRule({
    validator: true,
    require: true
  }, "manualAlarmButtonsNumber"),
  ...rule.intfsRule({
    validator: true,
    require: true
  }, "soundAndLightAlarmsNumber"),
  ...rule.intfsRule({
    validator: true,
    require: true
  }, "areaDisplaysNumber"),
  ...rule.intfsRule({
    validator: true,
    require: true
  }, "hydrantsNumber"),
  ...rule.intfsRule({
    validator: true,
    require: true
  }, "pumpsNumber"),
  ...rule.intfsRule({
    validator: true,
    require: true
  }, "groundingBody"),
  ...rule.intfsRule({
    validator: true,
    require: true
  }, "lightningArrester"),
  ...rule.intfsRule({
    validator: true,
    require: true
  }, "detectionPoint"),
  ...rule.intfsRule({
    validator: true,
    require: true
  }, "sprayPumpsNumber"),
  ...rule.intRule({
    validator: true,
    require: true
  }, "airSwitchCount"),
  ...rule.intRule({
    validator: true,
    require: true
  }, "airSwitchCount"),
  ...rule.znumberRule({
    validator: true,
    require: true
  }, "sprinklerHeadsNumber"),
  ...rule.znumberRule({
    validator: true,
    require: true
  }, "heptafluoropropaneHostCount"),
  ...rule.znumberRule({
    validator: true,
    require: true
  }, "controlHostsNumber"),
  ...rule.znumberRule({
    validator: true,
    require: true
  }, "heptafluoropropaneVaseCount"),
  ...rule.znumberRule({
    validator: true,
    require: true
  }, "videoVcrCount"),
  ...rule.numberzzsRule({
    validator: true,
    require: true,
    num: 99999
  }, "videoCameraCount"),
  location: [{
    required: true,
    message: "请输入安装位置",
    trigger: "blur"
  }],
  videoPlaybackTime: [{
    required: true,
    message: "请输入回放时间",
    trigger: "blur"
  }],
  azsj: [{
    required: true,
    message: "请选择安装日期",
    trigger: "blur"
  }],
  trsysj: [{
    required: true,
    message: "请选择投入使用日期",
    trigger: "blur"
  }],
  // wborgname: [{ required: true, message: "请选择维保单位", trigger: "blur" }],
  fireRating: [{
    required: true,
    message: "请选择防火等级",
    trigger: "blur"
  }],
  smokeExhaustType: [{
    required: true,
    message: "请选择防排烟类型",
    trigger: "blur"
  }],
  waterSupplyMode: [{
    required: true,
    message: "请选择供水方式",
    trigger: "blur"
  }],
  lightningProtectionType: [{
    required: true,
    message: "请选择防雷装置类型",
    trigger: "blur"
  }],
  waterSprayType: [{
    required: true,
    message: "请选择水喷淋类型",
    trigger: "blur"
  }],
  pumpsType: [{
    required: true,
    message: "请选择水泵类型",
    trigger: "blur"
  }],
  heptafluoropropaneType: [{
    required: true,
    message: "请选择类型",
    trigger: "blur"
  }],
  monitoringType: [{
    required: true,
    message: "请选择监控类型",
    trigger: "blur"
  }],
  // scwbrq: [{ required: true, message: "请选择上次维保日期", trigger: "blur" }],
  ...rule.numberzzsRule({
    validator: true,
    require: false,
    num: 120
  }, "detectionTime"),
  ...rule.numberzzsRule({
    validator: true,
    require: false,
    num: 120
  }, "inspectTime")
  // sycjcrq: [{ required: true, message: "请选择检测日期", trigger: "blur" }],
  // scrapTime: [{ required: true, message: "请选择报废时间", trigger: "blur" }],
}
const ruleFormRef = ref()
const ruleFormRef2 = ref()
const xgflist = ref([])
const zzlx = ref(null)
const showDept = ref(false)
const saveloading = ref(false)
const formData = ref({
  type: "1",
  state: "01"
})
const isShowgd = ref(true)
const isShowdt = ref(true)
const chooseUserVisible = ref(false) //选择领导弹窗
const singleShow = ref(true) //单选多选
const leaderid = ref("")
const memberList = ref([])
const csmclist = ref([])
const jzwlist = ref([])
const lclist = ref([])
const bwlist = ref([])
const tablist = ref([{
  title: "风险告知卡",
  num: 0,
  icon: "sbss2",
  actives: true,
  components: defineAsyncComponent(() => import("@/components/MyComponents/TabList/Fxgzk.vue"))
}])
const tablist2 = ref([
  {
    title: "检查标准",
    num: 0,
    icon: "jianzhuwu",
    sblx: "200100000000",
    actives: true,
    components: defineAsyncComponent(() => import("@/components/MyComponents/TabList/Synthesize.vue"))
  },
  {
    title: "检查记录",
    num: 0,
    icon: "sbss2",
    actives: false,
    components: defineAsyncComponent(() => import("@/components/MyComponents/TabList/Standard.vue"))
  },
  {
    title: "维保记录",
    num: 0,
    icon: "sbss2",
    actives: false,
    components: defineAsyncComponent(() => import("@/components/MyComponents/TabList/MaintenanceRecord.vue"))
  },
  {
    title: "风险信息",
    num: 0,
    icon: "sbss2",
    actives: false,
    components: defineAsyncComponent(() => import("@/components/MyComponents/TabList/Risklist.vue"))
  },
  {
    title: "隐患清单",
    num: 0,
    icon: "sbss2",
    actives: false,
    components: defineAsyncComponent(() => import("@/components/MyComponents/TabList/Pitfall.vue"))
  }
])
const addtype = ref("aqsbss")
const sbsslist = ref([])
const emits = defineEmits(["saveSuccess"])
onMounted(() => {
  getxgflist()
  getaqsbsslb()
  addtype.value = props.formData.type ? props.formData.type : "aqsbss"
  formData.value.siteid = props.formData.siteid ? props.formData.siteid : null
  formData.value.sitename = props.formData.sitename ? props.formData.sitename : null
  formData.value.buildingid = props.formData.buildingid ? props.formData.buildingid : null
  formData.value.buildingname = props.formData.buildingname ? props.formData.buildingname : null
  formData.value.floorid = props.formData.floorid ? props.formData.floorid : null
  formData.value.floorname = props.formData.floorname ? props.formData.floorname : null
  formData.value.partid = props.formData.partid ? props.formData.partid : null
  formData.value.partname = props.formData.partname ? props.formData.partname : null
  formData.value.publicarea = props.formData.publicarea ? props.formData.publicarea : null
  formData.value.sfcq = props.formData.sfcq ? props.formData.sfcq : null
  formData.value.qtmc = props.formData.qtmc ? props.formData.qtmc : null
  formData.value.saveBtnShow = props.formData.saveBtnShow
  formData.value.xgfRyId = props.formData.xgfRyId ? props.formData.xgfRyId : null
  formData.value.xgfRyMc = props.formData.xgfRyMc ? props.formData.xgfRyMc : null
  formData.value.xgfMc = props.formData.xgfMc ? props.formData.xgfMc : null
  formData.value.xgfId = props.formData.xgfId ? props.formData.xgfId : null

  if (props.formData.id) {
    getmain(props.formData.id)
  } else {
    if (props.formData.type == "cs") {
      getjzwlist(props.formData.siteid)
    } else if (props.formData.type == "jzw") {
      if (props.formData.publicarea == "1") {
        getbw2data(props.formData.buildingid)
      } else {
        getlcdata(props.formData.buildingid)
      }
    } else if (props.formData.type == "lc") {
      getbwdata(props.formData.floorid)
    } else if (["aqsbss"].includes(addtype.value)) {
      getcsData()
    }
  }
})
// 获取相关方责任人id
const updateIds = (ids) => {
  formData.value.xgfRyId = ids
}
// 获取相关方人员列表
const updateName = (names) => {
  formData.value.xgfRyMc = names
}
// 获取检查方名称
const updateModelValue = (ModelValue) => {
  formData.value.xgfMc = ModelValue
}
// 获取检查方id
const updateId = (id) => {
  formData.value.xgfId = id
}

function disabledazrq(time) {
  return time.getTime() + 24 * 60 * 60 * 1000 < new Date(formData.value.scsj).getTime() || time.getTime() > Date.now() || time.getTime() > Date.now()
}

function disabletrsy(time) {
  return time.getTime() + 24 * 60 * 60 * 1000 < new Date(formData.value.azsj).getTime() || time.getTime() > Date.now() || time.getTime() > Date.now()
}

function change(type) {
  switch (type) {
    case "scsj":
      formData.value.azsj = ""
      formData.value.trsysj = ""
      break
    case "azsj":
      formData.value.trsysj = ""
      break
    default:
      break
  }
}

function getaqsbsslb() {
  getApi({
    dm: "2001",
    zdbh: "D_TB_JCYWLX",
    level: 4
  }, "/mosty-base/sysDict/getJcyelxDictTree").then(res => {
    sbsslist.value = [res[0].itemList[props.equipmentType]]
  })
}

//子表总数
function gettabcount(type) {
  if (type == "1") {
    getApi({ id: props.formData.id }, "/mosty-jcgl/aqsbssZb/countAll").then(res => {
      tablist.value.forEach(item => {
        if (["附属设备", "液位仪", "压力传感器", "视频摄像头"].includes(item.title)) {
          item.num = res ? res : 0
        }
      })
    })
  } else {
    getApi({ id: props.formData.id }, "/mosty-jcgl/aqsbssAtta/countAll").then(res => {
      tablist.value.forEach(item => {
        if (["避雷检测点"].includes(item.title)) {
          item.num = res ? res : 0
        }
      })
    })
  }
}

//获取相关方
function getxgflist() {
  let orgid = getItem("deptId").ssdwid
  getApi({ orgid }, "/mosty-jcgl/relatedpartyinfo/getListByBelongOrg").then(res => {
    if (res) {
      xgflist.value = res.map(item => {
        return {
          label: item.relatedname,
          value: item.id,
          phone: item.contactsphone
        }
      })
    }
  })
}

function changexgf(val) {
  formData.value.wborgcode = val.value
  formData.value.wborgname = val.label
  formData.value.phone = val.phone
}

//获取详情
function getmain(id) {
  getApi({ id: id }, "/mosty-jcgl/sbglAqsbss/queryTbSbglAqsbssById").then(res => {
    res.responsibilitypersonname = res.responsibilitypersonname ? res.responsibilitypersonname.replace(/（null）/g, "") : ""
    formData.value = res
    formData.value.waterSupplyMode = formData.value.waterSupplyMode.split(",")
    formData.value.saveBtnShow = props.formData.saveBtnShow
    formData.value.state = formData.value.state ? formData.value.state : "01"
    formData.value.qtmc = props.formData.qtmc ? props.formData.qtmc : null
    formData.value.blockingDeviceFlag = formData.value.blockingDeviceFlag ? JSON.parse(res.blockingDeviceFlag) : false
    getlcxq(formData.value.buildingid)
    gettotal()
    if (props.formData.type == "cs") {
      getjzwlist(res.siteid)
    } else if (props.formData.type == "lc") {
      getbwdata(res.floorid)
    } else if (["aqsbss"].includes(addtype.value)) {
      getcsData()
    }
    if (res.partid) {
      getApi({ id: res.partid }, "/mosty-jcgl/part/queryScenePartById").then(res => {
        if (res) {
          formData.value.partname = res.qtmc ? res.qtmc : res.partname
          formData.value.checktype = res.checktype
          formData.value.qtmc = res.qtmc
        }
      })
    }
    // 消火栓系统：
    // 室内消火栓：200101060100  室外消火栓：200101060200  电气火灾监控（智慧用电）报警系统：200101030500
    // 消防水箱：200101020200  消防水池：200101020100  消防水泵：200101020300  感烟、感温报警系统：200101030100
    // 视频监控系统：200102010000
    if (["200101060100", '200101060200', '200101030500', '200101020200', '200101020100', '200101020300', '200102010000', "200101030100"].includes(res.sblx)) {
      let title = '附属设备'
      if (['200101020200', '200101020100'].includes(res.sblx)) {
        title = '液位仪';
      } else if ('200101020300' == res.sblx) {
        title = '压力传感器'
      } else if ('200102010000' == res.sblx) {
        title = '视频摄像头'
      }
      tablist.value.push({
        title: title,
        num: 0,
        icon: "sbss2",
        sblx: res.sblx,
        actives: false,
        components: defineAsyncComponent(() => import("@/components/MyComponents/TabList/Fssblb.vue"))
      })
      //统计各类总数
      gettabcount("1")
    }
    //防雷装置
    if (["200101080000"].includes(res.sblx)) {
      tablist.value.push({
        title: "避雷检测点",
        num: 0,
        icon: "sbss2",
        actives: false,
        components: defineAsyncComponent(() => import("@/components/MyComponents/TabList/Fljcd.vue"))
      })
      //统计各类总数
      gettabcount("2")
    } else if (["200101040100", "200101040200"].includes(res.sblx)) {
      tablist2.value = []
    }
  })
}

//获取建筑物详情
function getlcxq(id) {
  getApi({}, `/mosty-jcgl/building/getBuildingById/${id}`).then(res => {
    formData.value.publicarea = res.publicarea ? res.publicarea : "2"
    if (formData.value.publicarea == "1") {
      getbw2data(id)
    } else {
      getlcdata(id)
    }
  })
}

//获取设备设施名称
function getxzqh(val) {
  if (val !== null) {
    formData.value.name = val.label
    if (val.dm == "200101030100") {
      formData.value.alarmHostsNumber = 0
      formData.value.thermalFireDetectorsNumber = 0
      formData.value.smokeFireDetectorsNumber = 0
      formData.value.manualAlarmButtonsNumber = 0
      formData.value.soundAndLightAlarmsNumber = 0
      formData.value.areaDisplaysNumber = 0
    } else if (val.dm == "200101030500") {
      formData.value.smokeFireDetectorsNumber = 0
    }
  }
}

//查询是否包含某个字符
function Isgetdm(str, zf) {
  if (str) {
    return str.indexOf(zf) != -1
  }
}

//根据操作人 查询 场所
function getcsData() {
  getApi({}, "/mosty-jcgl/site/getSiteListByUser").then(res => {
    csmclist.value = res
  })
}

//获取场所选择
const cahngecsmc = val => {
  csmclist.value.forEach(item => {
    if (item.id == val) {
      formData.value.siteid = item.id
      formData.value.sitename = item.placename
      formData.value.buildingname = ""
      formData.value.buildingid = ""
      formData.value.publicarea = ""
      formData.value.floorname = ""
      formData.value.floorid = ""
      formData.value.partname = ""
      formData.value.partid = ""
      getjzwlist(item.id)
    }
  })
}

const searchChange = () => {
  gettotal()
}

//获取统计
function gettotal() {
  postApi({
    bizId: formData.value.id,
    bizType: formData.value.sblx
  }, "/mosty-jcgl/deviceUpkeepRecord/statistics").then(res => {
    tablist2.value.forEach(item => {
      if (item.title.includes(["维保记录"])) {
        item.num = res ? res : 0
      }
    })
  })
}

//获取当前部位
const cahngebw = val => {
  bwlist.value.forEach(item => {
    if (item.id == val) {
      formData.value.partid = item.id
      formData.value.partname = item.partname ? item.partname : item.qtmc
    }
  })
}

//	根据placeid，查询建筑物
function getjzwlist(placeid) {
  getApi({ placeid }, "/mosty-jcgl/building/queryBuildingByPlaceid").then(res => {
    jzwlist.value = res ? res : []
  })
}

//获取建筑物名称
function cahngejzwmc(val) {
  jzwlist.value.forEach(item => {
    if (item.id == val) {
      formData.value.buildingid = item.id
      formData.value.buildingname = item.buildingname
      formData.value.publicarea = item.publicarea
      formData.value.floorname = ""
      formData.value.floorid = ""
      formData.value.partname = ""
      formData.value.partid = ""
      if (item.publicarea == "1") {
        getbw2data(item.id)
      } else {
        getlcdata(item.id)
      }
    }
  })
}

//根据建筑物查询楼层
function getlcdata(id) {
  getApi({ id }, "/mosty-jcgl/floor/queryFloorByBuildId").then(res => {
    lclist.value = res ? res : []
  })
}

//获取楼层名称
function cahngelcmc(val) {
  lclist.value.forEach(item => {
    if (item.id == val) {
      formData.value.floorid = item.id
      formData.value.floorname = item.floorname
      formData.value.partname = ""
      formData.value.partid = ""
      getbwdata(item.id)
    }
  })
}

// (新)根据楼层id查询部位
function getbwdata(id) {
  getApi({ id }, "/mosty-jcgl/part/getListByFloorid").then(res => {
    bwlist.value = res ? res : []
  })
}

//(新)根据建筑物id查询部位
function getbw2data(id) {
  getApi({ id }, "/mosty-jcgl/part/getListByBuildid").then(res => {
    bwlist.value = res ? res : []
  })
}

// 关闭弹窗
function closeDialog() {
  if (props.formData.saveBtnShow) {
    proxy.$modal.confirm("离开会丢失页面中修改的内容，确认离开吗？")
      .then(() => {
        ruleFormRef.value.resetFields()
        ruleFormRef.value.clearValidate()
        emits("saveSuccess")
      })
  } else {
    ruleFormRef.value.resetFields()
    ruleFormRef.value.clearValidate()
    emits("saveSuccess")
  }

}

//刷新接口
function resetChange(val) {
  gettabcount("1")
}

function changelicolor(val) {
  tablist.value.forEach(item => {
    if (item.title == val.title) {
      item.actives = true
    } else {
      item.actives = false
    }
  })
}

function changelicolor2(val) {
  tablist2.value.forEach(item => {
    if (item.title == val.title) {
      item.actives = true
    } else {
      item.actives = false
    }
  })
}

//选择部门
function ChooesDdld(val) {
  zzlx.value = val
  memberList.value = []
  if (val == "01") {
    showDept.value = true
  } else {
    if (formData.value.responsibilitydeptid) {
      leaderid.value = formData.value.responsibilityperson ? formData.value.responsibilityperson.split(",") : []
      singleShow.value = false
      chooseUserVisible.value = true
    } else {
      ElMessage.error("请先选择责任部门！!")
    }
  }
}

const getSonValue = value => {
  if (zzlx.value == "01") {
    formData.value.responsibilitydeptname = value.orgName
    formData.value.responsibilitydeptid = value.id
  } else {
    formData.value.responsibilitypersonname = value.map(item => {
      if (item.mobile) {
        return item.userName + "（" + item.mobile + "）"
      } else {
        return item.userName
      }

    }).toString()
    formData.value.responsibilityperson = value.map(item => {
      return item.id
    }).toString()
  }
}

//关闭弹窗
const closezzjg = val => {
  showDept.value = val
}

//获取子表数据
function tableChange(val) {
  formData.value.list = val
  if (["200101060100", "200101060200", "200101030500", "200101010000", "200101020200", "200101020100", "200101020300", "200102010000"].includes(formData.value.sblx)) {
    //统计各类总数
    gettabcount("1")
  }
  //防雷装置
  if (["200101080000"].includes(formData.value.sblx)) {
    gettabcount("2")
  }
}

// 保存数据
const saveData = async ruleFormRef => {
  saveloading.value = true
  if (!ruleFormRef) return
  await ruleFormRef.validate(valid => {
    if (valid) {
      ruleFormRef2.value.validate(valid => {
        if (valid) {
          formData.value.waterSupplyMode = formData.value.waterSupplyMode ? formData.value.waterSupplyMode.join() : ''
          formData.value.file = formData.value.file ? formData.value.file.toString() : null
          formData.value.deviceFile = formData.value.deviceFile?.toString()
          formData.value.otherFile = formData.value.otherFile?.toString()
          formData.value.partname = formData.value.partname ? formData.value.partname : formData.value.qtmc
          formData.value.money = formData.value.money ? parseFloat(formData.value.money) : null
          if (props.formData.title === '安全设备设施复制') {
            formData.value.id = ''
          }
          if (!formData.value.id) {
            postApi(formData.value, "/mosty-jcgl/sbglAqsbss/addTbSbglAqsbssOne")
              .then(res => {
                ElMessage.success("新增成功")
                emits("saveSuccess", res)
                saveloading.value = false
              })
              .finally(() => {
                saveloading.value = false
              })
          } else {
            postApi(formData.value, "/mosty-jcgl/sbglAqsbss/updateTbSbglAqsbssOne")
              .then(() => {
                ElMessage.success("修改成功")
                emits("saveSuccess")
                saveloading.value = false
              })
              .finally(() => {
                saveloading.value = false
              })
          }
        } else {
          ElMessage.error("请输入必填项!")
          saveloading.value = false
        }
      })
    } else {
      ElMessage.error("请输入必填项!")
      saveloading.value = false
    }
  })
}
</script>

<style lang="scss" scoped>
::v-deep .el-form-item__content {
  margin-left: 0px !important;
}

::v-deep .el-form {
  // width: 1580px;
  margin: auto;
  padding: 10px;
  margin-top: 10px;
  flex-wrap: wrap;
  justify-content: start;
}

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

.table-lable {
  margin: 10px;
  color: var(--el-color-primary);
}

::v-deep ::-webkit-scrollbar {
  display: none !important;
}
</style>
