<template>
  <Select
    placeholder="请选择设备"
    v-model:value="selectValue"
    style="width: 100%"
    :options="selectOptions"
    @change="handleDeviceChange"
    :disabled="disabled"
    mode="multiple"
    labelInValue
  />
  <template v-for="(item, index) in deviceList" :key="item.value">
    <SelectAttributes
      :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 SelectAttributes from './SelectAttributes.vue';
  import { TDeviceList, TSelectOption } from '../type';

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

  const selectValue = ref([]);

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

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

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

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

  const setValue = (value) => {
    selectValue.value = value.map((item) => ({
      label: item.name,
      key: item.device,
    }));
    deviceList.value = value?.map((item) => {
      const T = props.selectOptions.find((o) => {
        if (item.device === o.value) {
          return {
            id: o.id,
            deviceProfileId: o.deviceProfileId,
          };
        }
      });
      return {
        ...T,
        label: item.alias ? item.alias : item.name,
        value: item.device,
        attributes: item.attributes,
      };
    });
  };

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