<template>
  <div class="add-form">
    <el-form :model="state.form" ref="form" :rules="state.rules" label-width="80px">
      <el-form-item label="工单名称" prop="ticket_name">
        <el-input v-model="state.form.ticket_name" placeholder="请输入工单名称"></el-input>
      </el-form-item>
      <el-form-item label="工单等级" prop="ticket_level">
        <el-select v-model="state.form.ticket_level" placeholder="请选择工单等级" clearable filterable style="flex: 1">
          <el-option v-for="item in state.ticketLevelOptions" :key="item.id" :label="item.name" :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="工单描述" prop="ticket_desc">
        <el-input type="textarea" :rows="5" v-model="state.form.ticket_desc" placeholder="请输入工单描述"></el-input>
      </el-form-item>
      <el-form-item label="推送方式" prop="push_method">
        <div style="flex: 1">
          <ManualDistributionForm ref="manual_distribution_form" />
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { computed, reactive, ref } from "vue";
import ManualDistributionForm from "@/components/manual-distribution/form.vue";
const manual_distribution_form = ref(null);
const TICKET_LEVEL_OPTIONS = [
  {
    id: 1,
    name: "紧急任务",
  },
  {
    id: 2,
    name: "重要任务",
  },
  {
    id: 3,
    name: "一般任务",
  },
];
const props = defineProps({
  defaultValue: {
    type: Object,
    default: null,
  },
});
const isEdit = computed(() => !!props.defaultValue);
console.log("isEdit: ", isEdit);
const state = reactive({
  form: {
    ticket_name: "",
    ticket_level: "",
    ticket_desc: "",
  },
  rules: {
    ticket_name: [{ required: true, message: "请输入工单名称", trigger: "blur" }],
    ticket_level: [{ required: true, message: "请选择工单等级", trigger: "change" }],
    ticket_desc: [{ required: true, message: "请输入工单描述", trigger: "blur" }],
  },
  ticketLevelOptions: TICKET_LEVEL_OPTIONS,
});
</script>

<style lang="scss" scoped>
.add-form {
  width: 100%;
  max-width: 1050px;
}
</style>
