<template>
  <div
    v-for="(param, index) in dynamicInput.params"
    :key="index"
    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.attribute"
      style="width: 160px; margin-left: 1.8vw"
      :options="selectOptions"
      @change="emitChange"
    />
  </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 { screenLinkPageByDeptIdGetDevice } from '/@/api/ruleengine/ruleengineApi';
  import { getAttribute } from '/@/api/ruleengine/ruleengineApi';
  // import { getDeviceAttribute } from '/@/api/alarm/position';

  interface Params {
    [x: string]: string;
    attribute: string;
    device: string;
  }
  const props = defineProps({
    value: propTypes.array.def([]),
    orgId: propTypes.string.def(''),
  });
  const emits = defineEmits(['change', 'update:value', 'dynamicReduceHeight', 'dynamicAddHeight']);
  const selectOptions = ref<SelectTypes['options']>([]);
  //动态数据
  const dynamicInput: UnwrapRef<{ params: Params[] }> = reactive({ params: [] });
  //监听传入数据value
  watchEffect(() => {
    initVal();
  });
  //获取属性
  const getAttr = async (orgId, value) => {
    const res = await getAttribute(orgId, value.join(','));
    selectOptions.value = res.map((o) => {
      return {
        label: o,
        value: o,
      };
    });
  };
  //获取设备
  const deviceOptions: any = ref([]);
  const getDevice = async (orgId) => {
    const { items } = await screenLinkPageByDeptIdGetDevice({
      organizationId: orgId,
    });
    deviceOptions.value = items.map((item) => {
      return {
        label: item.name,
        value: item.tbDeviceId,
      };
    });
  };
  /**
   * 初始化数值
   */
  async function initVal() {
    dynamicInput.params = [];
    if (props.value && props.orgId) {
      const getPropsDevice = props.value;
      const getPropsOrgId = props.orgId;
      await getAttr(getPropsOrgId, getPropsDevice);
      await getDevice(getPropsOrgId);
      const temp: any = [];
      deviceOptions.value.forEach((f) => {
        getPropsDevice.forEach((f1) => {
          if (f1 == f.value) {
            temp.push({
              label: f.label,
              value: f.value,
            });
          }
        });
      });
      temp.forEach((item: Params) => {
        dynamicInput.params.push({
          attribute: item.attribute,
          device: item.label,
          value: item.value,
        });
      });
    }
  }
  /**
   * 数值改变
   */
  function emitChange() {
    let obj: any = [];
    if (dynamicInput.params.length > 0) {
      dynamicInput.params.forEach((item: Params) => {
        obj.push({
          attribute: item.attribute,
          device: item.value,
        });
      });
    }
    emits('change', obj);
    emits('update:value', obj);
  }
  //回显
  const echoDynamicInputFunc = (o) => {
    dynamicInput.params = [];
    dynamicInput.params = o.map((m) => {
      return {
        device: m.name,
        attribute: m.attribute,
        value: m.device,
      };
    });
  };
  defineExpose({
    echoDynamicInputFunc,
  });
</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>