<script setup lang="ts">
import { showSuccessToast } from 'vant';

import { useForm, useWatcher } from 'alova/client';
import { getDecoctionDataMethod, setDecoctionDataMethod } from '@/api/pda.api.ts';
import { type DecoctionModel, fromDecoctionModel } from '@/model/step.model.ts';
import { useStepStore } from '@/stores';

import type { ScanData } from '@/core/hook/useScan.ts';

const emits = defineEmits<{ back: [delta?: number] }>();

const storeStore = useStepStore();
const { dataset } = storeToRefs(storeStore);

const {
  loading: submitting,
  form: model,
  send,
} = useForm(setDecoctionDataMethod, { immediate: false, initialForm: fromDecoctionModel() }).onSuccess(() => {
  showSuccessToast(`操作成功`);
  emits('back');
});

const { data, loading } = useWatcher(() => getDecoctionDataMethod(dataset.value!.id), [dataset], { immediate: true, initialData: {} })
  .onSuccess(({ data }) => {
    for (const [key, value] of Object.entries(data)) model.value[key as keyof DecoctionModel] = value;
  })
  .onError(({ error: message }) => {
    showDialog({ title: '温馨提示', message, closeOnClickOverlay: true }).then(() => emits('back'));
  });

defineExpose({
  scan(data: ScanData) {
    model.value.deviceCode = data?.code ?? '';
  },
});
</script>

<template>
  <van-toast :show="loading" type="loading" forbid-click />

  <van-cell title="煎药方案" :value="data.schemeName" />
  <van-cell title="压力模式" :value="data.pressurePattern" />
  <van-cell title="剂型" :value="data.dosageForm" />
  <van-cell title="煎煮时间" :value="data.decoctTime ? `${data.decoctTime} min` : ''" />
  <van-cell title="先煎时间" :value="data.preDecoctTime ? `${data.preDecoctTime} min` : ''" />
  <van-cell title="一煎时间" :value="data.firstDecoctTime ? `${data.firstDecoctTime} min` : ''" />
  <van-cell title="二煎时间" :value="data.secondDecoctTime ? `${data.secondDecoctTime} min` : ''" />
  <van-cell title="后下时间" :value="data.backDownTime ? `${data.backDownTime} min` : ''" />

  <van-field class="suffix" v-model="model.startConcentrationDose" :readonly="submitting" type="digit" label="开始浓缩药量" placeholder="请输入开始浓缩药量">
    <template #extra>
      <div v-if="model.startConcentrationDose">ml</div>
    </template>
  </van-field>
  <van-field class="suffix" v-model="model.endConcentrationDose" :readonly="submitting" type="digit" label="结束浓缩药量" placeholder="请输入结束浓缩药量">
    <template #extra>
      <div v-if="model.endConcentrationDose">ml</div>
    </template>
  </van-field>

  <slot name="scanner" title="扫描设备" :disabled="submitting"></slot>
  <slot name="uploader" :disabled="submitting"></slot>

  <van-field v-model="model.decoctNote" :readonly="submitting" rows="2" autosize label="煎煮备注" type="textarea" placeholder="请输入备注内容" />
  <slot name="submit" title="煎煮节点上传" :submitting="submitting" :submit="send"></slot>
</template>

<style scoped lang="scss">
.van-field.suffix {
  :deep(.van-field__value) {
    flex: none;
    //width: min-content;
    //min-width: 120px;
    max-width: 170px;

    input {
      text-align: center;
    }
  }
}
</style>
