<template>
  <Select
    :placeholder="`${t('common.chooseText')}${t('business.productText')}`"
    v-model:value="selectValue"
    style="width: 100%"
    :options="selectOptions"
    v-bind="createPickerSearch()"
    @change="handleDeviceProfileChange"
    mode="multiple"
    labelInValue
  />
  <template v-for="(item, index) in profileList" :key="item.value">
    <SelectDevice
      :ref="bindDeviceRef.deviceAttrRef"
      :value="item"
      :index="index"
      :organizationId="organizationId"
    />
  </template>
</template>
<script lang="ts" setup name="SelectDevice">
  import { ref, Ref, PropType, unref, nextTick, onMounted } from 'vue';
  import { Select } from 'ant-design-vue';
  import SelectDevice from './SelectDevice.vue';
  import { createPickerSearch } from '/@/utils/pickerSearch';

  import { doQueryDeviceProfileList } from '/@/api/device/deviceConfigApi';
  import { useI18n } from '/@/hooks/web/useI18n';

  defineProps({
    selectOptions: {
      type: Array as PropType<any[]>,
      required: true,
    },
    organizationId: {
      type: String,
      required: true,
    },
  });
  const { t } = useI18n();

  const selectValue = ref([]);
  const selectOptions = ref<any>([]);

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

  const profileList: Ref<any[]> = ref([]);

  const handleDeviceProfileChange = (_, options) => {
    profileList.value = options;
  };

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

  const setFieldsValue = async (productIds) => {
    await nextTick();
    selectValue.value = productIds || [];
    profileList.value = productIds || [];
  };

  const setValue = (value: any) => {
    selectValue.value = value.map((item) => ({
      label: item.name,
      key: item.profileId,
    }));
    profileList.value = value.map((item) => {
      return {
        label: item.name,
        value: item.profileId,
        deviceList: item.deviceList,
      };
    });
  };
  const retValue = () => {
    selectValue.value = [];
    profileList.value = [];
  };

  onMounted(async () => {
    const values = await doQueryDeviceProfileList();
    selectOptions.value = values.map((item) => ({
      label: item.name,
      value: item.id,
    }));
  });

  defineExpose({
    getSelectDevice,
    setValue,
    retValue,
    setFieldsValue,
  });
</script>
<style scoped lang="css"></style>