<template>
  <!--添加或修改预案配置-->
  <el-dialog ref="formDialogRef" v-model="visible" :title="title" width="500px" append-to-body @close="closeDialog">
    <el-form ref="userFormRef" :model="form" :rules="rules" label-width="80px">
      <el-form-item label="预案编号" prop="planId">
        <el-input v-model="form.planId" placeholder="请输入预案编号" />
      </el-form-item>
      <el-form-item label="预案名称" prop="planName">
        <el-input v-model="form.planName" placeholder="请输入预案名称" />
      </el-form-item>
      <el-form-item label="预案类型" prop="planType">
        <el-select v-model="form.planType" placeholder="请选择预案类型" maxlength="11">
          <el-option label="总体应急预案" value="1" />
          <el-option label="专项应急预案" value="2" />
          <el-option label="部门应急预案" value="3" />
        </el-select>
      </el-form-item>
      <el-form-item label="发文字号" prop="document">
        <el-input v-model="form.document" placeholder="请输入发文字号" />
      </el-form-item>
      <el-form-item label="编制单位" prop="organUnit">
        <el-input v-model="form.organUnit" placeholder="请输入编制单位" />
      </el-form-item>
      <el-form-item label="发布日期" prop="releaseTime">
        <el-date-picker v-model="form.releaseTime" type="date" placeholder="选择发布日期" value-format="yyyy-MM-dd"></el-date-picker>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel()">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import api from '@/api/system/user';
import { PlanForm, PlanVO, PlanQuery } from '@/api/system/user/types';
//预案
const userFormRef = ref<ElFormInstance>();
const ids = ref<Array<number | string>>([]);
const planList = ref<PlanVO[]>();
const loading = ref(true);
const dateRange = ref<[DateModelType, DateModelType]>(['', '']);
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const emits = defineEmits(['update:modelValue', 'getList']);
const total = ref(0);
import { to } from 'await-to-js';

const props = defineProps({
  modelValue: Boolean,
  id: String
});

watch(
  () => props.modelValue,
  (val) => {
    visible.value = val;
  }
);

let visible = ref(false);
const title = computed(() => {
  return props.id ? '编辑演练' : '新建演练';
});

const initFormData: PlanForm = {
  planId: undefined,
  planName: undefined,
  planType: undefined,
  releaseTime: undefined,
  organUnit: undefined,
  document: undefined
};

const initData: PageData<PlanForm, PlanQuery> = {
  form: { ...initFormData },
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    planName: ''
  },
  rules: {
    planId: [
      { required: true, message: '预案编号不能为空', trigger: 'blur' },
      {
        min: 1,
        message: '预案编号长度必须大于1',
        trigger: 'blur'
      }
    ],
    planName: [
      { required: true, message: '预案名称不能为空', trigger: 'blur' },
      {
        min: 1,
        max: 20,
        message: '预案名称长度必须介于 1 和 20 之间',
        trigger: 'blur'
      }
    ],
    organUnit: [
      { required: true, message: '编制单位不能为空', trigger: 'blur' },
      {
        min: 1,
        max: 20,
        message: '编制单位长度必须介于 1 和 20 之间1',
        trigger: 'blur'
      }
    ],
    planType: [{ required: true, message: '预案类型不能为空', trigger: 'blur' }],
    document: [
      { required: true, message: '发文字号不能为空', trigger: 'blur' },
      {
        min: 1,
        message: '发文字号长度必须大于1',
        trigger: 'blur'
      }
    ],
    releaseTime: [{ required: true, message: '发布时间不能为空', trigger: 'change' }]
  }
};
const data = reactive<PageData<PlanForm, PlanQuery>>(initData);

const { queryParams, form, rules } = toRefs<PageData<PlanForm, PlanQuery>>(data);

const getList = async () => {
  loading.value = true;
  const res = await api.listPlan(proxy?.addDateRange(queryParams.value, dateRange.value));
  loading.value = false;
  planList.value = res.rows;
  total.value = res.total;
};

/** 重置操作表单 */
const reset = () => {
  form.value = { ...initFormData };
  userFormRef.value?.resetFields();
};
/** 取消按钮 */
const cancel = () => {
  emits('update:modelValue', false);
  reset();
};

/**
 * 关闭用户弹窗
 */
const closeDialog = () => {
  emits('update:modelValue', false);
  resetForm();
};

const resetForm = () => {
  userFormRef.value?.resetFields();
  userFormRef.value?.clearValidate();

  form.value.planId = undefined;
};

/**提交按钮 */
const submitForm = () => {
  userFormRef.value?.validate(async (valid: boolean) => {
    if (valid) {
      form.value.planId ? await api.updatePlan(form.value) : await api.addPlan(form.value);
      proxy?.$modal.msgSuccess('操作成功');
      emits('update:modelValue', true);
      emits('getList');
    }
  });
};
</script>
