<template>
  <div class="quick-submit">
    <el-card shadow="never">
      <template #header>
        <span class="card-title">{{ $t('modal.submit') }}</span>
      </template>

      <el-form
        ref="formRef"
        :model="form"
        :rules="rules"
        label-width="120px"
        style="max-width: 720px"
      >
        <el-form-item :label="$t('label.title')" prop="title">
          <el-input v-model="form.title" :placeholder="$t('placeholder.title')" maxlength="100" show-word-limit />
        </el-form-item>
        <el-form-item :label="$t('label.type')" prop="serviceType">
          <el-select v-model="form.serviceType" :placeholder="$t('placeholder.type')" style="width: 240px">
            <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="$t('label.priority')" prop="priority">
          <el-radio-group v-model="form.priority">
            <el-radio-button label="高">高</el-radio-button>
            <el-radio-button label="中">中</el-radio-button>
            <el-radio-button label="低">低</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item :label="$t('label.dept')">
          <el-input v-model="form.department" :placeholder="$t('placeholder.dept')" />
        </el-form-item>
        <el-form-item :label="$t('label.colorTag')">
          <el-radio-group v-model="form.colorTag">
            <el-radio-button label="">无</el-radio-button>
            <el-radio-button label="red"><span style="color:#F4664A">红</span></el-radio-button>
            <el-radio-button label="yellow"><span style="color:#F6BD16">黄</span></el-radio-button>
            <el-radio-button label="blue"><span style="color:#5B8FF9">蓝</span></el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item :label="$t('label.description')" prop="description">
          <el-input
            v-model="form.description"
            type="textarea"
            :rows="5"
            :placeholder="$t('placeholder.description')"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :loading="submitting" @click="submit">{{ $t('common.submit') }}</el-button>
          <el-button @click="onCancel">{{ $t('common.cancel') }}</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup>
import { reactive, ref } from "vue";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import { useI18n } from "vue-i18n";
import { createHospitalOrder } from "@/service/modular/hospital";

const { t: $t } = useI18n();
const router = useRouter();
const formRef = ref();
const submitting = ref(false);

const form = reactive({
  title: "",
  serviceType: "",
  priority: "中",
  department: "",
  colorTag: "",
  description: "",
});

const rules = {
  title: [{ required: true, message: () => $t('msg.pleaseInputTitle'), trigger: "blur" }],
  serviceType: [{ required: true, message: () => $t('msg.pleaseSelectType'), trigger: "change" }],
  priority: [{ required: true, message: () => $t('msg.pleaseSelectPriority'), trigger: "change" }],
  description: [{ required: true, message: () => $t('msg.pleaseInputDescription'), trigger: "blur" }],
};

const submit = async () => {
  await formRef.value.validate(async (valid) => {
    if (!valid) return;
    submitting.value = true;
    try {
      await createHospitalOrder(form);
      ElMessage.success($t('msg.submitSuccess'));
      router.replace("/hospital/orders");
    } finally {
      submitting.value = false;
    }
  });
};

const onCancel = () => router.back();
</script>

<style scoped lang="scss">
.card-title {
  font-size: 16px;
  font-weight: 600;
}
</style>
