<template>
  <div class="nest_header_box jcsb">
    <div class="nest_header_box_left">
      <div class="date-box">
        <div class="yyyy">{{ date }}</div>
        <div></div>
        <div class="week-box">
          <div class="week">{{ week }}</div>
          <div class="hhmm">{{ time }}</div>
        </div>
      </div>
      <img class="w35 h35 ml21" :src="weatherIcon" alt />
      <div>
        <div style="color: #00ffff" class="ml36">
          <div>{{ weather_data.windDirection }}</div>
          {{ weather_data.minTemp || 0 }}~{{ weather_data.maxTemp || 0 }}°C
        </div>
      </div>
      <div></div>
      <el-tooltip content="烟感" placement="bottom" class="nones" disabled>
        <div class="symbol-icon-box ml30">
          <SymbolIcon :icon="fire[fire_state]" />
        </div>
      </el-tooltip>

      <el-tooltip content="水浸" placement="bottom" class="nones" disabled>
        <div class="symbol-icon-box ml20">
          <SymbolIcon :icon="water[water_state]" />
        </div>
      </el-tooltip>
      <div
        class="noFlight ml28"
        v-if="weather_data && weather_data.flyStatus == 0"
      >
        不宜起飞
      </div>
      <div class="isFlight ml28" v-else>适合起飞</div>
      <div
        class="changeBtn lh50 cp tc"
        :class="isSelect ? '' : ''"
        @click="changeItem"
      >
         鹰巢应用
      </div>
    </div>

    <div class="w300 cp ht100 pa gohome" @click="$router.push('/home')" />

    <div class="icon-box nest_header_box_right">
      <div class="changeBtn lh50 cp tc" @click="changeBtn">
        视频墙
      </div>
      <div class="right wih100" style='align-items: center;' v-if="device && !wsShow">
        <div class="input_group">
          <div class="symbol-icon-box">
            <div class="mr12">
              <el-tooltip
                :content="(obstacle && obstacle.enable) ? '避障中' : '避障雷达'"
                placement="bottom"
              >
                <img
                  v-if="obstacle && obstacle.enable"
                  class="w24 h24"
                  :src="require('./assets/radar_active.png')"
                />
                <img
                  v-else
                  class="w24 h24"
                  :src="require('./assets/radar.png')"
                />
              </el-tooltip>
            </div>
            <!-- <SymbolIcon :icon="typeNeticon" v-if="ModeStatus == '离线状态'" /> -->
            <!-- v-show="priority == '公网' || ModeStatus == '公网'" -->
            <!-- v-if="gwArr[gwSqe45]" -->
            <div >
              <el-tooltip :content="gwArr[gwSqe45].info" placement="bottom">
                <SymbolIcon :icon="gwArr[gwSqe45].icon" />
              </el-tooltip>
            </div>
             <!-- v-show="priority == '专网' || ModeStatus == '专网'" -->
            <div class="ml12" v-if="zwArr[zwSqe14]">
              <el-tooltip :content="zwArr[zwSqe14].info" placement="bottom">
                <SymbolIcon :icon="zwArr[zwSqe14].icon" />
              </el-tooltip>
            </div>
          </div>
          <el-dropdown trigger="click" @command="handle_uav_mode">
            <span class="dib">
              <span class="mode_name cp ml12" style="color: #70f6f9">{{
                priority
              }}</span>
              <i class="el-icon-caret-bottom"></i>
            </span>
            <div class="el-popperBox">
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item
                  v-for="item in ModeStatusList"
                  :key="item.id"
                  :command="item.id"
                  >{{ item.label }}
                </el-dropdown-item>
              </el-dropdown-menu>
            </div>
          </el-dropdown>
        </div>
        <div class="line ml12"></div>
        <div
          class="icon-box ml12"
          v-if="parachute == 0 && parachuteStateList[parachuteState]"
        >
          <el-tooltip
            :content="parachuteStateList[parachuteState].title"
            placement="bottom"
          >
            <SymbolIcon
              class="w20 h20"
              :icon="parachuteStateList[parachuteState].icon"
            />
          </el-tooltip>
        </div>
        <div class="icon-box ml12" v-if="parachuteStateList[parachuteState]">
          <el-tooltip
            :content="parachuteList[parachute].title"
            placement="bottom"
          >
            <SymbolIcon class="w20 h20" :icon="parachuteList[parachute].icon" />
          </el-tooltip>
        </div>
        <!-- 入云龙1 伞包状态 -->
        <div class="icon-box ml12" v-if="parachuteList_[_parachute]">
          <el-tooltip
            :content="parachuteList_[_parachute].title"
            placement="bottom"
          >
            <SymbolIcon class="w20 h20" :icon="parachuteList_[_parachute].icon" />
          </el-tooltip>
        </div>
        <div class="line ml12" v-if="parachute == 0 && parachuteStateList[parachuteState] || parachuteStateList[parachuteState] || parachuteList_[_parachute]"></div>
        <el-tooltip content="GPS" placement="bottom">
          <div class="symbol-icon-box ml12">
            <SymbolIcon :icon="signal[signal_state]" />
          </div>
        </el-tooltip>
        <el-tooltip
          class="item cfc ml12"
          effect="dark"
          content="搜星数"
          placement="bottom"
        >
          <div class="item-box">
            <div class="icon-box">
              <span class="iconfont icon-souxing">:</span
              ><span class="f14">{{ satelliteCount }}</span>
            </div>
          </div>
        </el-tooltip>
        <div class="line ml12"></div>
        <el-tooltip :content="$t('common.接管记录') " placement="bottom">
          <div class="jgjl w25 h25 cp ml12" @click="$emit('TakeOverFlag')"></div>
        </el-tooltip>
        <div class="icon-box ml12">
          <el-tooltip
            :content="`遥控器${{ 0: '未连接', 1: '已连接' }[remote_state]}`"
            placement="bottom"
          >
            <div class="symbol-icon-box">
              <SymbolIcon :icon="remote[remote_state]" />
            </div>
          </el-tooltip>
        </div>
        <div class="icon-box ml12">
          <el-tooltip
            :content="`${
              { 0: '外场权限', 1: '内场权限' }[rcState]
            }`"
            placement="bottom"
          >
            <div v-if="rcState==0" class="Outside w25 h20 lh20">
          
            </div>
            <div v-if="rcState==1" class=" within w25 h20 lh20">
          
            </div>
          </el-tooltip>
        </div>
        <!-- <div class="icon-box">
          <el-tooltip content="视频列表" placement="bottom">
            <div
              @click="toVideos"
              style="color: #43f0df"
              class="w30 h30 f30 cp iconfont icon-wurenjishipin"
            ></div>
          </el-tooltip>
        </div> -->
      
        <div class="mode_nameBox cp ml12">
          <el-dropdown trigger="click" @command="handle_change_uav_mode">
            <span class="dib">
              <span class="mode_name">{{ FlightMode}}</span>
              <i class="el-icon-caret-bottom"></i>
            </span>
            <div class="el-popperBox">
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item
                  v-for="item in modeList"
                  v-show="!item.disabled"
                  :key="item.id"
                  :command="item.data"
                  >{{ item.label }}
                </el-dropdown-item>
              </el-dropdown-menu>
            </div>
          </el-dropdown>
        </div>
      </div>
      
      <div class="right wih100" style='align-items: center;' v-if="device && wsShow">
        <div >
              <el-tooltip :content="gwArr[level].info" placement="bottom">
                <SymbolIcon :icon="gwArr[level].icon" />
              </el-tooltip>
            </div>
        <el-tooltip :content="$t('common.接管记录') " placement="bottom">
          <div class="jgjl w25 h25 cp ml12" @click="$emit('TakeOverFlag')"></div>
        </el-tooltip>
        <div class="mode_nameBox cp ml12">
          <el-dropdown trigger="click" @command="handle_change_uavws_mode" >
            <span class="dib">
              <span class="mode_name">{{ flightModews }}</span>
              <i class="el-icon-caret-bottom"></i>
            </span>
            <div class="el-popperBox">
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item
                  v-for="item in modeListws"
                  v-show="!item.disabled"
                  :key="item.id"
                  :command="item.data"
                  >{{ item.label }}
                </el-dropdown-item>
              </el-dropdown-menu>
            </div>
          </el-dropdown>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import SymbolIcon from "../../../../../components/symbol-icon";
// import dayjs from "dayjs";
// 引用bus
import Bus from "mmc/utils/bus.js";
import { mapGetters } from "vuex";
// import API from "@/api";
export default {
  props: {
    uavBattery: {
      type: Object,
    },
    level: {
      type: Number
    },
    nestData: {
      type: Object,
    },

    uavData: {
      type: Object,
      default: () => ({}),
    },
    isSelectFlag: {
      type: Boolean,
      default: () => true,
    },
    device: {
      type: Object,
      default: () => ({}),
    },
    wsShow: {
      type: Boolean,
      default: () => {
        false;
      },
    },
  },
  data() {
    return {
      stta:null,
      mode: "离线状态",
      typeNet: 0,
      weatherIcon: null,
      now: null,
      curr_val: 0,
      parachuteList_:[
          {
          icon: "jianglasanweiqiyong",
          title: "未启用",
        },
         {
          icon: "tuichujingjie",
          title: "正常",
        },
        {},
          {
          icon: "jingjie",
          title: "降落伞使能",
        },
        {},{},{},
        {
          icon: "kaisan",
          title: "降落伞开伞",
        },
      ],
      parachuteStateList: [
        {
          icon: "tuichujingjie",
          title: "降落伞进入警戒",
        },
        {
          icon: "jingjie",
          title: "降落伞进入警戒",
        },
        {
          icon: "tuichujingjie",
          title: "降落伞退出警戒",
        },
        {
          icon: "ksan",
          title: "降落伞开伞",
        },
      ],

      parachuteList: [
        {
          icon: "jingjie",
          title: "正常",
        },
        {
          icon: "jianglasanweiqiyong",
          title: "未启用",
        },
        {
          icon: "weizaixian",
          title: "未在线",
        },
        {
          icon: "sanbaoweilianjie",
          title: "伞包未连接",
        },
        {
          icon: "jianglasanguzhang",
          title: "降落伞故障",
        },
      ],
      remote: {
        0: "yaokongqi-duankailianjie",
        1: "yaokongqiliang",
      },
      ws: null,
      week_map: {
        0: "天",
        1: "一",
        2: "二",
        3: "三",
        4: "四",
        5: "五",
        6: "六",
      },
      fire: {
        0: "yanganan",
        1: "yanganhong",
        2: "yanganliang",
      },
      water: {
        0: "shuijinan",
        1: "shuijinhong",
        2: "sfhuijinliang",
      },
      power: {
        1: "dianliangbaifenzhiershi",
        2: "dianliangbaifenzhisishi",
        3: "dianliangbaifenzhiliushi",
        4: "dianliangbaifenzhibashi",
        5: "chongdianmoshi5",
      },
      weather: {},
      weather_data: {
        weather: "晴",
        icon: require(`../../../../../assets/img/weather/icon/day/01.png`),
        temperature: 0,
        humidity: 0,
        windPower: "",
        windSpeed: "",
        minTemp: "",
        maxTemp: "",
        windDirection: "东北",
      },
      // <el-option label="1.4G" :value="2"> </el-option>
      //     <!-- 公网  -->
      //     <el-option label="4G/5G" :value="3"> </el-option>
      //     <el-option label="自动" :value="0"> </el-option>
      ModeStatusList: [
        { id: 2, data: "1.4G", label: "专网" },
        { id: 3, data: "4G/5G", label: "公网" },
        { id: 0, data: "自动", label: "自动" },
      ],
      zwArr: [
        {
          // icon: "xinhaoshaixuan",
          icon: "a-14-4beifen21",
          info: "基站专网信号数据断开",
        },
        {
          icon: "a-14-6",
          info: "覆盖非常好",
        },
        {
          icon: "a-14-5",
          info: "覆盖好,室外能够发起各种业务,可获得高等数据业务,室内能够发起各种业务，可获得中等数据业务",
        },
        {
          icon: "a-14-4",
          info: "覆盖较好,室外能够发起各种业务,可获得中等数据业务,室内能够发起各种业务，可获得低数据业务",
        },
        {
          icon: "a-14-3",
          info: "覆盖一般，室外能够发起各种业务，可获得中等数据业务,室内呼叫成功率低",
        },
        {
          icon: "a-14-2",
          info: "覆盖率差，户外语音业务能够起呼，但成功率较低",
        },
        {
          icon: "a-14-1",
          info: "覆盖较差，业务基本无法起呼",
        },
      ],
      gwArr: [
        {
          // icon: "xinhaoshaixuan",
          icon: "a-bianzu79beifen",
          info: "基站公网信号数据断开",
        },
        {
          icon: "a-5g-6",
          info: "覆盖非常好",
        },
        {
          icon: "a-5g-5",
          info: "覆盖好,室外能够发起各种业务,可获得高等数据业务,室内能够发起各种业务，可获得中等数据业务",
        },
        {
          icon: "a-5g-4",
          info: "覆盖较好,室外能够发起各种业务,可获得中等数据业务,室内能够发起各种业务，可获得低数据业务",
        },
        {
          icon: "a-5g-3",
          info: "覆盖一般，室外能够发起各种业务，可获得中等数据业务,室内呼叫成功率低",
        },
        {
          icon: "a-5g-2",
          info: "覆盖率差，户外语音业务能够起呼，但成功率较低",
        },
        {
          icon: "a-5g-1",
          info: "覆盖较差，业务基本无法起呼",
        },
      ],
      modeList: [
        { id: 1, data: "MANUAL", label: "手动模式", disabled:true },
        { id: 2, data: "ALTITUDE", label: "定高模式", disabled: false },
        { id: 3, data: "POSITION", label: "定点模式", disabled: false },
        { id: 4, data: "AUTO_MISSION", label: "航线模式", disabled: false },
        { id: 5, data: "ACRO", label: "特技模式", disabled: true },
        { id: 6, data: "OFF_BOARD", label: "版外模式", disabled: true },
        { id: 7, data: "STABILIZED", label: "自稳模式", disabled: true },
        { id: 8, data: "HOLD", label: "保持模式", disabled: false },
        { id: 9, data: "LAND", label: "降落模式", disabled: true},
        { id: 10, data: "TAKE_OFF", label: "起飞模式", disabled: true },
        { id: 11, data: "AUTO_RTL", label: "返航模式", disabled: false },
        {
          id: 12,
          data: "AUTO_FOLLOW_TARGET",
          label: "自动跟随模式",
          disabled: true,
        },
      ],
      modeListws: [
        { id: 1, data: "11", label: "安全降落", disabled: false },
        { id: 2, data: "12", label: "返航模式", disabled: false },
        { id: 3, data: "13", label: "航线模式", disabled: false },
        { id: 4, data: "17", label: "gps模式", disabled: false },
      ],
      flightModews: "",
      signal: {
        1: "GPS1",
        2: "GPS2",
        3: "GPS3",
        4: "GPS4",
        5: "GPS5",
      },
      typeNeticon: "xinhaoshaixuan",
      isSelect: true,
    };
  },
  watch: {
    value: {
      handler(value) {
        this.curr_val = value;
      },
      deep: true,
      immediate: true,
    },
    uavData: function (val, old) {
      if (val && this.wsShow) {
        this.flightModews = val.flightMode;
      }
    },

    isSelectFlag: function (newValue) {
      this.isSelect = newValue;
    },
  },
  computed: {
    ...mapGetters(["user_info"]),
    obstacle(){
      return this.$store.state.fckernel.obstacle;
    },
    rcState() {
      let { uavData } = this;
    // 监听内外场的值
      this.$store.commit("shoudong/tai", uavData&&uavData.rcState ? uavData.rcState : 0);
      return uavData&&uavData.rcState ? uavData.rcState : 0;
    },
    parachute() {
      let { uavData } = this;
      return uavData ? uavData.parachute : 3;
    },
     _parachute() {
      let { uavData } = this;
      return uavData ? uavData._parachute : 0;
    },
    parachuteState() {
      let { uavData } = this;
      return uavData ? uavData.parachuteState : 2;
    },

    gwSqe45() {
      let { uavData } = this;
      if (uavData && uavData.signal && uavData.signal.sqe45) {
        if (uavData.signal.sqe45 === -1){
          return 0;         
        }
        return uavData.signal.sqe45;
      }
      return 6;
    },
    zwSqe14() {
      let { uavData } = this;
      if (uavData && uavData.signal && uavData.signal.sqe14) {
        if (uavData.signal.sqe14 === -1){
          return 0;         
        }
        return uavData.signal.sqe14;
      }
      return 6;
    },
    FlightMode() {
      let { uavData, modeList } = this;
      let flightMode = modeList.find((e) => e.data == uavData?.flightMode);
      // 用vuex将当前的模式存起来 飞控 无人机列表
      this.$store.commit("shoudong/compose_mode", flightMode?.label);
      return flightMode?.label || "离线状态";
    },
    ModeStatus() {
      let { uavData } = this;
      let name = null;
      if (uavData && uavData.link) {
        if (uavData?.link[0].priority == 2) {
          if (uavData?.link[0].using) {
            name = "专网";
          } else {
            name = "公网";
          }
        } else if (uavData?.link[0].priority == 3) {
          if (uavData?.link[0].using) {
            name = "公网";
          } else {
            name = "专网";
          }
        }
      }
      return name || "离线状态";
    },
    priority() {
      let { uavData } = this;
      let name = "离线";
      if (uavData && uavData.priority == 0) {
        name = "自动";
      } else if (uavData && uavData.priority == 1) {
        name = "图传";
      } else if (uavData && uavData.priority == 2) {
        name = "专网";
      } else if (uavData && uavData.priority == 3) {
        name = "公网";
      }
      return name;
    },
    fire_state() {
      let { nestData } = this;
      return nestData?.fireWarn ? nestData.fireWarn : 0;
    },

    FIX() {
      let { uavData } = this;
      return (uavData && uavData.isRtkEnable == true) || 0;
    },
    water_state() {
      let { nestData } = this;
      return nestData?.waterWarn ? nestData.waterWarn : 0;
    },
    is_charger() {
      let { nestData } = this;
      return nestData && nestData.chargerPower == 1;
    },
    power_state() {
      let { uavBattery } = this;
      if (uavBattery && uavBattery.chargeRemaining) {
        return parseInt(uavBattery && uavBattery.chargeRemaining / 20 + 1);
      } else {
        return 1;
      }
    },
    remote_state() {
      let { uavData } = this;

      return uavData ? (uavData.isRcConnecting ? 1 : 0) : 0;
    },
    voltage() {
      let { uavBattery } = this;
      return uavBattery ? uavBattery.voltage || 0 : 0;
    },
    power_num() {
      let { uavBattery } = this;
      return uavBattery ? uavBattery.chargeRemaining : 0;
    },
    date() {
      let { now } = this;
      return now ? `${now.format("YYYY/MM/DD")}` : "0000/00/00";
    },
    week() {
      let { now, week_map } = this;
      return now ? `周${week_map[now.day()]}` : "周N/A";
    },
    time() {
      let { now } = this;
      return now ? `${now.format("HH:mm")}` : "00:00";
    },
    satelliteCount() {
      let { uavData } = this;
      return uavData?.gps?.satelliteCount || 0;
    },
    signal_state() {
      let { uavData } = this;
      if (uavData && uavData.satelliteCount) {
        let count = parseInt(uavData.satelliteCount / 6);
        if (count >= 5) {
          count = 5;
        } else {
          count += 1;
        }
        return uavData.satelliteCount ? count : 1;
      }
      return 5;
    },
  },
  components: { SymbolIcon },
  mounted() {
    this.getWeather()
    setInterval(() => {
      // this.now = dayjs();
    }, 500); 
   
  },
  methods: {
    async getWeather(){
     /*  let organId = { organId: this.user_info["departmentId"] };
      let res = await API.WEATHER.getNewWeather(organId);
      if (res.length > 0) {
        this.weather_data = res[0];
      }
      // console.log(this.weatherList,'this.weatherListthis.weatherList');
      const date = new Date();
      let time = date.getHours();
      this.weatherIcon = require(`../../../../../assets/img/weather/icon/iconfont/W${
        time >= 18 ? this.weather_data.nightIcon : this.weather_data.dayIcon
      }.png`); */
    },
    async checkUseOperateFn(device) {
      // 查看是否有控制权限
      /* let res = await API.FCKERNEL.checkUseOperate({ deviceHardId: device });
      console.log(res);
      if (res.code == 201) {
        this.$message.warning(res.msg);
        return false;
      } else {
        return true;
      } */
    },
    toVideos() {
      window.open(`#/videos`, "_blank");
    },
    async handle_change_uav_mode(data) {
      // 查看是否有权限接管无人机
      let res = await this.checkUseOperateFn(this.device.deviceHardId);
      // 判断当前状态 true为一接管
      if (res == false) {
        return;
      }
      let mode = this.modeList.find((item) => item.data === data);
      if (mode) {
        this.$emit("fn", { type: 513, data: mode.data });
        this.$message.success("操作成功");
      }
      if(mode.data == "AUTO_MISSION"){
        this.$emit("auto")
      }
      console.log('返航成功------------------')
    },
    handle_change_uavws_mode(item){
      this.$emit('control_ws',item)
    },
    changeBtn(){
      // this.$emit('changeF')
       // 飞控选择其他模块时，关闭航线
    // 关键字：关闭预设航线
       Bus.$emit('uav_Route')
       // 删除飞控 无人机 模型和航线
      // 搜索关键字：删除飞控模型
      Bus.$emit('remove_model')
      this.$router.push("/fckernelVideos")
     
    },
    handle_uav_mode(id) {
      let { uavData } = this;
      if (id == 0) {
        this.$emit("fn", { type: 770, data: id });
        return this.$message.success("改为自动切换模式");
      } else if (id == 2) {
        // 专网
        if (uavData?.link.length > 0) {
          let item = uavData?.link.filter((item) => item.priority == 2);
          if (item.length > 0) {
            this.$emit("fn", { type: 770, data: id });
          } else {
            return this.$message.warning("暂无专网环境");
          }
        } else {
          return this.$message.warning("暂未链接无人机");
        }
      } else if (id == 3) {
        // 公网
        if (uavData?.link.length > 0) {
          let item = uavData?.link.filter((item) => item.priority == 3);
          if (item.length > 0) {
            this.$emit("fn", { type: 770, data: id });
          } else {
            return this.$message.warning("暂无公网环境");
          }
        } else {
          return this.$message.warning("暂未链接无人机");
        }
      }
    },
    changeItem() {
      this.$emit('changeF')
       // 飞控选择其他模块时，关闭航线
    // 关键字：关闭预设航线
       Bus.$emit('uav_Route')
       // 删除飞控 无人机 模型和航线
      // 搜索关键字：删除飞控模型
      Bus.$emit('remove_model')
      // this.isSelect = !this.isSelect;
      // this.$forceUpdate();
      // this.$emit("nest_chenge", this.isSelect);
    },
    onchange(val) {},
  },
  created() {
    // this.now = dayjs();
    // this.getNestWeatherFn()
    // 飞控 无人机 自动=>航线模式
    // 飞控 无人机 手动=>定点模式
    // 关键字：无人机模式修正
    Bus.$on('uavState',(data) => {
      this.handle_change_uav_mode(data)
    })
      // 无人机列表返航模式
        // 关键字：无人机返航
     Bus.$on('uavFan',(data) => {
      this.handle_change_uav_mode(data)
    })
  },
  inject: ["g_weather"],
};
</script>

<style lang='scss' scoped>
.Outside{
  background:  url("~./assets/Outside.svg") ;
   background-repeat: no-repeat;
}
.within{
  background:url("~./assets/within.svg");
   background-repeat: no-repeat;
}
.nest_header_box {
  z-index: 1;
  position: absolute;
  top: 0px;
  width: 100%;
  height: 80px;
  background: center url("~./assets/wrjHeader2.png");
  background-size: 100%;
  background-size: cover;

  .gohome {
    left: 50%;
    transform: translateX(-50%);
  }

  .ZW {
    width: 25px;
    height: 25px;
    background: url("~./assets/ZW.svg") no-repeat;
    background-size: 100% 100%;
  }

  .GW {
    width: 25px;
    height: 25px;
    background: center url("~./assets/GW.svg")
      no-repeat;
    background-size: 100% 100%;
  }

  .nest_header_box_right {
    height: 62px;
    min-width: 590px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .changeBtn {
      position: absolute;
      top: 5px;
      right: calc(50% - 350px);
      width: 150px;
      height: 50px;
      background: center
        url("~./assets/right.png");
      background-repeat: no-repeat;
      background-position-y: -8px;
      font-family: MicrosoftYaHei;
      font-size: 14px;
      color: #70f6f9;
    }

    .input_group {
      .symbol-icon-box {
        display: flex;
      align-items: center;
        svg {
          width: 24px;
          height: 24px;
        }
      }

      display: flex;
      align-items: center;

      ::v-deep .el-select {
        width: 80px;
        color: #fff;
        border: none;
        background: transparent;

        .el-input--suffix {
          display: flex;
        }

        .el-input__inner {
          position: relative;
          right: -8px;
          width: 50px;
          padding: 0;
          border: none;
          color: #fff;
          background: transparent;
        }

        .el-input__suffix {
          position: relative;
        }
      }
    }

    .jgjl {
      background: url("~./assets/jgjl.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }

    .changeBtn:hover {
      background: center
        url("~./assets/rightD.png");
      background-position-y: -8px;
      background-repeat: no-repeat;
      font-size: 14px;
      color: #ffe9ae;
      letter-spacing: 0;
      font-weight: 700;
    }

    .isSelect {
      background: center
        url("~./assets/btnActiveRight.png");
      background-size: contain;
      background-position-y: -8px;
      background-repeat: no-repeat;
      font-size: 14px;
      color: #ffe9ae;
      letter-spacing: 0;
      font-weight: 700;
    }
  }

  .nest_header_box_left {
    display: flex;
    justify-content: start;
    align-items: center;
    height: 60px;
    padding-left: 117px;

    .changeBtn {
      position: absolute;
      top: 5px;
      left: calc(50% - 350px);
      width: 150px;
      height: 50px;
      background: center
        url("~./assets/leftD.png");
      background-repeat: no-repeat;
      background-position-y: -8px;
      font-size: 14px;
      color: #70f6f9;
      letter-spacing: 0;
    }

    .changeBtn:hover {
      background: center
        url("~./assets/left.png");
      // background-size: contain;
      background-repeat: no-repeat;
      background-position-y: -8px;
      font-size: 14px;
      color: #ffe9ae;
      letter-spacing: 0;
      font-weight: 700;
    }

    .isSelect {
      background: center
        url("~./assets/btnActive.png");
      background-size: contain;
      background-position-y: -8px;
      background-repeat: no-repeat;
      font-size: 14px;
      color: #ffe9ae;
      letter-spacing: 0;
      font-weight: 700;
    }

    .isFlight {
      font-family: YouSheBiaoTiHei;
      font-size: 28px;
      color: #6aff64;
      letter-spacing: 0;
      font-weight: 400;
    }

    .noFlight {
      font-family: YouSheBiaoTiHei;
      font-size: 28px;
      color: #ffc15b;
      letter-spacing: 0;
      font-weight: 400;
    }
  }

  .nav-list {
    width: 590px;
    height: 77px;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: space-between;

    .nav-item {
      width: 223px;
      height: 77px;
      box-sizing: border-box;
      background: center url("~./assets/nav-item.png")
        no-repeat;
      background-size: cover;
      text-align: center;
      cursor: pointer;
      transition: 0.3s;

      &:hover,
      &.selected {
        background: center
          url("~./assets/nav-item-selected.png")
          no-repeat;

        .text-box {
          color: #3df1ff;
        }
      }

      .text-box {
        line-height: 77px;
        font-family: Microsoft YaHei Bold;
        font-size: 20px;
        color: #aab8d1;
        font-weight: 700;
        transition: 0.3s;
      }

      &._2 {
        transform: scaleX(-1);

        .text-box {
          transform: scaleX(-1);
        }
      }
    }
  }

  .date-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: absolute;
    left: 20px;
    top: 0;
    height: 60px;
    box-sizing: border-box;

    .yyyy {
      font-family: Microsoft YaHei;
      font-size: 16px;
      color: #ffffff;
      letter-spacing: 0;
      font-weight: 400;
      margin-bottom: 3px;
    }

    .week-box {
      display: flex;
      justify-content: space-between;

      .week {
        font-family: Microsoft YaHei;
        font-size: 16px;
        color: #ffffff;
        letter-spacing: 0;
        font-weight: 400;
      }

      .hhmm {
        font-family: Microsoft YaHei;
        font-size: 16px;
        color: #ffffff;
        letter-spacing: 0;
        font-weight: 400;
      }
    }
  }
}
</style>

<style lang="scss" scoped>
.mode_nameBox {
  box-sizing: border-box;
  width: 116px;
  height: 28px;
  background: url("~./assets/select.png") no-repeat;
  background-size: contain;
  margin-right: 5px;
  padding-left: 15px;
  display: flex;
  align-items: center;

  .mode_name {
    display: inline-block;
    vertical-align: middle;
    text-align: right;
    color: #3df1ff;
    margin: 0 6px 0 0;
  }
}

.el-dropdown-menu {
 background: rgba(9,32,87,0.50)!important;
  .el-dropdown-menu__item {
  }
}

.noStyle {
  opacity: 0.3;
}

.el-dropdown {
  color: #3df1ff;
  font-weight: 400;
  font-size: 14px;
  margin-top: 2px;

  .el-icon-caret-bottom {
    color: #fff !important;
    line-height: 24px;
  }
}

.nones {
  opacity: 0;
}
.right{
  display: flex;
  justify-content: flex-end;
  margin-right: 16px;
}
.line{
  width: 1px;
  height: 32px;
  background: linear-gradient(180deg,rgba(255,255,255,0) 0%,#ffffff 47%,rgba(255,255,255,0) 100%);
}
</style>