<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">
      <FormItem :name="item.relation" :label="item.relationName" v-for="(item, index) in dataSource" :key="index">
        <Select showSearch mode="multiple" v-model:value="modelRef[item.relation]" :placeholder="`请选择${item.relationName}`">
          <SelectOption :value="item.value" v-for="item in userList" :key="item.id">{{ item.name }}</SelectOption>
        </Select>
      </FormItem>
    </Form>
  </Drawer>
</template>

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

  const emit = defineEmits(['close', 'save']);

  const formRef = ref();
  const modelRef = reactive({});
  const userList = ref<Record<string, any>[]>([]);

  const instanceStore = useInstanceStore();

  const dataSource = ref<Record<any, any>[]>([]);

  watchEffect(() => {
    const arr = instanceStore.current?.relations || [];
    dataSource.value = arr as Record<any, any>[];
    arr.map((item) => {
      modelRef[item.relation] = [...(item?.related || []).map((i: any) => JSON.stringify(i))];
    });
  });

  onMounted(() => {
    queryUserListNoPaging().then((resp) => {
      if (resp.code === 200) {
        userList.value = (resp.result as Record<string, any>[]).map((item) => {
          return {
            ...item,
            label: item.name,
            value: JSON.stringify({
              id: item.id,
              name: item.name
            })
          };
        });
      }
    });
  });

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

  const saveBtn = () => {
    formRef.value.validate().then(async () => {
      const values = toRaw(modelRef);
      if (Object.keys(values).length > 0) {
        const param: any[] = [];
        Object.keys(values).forEach((key) => {
          const item = dataSource.value.find((i) => i.relation === key);
          const items = (values[key] || []).map((i: string) => JSON.parse(i));
          if (item) {
            param.push({
              relatedType: 'user',
              relation: item.relation,
              description: '',
              related: [...items]
            });
          }
        });
        if (param.length && instanceStore.current.id) {
          const resp = await saveRelations(instanceStore.current.id, param);
          if (resp.code === 200) {
            onlyMessage('操作成功！');
            emit('save');
            formRef.value.resetFields();
          }
        }
      }
    });
  };
</script>
