<template>
  <el-card shadow="hover">
    <template #header>
      <span>千分位输入演示</span>
    </template>

    <el-form :model="form" label-width="120px" style="max-width: 600px">
      <el-form-item label="金额">
        <ElInputThousandth v-model="form.amount" placeholder="请输入金额" />
      </el-form-item>

      <el-form-item label="价格">
        <ElInputThousandth v-model="form.price" placeholder="请输入价格" />
      </el-form-item>

      <el-form-item label="数量">
        <el-input-number v-model="form.quantity" :min="1" />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="handleSubmit">提交</el-button>
        <el-button @click="handleReset">重置</el-button>
      </el-form-item>
    </el-form>

    <el-divider />

    <el-descriptions title="表单数据" :column="1" border>
      <el-descriptions-item label="金额">{{ form.amount }}</el-descriptions-item>
      <el-descriptions-item label="价格">{{ form.price }}</el-descriptions-item>
      <el-descriptions-item label="数量">{{ form.quantity }}</el-descriptions-item>
    </el-descriptions>
  </el-card>
</template>

<script setup lang="ts">
import { reactive } from 'vue'
import { ElMessage } from 'element-plus'
import ElInputThousandth from '@/components/ElInputThousandth.vue'

const form = reactive({
  amount: undefined as number | undefined,
  price: undefined as number | undefined,
  quantity: 1,
})

const handleSubmit = () => {
  ElMessage.success('提交成功！')
  console.log('form data:', { ...form })
}

const handleReset = () => {
  form.amount = undefined
  form.price = undefined
  form.quantity = 1
}
</script>
