<template>
  <div class="mmc-filght-control-center mmc">
    <!-- cesium地图层 -->
    <CesiumLayout v-if="!cesiumViewer"></CesiumLayout>
    <!-- 地图切换组件 -->
    <MapImageSwitch></MapImageSwitch>
    <MapSearch class="map-search"></MapSearch>
    <!-- 无人机应用 -->
    <UavApplications v-if="scene == 1"></UavApplications>
    <!-- 机库 -->
    <Hangar v-else-if="scene == 2"></Hangar>
  </div>
</template>

<script>
import CesiumLayout from "./components/cesiumLayer";
import MapImageSwitch from "./components/mapImageSwitch";
import UavApplications from "./components/uavApplications";
import Hangar from "./components/hangar";
import Vue from "vue";
import SymbolIcon from "../symbol-icon";
import MapSearch from "./components/mapSearch";

export default {
  name: "MMCFlightControlCenter",
  components: {
    CesiumLayout,
    MapImageSwitch,
    UavApplications,
    Hangar,
    MapSearch,
  },
  props: {
    devMode: {
      // 开发环境
      type: Boolean,
      default: false,
    },
    // 天目将登录用户信息
    userInfo: {
      type: Object,
      default: null,
    },
    // 无人机任务列表
    uavTaskList: {
      type: Array,
      default() {
        return [
          /* {
            name: '任务',
            id: 1,
            children: [],
            airway: {
              name: '航线名称',
              id: 1
            }
          } */
        ];
      },
    },
    // 机库任务列表
    hangarTaskList: {
      type: Object,
      default() {
        return {
          // 常态
          normal: [
            /* {
              name: '任务',
              id: 1,
              status: '', 任务状态
              children: [],
              airway: {
                name: '航线名称',
                id: 1
              }
            } */
          ],
          // 定时
          Timed: [
            /* {
              name: '任务',
              id: 1,
              time: '', //定时与周期的时间
              status: '', 任务状态
              airway: {
                name: '航线名称',
                id: 1
              }
            } */
          ],
          // 周期
          period: [
            /* {
                name: '任务',
                id: 1,
                time: '', //定时与周期的时间
                status: '', 任务状态
                airway: {
                  name: '航线名称',
                  id: 1
                }
              } */
          ],
        };
      },
    },
    // 场景 1: 无人机 2: 机库
    scene: {
      type: Number,
      default: 0,
    },
    // 外部cesium.viewer对象
    cesiumViewer: {
      type: Object,
      default: null,
    },
    // 使用标准航线库
    useSTLAirway: {
      type: Boolean,
      default: true,
    },
    // 使用定时任务
    useTimedTask: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      bus: new Vue(),
    };
  },
  provide() {
    return {
      rootNode: this, //根节点实例
      bus: this.bus, //bus总线
    };
  },
  watch: {
    uavTaskList: {
      immediate: true,
      handler(newVal) {
        this.$store.commit("MMCFlightControlCenter/uav/setState", {
          key: "taskList",
          value: newVal,
        });
      },
    },
    hangarTaskList: {
      immediate: true,
      handler(newVal) {
        this.$store.commit("MMCFlightControlCenter/hangar/setState", {
          key: "taskList",
          value: newVal,
        });
        this.bus.$emit("updateHangarTaskList");
      },
    },
    useSTLAirway: {
      immediate: true,
      handler(newVal) {
        this.$store.commit("MMCFlightControlCenter/setState", {
          key: "useSTLAirway",
          value: newVal,
        });
      },
    },
    useTimedTask: {
      immediate: true,
      handler(newVal) {
        this.$store.commit("MMCFlightControlCenter/setState", {
          key: "useTimedTask",
          value: newVal,
        });
      },
    },
  },
  beforeCreate() {
    Vue.component("SymbolIcon", SymbolIcon);
    if (!window.$mmc) {
      window.$mmc = {};
    }
    window.$mmc.$store = this.$store;
    window.$mmc.state = () => {
      return this.$store.state;
    };
  },
  created() {
    this.$store.commit("MMCFlightControlCenter/setState", {
      key: "devMode",
      value: this.devMode,
    });
    this.$store.commit("MMCFlightControlCenter/setState", {
      key: "token",
      value: this.userInfo.token,
    });
    this.$store.commit("MMCFlightControlCenter/setState", {
      key: "userInfo",
      value: this.userInfo,
    });

    if (this.cesiumViewer) {
      this.$store.commit("MMCFlightControlCenter/setState", {
        key: "cesiumViewer",
        value: this.cesiumViewer,
      });
      window.$mmc.viewer = this.cesiumViewer;
    }
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
.mmc-filght-control-center {
  overflow: hidden;
  position: relative;
  height: 100%;
  width: 100%;
}

.map-search {
  position: absolute;
  top: 10px;
  right: 20px;
}
</style>

<style lang="scss">
.mmc-filght-control-center {
  overflow: hidden;
  position: relative;
  height: 100%;
  width: 100%;

  .el-input__inner {
    background-color: #02173d;
    color: #00aacb;
    border: 1px solid #2b56b7;
  }

  .el-range-input {
    background-color: transparent;
    color: #fff !important;
  }

  .el-range-separator {
    color: #fff !important;
  }

  .el-dialog__body {
    button:nth-child(2) {
      box-shadow: inset 0 0 5px #00ffff;
      background: rgba(4, 227, 227, 0.1);
      opacity: 0.8;
    }
  }

  * {
    /* 滚动条整体样式 */
    &::-webkit-scrollbar {
      width: 10px; /* 滚动条宽度 */
    }

    /* 滚动条滑块样式 */
    &::-webkit-scrollbar-thumb {
      background-color: #02173d; /* 滑块颜色 */
    }

    /* 滚动条滑块悬停样式 */
    &::-webkit-scrollbar-thumb:hover {
      background-color: #112d5b; /* 悬停时滑块颜色 */
    }

    &::-webkit-scrollbar-track-piece {
      /* background-color: #182F5C; */
    }

    &::-webkit-scrollbar-track {
      background-color: #182f5c;
    }
  }

  .dialog1027 {
    z-index: 1;
    .dialog-header {
      box-sizing: border-box;
      padding-left: 35px;
      padding-right: 16px;
      background-position: 12px 4px;
      height: 32px;
      width: 100%;
      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;
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: relative;

      .dialog-header__icon {
        position: absolute;
        left: 12px;
        top: 50%;
        transform: translate(0, -50%);
        background-image: url("./assets/images/jinye.png");
        background-size: 100% 100%;
        width: 19px;
        height: 25px;
      }

      .dialog-header__title {
        display: flex;
        align-items: center;
        font-size: 20px;
        font-family: YouSheBiaoTiHei;
        background-image: -webkit-linear-gradient(
          right,
          #e3aa77,
          #f5cda9,
          #f9ecd3,
          #fcdbb1,
          #edb07a
        );
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        letter-spacing: 0;
        font-weight: 700;
      }

      .dialog-header__close {
        font-size: 14px;
        font-family: MicrosoftYaHei;
        color: #d2dfff;
        line-height: 19px;
        cursor: pointer;
      }
    }

    .dialog-content {
      background: rgba(12, 34, 73, 0.7);
      border-bottom-left-radius: 10px;
      border-bottom-right-radius: 10px;
      border: 1px solid rgba(26, 92, 246, 0.5);
      backdrop-filter: blur(1px);
      padding: 12px 12px 16px;
      width: 100%;
      font-size: 14px;
      font-family: SourceHanSansCN-Regular, SourceHanSansCN;
      font-weight: 400;
      color: #ffffff;
      box-sizing: border-box;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;

      .dialog-content-item {
        margin-bottom: 16px;
        display: flex;

        .dialog-content__label {
          padding-top: 7px;
          font-size: 14px;
          font-family: SourceHanSansCN-Regular, SourceHanSansCN;
          font-weight: 400;
          color: #ffffff;
          width: 110px;
          text-align: right;
        }

        .dialog-content__text {
          padding: 6px 12px;
          width: 228px;
          background: rgba(2, 23, 61, 1);
          border-radius: 2px;
          border: 1px solid #315ec7;
          font-size: 14px;
          font-family: MicrosoftYaHei;
          color: #00dfff;
          line-height: 19px;
        }
      }

      .el-input__inner {
        // height: 32px;
        background: #02173d;
        border-radius: 2px;
        border: 1px solid #315ec7;
        font-size: 14px;
        font-family: MicrosoftYaHei;
        color: #ffffff;
      }

      .el-radio {
        color: #fff;
      }

      .el-scrollbar {
        background: #02173d;
        border: 1px solid #315ec7;
      }

      .el-textarea {
        border: none;
      }

      .el-textarea__inner {
        background: #02173d;
        border: 1px solid #315ec7;
      }

      .btn-box1027 {
        padding: 16px 16px;
        width: 100%;
      }
    }
  }

  .el-input-number {
    .el-input-number__decrease,
    .el-input-number__increase {
      bottom: 1px;
      background: #606266;
      color: #f5f7fa;
      border-radius: 0;
      border: none;
    }

    .el-input-number__decrease {
      left: 1px;
    }

    .el-input-number__increase {
      right: -1px;
    }
  }

  .el-form-item__label {
    color: #fff;
  }
}

.mmc {
  .popper__arrow::after {
    border-bottom-color: #161d2d;
  }
  // 所有下拉选择框样式
  &.el-select-dropdown {
    border: none;

    //item选项的hover样式
    .el-select-dropdown__item.hover,
    .el-select-dropdown__item:hover {
      background: #34466e;
    }

    .option.hover,
    .option:hover {
      background-image: linear-gradient(
        90deg,
        rgba(44, 135, 176, 0.7) 0%,
        rgba(26, 100, 139, 0.37) 51%,
        rgba(7, 61, 98, 0.7) 100%
      );
      font-family: MicrosoftYaHei;
      font-size: 12px;
      color: #00f5ff;
      letter-spacing: 0;
      font-weight: 400;
    }
    .el-select-dropdown__item {
      color: #00aeff;

      .selected {
        background-color: #606266;
      }
    }

    .option {
      font-family: MicrosoftYaHei;
      font-size: 12px;
      color: rgba(146, 217, 255, 0.7);
      letter-spacing: 0;
      font-weight: 400;
    }

    .el-scrollbar {
      overflow: hidden;
      position: relative;
      background: #0d224f;

      border: 1px solid #178890;
    }

    &.is-multiple {
      .el-select-dropdown__item.selected {
        background-color: #34466e;
      }
    }

    .el-select-dropdown__empty {
      background: #02173d;
      border: 1px solid #315ec7;
    }
  }

  &.el-cascader__dropdown {
    border: 1px solid #315ec7;

    .el-cascader-menu__list {
      background: rgba(9, 32, 87, 1);
      max-height: 300px;
      max-width: 327px;
    }

    .el-cascader-node {
      background: rgba(9, 32, 87, 1);
      color: #00aeff;
    }
  }

  &.el-dialog {
    background: transparent;

    .el-dialog__header {
      padding: 0;
    }

    .el-dialog__body {
      padding: 0;
    }
  }

  .el-popper {
    background: rgba(9, 32, 87, 1);
    border: 1px solid #315ec7;
  }
  // 日期选择器组件
  &.el-time-range-picker,
  &.el-date-range-picker,
  &.el-date-picker {
    border: none;

    .el-picker-panel__body-wrapper,
    .el-time-range-picker__content {
      background: #0d224f;
      border: 1px solid #00aeff;
      color: #fff;

      .el-month-table td.current:not(.disabled) .cell {
        color: #00aeff;
      }

      .el-input__inner {
        color: #fff;
        border: 1px solid #00aeff;
      }

      .el-date-table td.disabled div {
        background-color: transparent;
      }

      .el-date-table th {
        // border-bottom: solid 1px #00aeff;
        color: #fff;
      }

      .el-date-table td.in-range div {
        background-color: #00aeff;
      }

      .el-date-picker__header-label {
        color: #fff;
      }

      .el-input--small .el-input__inner {
        background-color: #0d224f;
      }

      .el-picker-panel__icon-btn {
        color: #fff;
      }
    }

    .el-picker-panel__footer,
    .el-time-panel__footer {
      background-color: #0d224f;
    }

    .popper__arrow {
      border-bottom-color: #00aeff;
      border-top-color: #00aeff;
    }

    .popper__arrow::after {
      border-top-color: #0d224f;
      border-bottom-color: #0d224f;
    }

    .el-button.el-button--mini.is-plain,
    .el-button.is-disabled.is-plain {
      background-color: transparent;
      border: none;
      color: #00aeff;
    }

    .el-time-spinner__item {
      color: #00eaff;
    }

    .el-time-panel__btn {
      color: #fff;

      &.confirm {
        color: #409eff;
      }
    }

    .el-time-spinner__item:hover:not(.disabled):not(.active) {
      background-color: #4472d5;
    }
  }
}
</style>