<template>
  <div
    v-for="(param, index) in dynamicInput.params"
    :key="index"
    style="display: flex; margin-top: 0.25vh"
  >
    <a-input
      :disabled="true"
      placeholder="设备"
      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">
  import { defineComponent, 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';

  interface Params {
    [x: string]: string;
    attribute: string;
    device: string;
  }

  export default defineComponent({
    name: 'JAddInput',
    components: {
      Select,
    },
    //--------------不继承Antd Design Vue Input的所有属性 否则控制台报大片警告--------------
    inheritAttrs: false,
    props: {
      value: propTypes.array.def([]),
      orgId: propTypes.string.def(''),
      isEdit: propTypes.bool.def(false),
    },
    emits: ['change', 'update:value', 'dynamicReduceHeight', 'dynamicAddHeight'],
    setup(props, { emit }) {
      const selectOptions = ref<SelectTypes['options']>([]);
      //input动态数据
      const dynamicInput: UnwrapRef<{ params: Params[] }> = reactive({ params: [] });
      //监听传入数据value
      watchEffect(() => {
        initVal();
      });
      /**
       * 初始化数值
       */
      async function initVal() {
        dynamicInput.params = [];
        if (props.isEdit) {
          console.log('edit');
          let jsonObj = props.value;
          let deviceIdArr: any = [];
          jsonObj.forEach((item: Params) => {
            dynamicInput.params.push({
              attribute: item.attribute,
              device: item.name,
              value: item.device,
            });
            deviceIdArr.push(item.device);
          });
          if (deviceIdArr.length > 0) {
            const res = await getAttribute(props.orgId, deviceIdArr.join(','));
            selectOptions.value = res.map((o) => {
              return {
                label: o,
                value: o,
              };
            });
          }
        } else {
          console.log('add');
          if (props.value && props.orgId) {
            const res = await getAttribute(props.orgId, props.value.join(','));
            selectOptions.value = res.map((o) => {
              return {
                label: o,
                value: o,
              };
            });
            const { items } = await screenLinkPageByDeptIdGetDevice({
              organizationId: props.orgId,
            });
            const options = items.map((item) => {
              return {
                label: item.name,
                value: item.tbDeviceId,
              };
            });
            const temp: any = [];
            options.forEach((f) => {
              props.value.forEach((f1) => {
                if (f1 == f.value) {
                  temp.push({
                    label: f.label,
                    value: f.value,
                  });
                }
              });
            });
            let jsonObj = temp;
            jsonObj.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,
            });
          });
        }
        emit('change', obj);
        emit('update:value', obj);
      }
      return {
        dynamicInput,
        emitChange,
        selectOptions,
      };
    },
  });
</script>
<style scoped>
  .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>