<template>
  <div v-for="param in dynamicInput.params" :key="param.key" class="mt-4 flex gap-2">
    <a-input :disabled="true" v-model:value="param.name" class="w-1/2 flex-1" />
    <Select
      :placeholder="`${t('common.chooseText')}${t('component.areaChart.search.deviceAttr')}`"
      v-model:value="param.attributes"
      class="!w-1/2"
      :options="selectOptions"
      v-bind="createPickerSearch()"
      :disabled="disabled"
      @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 } from 'vue';
  import { propTypes } from '/@/utils/propTypes';
  import { Select } from 'ant-design-vue';
  import { Params } from '../type/';
  import { useHooks } from '../hooks/index.hooks';
  import { createPickerSearch } from '/@/utils/pickerSearch';
  import { useI18n } from '/@/hooks/web/useI18n';
  const { t } = useI18n();
  const props = defineProps({
    value: propTypes.object.def({}),
    disabled: {
      type: Boolean,
      required: false,
    },
  });

  const selectOptions: any = ref([]);

  const { getDeviceAttr } = useHooks();

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

  const initVal = async () => {
    if (props.value) {
      selectOptions.value = await getDeviceAttr(props.value?.deviceProfileId);
      dynamicInput.params.push({
        name: props.value.label,
        device: props.value.value,
        attributes: props.value.attributes,
      });
    }
  };

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

  valEffect();

  //chang改变
  const emitChange = () => {
    return dynamicInput.params[0];
  };
  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>