<template>
  <div>
    <Player ref="player" @close="$emit('close')" :url="selectUrl" :name="name" :label="label" style="height: 200px;" />
    <el-select v-model="selectUrl" class="select" popper-class="mmc">
      <el-option
        v-for="item in streamOptions"
        :label="item.label"
        :value="item.url"
        :key="item.url"
      ></el-option>
    </el-select>
  </div>
</template>

<script>
import Player from "../components/player";
import { mapState } from "vuex";
import { coverStreamUrl } from "../utils";

export default {
  name: "UAVPlayer",
  components: { Player },
  props: {},
  data() {
    return {
      selectUrl: "", //选择的流的url
      lastMsg: null,
    };
  },
  computed: {
    ...mapState("MMCFlightControlCenter/hangar", [
      "hangar",
      "hangarRealTimeData",
    ]),
    ...mapState("MMCFlightControlCenter/uav", ["uav"]),
    name() {
      return `${this.hangar?.name || ""}机库无人机`;
    },
    label() {
      return this.hangar?.uav?.organizationName || "";
    },
    /**
     * 可选流
     */
    /**
     * 流选项
     * @returns [{
          value: "RTC",
          label: "低延迟"
        }]
     */
    streamOptions() {
      let streamOptions = [];
      let streamConfiguration = this.uav?.streamConfiguration?.find(
        (item) => item.urlType === 0
      );

      if (streamConfiguration?.fluencyUrl) {
        // 流畅地址
        streamOptions.push({
          label: "流畅",
          url: streamConfiguration?.fluencyUrl,
        });
      }

      if (streamConfiguration?.lowLatencyUrl) {
        // 低延迟地址
        streamOptions.push({
          label: "低延迟",
          url: streamConfiguration?.lowLatencyUrl,
        });
      }

      if (streamConfiguration?.originalUrl) {
        // 原画地址
        streamOptions.push({
          label: "原画",
          url: streamConfiguration?.originalUrl,
        });
      }
      return streamOptions;
    },
  },
  watch: {
    streamOptions() {
      if (this.streamOptions.length > 0) {
        this.selectUrl = this.streamOptions[0].url;
      }
    },
    "hangarRealTimeData.msgList": {
      immediate: false,
      handler(msgList) {
        // 刷新视频, 不然卡在视频最后一帧
        if (msgList.length > 0) {
          let msg = msgList[msgList.length - 1];

          let keyword = "回收流程完毕";

          if (msg) {
            if (
              !this?.lastMsg?.text?.includes(keyword) &&
              msg.text.includes(keyword)
            ) {
              console.log("最新机库日志", msg);
              this.$refs.player.reset();
            }

            this.lastMsg = msg;
          }
        }
      },
    },
  },
  mounted() {
    this.selectUrl = this.streamOptions[0]?.url || "";
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
.select ::v-deep {
  width: 95px;
  margin-top: 5px;

  input {
    height: 30px;
  }

  .el-select__caret {
    display: flex;
    align-items: center;
    width: initial;
  }
}
</style>