<script lang="ts">
export default {
  name: "headerbox", // 变电站页头
};

</script>

<script setup lang="ts">
import { getOneById,downloadConfigFile} from "@/api/versionVersioning";
import Cookies from 'js-cookie';
import { gettableData} from '@/api/dept';
import { encrypt} from '@/utils/sm4';
import {  updatePersonalInfo, updateEncryptPassword, updateAvatar} from '@/api/user';
import { ref, onMounted, nextTick, watch} from "vue";
import { ElMessageBox, ElMessage, FormInstance} from 'element-plus';
import { useRoute,} from 'vue-router';
import router from '@/router';
import { useTagsViewStore} from '@/store/modules/tagsView';
import { useUserStore} from '@/store/modules/user';
import { getNotCheckAlarmCount} from '@/api/home';
import { constantRoutes} from '@/router';
import { useFullscreen} from '@vueuse/core';
import { downloadFile } from '@/utils/index';
const systemInfo: any = ref({
  version: ""
})

function getData() {
  getOneById().then((res: any) => {
    systemInfo.value = res
    // if (info.value.version) {
    //     versionNum.value = info.value.version
    //     versionnum.value.majorVersion = info.value.version.split('.')[0]
    //     versionnum.value.subNumber = info.value.version.split('.')[1]
    //     versionnum.value.stageNumber = info.value.version.split('.')[2]
    //     info.value.version.split('.')[3].split('_')
    //     versionnum.value.dateNumber =  info.value.version.split('.')[3].split('_')[0]
    //     versionnum.value.greekNumber =  info.value.version.split('.')[3].split('_')[1]
    // }

  })
}
const {
  isFullscreen,
  toggle
} = useFullscreen();
const userStore = useUserStore();
const titleData: any = ref([])
const dates = ref("")
const times = ref("")
const weeks = ref("")
const route = useRoute();
const tagsViewStore = useTagsViewStore();

const props = defineProps({
  CloseNav: {
    required: false,
    type: Number,
    default: 0
  },
  isHide: {
    required: false,
    type: Boolean,
    default: false
  },
  alarmCount: {
    required: false,
    type: Number,
    default: 0
  }
});
watch(
  route,
  () => {
    if (userStore.isBusiness == false) {
      router.push({ path: '/' });
    }
  },
  {
    //初始化立即执行
    immediate: true
  }
);
watch(() => props.CloseNav, (newValue, oldValue) => {
  isElicon.value = true
  for (let i = 0; i < navlist.value.length; i++) {
    navlist.value[i].hide = false
  }
}, {
  deep: true
})
watch(() => userStore.alarmCount, (newValue, oldValue) => {
  alarmCount.value = newValue
}, {
  deep: true
})
const alarmCount = ref(0)
onMounted(() => {
  getData()
  getTimes()
  titleData.value = []
  if (userStore.stationData.length > 1) {
    titleData.value = [{
      type: '1',
      stationName: userStore.regionName,
      stationCode: userStore.regionId,
      stationId: userStore.regionId
    }]
  }
  for (let j = 0; j < userStore.stationData.length; j++) {
    titleData.value.push(userStore.stationData[j])
  }

  if (userStore.stationId != undefined && userStore.stationId != "") {
    getNotCheckAlarmCount({
      stationId: userStore.stationId
    }).then((res: any) => {
      alarmCount.value = res.data.count
      userStore.alarmCount = res.data.count
    })
  }

  navlist.value = navlist.value.concat(userStore.menuArr)
  const router = useRoute();
  for (let i = 0; i < navlist.value.length; i++) {
    if (navlist.value[i].opturl == router.path) {
      activeIndex.value = i
      return
    }
    if (navlist.value[i].children != undefined) {
      for (let j = 0; j < navlist.value[i].children.length; j++) {
        if (navlist.value[i].children[j].opturl == router.path) {
          activeIndex.value = i
          return
        }
      }
    }
  }
})

function getTimes() {
  let date = new Date()
  let year: any = date.getFullYear() //获取年
  let month: any = date.getMonth() + 1 //获取月
  let day: any = date.getDate() //获取日
  let hours: any = date.getHours() //获取时
  let minutes: any = date.getMinutes() //获取分
  let seconds: any = date.getSeconds() //获取秒
  month = month > 9 ? month : "0" + month
  day = day > 9 ? day : "0" + day
  hours = hours > 9 ? hours : "0" + hours
  minutes = minutes > 9 ? minutes : "0" + minutes
  seconds = seconds > 9 ? seconds : "0" + seconds //数据不大于9时在数据前方拼接一个“0”

  let arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六',]
  weeks.value = arr[date.getDay()]
  times.value = hours + ":" + minutes + ":" + seconds
  dates.value = year + "-" + month + "-" + day
}
const navlist: any = ref([])
navlist.value = [{
  name: '站端首页',
  opturl: '/stationboard',
  hide: false,
}]
const activeIndex = ref(0)

function navClick(row: any, index: any) {
  isElicon.value = true
  if (row.hide == true) {
    row.hide = false
    return
  }
  for (let i = 0; i < navlist.value.length; i++) {
    navlist.value[i].hide = false
  }
  if (row.children == undefined) {
    activeIndex.value = index
    router.push(row.opturl)
  } else {

    row.hide = true
  }


}

function jumpClick() {
  // router.push('/')
  userInfo.value = {
    email: userStore.userInfo.email,
    id: userStore.userInfo.id,
    phone: userStore.userInfo.phone,
    username: userStore.userInfo.username,
    porgname: userStore.userInfo.porgname,
    nickname: userStore.userInfo.nickname,
    oid: userStore.userInfo.oid,
    password: "",
    newPassword: "",
    confirmPassword: ""

  }
  gettableData({
    id: userStore.userInfo.poid
  }).then((reset: any) => {
    orgData.value = reset.data
  })
  Explicit.value = true
}

function navSonClick(row: any, index: any, item: any) {
  isElicon.value = true
  activeIndex.value = index
  row.hide = false
  if (item.opturl != undefined) {
    router.push(item.opturl)
  }

}

function returnClick() {
  activeIndex.value = 0
  router.push({
    path: '/stationboard'
  });
}

function logout() {
  ElMessageBox.confirm('确定注销并退出系统吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    userStore.logout().then(() => {
      tagsViewStore.delAllViews();
    }).then(() => {
      Cookies.set('stationIds', '');
      router.push(`/login`);
    });
  });
}

function alarmInfoClick() {
  router.push(`/alarmInfo`)
  activeIndex.value = 2
}

function alarmInfoClick1() {
  // router.push(`/alarmInfo`)
  // activeIndex.value = 2
}
function stationClick(row:any){
  if(row.type == '1'){
    router.push(`/areaboard`)
  }else{
    if(props.isHide == false){
      Cookies.set('stationIds', row.stationId);
      userStore.stationName = row.stationName
      userStore.stationCode = row.stationCode
      userStore.stationId = row.stationId
      router.push(`/stationboard`)
    }else{
      Cookies.set('stationIds', row.stationId);
      userStore.stationName = row.stationName
      userStore.stationCode = row.stationCode
      userStore.stationId = row.stationId
      isElicon.value = true 
      location.reload()
    }
  }
}
const isElicon: any = ref(true)
function elIconClick(is:any){
  isElicon.value = is
  for(let i=0;i<navlist.value.length;i++){
    navlist.value[i].hide = false
  }
}

const Explicit = ref(false)
const userInfo: any = ref({
  password: ""
})


const rulePass = ref()
// 用户弹窗规则定义
const moderules = ref({
  password: [{
    required: true,
    message: '请输入原密码',
    trigger: 'blur'
  }],
  newPassword: [{
    required: true,
    message: '请输入新密码',
    trigger: 'blur'
  }],
  oid: [{
    required: true,
    message: '请选择所属部门',
    trigger: 'select'
  }],
  confirmPassword: [{
    required: true,
    validator: confirmPassword,
    trigger: 'blur'
  }],
},)

function confirmPassword(rule: any, value: any, callback: any) {
  if (value == null) {
    callback('请输入新密码');
  } else {
    if (value.length == 0) {
      callback('请输入新密码');
    } else if (value.length < 6) {
      callback('密码不能小于6位');
    } else {
      if (userInfo.value.newPassword != value) {
        callback([new Error('两次输入密码不一致')]);
      } else {
        callback();
      }
    }
  }
}
const resetPass = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
  Explicit.value = false
}

function save() {


  const params = {
    id: userInfo.value.id,
    email: userInfo.value.email,
    phone: userInfo.value.phone,
    orgid: userInfo.value.oid,
  }
  updatePersonalInfo(params).then((res: any) => {
    if (res.code == '0') {
      userStore.logout().then(() => {
        tagsViewStore.delAllViews();
      }).then(() => {
        // Cookies.set('stationIds', '');
        router.push(`/login`);
        Explicit.value = false
      });
      ElMessage({
        type: 'success',
        message: '修改成功，请重新登录',
      })
    }
  })
}
const tisp = ref("")
function validMail(value: any) {
  const reg = /^(([^<>()\]\\.,;:\s@"]+(\.[^<>()\]\\.,;:\s@"]+)*)|(".+"))@(([0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
  if (!reg.test(value)) {
    return '邮箱格式错误'
  } else {
    return true
  }
}
function phoneRules(value: any) {
  const phone = value.replace(/\s/g, "");
  let regs = /^((13[0-9])|(17[0-1,6-8])|(15[^4,\\D])|(18[0-9]))\d{8}$/;
  if (!regs.test(phone)) {
    return '手机号输入不合法';
  } else {
    return true;
  }
}
function savePass() {

  if (userInfo.value.email != '') {
    if (validMail(userInfo.value.email) != true) {
      ElMessage({
        type: 'warning',
        message: String(validMail(userInfo.value.email)),
      })
      return
    }
  }
  if (userInfo.value.phone != '') {
    if (phoneRules(userInfo.value.phone) != true) {
      ElMessage({
        type: 'warning',
        message: String(phoneRules(userInfo.value.email)),
      })
      return
    }
  }




  if (userInfo.value.username == "") {
    tisp.value = "账号不能为空！"
    return
  }
  if (userInfo.value.password == "") {
    tisp.value = "原密码不能为空！"
    return
  }
  if (userInfo.value.newPassword == "") {
    tisp.value = "新密码不能为空！"
    return
  }
  if (userInfo.value.newPassword == userInfo.value.password) {
    tisp.value = "新密码不能与原密码相同！"
    return
  }
  if (userInfo.value.newPassword.length < 8) {
    tisp.value = "新密码不能小于8位数！"
    return
  }
  const lettersmall = /([a-z])+/
  const num = /([0-9])+/
  const letterbig = /([A-Z])+/
  const regEn = /[`~!@#$%^&*()_+<>?:"{},.\/;'[\]]/im
  const regCn = /[·！#￥（——）：；“”‘、，|《。》？、【】[\]]/im
  if (!num.test(userInfo.value.newPassword)) {
    tisp.value = "新密码缺少数字！"
    return
  }
  if (!lettersmall.test(userInfo.value.newPassword)) {
    tisp.value = "新密码缺少小写字母！"
    return
  }
  if (!letterbig.test(userInfo.value.newPassword)) {
    tisp.value = "新密码缺少大写字母！"
    return
  }
  if (!regEn.test(userInfo.value.newPassword)) {
    tisp.value = "新密码缺少特殊符号！"
    return
  }
  if (userInfo.value.confirmPassword == "") {
    tisp.value = "确认新密码不能为空！"
    return
  }

  if (userInfo.value.newPassword != userInfo.value.confirmPassword) {
    tisp.value = "新密码与确认新密码不一致！"
    return
  }
  const params = {
    username: userInfo.value.username,
    oldpassword: encrypt(userInfo.value.password),
    newpassword: encrypt(userInfo.value.newPassword),
  }
  updateEncryptPassword(params).then((res: any) => {

    if (res.code == "1") {
      tisp.value = res.msg
    } else {
      save()
      // ElMessage({
      //   type: 'success',
      //   message: '密码修改成功',
      // })
      //   if(res.code == '1'){
      //     ElMessage({
      //     type: 'error',
      //     message: res.msg,
      //   })
      //   }else{
      //     save()
      //   }
    }

  })
}

function submitClick(formEl: any) {
  if (userInfo.value.password == "" && userInfo.value.newPassword != "") {
    ElMessage({
      type: 'warning',
      message: "请输入原密码！",
    })
    return
  }
  if (userInfo.value.password == "" && userInfo.value.confirmPassword != "") {
    ElMessage({
      type: 'warning',
      message: "请输入原密码！",
    })
    return
  }
  if (userInfo.value.password == "") {
    if (userInfo.value.email != '') {
      if (validMail(userInfo.value.email) != true) {
        ElMessage({
          type: 'warning',
          message: String(validMail(userInfo.value.email)),
        })
        return
      }
    }
    if (userInfo.value.phone != '') {
      if (phoneRules(userInfo.value.phone) != true) {
        ElMessage({
          type: 'warning',
          message: String(phoneRules(userInfo.value.email)),
        })
        return
      }
    }
    save()
  } else {
    savePass()
  }
}
const orgData = ref()

function dateFormat(row: any) {
  const daterc = row;
  if (daterc != null) {
    var date = new Date(daterc);
    var year = date.getFullYear();
    var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1;
    date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
    var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
    var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
    var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
    var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
    // 拼接
    return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
  }
}
function leadingOut() {
  const params ={
    fileName:systemInfo.value.custom2
  }
  downloadConfigFile(params).then((response: any) => {
    downloadFile(response, '系统操作手册', 'pdf')
  }).catch(() => {
  });
}
</script>

<template>
  <div>
    <div class="header-box">
      <img src="@/assets/monitorsystem/top_bj.png" alt="" class="header-img-box">
      <div class="header-left">
        <img src="@/assets/monitorsystem/top_logo.png" alt="">
        <div class="header-left-title">配电网人工智能平台
          <span  style="position: relative; display: inline-block; font-size: 18px;font-family: 'Arial Normal', 'Arial';
          font-weight: 400;
          font-style: normal;
          color: #FFFFFF;">
          <span v-if="isHide !=false">({{ userStore.stationName }}) </span>
          <span v-if="isHide ==false">{{ userStore.regionName }} </span>
          <el-icon style="cursor: pointer;" v-if="isElicon && userStore.stationData.length>1" @click.stop="elIconClick(false)"><ArrowUp /></el-icon>
          <el-icon style="cursor: pointer;" v-if="!isElicon  && userStore.stationData.length>1" @click.stop="elIconClick(true)"><ArrowDown /></el-icon>
              <div class="stationBox" v-if="!isElicon && isHide ==false">
                  <div v-for="item in titleData" class="stationList"
                  :class="item.stationName == userStore.regionName ?'stationActive':''"
                  @click="stationClick(item)"> {{ item.stationName }}</div>
              </div>
              <div class="stationBox" v-if="!isElicon && isHide !=false">
                  <div v-for="item in titleData" class="stationList"
                  :class="item.stationName == userStore.stationName ?'stationActive':''"
                  @click="stationClick(item)"> {{ item.stationName }}</div>
              </div>
          </span>
        </div>
      </div>
      <div class="header-nav">
        <div>
          <div class="dates">{{ dates }} <span style="padding-left: 10px;">{{ weeks }}</span></div>
        </div>
        <div class="nav-box" v-if="isHide !== false">
          <div class="nav-list" v-for="(item, index) in navlist" v-show="index != 0"
            :class="{ 'nav-active': activeIndex == index }" @click.stop="navClick(item, index)">{{ item.name }}
            <div class="nav-sonbox" v-if="item.children != undefined && item.hide == true">
              <div class="nav-son-list" v-for="(items, indexs) in item.children"
                @click.stop="navSonClick(item, index, items)">{{ items.name }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="header-right">
        <div v-if="isHide !== false" :class="{ 'homeactive': activeIndex == 0 }" class="header-information" style="margin-right:10px ;" title="返回站端首页"
          @click="returnClick">
          <img src="@/assets/monitorsystem/home.png" alt="">
        </div>
        <div v-if="isHide !== false && userStore.stationData.length > 1" class="header-information" @click="alarmInfoClick">
          <el-badge :value="alarmCount" :max="99" class="item" v-if="alarmCount != 0">
            <div class="header-informationImg"></div>
          </el-badge>
          <div class="header-informationImg" v-else></div>
        </div>
        <div class="header-information" @click="toggle" v-if="isFullscreen" style="margin-right:10px ;">
          <img src="@/assets/monitorsystem/header/nofullscreen.png" alt="" style="width:16px;height: 16px;">
        </div>
        <div class="header-information" @click="toggle" v-if="!isFullscreen" style="margin-right:10px ;">
          <img src="@/assets/monitorsystem/header/fullscreen.png" alt="" style="width:16px;height: 16px;">
        </div>

        <div class="header-information">
          <img src="@/assets/monitorsystem/header/u385.png" alt="" style="width:16px;height: 16px;">
          <div class="stationintroducebox">
            <div class="introduceboxtext1">配电网人工智能平台</div>
            <div class="introduceboxtext2">{{ systemInfo.version }}</div>
            <div style="display: flex;align-items: center;padding-bottom: 8px;">
              <div class="introduceboxline"></div>
              <div class="introduceboxtext3">系统功能介绍</div>
            </div>
            <div class="introduceboxtext4 lineclamp">{{ systemInfo.sysdesc }}</div>
            <div style="display: flex;align-items: center;padding-bottom: 8px;">
              <div class="introduceboxline"></div>
              <div class="introduceboxtext3">系统更新说明</div>
            </div>

            <div class="introduceboxtext4 lineclamp" style="height:60px;">{{ systemInfo.custom1 }}</div>
            <div class="texthover" @click="leadingOut">下载系统操作手册</div>
            <div style="display: flex;align-items: center;padding-bottom: 8px;">
              <div class="introduceboxline"></div>
              <div class="introduceboxtext3">更新时间</div>
            </div>
            <div class="introduceboxtext4" style="padding-bottom: 0;">{{ dateFormat(systemInfo.lastmodifydate) }}</div>
          </div>
        </div>
        <img src="@/assets/monitorsystem/top_yh.png" alt="" style="margin-right: 8px;">
        <div @click="jumpClick" style="font-family: 'MicrosoftYaHei Regular', 'MicrosoftYaHei';
          font-weight: 400;
          font-style: normal;
          font-size: 14px;
          color: #FFFFFF;
          margin-right: 15px;
          cursor: pointer;
          ">
          {{ userStore.username }}
        </div>
        <img src="@/assets/monitorsystem/top_tc.png" alt="" style="cursor: pointer;" @click="logout">
      </div>
    </div>
    <div class="el-overlay" v-if="Explicit">
      <div class="examination">
        <img style="position:absolute;top: 15px;right: 20px;cursor:pointer;" src="@/assets/MenuIcon/u523.png" alt=""
          @click="Explicit = false">
        <div class="examination-title">
          <span>个人信息</span>
        </div>
        <div style="padding:40px ;">
          <div style="display: flex;align-items: center;padding-bottom: 8px;">
            <div class="examinationboxline"></div>
            <div class="examinationboxtext">基本信息</div>
          </div>
          <div style="display: flex;justify-content: space-between;">
            <div class="justifycenter">
              <div class="justifycentername">用户姓名</div>
              <el-input v-model="userInfo.nickname" style="margin-left:10px;width: 320px;" readonly class="readonlybox" />
            </div>
            <div class="justifycenter">
              <div class="justifycentername">登录账号</div>
              <el-input v-model="userInfo.username" style="margin-left:10px;width: 320px;" readonly class="readonlybox" />
            </div>
          </div>
          <div style="display: flex;justify-content: space-between;">
            <div class="justifycenter">
              <div class="justifycentername">所属企业</div>
              <el-input v-model="userInfo.porgname" style="margin-left:10px;width: 320px;" readonly class="readonlybox" />

            </div>
            <div class="justifycenter">
              <div class="justifycentername">所属部门</div>
              <el-select v-model="userInfo.oid" placeholder="请选择" style="margin-left:10px;width: 320px;" class="input-box"
                clearable>
                <el-option v-for="item in orgData" :key="item.id" :label="item.orgname" :value="item.id" />
              </el-select>
            </div>
          </div>
          <div style="display: flex;justify-content: space-between;">
            <div class="justifycenter">
              <div class="justifycentername">联系邮箱</div>
              <el-input v-model="userInfo.email" style="margin-left:10px;width: 320px;" class="input-box" />
            </div>
            <div class="justifycenter">
              <div class="justifycentername">联系电话</div>
              <el-input v-model="userInfo.phone" style="margin-left:10px;width: 320px;" class="input-box" />
            </div>
          </div>
          <div style="display: flex;align-items: center;padding-bottom: 8px;padding-top: 15px;">
            <div class="examinationboxline"></div>
            <div class="examinationboxtext">修改密码</div>
          </div>

          <el-form ref="rulePass" :model="userInfo" label-width="92px" style="margin-top:10px">
            <el-form-item label="原密码" prop="password">
              <el-input v-model="userInfo.password" style="width:100%" type="password" class="input-box"></el-input>
            </el-form-item>
            <el-form-item label="新密码" prop="newPassword">
              <el-input v-model="userInfo.newPassword" style="width:100%" type="password" class="input-box"></el-input>
            </el-form-item>
            <el-form-item label="确认新密码" prop="confirmPassword">
              <el-input v-model="userInfo.confirmPassword" style="width:100%" type="password"
                class="input-box"></el-input>
            </el-form-item>
          </el-form>
          <div style="width: 100%;height: 40px;line-height:40px;text-align: center;color: #f56c6c;">{{ tisp }}</div>
          <div style="display:flex;justify-content:center;margin-top:20px">
            <div class="details-button" @click="resetPass(rulePass)">取消</div>
            <div class="details-button" @click="submitClick(rulePass)">确定</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.header-box {
  position: relative;
  z-index: 1002;
  height: 75px;
  width: 100%;
  display: flex;
}

.texthover {
  color: #fff;
  text-decoration: underline;
}

.texthover:hover {
  color: #00F9A2;
  text-decoration: underline;
}

.header-img-box {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 73px;
}

.header-left {
  position: relative;
  display: flex;
  align-items: center;
  width: 630px;
  height: 75px;
  padding-left: 20px;
}

.header-left-title {
  position: relative;
  padding-left: 10px;
  font-size: 24px;
  background-image: linear-gradient(#ffffff 20%, rgb(0, 249, 162));
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  /*需要文字透明*/
  font-family: "汉仪综艺体简";
  font-weight: bold;
}

.header-nav {
  position: relative;
  display: flex;
  padding-top: 20px;
  // align-items: center;
  height: 75px;
  padding-left: 11px;

  .times {
    font-family: '微软雅黑';
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    color: #FFFFFF;
  }

  .dates {
    font-family: '微软雅黑';
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    color: #FFFFFF;
    padding-top: 4px;
    // font-family: '微软雅黑';
    // font-weight: 400;
    // font-style: normal;
    // font-size: 12px;
    // color: #FFFFFF;
  }

  .nav-box {
    display: flex;
    padding-left: 40px;

    .nav-list {
      position: relative;
      // z-index: 1000;
      width: 94px;
      height: 30px;
      line-height: 30px;
      // border: 1px solid rgb(95, 143, 125);
      font-family: 'MicrosoftYaHei Regular', 'MicrosoftYaHei';
      font-weight: 400;
      font-style: normal;
      font-size: 14px;
      color: #00F9A2;
      text-align: center;
      margin-right: 28px;
      cursor: pointer;
      background: url(@/assets/monitorsystem/top_cd.png);

      .nav-sonbox {
        width: 120px;
        // height: 94px;
        background-image: linear-gradient(#061A16 1%, #154839 90%, transparent);
        border: 1px solid red;
        border-image: linear-gradient(to bottom, rgba(0, 249, 162, 0.5) 20%, transparent) 1;
        border-bottom: 0;
        padding-top: 10px;
        padding-bottom: 20px;
        margin-top: 12px;
        margin-left: -12px;

        .nav-son-list {
          width: 100%;
          height: 32px;
          line-height: 32px;
          color: rgb(255, 255, 255);
        }

        .nav-son-list:hover {
          color: #00F9A2;
        }
      }
    }

    .nav-list:hover {
      color: rgb(255, 255, 255);
    }

    .nav-active {
      font-weight: bold;
      color: rgb(255, 255, 255);
      background: url(@/assets/monitorsystem/top_cd1.png) !important;
      background-size: 100% 100%;
    }
  }
}

.header-right {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  height: 70px;
  padding-right: 25px;

  .header-information {
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 25px;
    width: 30px;
    height: 30px;
    background: url(@/assets/monitorsystem/top_gj.png);

    .header-informationImg {
      width: 18px;
      height: 18px;
      background: url(@/assets/monitorsystem/top_gj1.png);
    }

    .header-informationDian {
      position: absolute;
      top: 5px;
      left: 15px;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: red;

    }
  }

  .header-information1 {
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 25px;
    width: 30px;
    height: 30px;
  }
}

:deep(.el-badge__content.is-fixed) {
  // top: -14px;
  background: red;
  border: 1px solid red;
}

.stationBox {
  position: absolute;
  top: 40px;
  background-color: #0a2420 !important;
  border: 1px solid rgb(12, 65, 52) !important;
  box-shadow: rgb(0 249 162 / 30%) 0px 0px 5px !important;

  .stationList {
    min-width: 250px;
    font-size: 14px;
    padding: 10px 20px;
    // text-align: center;
  }

  .stationList:hover {
    color: #00F9A2 !important;
    background: url(/src/assets/3d/an_d2.png) no-repeat !important;
    background-size: 100% 100% !important;
    cursor: pointer;
  }

  .stationActive {
    color: #00F9A2 !important;
    background: url(/src/assets/3d/an_d2.png) no-repeat !important;
    background-size: 100% 100% !important;
  }
}

@media (max-width: 1795px) {
  .header-nav .dates {
    display: none;
  }
}

@media (max-width: 1643px) {
  .header-left {
    width: 400px;
  }
}

@media (max-width: 1419px) {
  .header-nav .nav-box {
    padding-left: 0px;
  }
}

@media (max-width: 1370px) {
  .header-nav .nav-box .nav-list {
    margin-right: 10px;
  }
}

.homeactive {
  background-color: rgba(0, 249, 162, 0.2) !important;
}

.stationintroducebox {
  display: none;
  position: absolute;
  top: 30px;
  right: -150px;
  width: 430px;
  height: 437px;
  background: url(@/assets/monitorsystem/header/u1705.png);
  padding: 45px 30px 0;

  .introduceboxtext1 {
    font-family: 'Arial Normal', 'Arial';
    font-weight: 400;
    font-style: normal;
    color: #FFFFFF;
    font-size: 24px;
    text-align: left;
    padding-bottom: 10px;
  }

  .introduceboxtext2 {
    font-family: 'Arial Normal', 'Arial';
    font-weight: 400;
    font-style: normal;
    font-size: 14px;
    color: #FFFFFF;
    padding-bottom: 20px;
  }

  .introduceboxline {
    width: 4px;
    height: 10px;
    background: inherit;
    background-color: rgba(255, 189, 0, 1);
    border: none;
    border-radius: 0px;
    margin-right: 5px;
  }

  .introduceboxtext3 {
    font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
    font-weight: 700;
    font-style: normal;
    font-size: 14px;
    color: #00F9A2;
  }

  .introduceboxtext4 {
    font-family: 'Arial Normal', 'Arial';
    font-weight: 400;
    font-style: normal;
    font-size: 14px;
    color: #FFFFFF;
    line-height: 20px;
    margin-bottom: 10px;
  }

  .lineclamp {
    height: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
  }
}

.header-information:hover .stationintroducebox {
  display: block;
}

.el-overlay {
  position: fixed;
  z-index: 2023;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2000;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  overflow: auto;

  .examinationboxline {
    width: 4px;
    height: 10px;
    background: inherit;
    background-color: rgba(255, 189, 0, 1);
    border: none;
    border-radius: 0px;
    margin-right: 5px;
  }

  .examinationboxtext {
    font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
    font-weight: 700;
    font-style: normal;
    font-size: 14px;
    color: #00F9A2;
  }

  .notification {
    width: 100vw;
    height: 100vh;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    // margin: auto;
    /* background: url(/src/assets/monitorsystem/xsri_yltu.png); */
    background-size: 100% 100%;

    .notification-title {
      text-align: center;
      font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
      font-weight: 700;
      font-style: normal;
      font-size: 18px;
      color: #FFFFFF;
      height: 40px;
      line-height: 38px;
    }

    .notification-body {
      position: absolute;
      bottom: 15px;
      left: 0;
      right: 0;
    }
  }

  .examination {
    width: 900px;
    height: 590px;
    position: absolute;
    top: 0px;
    right: 0px;
    left: 0px;
    bottom: 0px;
    margin: auto;
    background: url(@/assets/monitorsystem/ejectbg/xsri_xz.png);
    background-size: 100% 100%;

    .examination-title {
      text-align: center;
      font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
      font-weight: 700;
      font-style: normal;
      font-size: 18px;
      color: #FFFFFF;
      height: 40px;
      line-height: 38px;
    }

    .examination-body {
      position: absolute;
      bottom: 15px;
      left: 0;
      right: 0;
    }
  }


  .details-button {
    width: 112px;
    height: 36px;
    line-height: 36px;
    font-family: 'Arial Normal', 'Arial';
    font-weight: 400;
    font-style: normal;
    font-size: 14px;
    color: #00F9A2;
    text-align: center;
    background: url(@/assets/monitorsystem/xsri_an.png);
    background-size: 100% 100%;
    cursor: pointer;
    margin: 0 15px;
  }

  .details-button:hover {
    background: url(@/assets/monitorsystem/xsri_an1.png);
    background-size: 100% 100%;
  }
}

.justifycenter {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;

  .justifycentername {
    font-family: 'Arial Normal', 'Arial';
    font-weight: 400;
    font-style: normal;
    font-size: 14px;
    color: #FFFFFF;
    text-align: right;
    width: 80px;

  }


}

.readonlybox {
  :deep(.el-input__wrapper) {
    background: rgb(12, 65, 50);
    box-shadow: 0 0 0 1px rgb(8 100 70) inset;
  }

  :deep(.is-focus.el-input__wrapper) {
    background: rgb(12, 65, 50);
    box-shadow: 0 0 0 1px rgb(8 100 70) inset !important;
  }
}

.input-box {

  :deep(.el-input__wrapper) {
    background: transparent;
    box-shadow: 0 0 0 1px rgba(8, 100, 70, 1) inset;
    border-radius: 1px;
  }

  :deep(.el-input__wrapper:hover) {
    box-shadow: 0 0 0 1px rgba(8, 100, 70, 1) inset;
  }

  :deep(.el-input__wrapper .el-input__icon) {
    color: rgb(7, 168, 114);
  }
}

:deep(.el-form-item__label) {
  font-family: "Arial Normal", "Arial";
  font-weight: 400;
  font-style: normal;
  font-size: 14px;
  color: #FFFFFF;
  text-align: right;
}

:deep(.el-input__inner) {
  color: #fff;
}
</style>
