<template>
  <div class="mmc-filght-control-center">
    <!-- cesium地图层 -->
    <cesiumLayout></cesiumLayout>
    <!-- 地图切换组件 -->
    <mapImageSwitch></mapImageSwitch>
    <!-- 无人机应用 -->
    <uavApplications></uavApplications>
  </div>
</template>

<script>
import cesiumLayout from "./components/cesium-layer";
import mapImageSwitch from "./components/mapImageSwitch";
import uavApplications from "./components/uavApplications";
import Vue from 'vue';

export default {
  name: "MMCFlightControlCenter",
  components: {
    cesiumLayout,
    mapImageSwitch,
    uavApplications,
  },
  props: {
    devMode: {
      // 开发环境
      type: Boolean,
      default: false,
    },
    // 天目将登录用户信息
    userInfo: {
      type: Object,
      default: null,
    },
    // 任务列表
    taskList: {
      type: Array,
      default() {
        return [
          /* {
            name: '任务',
            id: 1,
            children: [],
            airway: {
              name: '航线名称',
              id: 1
            }
          } */
        ];
      },
    },
    // 航线列表
    airwayList: {
      type: Array,
      default() {
        return [
          /* {
            name: '航线名称',
            id: 1,
            organizationName: '所属单位',
            status: 1 //空域状态 1: 可用 2: 待申请 3: 待审批 4: 通过 5: 驳回
            isSafe: 1 //空域状态 1: 安全 2: 待确定
            labelName: '航线标签'
          } */
        ];
      },
    },
  },
  provide() {
    return {
      rootNode: this,   //根节点实例
      bus: new Vue()    //bus总线
    };
  },
  watch: {
    taskList: {
      immediate: true,
      handler(newVal) {
        this.$store.commit("MMCFlightControlCenter/setState", {
          key: "taskList",
          value: newVal,
        });
      },
    },
    airwayList: {
      immediate: true,
      handler(newVal) {
        this.$store.commit("MMCFlightControlCenter/setState", {
          key: "airwayList",
          value: newVal,
        });
      },
    },
  },
  beforeCreate() {
    if (!window.$mmc) {
      window.$mmc = {};
    }
    window.$mmc.store = this.$store;
  },
  created() {
    if (!window.$mmc) {
      window.$mmc = {};
    }
    window.$mmc.state = () => {
      return this.$store.state;
    };
    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,
    });
  },
};
</script>

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

<style lang="scss">
.mmc-filght-control-center {
  .el-input__inner {
    background-color: #02173d;
    color: #00aacb;
    border: 1px solid #2b56b7;
  }

  .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 !important;
        border-radius: 2px;
        border: 1px solid #315ec7 !important;
        font-size: 14px;
        font-family: MicrosoftYaHei;
        color: #ffffff;
      }

      .el-radio {
        color: #fff;
      }

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

      .el-textarea {
        border: none !important;
      }

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

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

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

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

    .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 !important;
      font-weight: 400 !important;
    }
    .el-select-dropdown__item {
      color: #00aeff !important;

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

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

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

      border: 1px solid #178890;
    }

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

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

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

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

  &.el-dialog {
    background: transparent;

    .el-dialog__header {
      padding: 0;
    }

    .el-dialog__body {
      padding: 0;
    }
  }
}
</style>