<script lang="ts">
  export default {
    inheritAttrs: false,
  };
</script>
<script lang="ts" setup>
  import StructFormModel from './StructFormModel.vue';
  import { useModal } from '/@/components/Modal';
  import { PlusOutlined } from '@ant-design/icons-vue';
  import { ModelOfMatterParams } from '/@/api/device/model/modelOfMatterModel';
  import { computed, unref } from 'vue';
  import { buildUUID } from '/@/utils/uuid';
  import { Divider, Button } from 'ant-design-vue';
  import { OpenModalMode, OpenModalParams, StructRecord } from './type';
  import { cloneDeep } from 'lodash-es';

  const emit = defineEmits(['update:value']);

  const props = withDefaults(
    defineProps<{
      value: ModelOfMatterParams[];
      disabled: boolean;
      hasStructForm?: boolean;
    }>(),
    {
      value: () => [],
      hasStructForm: false,
    }
  );

  const getValue = computed<StructRecord[]>(() => {
    const { value } = props;
    return value.map((item) => {
      return {
        ...(item as StructRecord),
        ...((item as StructRecord).id ? {} : { id: buildUUID() }),
      };
    });
  });

  const [registerModal, { openModal }] = useModal();

  const handleCreateParams = () => {
    openModal(true, {
      mode: OpenModalMode.CREATE,
    } as OpenModalParams);
  };

  const handleUpdate = (value: StructRecord) => {
    openModal(true, {
      mode: OpenModalMode.UPDATE,
      record: value,
    } as OpenModalParams);
  };

  const handleDelete = (value: StructRecord) => {
    const index = unref(getValue).findIndex((item) => item.id === value.id);
    const _value = cloneDeep(unref(getValue));
    _value.splice(index, 1);
    emit('update:value', _value);
  };

  const handleSaveStruct = (mode: OpenModalMode, value: StructRecord) => {
    const _value = cloneDeep(unref(getValue));

    if (mode === OpenModalMode.UPDATE) {
      const index = unref(getValue).findIndex((item) => item.id === value.id);
      ~index && _value.splice(index, 1, value);
    } else {
      _value.push(value);
    }

    emit('update:value', _value);
  };
</script>

<template>
  <section>
    <div class="text-blue-500 cursor-pointer">
      <section>
        <div
          class="flex bg-blue-50 mb-2 p-2 text-gray-500 justify-between items-center"
          v-for="item in getValue"
          :key="item.id"
        >
          <div>参数名称: {{ item.functionName }}</div>
          <div class="flex">
            <Button class="!p-0" type="link" @click="handleUpdate(item)">
              <span>{{ $props.disabled ? '查看' : '编辑' }}</span>
            </Button>
            <Divider type="vertical" />
            <Button
              :disabled="$props.disabled"
              class="!p-0"
              type="link"
              @click="handleDelete(item)"
            >
              <span>删除</span>
            </Button>
          </div>
        </div>
      </section>
      <div :class="$props.disabled && 'text-gray-400'">
        <span class="mr-2">
          <PlusOutlined />
        </span>
        <span @click="!$props.disabled && handleCreateParams()">增加参数</span>
      </div>
    </div>
    <StructFormModel
      :has-struct-form="$props.hasStructForm!"
      :disabled="$props.disabled"
      :value-list="getValue"
      @register="registerModal"
      @submit="handleSaveStruct"
    />
  </section>
</template>

<style lang="less" scoped></style>
