<template>
  <div class="add-form">
    <el-form :model="state.form" ref="form" :rules="state.rules" label-width="115px">
      <el-form-item label="工单名称" prop="ticket_name">
        <el-input v-model="state.form.ticket_name" :disabled="isEdit" 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 class="no-el-label" label="" prop="push_method">
        <div style="width: 100%">
          <ManualDistributionForm
            ref="manual_distribution_form"
            :noElLabel="false"
            labelWidth="115px"
            :methodLists="ORDER_METHODS"
            methodLabel="推送方式"
            :history="history" />
        </div>
      </el-form-item>
      <el-form-item label="定时规则" prop="timing_rules">
        <div style="flex: 1">
          <div class="choose-rule">
            <el-select
              v-model="state.form.timing_rules"
              placeholder=""
              clearable
              filterable
              @change="changeTimeRules"
              style="width: 100%">
              <el-option v-for="item in timeRulesOptions" :key="item.id" :label="item.name" :value="item.id">
              </el-option>
            </el-select>
          </div>
        </div>
      </el-form-item>
      <el-form-item class="no-el-label" label="" prop="" v-if="state.form.timing_rules != 1">
        <div style="width: 100%">
          <component ref="rule_ref" :is="coms[state.form.timing_rules]" :rules="rules"></component>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { computed, onMounted, reactive, ref, shallowReactive, defineExpose, watch } from "vue";
import ManualDistributionForm from "@/components/manual-distribution/form.vue";
import customTime from "./custom-time.vue";
import byWeek from "./by-week.vue";
import { ORDER_METHODS } from "@/components/manual-distribution/env.js";
const manual_distribution_form = ref(null);
const coms = shallowReactive({
  2: byWeek,
  3: customTime,
});
const timeRulesOptions = ref([
  {
    id: 1,
    name: "手动下发",
  },
  {
    id: 2,
    name: "按周",
  },
  {
    id: 3,
    name: "自定义时间",
  },
]);
const TICKET_LEVEL_OPTIONS = [
  {
    id: 1,
    name: "紧急任务",
  },
  {
    id: 2,
    name: "重要任务",
  },
  {
    id: 3,
    name: "一般任务",
  },
];
const props = defineProps({
  row: {
    type: Object,
    default: null,
  },
});
const isEdit = computed(() => !!props.row);
const history = computed(() => props.row?.history || null);
const state = reactive({
  form: {
    ticket_name: "",
    ticket_level: "",
    ticket_desc: "",
    timing_rules: 1,
  },
  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,
});
const rules = computed(() => props.row?.rules || null);
watch(
  () => isEdit.value,
  (n) => {
    if (!n) return;
    let { ticket_name, ticket_level, ticket_desc, timing_rules } = props.row;
    state.form.ticket_name = ticket_name;
    state.form.ticket_level = ticket_level;
    state.form.ticket_desc = ticket_desc;
    state.form.timing_rules = timing_rules;
  },
  {
    deep: true,
    immediate: true,
  }
);
const changeTimeRules = () => {};
const rule_ref = ref(null);
const form = ref(null);
const Submit = async () => {
  const manual_distribution_form_valid = await manual_distribution_form.value.Submit();
  const rule_ref_valid = !rule_ref.value ? true : await rule_ref.value.Submit();
  const form_valid = await new Promise((resolve, reject) => {
    form.value.validate((res) => resolve(res));
  });
  if (!form_valid || !rule_ref_valid || !manual_distribution_form_valid) return;
  return {
    ...state.form,
    ...manual_distribution_form.value.form,
    rule_ref: { ...rule_ref.value?.form } || {},
  };
};
defineExpose({
  Submit,
});
</script>

<style lang="scss" scoped>
.add-form {
  width: 100%;
  max-width: 1050px;
  .no-el-label {
    :deep(.el-form-item__content) {
      margin-left: 0 !important;
    }
  }
  :deep(.el-form-item .el-form-item) {
    margin-bottom: 18px;
  }
}
</style>
