<script lang="ts" setup>
import { useElementsInfoStore } from '../../stores/elementsInfo.ts';
import { useSelectedInfoStore } from '../../stores/selectedInfo.ts';

import DrawerExpand from './drawer/drawerExpand.vue';

defineOptions({ name: 'ExpandAttribute' });

const drawerExpandRef = ref<InstanceType<typeof DrawerExpand>>();

const lf: any = inject('lf');

const elementsInfoStore = useElementsInfoStore();
const selectedInfoStore = useSelectedInfoStore();

const elementInfo = computed(() => {
  return elementsInfoStore.getElementById(selectedInfoStore.selectId) || {};
});

const attributeData = ref<any[]>([]);

watch(elementInfo, (val) => {
  attributeData.value = val.properties || [];
}, { immediate: true });

const columns = [{
  title: '序号',
  key: 'index',
  customRender: (obj: { text: string, record: any, index: number }) => `${obj.index + 1}`,
}, {
  title: '属性名',
  dataIndex: 'name',
  key: 'name',
}, {
  title: '属性值',
  dataIndex: 'value',
  key: 'value',
}, {
  title: '操作',
  key: 'action',
}];

// onMounted(() => {
//   if (selectType.value === 'flow') {
//     attributeData.value = flowInfoStore.properties;
//   }
//   else {
//     attributeData.value = nodesInfoStore.getNodeById(selectedInfoStore.selectId)?.properties || [];
//   }
// });

function onAction(type: string, record?: any, index?: number) {
  if (type === 'add') {
    drawerExpandRef.value?.open('add');
  }
  else if (type === 'edit' && record && index !== undefined) {
    drawerExpandRef.value?.open('edit', record, index);
  }
  else if (type === 'delete') {
    if (index !== undefined && index >= 0) {
      attributeData.value.splice(index, 1);
    }
  }
}

function onSubmit(params: any) {
  const index = params.index !== undefined ? params.index : -1;
  if (index < 0) {
    attributeData.value.push({
      name: params.name,
      value: params.value,
    });
  }
  else {
    attributeData.value[index] = {
      name: params.name,
      value: params.value,
    };
  }
}

watch(() => attributeData.value, () => {
  elementsInfoStore.updateElement(selectedInfoStore.selectId, {
    properties: attributeData.value,
  });
  lf.value.setProperties(selectedInfoStore.selectId, {
    properties: attributeData.value,
  });
}, { deep: true });
</script>

<template>
  <div>
    <a-space mb-10px>
      <a-button size="small" type="primary" @click="onAction('add')">
        添加属性
      </a-button>
    </a-space>
    <a-table
      size="small"
      :columns="columns"
      :data-source="attributeData"
      :pagination="false"
      row-key="key"
    >
      <template #bodyCell="{ column, record, index }">
        <template v-if="column.key === 'action'">
          <a-space>
            <a @click="onAction('edit', record, index)">编辑</a>
            <a style="margin-left: 8px;color: red;" @click="onAction('delete', record, index)">删除</a>
          </a-space>
        </template>
      </template>
    </a-table>
    <DrawerExpand ref="drawerExpandRef" @submit="onSubmit" />
  </div>
</template>
