<template>
  <div
    class="cpt-nest-logger"
    :class="{ chang: dakai == true, }"
  >
    <div class="title-box" v-interact>
      <div class="title">
        <img src="../../../../../../../../assets/images/mount_head.png" />
        <div class="font">运行监控日志</div>
        <div effect="dark" class="status">
          {{ getprocessStatus(hangarData.processStatus) }}
        </div>
      </div>
      <div style="display: flex">
        <div class="icon-box" @click="$emit('clearMsg')">
          <span class="iconfont icon-qingchushuju"></span>
          <!-- <span class="icon-text pr20">清除数据</span> -->
        </div>
        <!-- <div class="icon-box" @click="$emit('step')">
        <span class="icon-text">运行流程</span>
      </div> -->
        <div class="close" @click="$emit('exit')">关闭</div>
      </div>
    </div>
    <div class="liucBox">
      <div class="default" :class="folderFn(folder)">
        <span class="w10 mr4 h10 radius"></span>固定无人机
      </div>
      <div class="default" :class="coverFn(cover)">
        <span class="line" :class="!productType ? 'w62' : 'w22'"></span>
        <span class="w10 mr4 h10 radius"></span>打开舱盖
      </div>
      <div class="default" :class="liftsFn(lifts)" v-if="productType">
        <span class="w22 line"></span>
        <span class="w10 mr4 h10 radius"></span>升起平台
      </div>
      <div class="default" :class="folderFn3(folder)">
        <span class="line" :class="!productType ? 'w62' : 'w22'"></span>
        <span class="w10 mr4 h10 radius"></span>释放无人机
      </div>
      <div class="default" :class="rktFn(uavMsg)">
        <span class="line" :class="!productType ? 'w62' : 'w22'"></span>
        <span class="w10 mr4 h10 radius"></span>无人机RTK定位
      </div>
    </div>
    <div class="ctx-box">
      <div class="head mt7">
        <div class="text">消息等级</div>
        <div class="text con">消息内容</div>
        <div class="time">时间</div>
      </div>
      <div class="list-box mt7">
        <div class="item-box" v-for="(item, index) in _hangarMsgList" :key="index">
          <div class="text-box">
            <div
              class="type-box"
              :class="{ emerg: item.type === 1, ordinary: item.type === 8 }"
            >
              <span class="type" v-if="item.type === 1">紧急</span>
              <span class="type" v-else-if="item.type === 8">普通</span>
              <span class="type" v-else>未知</span>
            </div>
            <div class="text">{{ item.text }}</div>
            <div class="time">{{ item.time }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="jiantou" @click="jiantou" :class="{ zhaun: dakai == true }">
      <img :src="jian" style="width: 100%; height: 100%" alt="" />
    </div>
  </div>
</template>

<script>
import jiantouIMG from './assets/images/jiantou.png';
export default {
  data() {
    return {
      jian: jiantouIMG,
      dakai: false, //变长变短
      productType: false, // 产品类型
    };
  },
  props: {
    // 无人机消息type: 270的数据
    uavMsg: {
      type: Object,
      default: () => ({}),
    },
    // 机库type为2063的日志消息
    hangarMsgList: {
      type: Array,
      default: () => [],
    },
    // 机库mqtt实时数据
    hangarData: {
      type: Object,
      default: () => ({}),
    },
  },
  watch: {
    hangarData: function (val) {
      // 产品类型 明达康机库：305 ，百胜将机库II(入云龙II换电式)：304 ，百胜将机库II(入云龙II充电式)：303 ，百胜将机库II翻盖式：302 ，百胜将机库I：301
      if (val?.productType == 302 || val?.productType == 305) {
        this.productType = false; //翻盖
      } else {
        this.productType = true; //升降
      }
    },
  },
  computed: {
    // 消息反序显示
    _hangarMsgList(){
      return this.hangarMsgList.reverse();
    },
    rtkPower() {
      let { hangarData } = this;
      if (hangarData.rtkPower) {
        return hangarData.rtkPower;
      }
      return 0;
    },
    folder() {
      let { hangarData } = this;
      if (hangarData.folder) {
        return hangarData.folder;
      }
      return 0;
    },
    lifts() {
      let { hangarData } = this;
      if (hangarData.lifts) {
        return hangarData.lifts;
      }
      return 0;
    },
    cover() {
      let { hangarData } = this;
      if (hangarData.cover) {
        return hangarData.cover;
      }
      return 0;
    },
  },
  methods: {
    getprocessStatus(val) {
      let title = "";
      if (val == 0) {
        title = "待机中";
      } else if (val == 1) {
        title = "正在执行出仓待命";
      } else if (val == 2) {
        title = "正在执行回收入仓";
      } else if (val == 3) {
        title = "正在执行充电流程";
      } else if (val == 4) {
        title = "正在结束充电流程";
      } else if (val == 5) {
        title = "正在执行休眠流程";
      } else if (val == 6) {
        title = "正在执行预热流程";
      } else if (val == 7) {
        title = "正在执行飞行检查流程";
      } else if (val == 8) {
        title = "正在执行电池检查流程";
      } else if (val == 9) {
        title = "正在执行关仓流程";
      } else {
        title = "暂无";
      }
      return title;
    },
    jiantou() {
      if (this.dakai == false) {
        this.dakai = true;
      } else {
        this.dakai = false;
      }
    },
    handle_clear() {
      this.list = [];
    },
    folderFn(folder) {
      // 已降落 夹紧中
      if (this.lifts == 1 && folder == 3) {
        return "current";
      } else if (this.lifts == 1 && folder == 2) {
        return "default";
      } else {
        return "end";
      }
    },
    // 是否出仓
    coverFn(cover) {
      switch (cover) {
        case 0:
          return "default";
          break;
        case 4:
          return "current";
          break;
        case 2:
          return "end";
          break;
        default:
          return "default";

          break;
      }
    },
    // 升降
    liftsFn(lifts) {
      switch (lifts) {
        case 0:
          return "default";
          break;
        case 4:
          return "current";
          break;
        case 2:
          return "end";
          break;
        default:
          return "default";
          break;
      }
    },
    // 释放无人机
    folderFn3(folder) {
      if (this.productType) {
        if (this.lifts == 2 && folder == 4) {
          return "current";
        } else if (this.lifts == 2 && folder == 2) {
          return "end";
        } else {
          return "default";
        }
      } else {
        if (folder == 4) {
          return "current";
        } else if (folder == 2) {
          return "end";
        } else {
          return "default";
        }
      }
    },
    rktFn(data) {
      if (this.productType) {
        if (data.code == 1000 && this.folder == 2 && this.lifts == 2) {
          return "end";
        } else if (this.folder == 2 && this.lifts == 2) {
          if (data.code != 1000) {
            return "current";
          } else {
            return "end";
          }
        } else {
          return "default";
        }
      } else {
        if (data.code == 1000 && this.folder == 2) {
          return "end";
        } else if (this.folder == 2) {
          if (data.code != 1000) {
            return "current";
          } else {
            return "end";
          }
        } else {
          return "default";
        }
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.yidong {
  left: 52% !important;
}
.cpt-nest-logger {
  position: fixed;
  width: 670px;
  height: 143px;
  top: 21%;
  left: 32%;
  display: flex;
  // overflow-y: auto;
  background: rgba(9, 32, 87, 0.7);
  // border: 1px solid #70daf9;
  border-radius: 10px 10px 0 0;
  flex-direction: column;

  .liucBox {
    display: flex;
    justify-content: center;
    gap: 5px;
    margin-top: 14px;
    .default {
      font-family: PingFangSC-Regular;
      font-size: 12px;
      color: #afdcff;
      letter-spacing: 1px;
      font-weight: 400;
      display: flex;
      align-items: center;
      .radius {
        height: 10px;
        width: 10px;
        display: inline-block;
        border-radius: 50%;
        border: 1px solid #afdcff;
        margin-left: 5px;
        margin-right: 3px;
      }
      .line {
        width: 50px;
        height: 0.5px;
        display: inline-block;
        border-top: 0.2px dashed #afdcff;
      }

      &.end {
        color: rgba(67, 222, 255, 0.6);

        .radius {
          background: rgba(67, 222, 255, 0.7);
          border: 0;
        }
      }
    }
  }

  .title-box {
    padding-left: 20px;
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    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;

    .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;
      }
      .status {
        background: transparent;
        border: none;
        height: 25px;
        line-height: 25px;
        margin-left: 30px;
        color: #fff;
      }
    }

    .icon-box {
      display: flex;
      align-items: center;
      cursor: pointer;

      .iconfont {
        font-size: 18px;
        color: #00ffff;
        margin-right: 4px;
      }

      .icon-text {
        font-family: MicrosoftYaHeiUI;
        font-size: 14px;
        color: #ccedff;
        font-weight: 400;
      }
    }
  }

  .ctx-box {
    height: calc(100% - 120px);
    // flex: 1;
    // overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 0 16px;
    margin-top: 30px;
    .head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-family: SourceHanSansCN-Bold;
      font-size: 16px;
      color: #ffffff;
      letter-spacing: 1px;
      line-height: 22px;
      font-weight: 700;
      .text,
      .time {
        width: 20%;
        text-align: center;
      }
      .time {
        width: 35%;
      }
      .con {
        width: 50%;
      }
    }
    .list-box {
      overflow: auto;
      overflow-x: hidden;
      box-sizing: border-box;
      .item-box {
        display: flex;
        align-items: center;
        color: #fff;
        padding: 11px 0;

        .text-box {
          width: 100%;
          display: flex;
          justify-content: space-between;
          align-items: center;

          .type-box {
            width: 20%;
            height: 20px;
            text-align: center;
            font-family: SourceHanSansCN-Medium;
            font-size: 14px;
            color: #ebf9ff;
            letter-spacing: 0;
            text-align: center;
            font-weight: 500;
            display: flex;
            justify-content: center;
            align-items: center;

            &.ordinary {
              background-color: #298ad3;
            }

            &.emerg {
              background-color: #ff3c3c;
            }

            .type {
              width: 100px;
              text-align: center;
              font-size: 10px;
              white-space: nowrap;
            }
          }

          .text {
            width: 50%;
            text-align: center;
            font-family: SourceHanSansCN-Medium;
            font-size: 14px;
            color: #ebf9ff;
            letter-spacing: 0;
            text-align: center;
            font-weight: 500;
          }
          .time {
            width: 35%;
            text-align: center;
            font-family: SourceHanSansCN-Medium;
            font-size: 14px;
            color: #ffffff;
            letter-spacing: 0;
            text-align: center;
            font-weight: 500;
          }
        }
      }
      .item-box:nth-of-type(2n - 1) {
        background: rgba(73, 135, 210, 0.2);
      }
    }
  }

  .xb {
    transform: rotate(-180deg);
    background: rgba(1, 10, 46, 0.63);
    border-radius: 10px 10px 0 0;
  }
}
.jiantou {
  width: 22px;
  height: 22px;
  transform: rotate(90deg);
  cursor: pointer;
  margin: 0 auto;
}
.chang {
  height: 326px !important;
}
.zhaun {
  transform: rotate(270deg) !important;
}
.close {
  color: #70daf9;
  cursor: pointer;
  margin: 0 10px 0 20px;
}
</style>
