<script lang="ts" setup>

import { Descriptions, Empty, message } from 'ant-design-vue';



import { updateProcess } from '#/views/system/process/api';



import {

  CALC_METHOD_MAP,

  CALC_METHOD_OPTIONS,

  UNIT_OPTIONS,

} from '../constants';

import type { ProcessRuleRow } from '../constants';

import InlineFieldEditor from './inline-field-editor.vue';

import ConfigSectionHeader from '#/views/system/shared/config-section-header.vue';



const props = defineProps<{

  method: ProcessRuleRow | null | undefined;

}>();



const emit = defineEmits<{

  updated: [patch: Partial<ProcessRuleRow>];

}>();



async function saveField(payload: Record<string, unknown>) {

  if (!props.method) {

    return;

  }

  await updateProcess({

    id: props.method.id,

    node_type: 'rule',

    ...payload,

  });

  emit('updated', payload as Partial<ProcessRuleRow>);

  message.success('保存成功');

}

</script>



<template>

  <section class="rounded-lg border border-border bg-muted/30 dark:border-gray-700">

    <ConfigSectionHeader class="mb-0 px-4 pt-3" title="煎法配置" />



    <div v-if="method" class="px-4 pb-3 pt-1">

      <Descriptions

        bordered

        :column="3"

        size="small"

        class="process-method-descriptions"

      >

        <Descriptions.Item label="级别">煎法</Descriptions.Item>

        <Descriptions.Item label="名称">

          <InlineFieldEditor

            :value="method.name"

            label="名称"

            placeholder="请输入名称"

            @save="(val) => saveField({ name: val })"

          />

        </Descriptions.Item>

        <Descriptions.Item label="计算方式">

          <InlineFieldEditor

            type="tags"

            :value="method.calc_method"

            label="计算方式"

            :options="[...CALC_METHOD_OPTIONS]"

            :display-formatter="

              (val) => CALC_METHOD_MAP[Number(val)] || String(val ?? '点击设置')

            "

            @save="(val) => saveField({ calc_method: Number(val) })"

          />

        </Descriptions.Item>

        <Descriptions.Item label="计算价格">

          <InlineFieldEditor

            type="number"

            :value="method.price"

            label="计算价格"

            placeholder="请输入价格"

            @save="(val) => saveField({ price: val })"

          />

        </Descriptions.Item>

        <Descriptions.Item label="计算单位" :span="2">

          <InlineFieldEditor

            type="tags"

            :value="method.unit"

            label="计算单位"

            :options="UNIT_OPTIONS.map((u) => ({ label: u, value: u }))"

            @save="(val) => saveField({ unit: val })"

          />

        </Descriptions.Item>

      </Descriptions>

    </div>



    <div v-else class="flex justify-center px-4 py-6">

      <Empty description="请选择上方煎法 Tab" />

    </div>

  </section>

</template>



<style scoped>

.process-method-descriptions :deep(.ant-descriptions-view) {

  border-color: hsl(var(--border));

}



.process-method-descriptions :deep(.ant-descriptions-item-label) {

  color: hsl(var(--muted-foreground));

  background: hsl(var(--muted) / 0.3);

}



.process-method-descriptions :deep(.ant-descriptions-item-content) {

  color: hsl(var(--foreground));

  background: hsl(var(--card));

}

</style>

