<template>
  <div
    class="flex"
    v-for="param in dynamicInput.params"
    :key="param.key"
    style="margin-top: 1.25vh"
  >
    <a-input :disabled="true" v-model:value="param.name" style="width: 38%; margin-bottom: 5px" />
    <Select
      placeholder="请选择设备属性"
      v-model:value="param.attributes"
      style="width: 38%; margin-left: 1.8vw"
      :options="selectOptions"
      :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';

  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>