<template>
  <div v-for="(param, index) in dynamicInput.params" :key="index" class="mt-4 flex gap-2">
    <a-input disabled v-model:value="param.deviceName" class="w-1/2 flex-1" />
    <a-input v-model:value="param.channelNos" class="w-1/2 flex-1" placeholder="请输入通道号" />
  </div>
</template>
<script lang="ts">
  export default {
    inheritAttrs: false,
  };
</script>
<script lang="ts" setup name="SelectAttributes">
  import { reactive, UnwrapRef, watchEffect } from 'vue';
  import { propTypes } from '/@/utils/propTypes';
  import { DeviceChannelInterface } from '../config.data';

  const props = defineProps({
    value: propTypes.object.def({}),
    disabled: {
      type: Boolean,
      required: false,
    },
  });

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

  const initVal = async () => {
    if (props.value) {
      dynamicInput.params.push({
        deviceName: props.value.label,
        deviceID: props.value.value,
        channelNos: props.value.channelNos,
      });
    }
  };

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

  valEffect();

  //chang改变
  const emitChange = () => {
    return { ...dynamicInput.params[0], channelNos: [dynamicInput.params[0].channelNos] };
  };

  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>