<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-row>
        <el-col :span="20">
          <el-form-item label="演练名称" prop="drillName">
            <el-input v-model="form.drillName" placeholder="请输入演练名称" maxlength="30" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="20">
          <el-form-item label="演练单位" prop="drillUnit">
            <el-input v-model="form.drillUnit" placeholder="请输入演练单位" maxlength="30" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="20">
          <el-form-item label="年度" prop="year">
            <el-input v-model="form.year" placeholder="请输入演练年度" maxlength="11" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="20" class="block">
          <el-form-item label="演练时间" prop="drillTime">
            <el-date-picker v-model="form.drillTime" :shortcuts="shortcuts" placeholder="请选择开始时间" maxlength="11" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="20">
          <el-form-item label="演练地点" prop="drillAddress">
            <el-button>地图定位</el-button>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="20">
          <el-form-item label="演练方案" prop="drillProject">
            <el-button>上传</el-button>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="20">
          <el-form-item label="演练视频" prop="drillVideo">
            <el-button>上传</el-button>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="20">
          <el-form-item label="演练图片" prop="drillPicture">
            <el-button>上传</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </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 { DrillForm, DrillVO, DrillQuery } from '@/api/system/user/types';
const userFormRef = ref<ElFormInstance>();
const ids = ref<Array<number | string>>([]);
const drillList = ref<DrillVO[]>();
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 shortcuts = [
  {
    text: '今天',
    value: new Date()
  },
  {
    text: '昨天',
    value: () => {
      const date = new Date();
      date.setDate(date.getDate() - 1);
      return date;
    }
  },
  {
    text: '一周前',
    value: () => {
      const date = new Date();
      date.setDate(date.getDate() - 7);
      return date;
    }
  }
];
const initFormData: DrillForm = {
  drillId: undefined,
  drillName: undefined,
  drillUnit: undefined,
  year: undefined,
  drillTime: undefined,
  drillAddress: undefined,
  drillProject: undefined,
  drillVideo: undefined,
  drillPicture: undefined
};

const initData: PageData<DrillForm, DrillQuery> = {
  form: { ...initFormData },
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    planId: 'YJYA0000000001'
  },
  rules: {
    drillName: [
      { required: true, message: '演练名称不能为空', trigger: 'blur' },
      {
        min: 1,
        message: '演练名称长度必须介于 1 和 20 之间',
        trigger: 'blur'
      }
    ],
    drillUnit: [
      { required: true, message: '演练单位不能为空', trigger: 'blur' },
      {
        min: 1,
        max: 20,
        message: '演练单位长度必须介于 1 和 20 之间',
        trigger: 'blur'
      }
    ],
    year: [{ required: true, message: '演练年度不能为空', trigger: 'blur' }],
    drillTime: [{ required: true, message: '演练时间不能为空', trigger: 'change' }]
  }
};

const data = reactive<PageData<DrillForm, DrillQuery>>(initData);

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

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

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

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

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

  form.value.drillId = undefined;
};

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