<template>
  <div v-for="param in dynamicInput.params" :key="param.name" class="mt-4 flex gap-2">
    <a-input :disabled="true" v-model:value="param.name" class="w-1/2 flex-1" />
    <Select
      placeholder="请选择设备"
      v-model:value="param.deviceList"
      class="!w-1/2"
      :options="selectOptions"
      v-bind="createPickerSearch()"
      @change="emitChange"
      mode="multiple"
      allowClear
    />
  </div>
</template>
<script lang="ts">
  export default {
    inheritAttrs: false,
  };
</script>
<script lang="ts" setup name="SelectAttributes">
  import { reactive, UnwrapRef, watchEffect, ref, watch } from 'vue';
  import { propTypes } from '/@/utils/propTypes';
  import { Select } from 'ant-design-vue';
  import { createPickerSearch } from '/@/utils/pickerSearch';
  import { byOrganizationIdGetMasterDevice } from '/@/api/ruleengine/ruleengineApi';

  const props = defineProps({
    value: propTypes.object.def({}),
    organizationId: {
      type: String,
      required: true,
    },
  });

  const selectOptions: any = ref([]);

  //动态数据
  const dynamicInput: UnwrapRef<{ params: any[] }> = reactive({ params: [] });

  const initVal = async () => {
    if (props.value) {
      dynamicInput.params.push({
        name: props.value.label,
        profileId: props.value.value,
        deviceType: props.value?.deviceType,
        transportType: props.value?.transportType,
        deviceList: props.value.deviceList?.filter(Boolean)?.map((item) => item.deviceId),
      });
    }
  };

  watch(
    () => props.organizationId,
    async () => {
      if (props.organizationId) {
        const resp = await byOrganizationIdGetMasterDevice({
          organizationId: props.organizationId,
          deviceProfileId: props.value.value,
        });
        selectOptions.value = resp.map((item) => ({
          ...item,
          label: item.alias || item.name,
          value: item.tbDeviceId,
        }));
      }
    },
    {
      immediate: true,
    }
  );

  //数值改变
  const valEffect = watchEffect(() => {
    initVal();
  });

  valEffect();

  //chang改变
  const emitChange = () => {
    const tempDeviceList: Recordable[] = []; // fix: 修改选择设备顺序问题
    dynamicInput.params[0].deviceList?.forEach((item) => {
      selectOptions.value?.forEach((newItem) => {
        if (item === newItem.value) {
          tempDeviceList.push({
            name: newItem.label,
            deviceId: newItem.value,
            codeType: newItem.codeType,
          });
        }
      });
    });
    return {
      ...dynamicInput.params[0],
      deviceList: tempDeviceList.filter(Boolean), // 过滤假值
    };
  };
  defineExpose({
    emitChange,
  });
</script>
<style scoped lang="css">
  .dynamic-delete-button {
    cursor: pointer;
    position: relative;
    top: 4px;
    font-size: 24px;
    color: #999;
    transition: all 0.3s;
  }

  .dynamic-delete-button:hover {
    color: #777;
  }

  .dynamic-delete-button[disabled] {
    cursor: not-allowed;
    opacity: 0.5;
  }
</style>