<template>
    <el-drawer
        v-model="visible"
        title="创建处方单"
        size="90%"
        :close-on-click-modal="false"
        @close="handleClose"
    >
        <el-form
            ref="formRef"
            :model="formData"
            :rules="rules"
            label-width="120px"
            class="prescription-form"
        >
            <el-form-item label="处方名称" prop="prescription_name">
                <el-input
                    v-model="formData.prescription_name"
                    placeholder="请输入处方名称"
                    maxlength="100"
                    show-word-limit
                />
            </el-form-item>
            
            <el-form-item label="处方类型" prop="prescription_type">
                <el-select v-model="formData.prescription_type" placeholder="请选择处方类型" class="w-full">
                    <el-option label="浓缩水丸" value="浓缩水丸" />
                    <el-option label="饮片" value="饮片" />
                    <el-option label="颗粒" value="颗粒" />
                    <el-option label="丸剂" value="丸剂" />
                    <el-option label="散剂" value="散剂" />
                    <el-option label="膏方" value="膏方" />
                    <el-option label="汤剂" value="汤剂" />
                </el-select>
            </el-form-item>
            
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="患者姓名" prop="patient_name">
                        <el-input v-model="formData.patient_name" placeholder="请输入患者姓名" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="门诊号" prop="visit_no">
                        <el-input v-model="formData.visit_no" placeholder="自动生成或手动输入" />
                    </el-form-item>
                </el-col>
            </el-row>
            
            <el-row :gutter="20">
                <el-col :span="8">
                    <el-form-item label="性别" prop="gender">
                        <el-radio-group v-model="formData.gender">
                            <el-radio :label="1">男</el-radio>
                            <el-radio :label="0">女</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="年龄" prop="age">
                        <el-input-number
                            v-model="formData.age"
                            :min="0"
                            :max="150"
                            placeholder="请输入年龄"
                            class="w-full"
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="处方日期" prop="prescription_date">
                        <el-date-picker
                            v-model="formData.prescription_date"
                            type="date"
                            placeholder="选择日期"
                            format="YYYY-MM-DD"
                            value-format="YYYY-MM-DD"
                            class="w-full"
                        />
                    </el-form-item>
                </el-col>
            </el-row>
            
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="面象" prop="tongue">
                        <el-input v-model="formData.tongue" placeholder="请输入面象" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="舌象" prop="tongue_image">
                        <el-input v-model="formData.tongue_image" placeholder="请输入舌象" />
                    </el-form-item>
                </el-col>
            </el-row>
            
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="脉象" prop="pulse">
                        <el-input v-model="formData.pulse" placeholder="请输入脉象" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="脉象详情" prop="pulse_condition">
                        <el-input v-model="formData.pulse_condition" placeholder="请输入脉象详情" />
                    </el-form-item>
                </el-col>
            </el-row>
            
            <el-form-item label="临床诊断" prop="clinical_diagnosis">
                <el-input
                    v-model="formData.clinical_diagnosis"
                    type="textarea"
                    :rows="3"
                    placeholder="请输入临床诊断"
                    maxlength="500"
                    show-word-limit
                />
            </el-form-item>
            
            <el-form-item label="药材配方" prop="herbs" required>
                <div class="w-full">
                    <el-button
                        type="primary"
                        size="small"
                        @click="addHerb"
                    >
                        添加药材
                    </el-button>
                    <el-table :data="formData.herbs" class="mt-2" border>
                        <el-table-column label="序号" type="index" width="60" />
                        <el-table-column label="药材名称" min-width="150">
                            <template #default="{ row }">
                                <el-input
                                    v-model="row.name"
                                    placeholder="请输入药材名称"
                                />
                            </template>
                        </el-table-column>
                        <el-table-column label="剂量(克)" min-width="120">
                            <template #default="{ row }">
                                <el-input-number
                                    v-model="row.dosage"
                                    :min="0"
                                    :precision="1"
                                    :step="0.5"
                                    placeholder="剂量"
                                    class="w-full"
                                />
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" width="80">
                            <template #default="{ $index }">
                                <el-button
                                    type="danger"
                                    link
                                    @click="removeHerb($index)"
                                >
                                    删除
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </el-form-item>
            
            <el-row :gutter="20">
                <el-col :span="8">
                    <el-form-item label="剂数" prop="dose_count">
                        <el-input-number
                            v-model="formData.dose_count"
                            :min="1"
                            placeholder="剂数"
                            class="w-full"
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="剂量单位" prop="dose_unit">
                        <el-select v-model="formData.dose_unit" placeholder="请选择" class="w-full">
                            <el-option label="剂" value="剂" />
                            <el-option label="丸" value="丸" />
                            <el-option label="袋" value="袋" />
                            <el-option label="盒" value="盒" />
                            <el-option label="瓶" value="瓶" />
                            <el-option label="膏" value="膏" />
                            <el-option label="贴" value="贴" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="服用天数" prop="usage_days">
                        <el-input-number
                            v-model="formData.usage_days"
                            :min="1"
                            :max="365"
                            placeholder="服用天数"
                            class="w-full"
                        />
                    </el-form-item>
                </el-col>
            </el-row>
            
            <el-form-item label="用法" prop="usage_instruction">
                <el-input
                    v-model="formData.usage_instruction"
                    placeholder="例如：水煎服，一日二次"
                    maxlength="200"
                    show-word-limit
                />
            </el-form-item>
            
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="服用时间" prop="usage_time">
                        <el-select v-model="formData.usage_time" placeholder="请选择服用时间" class="w-full">
                            <el-option label="饭前" value="饭前" />
                            <el-option label="饭后" value="饭后" />
                            <el-option label="饭中" value="饭中" />
                            <el-option label="空腹" value="空腹" />
                            <el-option label="睡前" value="睡前" />
                            <el-option label="晨起" value="晨起" />
                            <el-option label="随时" value="随时" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="服用方式" prop="usage_way">
                        <el-select v-model="formData.usage_way" placeholder="请选择服用方式" class="w-full">
                            <el-option label="温水送服" value="温水送服" />
                            <el-option label="开水冲服" value="开水冲服" />
                            <el-option label="黄酒送服" value="黄酒送服" />
                            <el-option label="淡盐水送服" value="淡盐水送服" />
                            <el-option label="米汤送服" value="米汤送服" />
                            <el-option label="嚼服" value="嚼服" />
                            <el-option label="含化" value="含化" />
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            
            <el-form-item label="忌口" prop="dietary_taboo">
                <el-select 
                    v-model="formData.dietary_taboo" 
                    multiple 
                    placeholder="请选择忌口内容（可多选）" 
                    class="w-full"
                >
                    <el-option label="辛辣食物" value="辛辣食物" />
                    <el-option label="生冷食物" value="生冷食物" />
                    <el-option label="油腻食物" value="油腻食物" />
                    <el-option label="海鲜" value="海鲜" />
                    <el-option label="牛羊肉" value="牛羊肉" />
                    <el-option label="鸡蛋" value="鸡蛋" />
                    <el-option label="豆制品" value="豆制品" />
                    <el-option label="酒类" value="酒类" />
                    <el-option label="浓茶" value="浓茶" />
                    <el-option label="咖啡" value="咖啡" />
                    <el-option label="烟草" value="烟草" />
                    <el-option label="萝卜" value="萝卜" />
                </el-select>
            </el-form-item>
            
            <el-form-item label="其他说明" prop="usage_notes">
                <el-input
                    v-model="formData.usage_notes"
                    type="textarea"
                    :rows="2"
                    placeholder="其他服用注意事项"
                    maxlength="200"
                    show-word-limit
                />
            </el-form-item>
            
            <el-form-item label="医师姓名" prop="doctor_name">
                <el-input v-model="formData.doctor_name" placeholder="请输入医师姓名" />
            </el-form-item>
            
            <el-form-item label="是否共享" prop="is_shared">
                <el-switch
                    v-model="formData.is_shared"
                    :active-value="1"
                    :inactive-value="0"
                    active-text="所有人可见"
                    inactive-text="仅自己可见"
                />
                <div class="text-xs text-gray-400 mt-1">
                    勾选后，所有医生都可以查看和使用此处方模板
                </div>
            </el-form-item>
        </el-form>

        <template #footer>
            <el-button @click="handleClose">取消</el-button>
            <el-button type="primary" @click="handleSave" :loading="submitLoading">保存</el-button>
        </template>
    </el-drawer>
</template>

<script setup lang="ts">
import { prescriptionAdd } from '@/api/tcm'
import feedback from '@/utils/feedback'
import type { FormInstance, FormRules } from 'element-plus'

const emit = defineEmits(['success'])

const visible = ref(false)
const formRef = ref<FormInstance>()
const submitLoading = ref(false)

const formData = reactive({
    appointment_id: 0,
    diagnosis_id: 0,
    prescription_name: '',
    prescription_type: '浓缩水丸',
    patient_name: '',
    gender: 1,
    age: 0,
    visit_no: '',
    prescription_date: '',
    tongue: '',
    tongue_image: '',
    pulse: '',
    pulse_condition: '',
    clinical_diagnosis: '',
    herbs: [] as Array<{ name: string; dosage: number }>,
    dose_count: 7,
    dose_unit: '剂',
    usage_days: 7,
    usage_instruction: '水煎服，一日二次',
    usage_time: '饭前',
    usage_way: '温水送服',
    dietary_taboo: [] as string[],
    usage_notes: '',
    doctor_name: '',
    is_shared: 0
})

// 表单验证规则
const rules: FormRules = {
    prescription_name: [
        { required: true, message: '请输入处方名称', trigger: 'blur' }
    ],
    patient_name: [
        { required: true, message: '请输入患者姓名', trigger: 'blur' }
    ],
    gender: [
        { required: true, message: '请选择性别', trigger: 'change' }
    ],
    prescription_date: [
        { required: true, message: '请选择处方日期', trigger: 'change' }
    ],
    clinical_diagnosis: [
        { required: true, message: '请输入临床诊断', trigger: 'blur' }
    ],
    dose_count: [
        { required: true, message: '请输入剂数', trigger: 'blur' }
    ],
    doctor_name: [
        { required: true, message: '请输入医师姓名', trigger: 'blur' }
    ]
}

// 添加药材
const addHerb = () => {
    formData.herbs.push({
        name: '',
        dosage: 0
    })
}

// 删除药材
const removeHerb = (index: number) => {
    formData.herbs.splice(index, 1)
}

// 重置表单
const resetForm = () => {
    formData.appointment_id = 0
    formData.diagnosis_id = 0
    formData.prescription_name = ''
    formData.prescription_type = '浓缩水丸'
    formData.patient_name = ''
    formData.gender = 1
    formData.age = 0
    formData.visit_no = ''
    formData.prescription_date = new Date().toISOString().split('T')[0]
    formData.tongue = ''
    formData.tongue_image = ''
    formData.pulse = ''
    formData.pulse_condition = ''
    formData.clinical_diagnosis = ''
    formData.herbs = []
    formData.dose_count = 7
    formData.dose_unit = '剂'
    formData.usage_days = 7
    formData.usage_instruction = '水煎服，一日二次'
    formData.usage_time = '饭前'
    formData.usage_way = '温水送服'
    formData.dietary_taboo = []
    formData.usage_notes = ''
    formData.doctor_name = ''
    formData.is_shared = 0
}

// 打开抽屉
const open = (data: any) => {
    resetForm()
    
    formData.appointment_id = data.id || 0
    formData.diagnosis_id = data.diagnosis_id || 0
    formData.patient_name = data.patient_name || ''
    formData.gender = data.patient_gender === '男' ? 1 : 0
    formData.age = parseInt(data.patient_age) || 0
    formData.visit_no = data.id?.toString() || ''
    formData.prescription_date = data.appointment_date || new Date().toISOString().split('T')[0]
    formData.doctor_name = data.doctor_name || ''
    
    visible.value = true
}

// 关闭抽屉
const handleClose = () => {
    visible.value = false
    formRef.value?.resetFields()
}

// 保存处方单
const handleSave = async () => {
    if (!formRef.value) return
    
    await formRef.value.validate()
    
    // 验证药材
    if (!formData.herbs || formData.herbs.length === 0) {
        feedback.msgError('请至少添加一味药材')
        return
    }
    
    for (let i = 0; i < formData.herbs.length; i++) {
        const herb = formData.herbs[i]
        if (!herb.name || !herb.name.trim()) {
            feedback.msgError(`第${i + 1}味药材名称不能为空`)
            return
        }
        if (!herb.dosage || herb.dosage <= 0) {
            feedback.msgError(`第${i + 1}味药材剂量必须大于0`)
            return
        }
    }
    
    submitLoading.value = true
    
    try {
        await prescriptionAdd(formData)
        feedback.msgSuccess('处方单创建成功')
        handleClose()
        emit('success')
    } catch (error) {
        console.error(error)
    } finally {
        submitLoading.value = false
    }
}

defineExpose({
    open
})
</script>

<style scoped lang="scss">
.prescription-form {
    padding: 0 20px;
    
    .w-full {
        width: 100%;
    }
    
    .mt-1 {
        margin-top: 4px;
    }
    
    .mt-2 {
        margin-top: 8px;
    }
    
    .text-xs {
        font-size: 12px;
    }
    
    .text-gray-400 {
        color: #909399;
    }
}
</style>
