<template>
  <div class="add-matter-dia">
    <el-dialog
      v-dialogDrag
      :title="edit_matter_id ? '修改事项' : '添加事项'"
      :visible.sync="isShow"
      :modal-append-to-body="false"
      @close="cancel"
      width="500px"
    >
      <el-form ref="form" :model="formData" label-width="80px" :rules="formRules">
        <el-form-item label="开始时间" prop="startDate">
          <el-col :span="12">
            <date-picker
              format="MM.DD(ddd)"
              v-model="formData.startDate"
              style="width: 100% !important"
              :clearable="false"
              @change="(value)=>startTimeChange('date',value)"
            >
              <template #icon-calendar>
                <i class="el-icon-date"></i>
              </template>
            </date-picker>
          </el-col>
          <el-col :span="12">
            <date-picker
              format="HH:mm"
              type="time"
              :show-second="false"
              v-model="formData.startTime"
              style="width: 100% !important"
              :clearable="false"
              @change="(value)=>startTimeChange('time',value)"
            >
              <template #icon-calendar>
                <i class="el-icon-time"></i>
              </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="formData.endDate"
              style="width: 100% !important"
              :clearable="false"
            >
              <template #icon-calendar>
                <i class="el-icon-date"></i>
              </template>
            </date-picker>
          </el-col>
          <el-col :span="12">
            <date-picker
              format="HH:mm"
              type="time"
              :show-second="false"
              v-model="formData.endTime"
              style="width: 100% !important"
              :clearable="false"
            >
              <template #icon-calendar>
                <i class="el-icon-time"></i>
              </template>
            </date-picker>
          </el-col>
        </el-form-item>
        <el-form-item label="事项内容" prop="matterContent">
          <el-input v-model.trim="formData.matterContent" clearable placeholder="请输入事项内容"></el-input>
        </el-form-item>
        <!-- <el-form-item label="修改原因" prop="EditReason" v-if="edit_matter_id">
          <el-input v-model.trim="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>

<script>
import { roadshowInterence } from "@/api/api.js";
import { activityBtnDiaConfig } from '../roleConfig';
export default {
  props: {
    isShow: {
      type: Boolean,
      required: true,
    },
    edit_matter_id: {
      type: Number
    },
    matter_form: {
      type: {}
    },
    matter_date:{
      type: Date,
      default: new Date(),
    }
  },
  watch: {
    isShow(val) {
      if(val) {
        const { startDate,startTime,endDate,endTime,matterContent } = this.matter_form;
        this.formData = {
          startDate: startDate || activityBtnDiaConfig.defaultStartTime(this.matter_date),
          startTime: startTime || activityBtnDiaConfig.defaultStartTime(this.matter_date),
          endDate: endDate || activityBtnDiaConfig.defaultEndTime(this.matter_date),
          endTime: endTime || activityBtnDiaConfig.defaultEndTime(this.matter_date),
          matterContent: matterContent || '',
        }
      }
    }
  },
  data() {
    return {
      formData: {
        startDate: null,
        startTime: null,
        endDate: null,
        endTime: null,
        matterContent: "",
      },
      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"
            }
        ]
      }
    };
  },
  methods: {
    // 取消按钮
    cancel() {
      this.formData = {
        startDate: null,
        startTime: null,
        endDate: null,
        endTime: null,
        matterContent: "",
      };
      this.$refs.form.resetFields();
      this.$emit("update:isShow", false);
    },
    // 确认按钮
    async confirm() {
      // 校验
      await this.$refs.form.validate();

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

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

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

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

<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>