<script setup lang="ts">
import { DRAWER_SIZE, LABEL_WIDTH } from "../../../constants/ui";

const visible = defineModel<boolean>({ required: true });
const meetingForm = defineModel<any>("meetingForm", { required: true });
const meetingFormTimeRange = defineModel<string[]>("meetingFormTimeRange", { required: true });

defineProps<{
  meetingCategoryOptions: any[];
}>();

const emit = defineEmits<{
  save: [];
}>();

import { ref } from "vue";
import type { FormInstance, FormRules } from "element-plus";

const formRef = ref<FormInstance>();
const formRules = ref<FormRules>({
  topic: [{ required: true, message: "请输入会议主题", trigger: "blur" }],
  meetingCategory: [{ required: true, message: "请选择会议类别", trigger: "change" }],
  meetingForm: [{ required: true, message: "请选择会议形式", trigger: "change" }],
});

const handleSave = async () => {
  if (!formRef.value) return;
  const valid = await formRef.value.validate().catch(() => false);
  if (!valid) return;
  emit("save");
};
</script>

<template>
  <el-drawer v-model="visible" title="编辑会议" :size="DRAWER_SIZE.xl" destroy-on-close>
    <el-form ref="formRef" :model="meetingForm" label-position="left" :label-width="LABEL_WIDTH.md" :rules="formRules">
      <el-form-item prop="projectName" label="项目名称">
        <span>{{ meetingForm.projectName || "-" }}</span>
      </el-form-item>
      <el-form-item label="项目周期">
        <span>{{ meetingForm.projectStartDate && meetingForm.projectEndDate ? `${meetingForm.projectStartDate} 至 ${meetingForm.projectEndDate}` : "-" }}</span>
      </el-form-item>
      <el-form-item prop="topic" label="会议主题">
        <el-input v-model="meetingForm.topic" />
      </el-form-item>
      <el-form-item prop="meetingCategory" label="会议类别">
        <el-select v-model="meetingForm.meetingCategory" clearable filterable placeholder="请选择会议类别" class="w-input-md">
          <el-option v-for="item in meetingCategoryOptions" :key="item.dictCode" :label="item.dictName" :value="item.dictCode" />
        </el-select>
      </el-form-item>
      <el-form-item prop="meetingForm" label="会议形式">
        <el-select v-model="meetingForm.meetingForm" class="w-input-md">
          <el-option label="线上" value="线上" />
          <el-option label="线下" value="线下" />
          <el-option label="线上+线下" value="线上+线下" />
        </el-select>
      </el-form-item>
      <el-form-item label="会议地点">
        <el-input v-model="meetingForm.location" :placeholder="'\u8bf7\u8f93\u5165\u4f1a\u8bae\u5730\u70b9'" />
      </el-form-item>
      <el-form-item label="会议时间">
        <el-date-picker
          placement="bottom"
          v-model="meetingFormTimeRange"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          value-format="YYYY-MM-DD HH:mm:ss"
        />
      </el-form-item>
      <el-form-item label="预算(元)">
        <el-input-number v-model="meetingForm.budgetYuan" :min="0.01" :step="0.01" :precision="2" />
      </el-form-item>
      <el-form-item label="劳务占比">
        <el-input-number v-model="meetingForm.laborRatio" :min="0" :max="1" :step="0.01" />
      </el-form-item>
      <el-form-item label="餐费占比">
        <el-input-number v-model="meetingForm.cateringRatio" :min="0" :max="1" :step="0.01" />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="handleSave">保存</el-button>
    </template>
  </el-drawer>
</template>
