<template>
  <div class="nset_control_box">
    <div v-if="!infoShow">
      <div class="nset_control_box_header">
        <div class="title ml10">
          <img src="../../assets/images/mount_head.png" />
          <div class="font">{{ (uav && uav.name) || "" }}</div>
        </div>
        <div class="exit" @click="$emit('exit')">关闭</div>
      </div>
      <div class="nset_control_box_area">
        <div class="wrj">
          <div class="w97 h110 item" v-if="healthData.BAT">
            <img
              src="./assets/images/info.png"
              alt
              @click="infoDetail('智能电池', 'BAT')"
              style="cursor: pointer"
            />
            <div
              class="iconfont icon-chuli"
              style="color: #ffe417"
              @click="infoDetail('智能电池', 'BAT', true)"
            />
            <div class="content">
              <img src="./assets/images/cell.png" />
              <span class="dib">智能电池</span>
            </div>
            <div
              class="notice"
              v-if="healthData.BAT && healthData.BAT.warningLevel != 'NORMAL'"
            >
              <div v-if="healthData.BAT.title.length <= 6">
                {{ healthData.BAT.title }}
              </div>
              <marquee v-else direction="left">{{
                healthData.BAT.title
              }}</marquee>
            </div>
            <div class="type" v-else>正常</div>
          </div>
          <div class="w97 h110 item cp" v-if="healthData.RTK">
            <img
              src="./assets/images/info.png"
              alt
              @click="infoDetail('RTK', 'RTK')"
              style="cursor: pointer"
            />
            <div
              class="iconfont icon-chuli"
              style="color: #ffe417"
              @click="infoDetail('RTK', 'RTK', true)"
            />
            <div class="content">
              <img src="./assets/images/rtk.png" />
              <span class="dib">RTK</span>
            </div>
            <div
              class="notice"
              v-if="healthData.RTK && healthData.RTK.warningLevel != 'NORMAL'"
            >
              <div v-if="healthData.RTK.title.length <= 6">
                {{ healthData.RTK.title }}
              </div>
              <marquee v-else direction="left">{{
                healthData.RTK.title
              }}</marquee>
            </div>
            <div class="type" v-else>正常</div>
          </div>
          <div class="w97 h110 item cp" v-if="healthData.GPS">
            <img
              src="./assets/images/info.png"
              alt
              @click="infoDetail('GPS', 'GPS')"
              style="cursor: pointer"
            />
            <div
              class="iconfont icon-chuli"
              style="color: #ffe417"
              @click="infoDetail('GPS', 'GPS', true)"
            />
            <div class="content">
              <img src="./assets/images/gps.png" />
              <span class="dib">GPS</span>
            </div>
            <div
              class="notice"
              v-if="healthData.GPS && healthData.GPS.warningLevel != 'NORMAL'"
            >
              <div v-if="healthData.GPS.title.length <= 6">
                {{ healthData.GPS.title }}
              </div>
              <marquee v-else direction="left">{{
                healthData.GPS.title
              }}</marquee>
            </div>
            <div class="type" v-else>正常</div>
          </div>
          <div class="w97 h110 item cp" v-if="healthData.OBS">
            <img
              src="./assets/images/info.png"
              alt
              @click="infoDetail('避障', 'OBS')"
              style="cursor: pointer"
            />
            <div
              class="iconfont icon-chuli"
              style="color: #ffe417"
              @click="infoDetail('避障', 'OBS', true)"
            />

            <div class="content">
              <img src="./assets/images/obstacles.png" />
              <span class="dib">避障</span>
            </div>
            <div
              class="notice"
              v-if="healthData.OBS && healthData.OBS.warningLevel != 'NORMAL'"
            >
              <div v-if="healthData.OBS.title.length <= 6">
                {{ healthData.OBS.title }}
              </div>
              <marquee v-else direction="left">{{
                healthData.OBS.title
              }}</marquee>
            </div>
            <div class="type" v-else>正常</div>
          </div>
          <div class="w97 h110 item cp" v-if="healthData.VPN">
            <img
              src="./assets/images/info.png"
              alt
              @click="infoDetail('公网', 'VPN')"
              style="cursor: pointer"
            />
            <div
              class="iconfont icon-chuli"
              style="color: #ffe417"
              @click="infoDetail('公网', 'VPN', true)"
            />
            <div class="content">
              <img src="./assets/images/public.png" />
              <span class="dib">公网</span>
            </div>
            <div
              class="notice"
              v-if="healthData.VPN && healthData.VPN.warningLevel != 'NORMAL'"
            >
              <div v-if="healthData.VPN.title.length <= 6">
                {{ healthData.VPN.title }}
              </div>
              <marquee v-else direction="left">{{
                healthData.VPN.title
              }}</marquee>
            </div>
            <div class="type" v-else>正常</div>
          </div>
          <div class="w97 h110 item cp" v-if="healthData.SPE">
            <img
              src="./assets/images/info.png"
              alt
              @click="infoDetail('专网', 'SPE')"
              style="cursor: pointer"
            />
            <div
              class="iconfont icon-chuli"
              style="color: #ffe417"
              @click="infoDetail('专网', 'SPE', true)"
            />
            <div class="content">
              <img src="./assets/images/pr.png" />
              <span class="dib">专网</span>
            </div>
            <div
              class="notice"
              v-if="healthData.SPE && healthData.SPE.warningLevel != 'NORMAL'"
            >
              <div v-if="healthData.SPE.title.length <= 6">
                {{ healthData.SPE.title }}
              </div>
              <marquee v-else direction="left">{{
                healthData.SPE.title
              }}</marquee>
            </div>
            <div class="type" v-else>正常</div>
          </div>
          <div class="w97 h110 item cp" v-if="healthData.CHUTE">
            <img
              src="./assets/images/info.png"
              alt
              @click="infoDetail('降落伞', 'CHUTE')"
              style="cursor: pointer"
            />
            <div
              class="iconfont icon-chuli"
              style="color: #ffe417"
              @click="infoDetail('降落伞', 'CHUTE', true)"
            />
            <div class="content">
              <img src="./assets/images/san.png" />
              <span class="dib">降落伞</span>
            </div>
            <div
              class="notice"
              v-if="
                healthData.CHUTE && healthData.CHUTE.warningLevel != 'NORMAL'
              "
            >
              <div v-if="healthData.CHUTE.title.length <= 6">
                {{ healthData.CHUTE.title }}
              </div>
              <marquee v-else direction="left">{{
                healthData.CHUTE.title
              }}</marquee>
            </div>
            <div class="type" v-else>正常</div>
          </div>
          <div class="w97 h110 item cp" v-if="healthData.SPEAK">
            <img
              src="./assets/images/info.png"
              alt
              @click="infoDetail('喊话器', 'SPEAK')"
              style="cursor: pointer"
            />
            <div
              class="iconfont icon-chuli"
              style="color: #ffe417"
              @click="infoDetail('喊话器', 'SPEAK', true)"
            />
            <div class="content">
              <img src="./assets/images/speak.png" />
              <span class="dib">喊话器</span>
            </div>
            <div
              class="notice"
              v-if="
                healthData.SPEAK && healthData.SPEAK.warningLevel != 'NORMAL'
              "
            >
              <div v-if="healthData.SPEAK.title.length <= 6">
                {{ healthData.SPEAK.title }}
              </div>
              <marquee v-else direction="left">{{
                healthData.SPEAK.title
              }}</marquee>
            </div>
            <div class="type" v-else>正常</div>
          </div>
          <div class="w97 h110 item cp" v-if="healthData.NX">
            <img
              src="./assets/images/info.png"
              alt
              @click="infoDetail('NX', 'NX')"
              style="cursor: pointer"
            />
            <div
              class="iconfont icon-chuli"
              style="color: #ffe417"
              @click="infoDetail('NX', 'NX', true)"
            />
            <div class="content">
              <img src="./assets/images/nx.png" />
              <span class="dib">NX</span>
            </div>
            <div
              class="notice"
              v-if="healthData.NX && healthData.NX.warningLevel != 'NORMAL'"
            >
              <div v-if="healthData.NX.title.length <= 6">
                {{ healthData.NX.title }}
              </div>
              <marquee v-else direction="left">{{
                healthData.NX.title
              }}</marquee>
            </div>
            <div class="type" v-else>正常</div>
          </div>
        </div>
      </div>
    </div>
    <div v-else>
      <div class="nset_control_box_header lh34">
        <div class="title ml10">
          <img src="../../assets/images/mount_head.png" />
          <div class="font">{{ infoName }}</div>
        </div>
        <div class="exit" @click="reset">返回</div>
      </div>
      <div class="nest_info">
        <!-- <div class="btn" @click="getInfoList">异常记录</div> -->
        <div class="bat" v-if="infoName == '智能电池'">
          <div
            class="batteryList mt16"
            v-for="item in batteryList"
            :key="item.id"
          >
            <div class="head">
              <div class="line"></div>
              <div class="name" v-if="item.id === 0">普通电池</div>
              <div class="name" v-if="item.id === 52">左智能电池</div>
              <div class="name" v-if="item.id === 53">右智能电池</div>
            </div>
            <div class="center mt16">
              <div class="item">
                <div class="title">电压：</div>
                <div class="indo">{{ item.voltage.toFixed(1) }}V</div>
              </div>
              <div class="item">
                <div class="title">电流：</div>
                <div class="indo">{{ item.current }}A</div>
              </div>
              <div class="item mr47">
                <div class="title">温度：</div>
                <div class="indo">{{ item.temperature }}</div>
              </div>
              <div class="item mt16">
                <div class="title">剩余电量：</div>
                <div class="indo">{{ item.chargeRemaining }}%</div>
              </div>
              <div class="item ml65 mt16">
                <div class="title">充放电次数：</div>
                <div class="indo">{{ item.cycleIndex }}</div>
              </div>
              <!-- <div class="item ml10 mt16">
              <div class="title">剩余飞行时间：</div>
              <div class="indo">{{item.timeRemaining}}</div>
              </div>-->
            </div>
          </div>
        </div>
        <div class="rtk" v-else-if="infoName == 'RTK'">
          <div class="item">
            <div class="title">FIX状态：</div>
            <div class="ingps">
              {{ (healthData.RTK && healthData.RTK.title) || "暂无" }}
            </div>
          </div>
          <div class="item mr100">
            <div class="title">搜星数：</div>
            <div class="inrtk">
              {{ uavRealTimeData.rtk && uavRealTimeData.rtk.satelliteCount }}
            </div>
          </div>
          <div class="item mt20">
            <div class="title">定位精度：</div>
            <div class="inrtk">
              {{ uavRealTimeData.rtk && uavRealTimeData.rtk.levelDivisor }}
            </div>
          </div>
        </div>
        <div class="gps" v-else-if="infoName == 'GPS'">
          <div class="item">
            <div class="title">FIX状态：</div>
            <div class="ingps">
              {{ (healthData.GPS && healthData.GPS.title) || "暂无" }}
            </div>
          </div>
          <div class="item mr100">
            <div class="title">搜星数：</div>
            <div class="ingps">
              {{
                (uavRealTimeData.gps && uavRealTimeData.gps.satelliteCount) ||
                "暂无"
              }}
            </div>
          </div>
          <div class="item mt20">
            <div class="title">定位精度：</div>
            <div class="ingps">
              {{
                (uavRealTimeData.gps && uavRealTimeData.gps.levelDivisor) ||
                "暂无"
              }}
            </div>
          </div>
        </div>
        <div class="public" v-else-if="infoName == '专网'">
          <div class="pu">
            <div class="item">
              <div class="title">专网信号质量：</div>
              <div class="inpublic">
                {{ (healthData.SPE && healthData.SPE.title) || "暂无" }}
              </div>
            </div>
            <div class="item">
              <div class="title">消息类型：</div>
              <div
                class="inpublic"
                :style="{
                  color:
                    healthData.SPE &&
                    warningLevel[healthData.SPE.warningLevel].color,
                }"
              >
                {{
                  (healthData.SPE &&
                    warningLevel[healthData.SPE.warningLevel].title) ||
                  "暂无"
                }}
              </div>
            </div>
            <div class="item">
              <div class="title">描述：</div>
              <div class="inpublic">
                {{ (healthData.SPE && healthData.SPE.description) || "暂无" }}
              </div>
            </div>
          </div>
        </div>
        <div class="public" v-else-if="infoName == '公网'">
          <!-- warningLevel -->
          <div class="pr">
            <div class="item">
              <div class="title">公网信号质量：</div>
              <div class="inpublic">
                {{ (healthData.VPN && healthData.VPN.title) || "暂无" }}
              </div>
            </div>
            <div class="item">
              <div class="title">消息类型：</div>
              <div
                class="inpublic"
                :style="{
                  color:
                    healthData.VPN &&
                    warningLevel[healthData.VPN.warningLevel].color,
                }"
              >
                {{
                  (healthData.VPN &&
                    warningLevel[healthData.VPN.warningLevel].title) ||
                  "暂无"
                }}
              </div>
            </div>
            <div class="item">
              <div class="title">描述：</div>
              <div class="inpublic">
                {{ (healthData.VPN && healthData.VPN.description) || "暂 无" }}
              </div>
            </div>
          </div>
        </div>
        <div class="public" v-else-if="infoName == '避障'">
          <div class="pu">
            <div class="item">
              <div class="title">避障状态：</div>
              <div class="inpublic">
                {{ (healthData.OBS && healthData.OBS.title) || "暂 无" }}
              </div>
            </div>
            <div class="item">
              <div class="title">消息类型：</div>
              <div
                class="inpublic"
                :style="{
                  color:
                    healthData.OBS &&
                    warningLevel[healthData.OBS.warningLevel].color,
                }"
              >
                {{
                  (healthData.OBS &&
                    warningLevel[healthData.OBS.warningLevel].title) ||
                  "暂无"
                }}
              </div>
            </div>
            <div class="item mt20">
              <div class="title">是否触发：</div>
              <div class="inpublic">
                {{
                  uavRealTimeData.obstacles && uavRealTimeData.obstacles.enable
                    ? "触发避障"
                    : "未触发"
                }}
              </div>
            </div>
          </div>
          <div class="pr">
            <div class="item">
              <div class="title">描述：</div>
              <div class="inpr">
                {{ (healthData.OBS && healthData.OBS.description) || "暂 无" }}
              </div>
            </div>
          </div>
        </div>
        <div class="public" v-else-if="infoName == '降落伞'">
          <div class="pu">
            <div class="item">
              <div class="title">状态：</div>
              <div class="inpublic">
                {{ (healthData.CHUTE && healthData.CHUTE.title) || "暂 无" }}
              </div>
            </div>
            <div class="item">
              <div class="title">消息类型：</div>
              <div
                class="inpublic"
                :style="{
                  color:
                    healthData.CHUTE &&
                    warningLevel[healthData.CHUTE.warningLevel].color,
                }"
              >
                {{
                  (healthData.CHUTE &&
                    warningLevel[healthData.CHUTE.warningLevel].title) ||
                  "暂无"
                }}
              </div>
            </div>
          </div>
          <div class="pr">
            <div class="item">
              <div class="title">描述：</div>
              <div class="inpr">
                {{
                  (healthData.CHUTE && healthData.CHUTE.description) || "暂 无"
                }}
              </div>
            </div>
          </div>
        </div>
        <div class="public" v-else-if="infoName == '喊话器'">
          <div class="pu">
            <div class="item">
              <div class="title">状态：</div>
              <div class="inpublic">
                {{ (healthData.SPEAK && healthData.SPEAK.title) || "暂 无" }}
              </div>
            </div>
            <div class="item">
              <div class="title">消息类型：</div>
              <div
                class="inpublic"
                :style="{
                  color:
                    healthData.SPEAK &&
                    warningLevel[healthData.SPEAK.warningLevel].color,
                }"
              >
                {{
                  (healthData.SPEAK &&
                    warningLevel[healthData.SPEAK.warningLevel].title) ||
                  "暂无"
                }}
              </div>
            </div>
          </div>
          <div class="pr">
            <div class="item">
              <div class="title">描述：</div>
              <div class="inpr">
                {{
                  (healthData.SPEAK && healthData.SPEAK.description) || "暂 无"
                }}
              </div>
            </div>
          </div>
        </div>
        <div class="rtk" v-else-if="infoName == 'NX'">
          <div class="item">
            <div class="title">NX状态：</div>
            <div class="ingps">
              {{ (healthData.NX && healthData.NX.title) || "暂无" }}
            </div>
          </div>
          <div class="item mt20">
            <div class="title">消息类型：</div>
            <div
              class="inpublic"
              :style="{
                color:
                  healthData.NX &&
                  warningLevel[healthData.NX.warningLevel].color,
              }"
            >
              {{
                (healthData.NX &&
                  warningLevel[healthData.NX.warningLevel].title) ||
                "暂无"
              }}
            </div>
          </div>
          <div class="item">
            <div class="title">描述：</div>
            <div class="inrtk">
              {{ (healthData.NX && healthData.NX.description) || "暂无" }}
            </div>
          </div>
        </div>
        <Logs v-else :type="type"></Logs>
      </div>
    </div>
  </div>
</template>
<script>
import Logs from "./components/logs";
import { mapState } from "vuex";

export default {
  props: {},
  components: { Logs },
  computed: {
    ...mapState("MMCFlightControlCenter/uav", [
      "uav",
      "airlineData",
      "uavRealTimeData",
    ]),
    taskId() {
      return this.$store.state.fckernel.taskId;
    },
    obstacle() {
      return this.$store.state.fckernel.obstacle;
    },
    /**
     * 电池数据
     */
    batteryList() {
      return this.uavRealTimeData?.batteryList || [];
    },
    /**
     * 健康数据
     */
    healthData() {
      return this.uavRealTimeData?.healthData || {};
    },
  },
  watch: {
    uavRealTimeData: function (value) {
      // console.log(value, "value");
    },
    healthData: function (newval, old) {
      // console.log(newval, "new");
      // console.log(old, "old");
      for (let i in newval) {
        if (newval[i].warningLevel != "NORMAL") {
          if (newval[i].code != old[i].code) {
            if (this.taskId) {
              this.message.taskId = this.taskId;
            }
            this.message = {
              exceptionTitle: newval[i].title,
              exceptionTypeSign: i,
            };
            console.log(this.message, "message");
            this.addMessage();
          }
        }
      }
    },
  },
  data() {
    return {
      warningLevel: {
        NORMAL: {
          title: "正常",
          color: "green",
        },
        NOTICE: {
          title: "通知",
          color: "green",
        },
        CAUTION: {
          title: "提醒",
          color: "#eee",
        },
        WARNING: {
          title: "警告",
          color: "#ffbd36",
        },
        SERIOUS_WARNING: {
          title: "严重警告",
          color: "red",
        },
      },
      infoName: "",
      infoShow: false,
      type: "",
      pickTime: null,
      qianVal: null,
      message: {},
    };
  },
  beforeDestroy() {},
  methods: {
    // flag 为true 代表展示异常信息
    infoDetail(name, val, flag) {
      this.infoShow = true;
      this.infoName = name;
      this.type = val;
    },
    reset() {
      this.infoShow = false;
      this.infoName = "";
    },
    async addMessage() {},
  },
  mounted() {
    console.log(this.healthData, "healthData");
  },
};
</script>

<style lang="scss" scoped>
.nset_control_box {
  min-height: 111px;
  background: #222222;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  position: absolute;
  right: 70px;
  top: -54px;
  /* top: calc(50% - 14px); */
  bottom: auto !important;
  width: 390px;

  .nset_control_box_header {
    display: flex;
    justify-content: space-between;
    height: 36px;
    background: #3c3c3c;
    box-shadow: inset 0px -1px 0px 0px #3c3c3c;
    align-items: center;
    border-radius: 10px 10px 0px 0px;

    .title {
      display: flex;
      align-items: center;

      .font {
        font-size: 20px;
        font-family: YouSheBiaoTiHei;
        color: #14faff;
        line-height: 26px;
        text-shadow: 0px 1px 1px rgba(2, 32, 56, 0.2);
        background: linear-gradient(
          135deg,
          #e3aa77 0%,
          #f5cda9 38%,
          #f9ecd3 58%,
          #fcdbb1 79%,
          #edb07a 100%
        );
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }

    .exit {
      font-size: 14px;
      font-family: MicrosoftYaHei;
      color: #d2dfff;
      cursor: pointer;
      margin-right: 16px;
    }
  }

  .nset_control_box_area {
    .wrj {
      height: 240px;
      padding: 5px;
      overflow: auto;
      display: flex;
      flex-wrap: wrap;
      justify-content: stretch;
      margin-top: 0;
      row-gap: 8px;
      column-gap: 8px;
      .item {
        position: relative;
        background: #3e3e3e;
        background-size: 100% 100%;
        box-shadow: 0 0 5px 0 #0c1c47;
        border-radius: 4.5px;
        display: flex;
        flex-direction: column;
        align-items: center;
        flex: 0 0 calc(33.33% - 6px);
        /* 32px是左右padding的总和 */
        height: 110px;

        &:hover {
          background: url("./assets/images/checkbg.png") no-repeat;
          background-size: 100% 100%;
        }

        > img {
          position: absolute;
          right: 3px;
          top: 3px;
        }

        .content {
          width: 100%;
          height: 82px;
          display: flex;
          flex-direction: column;
          justify-content: end;
          align-items: center;
          margin-bottom: 10px;

          img {
          }

          .dib {
            margin-top: 6px;
            font-size: 12px;
            font-family: SourceHanSansCN-Medium, SourceHanSansCN;
            font-weight: 500;
            color: #ffffff;
          }
        }

        .type {
          width: calc(100% - 2px);
          text-align: center;
          height: 27px;
          line-height: 27px;
          background: rgba(32, 29, 12, 1);
          font-size: 12px;
          font-family: SourceHanSansCN-Regular, SourceHanSansCN;
          font-weight: 400;
          color: #36e81a;
          border-radius: 0 0 4.5px 4.5px;
        }

        .notice {
          width: calc(100% - 2px);
          text-align: center;
          height: 27px;
          line-height: 27px;
          background: #ffbd36;
          font-size: 12px;
          font-family: SourceHanSansCN-Regular, SourceHanSansCN;
          font-weight: 400;
          color: #fff;
          border-radius: 0 0 4.5px 4.5px;
        }

        .iconfont {
          margin-top: 8px;
        }
      }

      .item:nth-of-type(4n) {
        margin-right: 0;
      }
    }

    .icon-chuli {
      margin-top: 6px;
      margin-left: 25px;
      cursor: pointer;
    }
  }

  .nest_info {
    padding: 16px;

    .btn {
      width: 80px;
      height: 28px;
      background: url("./assets/images/twobg.png") no-repeat;
      background-size: 100% 100%;
      font-size: 12px;
      font-family: MicrosoftYaHei;
      color: #ffffff;
      text-align: center;
      line-height: 28px;
    }

    .bat {
      .batteryList {
        display: flex;
        flex-direction: column;

        .head {
          display: flex;

          .line {
            width: 4px;
            height: 16px;
            background: #ffd800;
            border-radius: 2px;
          }

          .name {
            margin-left: 4px;
            font-size: 16px;
            font-weight: 500;
            color: #fff;
          }
        }

        .center {
          display: flex;
          flex-wrap: wrap;
          justify-content: start;

          .item {
            display: flex;
            flex-wrap: nowrap;
            flex: 1;
            .title {
              white-space: nowrap;
              font-size: 14px;
              font-weight: 500;
              color: #fff;
            }

            .indo {
              font-size: 16px;
              font-weight: 500;
              color: #00dfff;
            }
          }
        }
      }
    }

    .rtk,
    .gps {
      margin-top: 16px;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      .item {
        display: flex;
        flex-wrap: nowrap;
        align-items: baseline;

        .title {
          white-space: nowrap;
          font-size: 14px;
          font-weight: 500;
          color: #fff;
        }

        .ingps,
        .inrtk {
          font-size: 16px;
          font-weight: 500;
          color: #00dfff;
        }
      }
    }

    .public {
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
      .pu,
      .pr {
        margin-top: 16px;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;

        .item {
          display: flex;
          flex-wrap: nowrap;
          align-items: baseline;

          .title {
            white-space: nowrap;
            font-size: 14px;
            font-weight: 500;
            color: #fff;
          }

          .inpublic,
          .inpr {
            font-size: 16px;
            font-weight: 500;
            color: #00dfff;
          }
        }
      }
    }
  }

  .list {
    position: fixed;
    top: calc(50% + 90px);
    left: calc(50% - 870px);
    width: 676px;
    height: 434px;
    background: rgba(12, 34, 73, 0.7);
    border-radius: 10px;
    border: 1px solid rgba(26, 92, 246, 0.5);
    backdrop-filter: blur(1px);

    .nset_control_box_header {
      display: flex;
      justify-content: space-between;
      height: 32px;
      background: linear-gradient(
        180deg,
        #9198ff 0%,
        rgba(45, 81, 153, 0.45) 40%,
        #05091a 100%
      );
      box-shadow: inset 0px 0px 10px 2px #3f9dff;
      border-radius: 10px 10px 0px 0px;
      border: 1px solid #427dff;
    }
  }
}
</style>
