<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.device" 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" allowClear mode="multiple" />
  </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 { SelectTypes } from 'ant-design-vue/es/select';
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.array.def([]),
  orgId: propTypes.string.def(''),
});
const emits = defineEmits(['change', 'update:value']);
const selectOptions = ref<SelectTypes['options']>([]);
//获取属性
const getAttr = async (orgId, deviceId) => {
  const res = await getAttribute(orgId, deviceId.join(','));
  selectOptions.value = res.map((o) => {
    return {
      label: o,
      value: o,
    };
  });
};
//动态数据
const dynamicInput: UnwrapRef<{ params: Params[] }> = reactive({ params: [] });
//监听传入数据value
watchEffect(() => {
  initVal();
});
/**
 * 初始化数值
 */
async function initVal() {
  dynamicInput.params = []
  if (props.value && props.orgId) {
    let jsonObj = props.value;
    const deviceId = jsonObj.map((m: any) => m.value);
    await getAttr(props.orgId, deviceId);
    dynamicInput.params = jsonObj.map((item: any) => {
      return {
        attributes: item.attributes,
        device: item.label,
        value: item.value,
      }
    })
  }
}
/**
 * 数值改变
 */
function emitChange() {
  let obj: any = [];
  if (dynamicInput.params.length > 0) {
    dynamicInput.params.forEach((item: Params) => {
      obj.push({
        attributes: item.attributes,
        device: item.value,
        name: item.device
      });
    });
  }
  emits('change', obj);
  emits('update:value', obj);
}
</script>
<style scoped lang="css">
@import './deviceAttrCpns.css';
</style>