<template>
  <el-dialog
    v-model="dialogVisible"
    :title="title"
    width="500px"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    append-to-body
    destroy-on-close
    draggable
  >
    <el-form
      ref="formRef"
      :model="form"
      :rules="rules"
      label-width="180px"
      @submit.prevent
    >
      <el-form-item label="培养基编号" prop="mediumCode">
        <el-input v-model="form.mediumCode" placeholder="请输入培养基编号" />
      </el-form-item>
      <el-form-item label="培养基名称" prop="mediumName">
        <el-input v-model="form.mediumName" placeholder="请输入培养基名称" />
      </el-form-item>
      <el-form-item label="补料培养基含糖浓度(g/L)" prop="glucoseConc">
        <el-input-number v-model="form.glucoseConc" :min="0" :precision="2" :step="0.1" />
      </el-form-item>
      <el-form-item label="是否含葡萄糖" prop="isGlucose">
        <el-switch v-model="form.isGlucose" />
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-switch v-model="form.status" />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="submitForm">确 定</el-button>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue'
import type { FormInstance } from 'element-plus'
import { ElMessage } from 'element-plus'
import { FeedMediumDto } from '/@/api/admin/data-contracts'
import { ItemDefFeedingMediumApi } from '/@/api/admin/item-def-feeding-medium'
import eventBus from '/@/utils/mitt'

const props = defineProps<{
  title: string
}>()

const dialogVisible = ref(false)
const formRef = ref<FormInstance>()

const form = reactive<Partial<FeedMediumDto>>({
  mediumCode: '',
  mediumName: '',
  glucoseConc: 0,
  isGlucose: true,
  status: true
})

const rules = {
  mediumCode: [{ required: true, message: '请输入培养基编号', trigger: 'blur' }],
  mediumName: [{ required: true, message: '请输入培养基名称', trigger: 'blur' }],
  glucoseConc: [{ required: true, message: '请输入葡萄糖浓度', trigger: 'blur' }],
  isGlucose: [{ required: true, message: '请选择是否含葡萄糖', trigger: 'change' }],
  status: [{ required: true, message: '请选择状态', trigger: 'change' }]
}

const open = (data?: Partial<FeedMediumDto>) => {
  dialogVisible.value = true
  if (data) {
    Object.assign(form, data)
  } else {
    Object.assign(form, {
      mediumCode: '',
      mediumName: '',
      glucoseConc: 0,
      isGlucose: true,
      status: true
    })
  }
}

const submitForm = async () => {
  if (!formRef.value) return
  await formRef.value.validate(async (valid) => {
    if (valid) {
      try {
        if (form.id) {
          await new ItemDefFeedingMediumApi().update(form as FeedMediumDto)
          ElMessage.success('修改成功')
        } else {
          await new ItemDefFeedingMediumApi().add(form as FeedMediumDto)
          ElMessage.success('添加成功')
        }
        dialogVisible.value = false
        eventBus.emit('refreshFeedMedium')
      } catch (error) {
        console.error('提交失败:', error)
        ElMessage.error('提交失败')
      }
    }
  })
}

defineExpose({
  open
})
</script>

<style lang="scss" scoped>
.el-input-number {
  width: 180px;
}
</style>
