GCLS_Page_Learn/src/views/live/SelectDevice.vue

<template>
  <el-dialog
    :visible="dialogVisibleDevice"
    :close-on-click-modal="false"
    :show-close="false"
    :close-on-press-escape="false"
    :title="$t('Key398')"
  >
    <div class="device">
      <div>
        <div class="title">
          {{ $t('Key74') }}
        </div>
        <div class="device-video">
          <template v-if="device.video.length > 0">
            <div v-for="item in device.video" :key="item.deviceId">
              <el-radio v-model="video" :label="item.deviceId">
                {{ item.label }}
              </el-radio>
            </div>
          </template>
          <template v-else>
            <div>{{ $t('Key399') }}</div>
          </template>
        </div>
      </div>
      <div>
        <div class="title">
          {{ $t('Key400') }}
        </div>
        <div class="device-audio">
          <template v-if="device.audio.length > 0">
            <div v-for="item in device.audio" :key="item.deviceId">
              <el-radio v-model="audio" :label="item.deviceId">
                {{ item.label }}
              </el-radio>
            </div>
          </template>
          <template v-else>
            <div>{{ $t('Key401') }}</div>
          </template>
        </div>
      </div>
    </div>

    <div slot="footer">
      <el-button type="primary" @click="dialogDeviceClose">
        {{ $t('Key82') }}
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  props: {
    dialogVisibleDevice: {
      default: false,
      type: Boolean
    },
    device: {
      default: () => {
        return {
          video: [],
          audio: []
        };
      },
      type: Object
    }
  },
  data() {
    return {
      audio: '',
      video: ''
    };
  },
  watch: {
    dialogVisibleDevice(newValue) {
      if (newValue) {
        let device = this.$store.state.app.liveDevice;
        this.video = this.device.video.length === 0 ? '' : this.selectValue(this.device.video, device.video);
        this.audio = this.device.audio.length === 0 ? '' : this.selectValue(this.device.audio, device.audio);
      }
    }
  },
  created() {
    this.updateWordPack({
      word_key_list: ['Key398', 'Key74', 'Key399', 'Key400', 'Key401', 'Key82']
    });
  },
  methods: {
    selectValue(arr, value) {
      return arr.some(item => item.deviceId === value) ? value : arr[0].deviceId;
    },
    dialogDeviceClose() {
      this.$emit('dialogDeviceClose', { audio: this.audio, video: this.video });
    }
  }
};
</script>

<style lang="scss" scoped>
.device {
  font-size: 16px;

  > div + div {
    margin-top: 24px;
  }

  .title {
    margin-bottom: 12px;
    font-weight: bold;
  }

  &-video,
  &-audio {
    margin-left: 24px;

    > div + div {
      margin-top: 8px;
    }
  }
}
</style>