<template>
  <Select
    placeholder="请选择设备"
    v-model:value="selectValue"
    style="width: 100%"
    :options="selectOptions"
    v-bind="createPickerSearch()"
    @change="handleDeviceChange"
    :disabled="disabled"
    mode="multiple"
    labelInValue
  />
  <template v-for="(item, index) in deviceList" :key="index">
    <InputChannel
      :ref="bindDeviceRef.deviceAttrRef"
      :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';

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

  const selectValue = ref([]);

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

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

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

  const handleDeviceChange = (_, options) => {
    deviceList.value = options;
  };

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