<template>
  <Select
    :placeholder="t('video.configuration.deviceSelectPlaceholderText')"
    v-model:value="selectValue"
    style="width: 100%"
    :options="selectOptions"
    v-bind="createPickerSearch()"
    @change="handleDeviceChange"
    :disabled="disabled"
    mode="multiple"
    :max-tag-count="selectChannelMaxCount"
    labelInValue
  />
  <template v-for="(item, index) in deviceList" :key="item.value">
    <InputChannel
      :ref="bindDeviceRef.deviceChannelRef"
      :value="item"
      :index="index"
      :disabled="disabled"
    />
  </template>
</template>
<script lang="ts" setup name="SelectDevice">
  import { ref, Ref, PropType, unref } from 'vue';
  import { Select } from 'ant-design-vue';
  import { createPickerSearch } from '/@/utils/pickerSearch';
  import { StreamInterface } from '../config.data';
  import InputChannel from './InputChannel.vue';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { useI18n } from '/@/hooks/web/useI18n';

  const { t } = useI18n();

  defineProps({
    selectOptions: {
      type: Array as PropType<StreamInterface[]>,
      required: true,
    },
    disabled: {
      type: Boolean,
      required: false,
    },
  });

  const { createMessage } = useMessage();

  const selectValue = ref([]);

  const bindDeviceRef = {
    deviceChannelRef: ref([]),
  };

  const deviceList: Ref<StreamInterface[]> = ref([]);

  const selectChannelMaxCount = ref(50); // 限制通道数为50

  const getDeviceChannels = () => {
    return unref(bindDeviceRef.deviceChannelRef)?.map((item: any) => item.emitChange());
  };

  const handleDeviceChange = (_, options) => {
    if (options.length > selectChannelMaxCount.value)
      return createMessage.warn(t('video.configuration.channelNumberRuleText'));
    deviceList.value = options;
  };

  const resetValue = () => {
    selectValue.value = [];
    deviceList.value = [];
  };
  defineExpose({
    resetValue,
    getDeviceChannels,
  });
</script>
<style scoped lang="css"></style>