<template>
  <div
    v-for="param in dynamicInput.params"
    :key="param.key"
    style="display: flex; margin-top: 0.25vh"
  >
    <a-input
      :disabled="true"
      v-model:value="param.name"
      style="width: 38%; margin-bottom: 5px; margin-left: 1vh"
      @change="emitChange"
    />
    <Select
      placeholder="请选择设备属性"
      v-model:value="param.attributes"
      style="width: 160px; margin-left: 1.8vw"
      :options="selectOptions"
      @change="emitChange"
      mode="multiple"
      allowClear
    />
  </div>
</template>
<script lang="ts">
  export default {
    inheritAttrs: false,
  };
</script>
<script lang="ts" setup>
  import { reactive, UnwrapRef, watchEffect, ref } from 'vue';
  import { propTypes } from '/@/utils/propTypes';
  import { Select } from 'ant-design-vue';
  import { getAttribute } from '/@/api/ruleengine/ruleengineApi';

  interface Params {
    [x: string]: string;
    attributes: any;
    device: string;
  }
  const props = defineProps({
    value: propTypes.object.def({}),
    orgId: propTypes.string.def(''),
  });
  const selectOptions: any = ref([]);
  //获取对应设备属性
  const getAttr = async (orgId, _) => {
    if (orgId) {
      const res = await getAttribute(orgId);
      if (Array.isArray(res)) {
        selectOptions.value = res.map((o) => {
          let obj: any = {};
          if (o?.identifier !== null) {
            obj = {
              label: o?.identifier,
              value: o?.identifier,
            };
            return obj;
          }
        });
        //如果服务端返回的数组里含有null 过滤null值
        const excludeNull = selectOptions.value.filter(Boolean);
        selectOptions.value = excludeNull;
      }
    }
  };
  //动态数据
  const dynamicInput: UnwrapRef<{ params: Params[] }> = reactive({ params: [] });
  const rEffect = watchEffect(() => {
    initVal();
  });
  rEffect();
  /**
   * 初始化数值
   */
  async function initVal() {
    if (props.value) {
      await getAttr(props.value?.deviceProfileId, props.value?.id);
      dynamicInput.params.push({
        name: props.value.label,
        device: props.value.value,
        attributes: props.value?.attributes == [] ? [] : props.value.attributes,
      });
    }
  }
  /**
   * 数值改变
   */
  function emitChange() {
    return dynamicInput.params[0];
  }
  defineExpose({
    emitChange,
  });
</script>
<style scoped lang="css">
  @import './deviceAttrCpns.css';
</style>