<template>
  <MMCFlightControlCenter
    style="width: 100%; height: 100%;"
    v-if="userInfo"
    :url="url"
    :userInfo="userInfo"
    :uavTaskList="uavTaskList"
    :scene="scene"
    :useSTLAirway="useSTLAirway"
    :useTimedTask="useTimedTask"
    :useTask="useTask"
    @tokenInvalid="dispatchEvent('tokenInvalid')"
    @refreshToken="dispatchEvent('refreshToken', $event)"
    @uavChange="dispatchEvent('uavChange', $event)"
    @taskAdd="dispatchEvent('taskAdd', $event)"
    @taskBatchAdd="dispatchEvent('taskBatchAdd', $event)"
    @getLabelList="dispatchEvent('getLabelList',$event)"
    @airwayAdd="dispatchEvent('airwayAdd', $event)"
    @hangarChange="dispatchEvent('hangarChange', $event)"
    @hangarTaskTabChange="dispatchEvent('hangarTaskTabChange', $event)"
    @taskStart="dispatchEvent('taskStart', $event)"
    @taskDel="dispatchEvent('taskDel', $event)"
    @airwayListGet="dispatchEvent('airwayListGet', $event)"
    @airwayGet="dispatchEvent('airwayGet', $event)"
    @taskListGet="dispatchEvent('taskListGet', $event)"
    @taskRecordPageGet="dispatchEvent('taskRecordPageGet', $event)"
    @taskInfoUpdateTime="dispatchEvent('taskInfoUpdateTime', $event)"
    @taskInfoRecordDel="dispatchEvent('taskInfoRecordDel', $event)"
  ></MMCFlightControlCenter>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      url: {
        baseUrl: "/",
        wsUrl: "wss://tmj.mmcuav.cn/websocket",
        mqttUrl: "wss://fkzx.mmcuav.cn:8884/mqtt",
        mqttToken: "",
      },
      scene: 0, // 场景类型 1: 无人机 2: 机库
      account: "mmctest@admin",
      password: "test@Admin001",
      userInfo: null,
      useSTLAirway: true, // 使用标准航线
      useTimedTask: false, // 使用定时任务
      uavTaskList: [],
      airwayList: [],
      hangarTaskAddCB: null, //机库创建任务回调
      uavTaskAddCB: null, //机库创建任务回调
      airwayPageChangeCB: null, //航线翻页时回调
      airwayGetCB: null, //获取航线数据回调
      taskListGetCB: null, //获取任务数据回调
      useTask: false, //使用任务进行航线选择
      callbackList: {},
    };
  },
  computed: {},
  watch: {},
  created() {
    this.postTop({
      type: "ready",
      data: true,
    });
    this.eventHandler();
  },
  async mounted() {},
  methods: {
    /**
     * 给父窗口发送消息
     */
    postTop(data) {
      console.log("iframe postMessage", data);
      window.top.postMessage(
        {
          module: "MMCFlightControlCenter",
          ...data,
        },
        "*"
      );
    },
    /**
     * 事件处理
     */
    eventHandler() {
      window.addEventListener("message", (event) => {
        if (event.data.module === "MMCFlightControlCenter") {
          console.log("iframe收到数据", event.data);
          if (event.type === "window") {
            this.postTop({
              event: "window",
              data: window,
            });
          } else {
            this.paramHandler(event.data);
            this.callbackHandler(event.data);
            this.logHandler(event.data);
          }
        }
      });
    },
    /**
     * 外部平台参数传入处理
     */
    paramHandler({ type, param, data }) {
      if (type === "param") {
        this.$set(this, param, data);
      }
    },
    /**
     * 回调处理
     */
    callbackHandler({ type, event, data }) {
      if (type === "callback") {
        let cb = this.callbackList[event]; // this[event + "CB"];
        if (cb) {
          cb(data);
          this.callbackList[event] = null;
        }
      }
    },
    /**
     * 日志处理
     */
    logHandler({ type, keys, keyType }) {
      if (type === "log") {
        let arr = keys.split(".");
        let value = window;
        arr.forEach((key, i) => {
          value = value[key];
          if (i === arr.length - 1) {
            switch (keyType) {
              case "value":
                console.log('event log', value);
                this.postTop({
                  event: "log",
                  data: {
                    keys,
                    value,
                  },
                });
                break;
              case "method":
                value();
                break;
            }
          }
        });
      }
    },
    /**
     * 分发事件
     * @param {string} event 事件名
     * @param {object} data 事件数据
     */
    dispatchEvent(event, data) {
      // 回调函数不能通过postMessage传递
      if (data?.callback) {
        this.callbackList[event] = data.callback;
        delete data.callback;
      }
      this.postTop({
        type: "event",
        event: event,
        data: data,
      });
    },
  },
};
</script>
<style lang="scss">
html,
body {
  height: 100%;
}
</style>