<template>
  <Drawer placement="right" :visible="true">
    <template #title>
      <div style="display: flex; justify-content: space-between; align-items: center">
        <span><AIcon type="CloseOutlined" style="margin-right: 5px" @click="onClose" />编辑配置</span>
        <Button type="primary" @click="saveBtn">保存</Button>
      </div>
    </template>
    <Form layout="vertical" ref="formRef" :model="modelRef">
      <template v-for="(item, index) in props.config || []" :key="index">
        <FormItem
          v-for="i in item.properties"
          :name="i.property"
          :key="i.property"
          :required="!!i.type.expands?.required"
          :rules="!!i.type.expands?.required ? [{ required: true, message: `请输入${i.name}` }] : []"
        >
          <template #label>
            <span style="margin-right: 5px">{{ i.name }}</span>
            <Tooltip v-if="i.description" :title="i.description"><AIcon type="QuestionCircleOutlined" /></Tooltip>
          </template>
          <ValueItem
            v-model:modelValue="modelRef[i.property]"
            :itemType="i.type.type"
            :options="
              i.type.type === 'enum'
                ? (i.type?.elements || []).map((item) => {
                    return {
                      label: item?.text,
                      value: item?.value
                    };
                  })
                : undefined
            "
          />
        </FormItem>
      </template>
    </Form>
  </Drawer>
</template>

<script lang="ts" setup>
  import { ref, reactive, toRaw, watchEffect } from 'vue';
  import { modify } from '../../../../../../../api/device/instance';
  import { useInstanceStore } from '@jdlinker/func';
  import { onlyMessage } from '@jdlinker/utils';
  // @ts-ignore
  import { AIcon, Tooltip, Button, FormItem, Form, Drawer } from 'linker-ui-components';
  import { ValueItem } from '@jdlinker/ui';

  const emit = defineEmits(['close', 'save']);
  const formRef = ref();
  const modelRef = reactive({});
  const instanceStore = useInstanceStore();
  const props = defineProps({
    config: {
      type: Array,
      default: []
    }
  });

  watchEffect(() => {
    const obj = instanceStore.current?.configuration;
    if (obj && Object.keys(obj).length) {
      (props?.config || []).map((item: any) => {
        if (Array.isArray(item.properties) && item?.properties.length) {
          item.properties.map((i: any) => {
            modelRef[i.property] = obj[i.property];
          });
        }
      });
    }
  });

  const onClose = () => {
    emit('close');
    formRef.value.resetFields();
  };

  const saveBtn = () => {
    formRef.value.validate().then(async (res) => {
      if (res) {
        const values = toRaw(modelRef);
        const resp = await modify(instanceStore.current?.id || '', {
          id: instanceStore.current?.id,
          configuration: { ...values }
        });
        if (resp.code === 200) {
          onlyMessage('操作成功！');
          emit('save');
        }
      }
    });
  };
</script>
