<script setup>
import { reactive,watch,ref} from 'vue';
import {ElMessage} from "element-plus"
import DatePicker from 'vue-datepicker-next';
import moment from 'moment';
import { Calendar,Clock } from '@element-plus/icons-vue'

import { roadshowInterence } from "@/api/api.js";
import { activityBtnDiaConfig } from '../roleConfig';

const props = defineProps({
  isShow: {
    type: Boolean,
    required: true,
  },
  edit_matter_id: {
    type: Number
  },
  matter_form: {
    type: {}
  },
  matter_date:{
    type: Date,
    default: new Date(),
  }
})
const emits=defineEmits(['update:isShow','ensureCallback'])

const form=reactive({formData: {
  startDate: null,
  startTime: null,
  endDate: null,
  endTime: null,
  matterContent: "",
}})
const formRules={
  startDate: [
    { required: true, message: "请选择开始时间", trigger: "change" },
  ],
  endDate: [
    { required: true, message: "请选择结束时间", trigger: "change" },
  ],
  matterContent: [
    { required: true, message: "请输入事项内容", trigger: "blur" },
  ],
  EditReason:[
      {
          required: true, message: "请输入修改原因", trigger: "blur"
      }
  ]
}

const formRef=ref(null)

watch(()=>props.isShow,(val)=>{
  if(val) {
    const { startDate,startTime,endDate,endTime,matterContent } = props.matter_form;
    form.formData = {
      startDate: startDate || activityBtnDiaConfig.defaultStartTime(props.matter_date),
      startTime: startTime || activityBtnDiaConfig.defaultStartTime(props.matter_date),
      endDate: endDate || activityBtnDiaConfig.defaultEndTime(props.matter_date),
      endTime: endTime || activityBtnDiaConfig.defaultEndTime(props.matter_date),
      matterContent: matterContent || '',
    }
  }
})

// 取消按钮
const cancel=()=>{
  form.formData = {
    startDate: null,
    startTime: null,
    endDate: null,
    endTime: null,
    matterContent: "",
  };
  formRef.value.resetFields();
  emits("update:isShow", false);
}
// 确认按钮
const confirm=async()=>{
  // 校验
  await formRef.value.validate();

  let params = {
    MatterContent: form.formData.matterContent,
    StartDate: moment(form.formData.startDate).format('YYYY-MM-DD'),
    EndDate: moment(form.formData.endDate).format('YYYY-MM-DD'),
    StartTime: moment(form.formData.startTime).format('HH:mm:ss'),
    EndTime: moment(form.formData.endTime).format('HH:mm:ss'),
    StartWeek: moment(form.formData.startDate).format('ddd'),
    EndWeek: moment(form.formData.endDate).format('ddd'),
    EditReason:form.formData.EditReason
  }

  // 发送请求
  const { Ret } = props.edit_matter_id ? await roadshowInterence.editMatters({
    RsMattersId: props.edit_matter_id,
    ...params
  }) :  await roadshowInterence.addRoadshowMatters(params);

  if(Ret !== 200) return;
  ElMessage.success(props.edit_matter_id ? '提交成功' : '添加成功');

  cancel();
  emits('ensureCallback')
}
// 开始时间发生变化
const startTimeChange=(type,value)=>{
  if(type=='date'){
    form.formData.endDate = value
    // 为了确保 修改startTime时，endDate正常显示
    form.formData.startTime=new Date(moment(value).format('YYYY-MM-DD')+' '+moment(form.formData.startTime).format('HH:mm:ss'))
  }else{
    form.formData.endTime=new Date(moment(value).add(1,'hours'))
    // 当选择23点30分时，间隔一个小时，日期到了第二天，由于字段不同，需要赋值给 endDate
    form.formData.endDate=new Date(moment(value).add(1,'hours'))
  }
}

</script>

<template>
  <div class="add-matter-dia">
    <el-dialog
      v-dialogDrag
      :title="props.edit_matter_id ? '修改事项' : '添加事项'"
      :model-value="props.isShow"
      :modal-append-to-body="false"
      @close="cancel"
      width="500px"
    >
      <el-form ref="formRef" :model="form.formData" label-width="82px" :rules="formRules">
        <el-form-item label="开始时间" prop="startDate">
          <el-col :span="12">
            <date-picker
              format="MM.DD(ddd)"
              v-model:value="form.formData.startDate"
              style="width: 100% !important"
              :clearable="false"
              @change="(value)=>startTimeChange('date',value)"
            >
              <template #icon-calendar>
                <el-icon><Calendar /></el-icon>
              </template>
            </date-picker>
          </el-col>
          <el-col :span="12">
            <date-picker
              format="HH:mm"
              type="time"
              :show-second="false"
              v-model:value="form.formData.startTime"
              style="width: 100% !important"
              :clearable="false"
              @change="(value)=>startTimeChange('time',value)"
            >
              <template #icon-calendar>
                <el-icon><Clock /></el-icon>
              </template>
            </date-picker>
          </el-col>
        </el-form-item>
        <el-form-item label="结束时间" prop="endDate">
          <el-col :span="12">
            <date-picker
              format="MM.DD(ddd)"
              v-model:value="form.formData.endDate"
              style="width: 100% !important"
              :clearable="false"
            >
              <template #icon-calendar>
                <el-icon><Calendar /></el-icon>
              </template>
            </date-picker>
          </el-col>
          <el-col :span="12">
            <date-picker
              format="HH:mm"
              type="time"
              :show-second="false"
              v-model:value="form.formData.endTime"
              style="width: 100% !important"
              :clearable="false"
            >
              <template #icon-calendar>
                <el-icon><Clock /></el-icon>
              </template>
            </date-picker>
          </el-col>
        </el-form-item>
        <el-form-item label="事项内容" prop="matterContent">
          <el-input v-model.trim="form.formData.matterContent" clearable placeholder="请输入事项内容"></el-input>
        </el-form-item>
        <el-form-item label="修改原因" prop="EditReason" v-if="props.edit_matter_id">
          <el-input v-model.trim="form.formData.EditReason" clearable placeholder="请输入修改原因"></el-input>
        </el-form-item>
      </el-form>
      <div class="btn-group">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="confirm">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<style lang="scss">
.add-matter-dia {
  .el-form {
    .el-col {
      padding: 0 5px;
    }
    .el-input {
      width: 100%;
    }
  }
  .btn-group {
    margin: 20px 0;
    text-align: center;
    .el-button {
      width: 140px;
    }
  }
}
</style>