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

import type { TradeEntry } from "../../shared/api/review";
import BaseDialog from "../../shared/components/BaseDialog.vue";

const props = defineProps<{ value: TradeEntry | null; date: string }>();
const emit = defineEmits<{ close: []; save: [value: Omit<TradeEntry, "action_label" | "emotion_label">] }>();
const form = reactive({
  id: 0, trade_date: "", code: "", name: "", action: "buy" as TradeEntry["action"],
  price: 0, quantity: 0, position_pct: null as number | null, pnl_amount: null as number | null,
  pnl_pct: null as number | null, emotion: "calm" as TradeEntry["emotion"], tags: "",
  thesis: "", execution: "",
});
watch(() => [props.value, props.date] as const, () => {
  const row = props.value;
  Object.assign(form, row ? { ...row, tags: row.tags.join("，") } : {
    id: 0, trade_date: props.date, code: "", name: "", action: "buy", price: 0,
    quantity: 0, position_pct: null, pnl_amount: null, pnl_pct: null,
    emotion: "calm", tags: "", thesis: "", execution: "",
  });
}, { immediate: true });
function submit(): void {
  emit("save", {
    id: form.id, trade_date: form.trade_date, code: form.code, name: form.name,
    action: form.action, price: Number(form.price), quantity: Number(form.quantity),
    position_pct: form.position_pct === null ? null : Number(form.position_pct),
    pnl_amount: form.pnl_amount === null ? null : Number(form.pnl_amount),
    pnl_pct: form.pnl_pct === null ? null : Number(form.pnl_pct), emotion: form.emotion,
    tags: form.tags.split(/[，,]/).map((item) => item.trim()).filter(Boolean).slice(0, 8),
    thesis: form.thesis, execution: form.execution,
  });
}
</script>

<template>
  <BaseDialog :title="form.id ? '编辑交易日志' : '交易日志'" wide @close="emit('close')">
    <form class="trade-form" @submit.prevent="submit">
      <div class="trade-form-grid">
        <label class="field"><span class="field-label">交易日</span><input v-model="form.trade_date" class="input" type="date" required /></label>
        <label class="field"><span class="field-label">代码</span><input v-model="form.code" class="input" maxlength="12" required /></label>
        <label class="field"><span class="field-label">名称</span><input v-model="form.name" class="input" maxlength="40" required /></label>
        <label class="field"><span class="field-label">动作</span><select v-model="form.action" class="select"><option value="buy">买入</option><option value="sell">卖出</option><option value="add">加仓</option><option value="trim">减仓</option><option value="watch">观察</option></select></label>
        <label class="field"><span class="field-label">价格（元）</span><input v-model.number="form.price" class="input" type="number" min="0" step="0.01" required /></label>
        <label class="field"><span class="field-label">数量（股）</span><input v-model.number="form.quantity" class="input" type="number" min="0" step="1" /></label>
        <label class="field"><span class="field-label">仓位（%）</span><input v-model.number="form.position_pct" class="input" type="number" min="0" max="100" step="0.1" /></label>
        <label class="field"><span class="field-label">盈亏金额（元）</span><input v-model.number="form.pnl_amount" class="input" type="number" step="0.01" /></label>
        <label class="field"><span class="field-label">盈亏（%）</span><input v-model.number="form.pnl_pct" class="input" type="number" step="0.01" /></label>
        <label class="field"><span class="field-label">情绪</span><select v-model="form.emotion" class="select"><option value="calm">平静</option><option value="confident">笃定</option><option value="hesitant">犹豫</option><option value="anxious">焦虑</option><option value="impulsive">冲动</option></select></label>
        <label class="field trade-wide"><span class="field-label">标签</span><input v-model="form.tags" class="input" maxlength="160" placeholder="回踩确认，计划内" /></label>
        <label class="field trade-wide"><span class="field-label">交易逻辑</span><textarea v-model="form.thesis" class="textarea" maxlength="2000"></textarea></label>
        <label class="field trade-wide"><span class="field-label">执行复核</span><textarea v-model="form.execution" class="textarea" maxlength="2000"></textarea></label>
      </div>
      <div class="form-actions"><button class="btn" type="button" @click="emit('close')">取消</button><button class="btn btn-primary" type="submit">保存</button></div>
    </form>
  </BaseDialog>
</template>
