<script setup lang="ts">
import { ref, watch } from 'vue';

import { $t } from '@vben/locales';

import {
  ElForm,
  ElFormItem,
  ElInput,
  ElInputNumber,
  ElOption,
  ElSelect,
} from 'element-plus';

import ConfirmModeSelect from '../components/ConfirmModeSelect.vue';
import SmartInput from '../components/SmartInput.vue';

const props = defineProps<{
  data: any;
  nodeId: string;
}>();

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

const form = ref({
  label: $t('ai-platform.workflow.panels.dashboardBasicInfo.label'),
  name: '',
  code: '',
  category: 'dashboard',
  description: '',
  sort: 0,
  require_confirmation: true,
  ...props.data,
});

watch(
  form,
  (newVal) => {
    emit('update', newVal);
  },
  { deep: true },
);

const categoryOptions = [
  {
    label: $t('ai-platform.workflow.panels.dashboardBasicInfo.catDashboard'),
    value: 'dashboard',
  },
  {
    label: $t('ai-platform.workflow.panels.dashboardBasicInfo.catPortal'),
    value: 'portal',
  },
  {
    label: $t('ai-platform.workflow.panels.dashboardBasicInfo.catDataboard'),
    value: 'databoard',
  },
  {
    label: $t('ai-platform.workflow.panels.dashboardBasicInfo.catOther'),
    value: 'other',
  },
];
</script>

<template>
  <div class="space-y-4">
    <ElForm :model="form" label-position="top" size="small">
      <ElFormItem :label="$t('ai-platform.workflow.panels.common.nodeName')">
        <ElInput
          v-model="form.label"
          :placeholder="
            $t('ai-platform.workflow.panels.dashboardBasicInfo.placeholder')
          "
        />
      </ElFormItem>

      <ElFormItem
        :label="
          $t('ai-platform.workflow.panels.dashboardBasicInfo.dashboardName')
        "
        required
      >
        <SmartInput
          v-model="form.name"
          :placeholder="
            $t(
              'ai-platform.workflow.panels.dashboardBasicInfo.dashboardNamePlaceholder',
            )
          "
          :current-node-id="nodeId"
        />
      </ElFormItem>

      <ElFormItem
        :label="
          $t('ai-platform.workflow.panels.dashboardBasicInfo.dashboardCode')
        "
      >
        <SmartInput
          v-model="form.code"
          :placeholder="
            $t(
              'ai-platform.workflow.panels.dashboardBasicInfo.dashboardCodePlaceholder',
            )
          "
          :current-node-id="nodeId"
        />
      </ElFormItem>

      <ElFormItem
        :label="$t('ai-platform.workflow.panels.dashboardBasicInfo.category')"
      >
        <ElSelect
          v-model="form.category"
          class="w-full"
          :placeholder="
            $t(
              'ai-platform.workflow.panels.dashboardBasicInfo.categoryPlaceholder',
            )
          "
        >
          <ElOption
            v-for="opt in categoryOptions"
            :key="opt.value"
            :label="opt.label"
            :value="opt.value"
          />
        </ElSelect>
      </ElFormItem>

      <ElFormItem
        :label="
          $t('ai-platform.workflow.panels.dashboardBasicInfo.description')
        "
      >
        <SmartInput
          v-model="form.description"
          type="textarea"
          :placeholder="
            $t('ai-platform.workflow.panels.dashboardBasicInfo.descPlaceholder')
          "
          :current-node-id="nodeId"
        />
      </ElFormItem>

      <ElFormItem
        :label="$t('ai-platform.workflow.panels.dashboardBasicInfo.sort')"
      >
        <ElInputNumber
          v-model="form.sort"
          :min="0"
          :max="9999"
          class="w-full"
        />
      </ElFormItem>

      <ElFormItem :label="$t('ai-platform.workflow.panels.common.confirmMode')">
        <ConfirmModeSelect
          v-model="form.require_confirmation"
          :current-node-id="nodeId"
        />
      </ElFormItem>
    </ElForm>
  </div>
</template>
