<template>
  <div class="page-container addSubject">
    <div class="page-top-title-box">
      <p class="page-top-title-name-p">{{form.infoId?'编辑':'新增'}}</p>
      <p class="page-top-title-out-p" @click="backPage">返回</p>
      <p class="page-top-title-submit-p" @click="upData">提交</p>
    </div>
    <div class="content-box scrollbar-box">
      <el-form ref="form" :model="form" label-width="120px" :rules="rules" >
        <div class="title-box">
          <p class="left-title">基本信息</p>
        </div>
        <el-form-item label="实验室名称" prop="subName" class="form-item">
          <el-input
            style="width:320px;"
            maxlength="30"
            v-model="form.subName"
            placeholder="请输实验室名称"
            clearable
            size="small"
          />
        </el-form-item>
        <el-form-item label="实验室类型"  prop="moldId" class="form-item">
          <el-select v-model="form.moldId" placeholder="请选择类型" clearable style="width:320px;">
            <el-option
              v-for="dict in labMoldList"
              :key="dict.moldId"
              :label="dict.moldName"
              :value="dict.moldId"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="二级单位"  prop="deptId"  class="form-item">
          <el-select v-model="form.deptId" placeholder="请选择类型" clearable style="width:320px;">
            <el-option
              v-for="item in deptOptions"
              :key="item.deptId"
              :label="item.deptName"
              :value="item.deptId"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="安全分类"  prop="typeId" class="form-item" v-if="!form.dynamicLeveling">
          <el-select v-model="form.typeId" multiple collapse-tags placeholder="请选择安全分类" style="width: 320px">
            <el-option
              v-for="dict in typeList"
              :key="dict.typeId"
              :label="dict.typeName"
              :value="dict.typeId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="安全分级"  prop="levelId" class="form-item" v-if="!form.dynamicLeveling">
          <el-select v-model="form.levelId" placeholder="请选择安全分级"
                     :disabled="form.dynamicLeveling" clearable style="width:320px;">
            <el-option
              v-for="dict in levelList"
              :key="dict.levelId"
              :label="dict.levelName"
              :value="dict.levelId"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="动态评级" class="form-item" style="width:440px;">
          <div class="tableListPaginationSwitch">
            <el-switch
              class="switch captcha-img"
              v-model="form.dynamicLeveling"
              :active-value="true"
              :inactive-value="false"
              active-text="开"
              inactive-text="关">
            </el-switch>
            <i class="el-icon-warning tip-img"></i>
            <i class="tip-content">如需人工评定，请关闭动态评级</i>
          </div>
        </el-form-item>
        <el-form-item label="楼栋"  prop="buildId" class="form-item">
          <el-select v-model="form.buildId" placeholder="请选择楼栋"
                     @change="changeBuild" style="width:320px;">
            <el-option
              v-for="dict in buildings"
              :key="dict.id"
              :label="dict.name"
              :value="dict.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="楼层" prop="floorId" class="form-item">
          <el-select v-model="form.floorId"  placeholder="请选择层数"
                     @change="changeFloor" style="width:320px;">
            <el-option
              v-for="dict in floors"
              :key="dict.id"
              :label="dict.name"
              :value="dict.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="房间号" prop="roomId" class="form-item">
          <el-select v-model="form.roomId"  placeholder="请选择房间" style="width:320px;">
            <el-option
              v-for="dict in rooms"
              :key="dict.roomId"
              :label="dict.roomNum"
              :value="dict.roomId"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="实验室面积" prop="subArea" class="form-item">
          <el-input
            style="width:320px;"
            v-model="form.subArea"
            placeholder="请输入面积"
            oninput="value=value.replace(/[^0-9.]/g,'')"
            maxlength="4"
            size="small">
            <template slot="append">M²</template>
          </el-input>
        </el-form-item>
        <el-form-item label="准入设备"  class="form-item">
          <el-select v-model="form.hardwareType" placeholder="请选择整改类型" style="width:320px;" @change="hardwareTypeFun()" >
            <el-option label="无"  :value="0" />
            <el-option label="海康智能门禁" :value="1" />
            <el-option label="电子信息牌" :value="2" />
          </el-select>
        </el-form-item>
        <div class="bottom-form-max-box">
          <div class="title-button-box">
            <div class="title-min-button-box" :class="checkButtonType == 1?'checkButtonBox':''">
              <p @click="clickButtonType(1)">管控一体机</p>
              <p></p>
            </div>
            <div class="title-min-button-box" :class="checkButtonType == 2?'checkButtonBox':''">
              <p @click="clickButtonType(2)">安全信息牌</p>
              <p></p>
            </div>
            <div class="title-null-div">
              <p></p>
              <p></p>
            </div>
          </div>
          <!--管控一体机-->
          <div class="bottom-form-box-one" v-if="checkButtonType == 1">
            <div class="left-form-box">
              <el-form-item label="实验室负责人" prop="adminId" class="form-item" label-width="150px">
                <el-select
                  style="width:500px;"
                  v-model="form.adminId"
                  filterable
                  remote
                  clearable
                  reserve-keyword
                  placeholder="请输入至少2个字符搜索相关人员"
                  :remote-method="userSelectList"
                  :loading="loading">
                  <el-option
                    v-for="item in optionsUser"
                    :key="item.userId"
                    :label="item.userName"
                    :value="item.userId">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="安全警示标识" prop="safeSigns" class="form-item" label-width="150px">
                <el-select v-model="form.safeSigns" multiple collapse-tags placeholder="请选择安全警示标识" style="width:500px;">
                  <el-option
                    v-for="dict in safetyWarning"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="风控防控措施" prop="riskMeasure" class="form-item" label-width="150px">
                <el-select v-model="form.riskMeasure" multiple collapse-tags placeholder="请选择风险防控措施" style="width:500px;">
                  <el-option
                    v-for="dict in riskMeasure"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </div>
            <div class="right-form-box">
              <el-form-item label="安全员" prop="safeUserId" class="form-item" label-width="150px">
                <el-select
                  style="width:500px;"
                  v-model="form.safeUserId"
                  :multiple-limit="2"
                  multiple
                  filterable
                  remote
                  clearable
                  reserve-keyword
                  placeholder="请输入至少2个字符搜索相关人员"
                  :remote-method="userSelectListOne"
                  :loading="loading">
                  <el-option
                    v-for="item in optionsUserOne"
                    :key="item.userId"
                    :label="item.userName"
                    :value="item.userId">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="主要危险类别" prop="hazardCategory" class="form-item" label-width="150px">
                <el-select v-model="form.hazardCategory"
                           multiple collapse-tags placeholder="请选择主要危险类别" style="width:500px;">
                  <el-option
                    v-for="dict in hazardCategory"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="灭火要点" prop="outFire" class="form-item" label-width="150px">
                <el-select v-model="form.outFire" multiple collapse-tags placeholder="请选择灭火要点" style="width:500px;">
                  <el-option
                    v-for="dict in extinguishingKeyPoints"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </div>
          </div>
          <!--安全信息牌-->
          <div class="bottom-form-box" v-if="checkButtonType == 2">
            <div class="top-form-box">
              <el-form-item label="实验室负责人" prop="adminId" class="form-item" label-width="150px">
                <el-select
                  style="width:500px;"
                  v-model="form.adminId"
                  filterable
                  remote
                  clearable
                  reserve-keyword
                  placeholder="请输入至少2个字符搜索相关人员"
                  :remote-method="userSelectList"
                  :loading="loading">
                  <el-option
                    v-for="item in optionsUser"
                    :key="item.userId"
                    :label="item.userName"
                    :value="item.userId">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="安全员" prop="safeUserId" class="form-item" label-width="150px">
                <el-select
                  style="width:500px;"
                  v-model="form.safeUserId"
                  :multiple-limit="2"
                  multiple
                  filterable
                  remote
                  clearable
                  reserve-keyword
                  placeholder="请输入至少2个字符搜索相关人员"
                  :remote-method="userSelectListOne"
                  :loading="loading">
                  <el-option
                    v-for="item in optionsUserOne"
                    :key="item.userId"
                    :label="item.userName"
                    :value="item.userId">
                  </el-option>
                </el-select>
              </el-form-item>
            </div>
            <div class="bottom-form-box">
              <el-form-item v-if="item.publicList.length>0" :label="item.brandName" prop="safeSigns" class="form-item"
                            v-for="(item,index) in  safetyInfoList" label-width="150px">
                <el-select v-if="item.publicList.length>0" v-model="item.privateList"
                           multiple collapse-tags placeholder="请选择" style="width:500px;">
                  <el-option
                    v-for="dict in item.publicList"
                    :key="dict.detailId"
                    :label="dict.infoName"
                    :value="dict.detailId"
                  ></el-option>
                </el-select>
              </el-form-item>
            </div>
          </div>
        </div>
        <div class="title-box">
          <p class="left-title">实验室简介</p>
        </div>
        <div class="rich-text">
          <UEditor ref="UEditor" :content="form.details" :min-height="192" />
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
import {
  getDeptDropList, systemBuildingGetOptList, laboratoryClassMoldGetList,
  laboratoryClassLevelGetList, laboratoryClassTypeGetList, systemRoomInfoGetList,
  systemUserSelectUser, systemUserDropAuthList
} from '@/api/commonality/permission'
    import { laboratoryInfoBrandGetClassifyBySubId,laboratorySubRelInfoAdd,laboratorySubRelInfoUpdate,laboratorySubRelInfoGetDetailInfo } from "@/api/integratedManagement/index";
    export default {
      name: "addSubject",
      props:{
        subjectData:{},
      },
      data() {
        return {
          loading:false,
          levelList:[],
          typeList:[],
          deptOptions:[],
          buildings:[],
          floors:[],
          rooms:[],
          layoutLists:[],
          optionsUser:[],
          optionsUserOne:[],
          //安全标识
          safetyWarning:[],
          //主要危险类别
          hazardCategory:[],
          //风险防控措施
          riskMeasure:[],
          //灭火要点
          extinguishingKeyPoints:[],
          //安全信息牌列表信息存储
          safetyInfoList:[],
          roomId:null,
          form:{
            details:"",
            hardwareType:0,
            dynamicLeveling:false,
          },
          hardwareTypeTow:0,//临时存储准入设备状态
          // 表单校验
          rules: {
            subName:[
              {required: true, message: '请输实验室名称', trigger: 'blur'},
              { required: true, message: "请输实验室名称", validator: this.spaceJudgment, trigger: "blur" }
            ],
            moldId:[
              {required: true, message: '请选择类型', trigger: 'blur'}
            ],
            typeId:[
              {required: true, message: '请选择安全分类', trigger: 'blur'}
            ],
            levelId:[
              {required: true, message: '请选择安全分级', trigger: 'blur'}
            ],
            deptId:[
              {required: true, message: '请选择学院', trigger: 'blur'}
            ],
            buildId:[
              {required: true, message: '请选择楼栋', trigger: 'blur'}
            ],
            adminId:[
              {required: true, message: '请选择实验室负责人', trigger: 'blur'}
            ],

            floorId:[
              {required: true, message: '请选择层数', trigger: 'blur'}
            ],
            // roomId:[
            //   {required: true, message: '请输入房间号', trigger: 'blur'}
            // ],
            layoutId:[
              {required: true, message: '请选择详细位置', trigger: 'blur'}
            ],

          },
          labMoldList:[],
          //一体机/电子信息牌状态切换
          checkButtonType:1,
        }
      },
      created() {
      },
      mounted(){
        //数据初始化
        this.getInitializeData();
        if(!this.subjectData.subId){
          this.laboratoryInfoBrandGetClassifyBySubId();
        }else{
          this.$set(this.form,'infoId',this.subjectData.infoId)
          this.$set(this.form,'subId',this.subjectData.subId)
          this.$set(this.form,'subName',this.subjectData.subName)
          this.$set(this.form,'moldId',this.subjectData.moldId)
          if(this.subjectData.typeId){
            this.$set(this.form,'typeId',this.subjectData.typeId.split(','))
          }else{
            this.$set(this.form,'typeId',[])
          }
          this.$set(this.form,'levelId',this.subjectData.levelId)
          this.$set(this.form,'deptId',this.subjectData.deptId)
          this.$set(this.form,'buildId',this.subjectData.buildId)
          this.$set(this.form,'floorId',this.subjectData.floorId)
          this.$set(this.form,'dynamicLeveling',this.subjectData.dynamicLeveling)
          this.$set(this.form,'subArea',this.subjectData.subArea != 0 ? this.subjectData.subArea:'')
          //根据楼栋获取楼层
          this.systemBuildingGetOptList(3,this.form.buildId);
          if(this.subjectData.roomId){
            this.$set(this.form,'roomId',this.subjectData.roomId)
            this.$set(this,'roomId',this.subjectData.roomId)
            //根据楼层获取房间
            this.systemRoomInfoGetList(this.form.floorId);
          }
          //准入设备
          this.$set(this.form,'hardwareType',this.subjectData.hardwareType==null?0:this.subjectData.hardwareType)
          this.$set(this,'hardwareTypeTow',this.subjectData.hardwareType==null?0:this.subjectData.hardwareType)
          //安全警示标识
          if(this.subjectData.safeSigns){
            this.$set(this.form,'safeSigns',this.subjectData.safeSigns.split(','))
          }
          //风控防控措施
          if(this.subjectData.riskMeasure){
            this.$set(this.form,'riskMeasure',this.subjectData.riskMeasure.split(','))
          }
          //主要危险类别
          if(this.subjectData.hazardCategory){
            this.$set(this.form,'hazardCategory',this.subjectData.hazardCategory.split(','))
          }
          //灭火要点
          if(this.subjectData.outFire){
            this.$set(this.form,'outFire',this.subjectData.outFire.split(','))
          }
          //实验室负责人
          if(this.subjectData.adminId){
            this.$set(this.form,'adminId',this.subjectData.adminId)
            this.userSelectList(this.subjectData.adminName);
          }
          //实验室安全员
          if(this.subjectData.safeUserList[0]){
            let list = [];
            this.subjectData.safeUserList.forEach((item)=>{
              let obj = {
                userName:item.safeUserName,
                userId:item.safeUserId,
              };
              list.push(obj)
            })
            this.$set(this.form, 'safeUserId', this.subjectData.safeUserId);
            this.$set(this, 'optionsUserOne', list);
          }
          //安全信息牌
          if(this.subjectData.labInfoBrandModels){
            //循环取安全信息牌信息
            let list = JSON.parse(JSON.stringify(this.subjectData.labInfoBrandModels))
            for(let i=0;i<list.length;i++){
              let list2=[];
              if(list[i].privateList.length>0){
                for(let b=0;b<list[i].privateList.length;b++){
                  list2.push(list[i].privateList[b].detailId)
                }
                list[i].privateList=list2
              }
            }
            this.$set(this,'safetyInfoList',list);
          }
          //实验室简介
          this.$set(this.form,'details',this.subjectData.details)
          this.$refs.UEditor.text=unescape(this.subjectData.details)
        }
      },
      methods:{
        //初始化数据查询
        getInitializeData(){
          //学院
          this.getDeptDropList();
          //楼栋
          this.systemBuildingGetOptList(2);
          //分类
          this.laboratoryClassTypeGetList();
          //分级
          this.laboratoryClassLevelGetList();
          //类型
          this.laboratoryClassMoldGetList();
          //安全标识字典
          this.getDicts("sys_safety_warning").then(response => {
            this.$set(this,'safetyWarning',response.data);
          });
          //主要危险类别
          this.getDicts("sys_hazard_category").then(response => {
            this.$set(this,'hazardCategory',response.data);
          });
          //风险防控措施
          this.getDicts("sys_risk_measure").then(response => {
            this.$set(this,'riskMeasure',response.data);
          });
          //灭火要点
          this.getDicts("sys_extinguishing_key_points").then(response => {
            this.$set(this,'extinguishingKeyPoints',response.data);
          });
        },
        //查询学院下拉列表
        getDeptDropList(){
          getDeptDropList({deptName:'',level:2,deptType:''}).then(response => {
            this.$set(this,'deptOptions',response.data);
          });
        },
        //查询楼栋/楼层下拉列表
        systemBuildingGetOptList(type,id){
          systemBuildingGetOptList({ type:type, id:id?id:'' }).then(response => {
            if(type == 2){
              this.$set(this,'buildings',response.data);
            }else if(type == 3){
              this.$set(this,'floors',response.data);
            }
          });
        },
        //查询楼层下房间下拉列表
        systemRoomInfoGetList(id){
          systemRoomInfoGetList({floorId:id,roomId:this.roomId,}).then(response => {
            this.$set(this,'rooms',response.data);
          });
        },
        //查询安全分类下拉列表
        laboratoryClassTypeGetList(){
          laboratoryClassTypeGetList({}).then(response => {
            this.$set(this,'typeList',response.data);
          });
        },
        //查询安全分级列表
        laboratoryClassLevelGetList(){
          laboratoryClassLevelGetList({}).then(response => {
            this.$set(this,'levelList',response.data);
          });
        },
        //查询实验室类型下拉列表
        laboratoryClassMoldGetList(){
          laboratoryClassMoldGetList({}).then(response => {
            this.$set(this,'labMoldList',response.data);
          });
        },
        //一体机/电子信息牌切换
        clickButtonType(type){
          if(type != this.checkButtonType){
            this.$set(this,'checkButtonType',type);
          }
        },
        hardwareTypeFun(){
          if(this.hardwareTypeTow==1 && this.subjectData.hKCount>0){
            this.msgError("删除现有准入设备后，才能更改准入设备类型!");
            this.form.hardwareType=this.hardwareTypeTow
          }else if(this.hardwareTypeTow==2 && this.subjectData.cardInfoCount>0){
            this.msgError("删除现有准入设备后，才能更改准入设备类型!");
            this.form.hardwareType=this.hardwareTypeTow
          }else{

          }
        },
        upData(){
          console.log(this.form)
          let self = this;
          this.$set(this.form,'details',this.$refs.UEditor.text);
          this.$refs["form"].validate(valid => {
            if (valid) {
              self.$confirm('是否确认提交?', "", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
              }).then(function() {
                if(self.form.hazardCategory) {
                  self.form.hazardCategory = self.form.hazardCategory.join() ;
                }
                if(self.form.outFire) {
                  self.form.outFire = self.form.outFire.join() ;
                }
                if(self.form.riskMeasure) {
                  self.form.riskMeasure = self.form.riskMeasure.join() ;
                }
                if(self.form.safeSigns) {
                  self.form.safeSigns = self.form.safeSigns.join() ;
                }
                if(self.form.safeUserId) {
                  self.form.safeUserId = self.form.safeUserId.join() ;
                }
                if(self.form.typeId) {
                  self.form.typeId = self.form.typeId.join() ;
                }
                //循环取安全信息牌信息

                let list=[]
                for(let i=0;i<self.safetyInfoList.length;i++){
                  let list2=[];
                  if(self.safetyInfoList[i].privateList && self.safetyInfoList[i].privateList.length>0){
                    for(let b=0;b<self.safetyInfoList[i].privateList.length;b++){
                      list2.push({detailId:self.safetyInfoList[i].privateList[b]})
                    }
                    list.push({brandId:self.safetyInfoList[i].brandId,labInfoBrandDetailModelList:list2})
                  }
                }
                self.form.labInfoBrandModels=list
                if(self.form.infoId){
                  self.laboratorySubRelInfoUpdate();
                }else{
                  self.laboratorySubRelInfoAdd();
                }
              }).then(() => {}).catch(() => {});
            }
          })
        },
        //新增实验室
        laboratorySubRelInfoAdd(){
          this.form.details = escape(this.form.details);
          laboratorySubRelInfoAdd(this.form).then(response => {
            this.msgSuccess("新增成功");
            this.$parent.clickPage(1);
          });
        },
        //修改实验室
        laboratorySubRelInfoUpdate(){
          this.form.details = escape(this.form.details);
          laboratorySubRelInfoUpdate(this.form).then(response => {
            this.msgSuccess("修改成功");
            this.$parent.clickPage(1,'');
          });
        },
        backPage(){
          this.$parent.clickPage(1,'');
        },
        /** 查询楼栋列表  */
        getBuildings(id) {
          if(id) {
            this.$set(this.form, 'buildId', '');//楼栋
            this.buildings = [];
            this.$set(this.form, 'floorId', '');//楼层
            this.floors = [];
            // this.$set(this.form, 'layoutId', '');//房间
            this.layoutLists = [];
            buildFloorGetlist({type:2}).then(response => {
              this.buildings = response.rows;
            });
          }
        },
        //查询楼栋下的楼层列表
        changeBuild(id) {
          this.$set(this.form,'floorId','');
          this.$set(this.form,'roomId','');
          this.$set(this,'rooms',[]);
          this.systemBuildingGetOptList(3,id);
        },
        //查询楼层下的房间列表
        changeFloor(id) {
          this.$set(this.form,'roomId','');
          this.systemRoomInfoGetList(id);
        },
        //获取电子信息牌下拉列表数据
        laboratoryInfoBrandGetClassifyBySubId(){
          laboratoryInfoBrandGetClassifyBySubId().then(response=>{
            this.$set(this,'safetyInfoList',response.data);
          });
        },
        /** 下列人员-懒加载 */
        userSelectList(query) {
          if (query !== '' && query.length>1) {
            systemUserDropAuthList({"userName":query,'userType':'1'}).then(response => {
              this.$set(this,'optionsUser',response.data);
            });
          } else {
            this.$set(this,'optionsUser',[]);
          }
        },
        userSelectListOne(query) {
          if (query !== '' && query.length>1) {
            systemUserDropAuthList({"userName":query,'userType':''}).then(response => {
              this.$set(this,'optionsUserOne',response.data);
            });
          } else {
            this.$set(this,'optionsUserOne',[]);
          }
        },
      }
    }
</script>

<style scoped lang="scss">
  .addSubject{
    flex:1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius:10px!important;
    margin:5px 20px 20px 10px!important;
    box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.1) !important;
    .title-box{
      display: flex;
      margin:0 20px 30px;
      border-bottom:1px solid #E0E0E0;
      .left-title{
        flex:1;
        height:60px;
        line-height:60px;
        color:#0045AF;
        font-size:15px;
        padding-left:10px;
      }
      .right-button{
        margin:20px 0;
      }
    }
    .title-button-box{
      display: flex;
      padding:0 20px 30px 20px;
      .title-min-button-box{
        p:nth-child(1){
          cursor: pointer;
          text-align: center;
          font-size:15px;
          color:#999;
          line-height:60px;
          height:60px;
          padding-right:40px;
          padding-left:10px;
        }
        p:nth-child(2){
          height:1px;
          background-color: #dedede;
        }
        .checkButtonBox{
          color:#0045AF;
        }
      }
      .checkButtonBox{
        p:nth-child(1){
          color:#0045AF!important;
        }
      }
      .title-null-div{
        flex:1;
        p:nth-child(1){
          height:60px;
        }
        p:nth-child(2){
          height:1px;
          background-color: #dedede;
        }
      }
    }
    .form-item{
      display: inline-block;
      overflow: hidden;
      min-height:60px;
      margin-bottom:0;
    }
    .bottom-form-box{
      /*display: flex;*/
      .top-form-box{
        /*width:650px;*/
      }
      .bottom-form-box{
        /*width:650px;*/
      }
      .form-item{
        display: inline-block;
        overflow: hidden;
        min-height:40px;
        margin-bottom:30px;
      }
    }
    .bottom-form-box-one{
      display: flex;
      .left-form-box{
        width:650px;
      }
      .right-form-box{
        width:650px;
      }
      .form-item{
        display: inline-block;
        overflow: hidden;
        min-height:40px;
        margin-bottom:30px;
      }
    }
    .rich-text{
      margin: 20px;
    }
    .page-bottom-button-box{
      margin-bottom:20px;
      p:nth-child(2){
        margin-right:20px;
      }
    }
  }
  ::v-deep .tableListPaginationSwitch{
    height: 40px;
    display: flex;
    align-items: center;
    .tableListPaginationSwitchL, .tableListPaginationSwitchR{
      flex:1;
    }
    .tip-img{
      color: #E6A23C;
      margin: 0 9px 0 12px;
    }
    .tip-content{
      font-style: normal;
      font-weight: 400;
      font-size: 14px;
      color: #999999;
    }
    .switch .el-switch__label {
      position: absolute;
      display: none;
      color: #fff !important;
    }
    .switch .el-switch__label--right {
      z-index: 1;
    }
    .switch .el-switch__label--right span{
      margin-left: 10px;
    }
    .switch .el-switch__label--left {
      z-index: 1;
    }
    .switch .el-switch__label--left span{
      margin-left: 24px;
    }
    .switch .el-switch__label.is-active {
      display: block;
      text-align: left!important;
    }
    .switch.el-switch .el-switch__core,
    .el-switch .el-switch__label {
      width: 64px !important;
      margin: 0;
    }
  }
</style>
