<template>
  <div>
    <Player
      @close="$emit('close')"
      :url="selectUrl"
      :name="name"
      :label="label"
    />
    <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
    };
  },
  computed: {
    ...mapState("MMCFlightControlCenter/hangar", ["hangar"]),
    name() {
      return `${this.hangar?.uav?.organizationName || ""}机库无人机`;
    },
    label() {
      return this.hangar?.uav?.organizationName || "";
    },
    uav(){
      return this.hangar.uav;
    },
    /**
     * 可选流
     */
    /**
     * 流选项
     * @returns [{
          value: "RTC",
          label: "低延迟"
        }]
     */
    streamOptions() {
      let streamOptions = [];
      let streamConfiguration = this.uav?.streamConfiguration?.find(
        (item) => item.urlType === 0
      );

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

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

      if (streamConfiguration?.originalUrl) {
        // 原画地址
        streamOptions.push({
          label: "原画",
          value: "QINGLIU",
          url: streamConfiguration?.originalUrl,
        });
      }
      return streamOptions;
    },
  },
  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>