<template>
  <div>
    <Player @close="$emit('close')" :url="selectStream.url" :brand="selectStream.brand" :name="name" :label="label" />
    <el-select v-model="selectUrl" class="select" popper-class="mmc">
      <el-option
        v-for="item in streamConfiguration"
        :label="item.brand"
        :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 || "";
    },
    /**
     * 可选流
     */
    streamConfiguration() {
      return (
        this.hangar?.uav?.streamConfiguration
          ?.find((v) => v.videoType === 1)
          ?.streamUrlMessage.map((v) => ({
            url: /* coverStreamUrl(v.streamUrl, this.hangar.uav.deviceId) */ v.streamUrl,
            brand: v.streamType,
          })) || []
      );
    },
    selectStream() {
      return (
        this.streamConfiguration.find(item => item.url === this.selectUrl) || {
          url: "",
          brand: "",
        }
      );
    },
  },
  mounted() {
    this.selectUrl = this.streamConfiguration[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>