<template>
  <div>
    <el-form ref="form" :disabled="!!$route.query.type" :inline="true" :rules="rules" :model="form">
      <el-form-item label="页面标题：" prop="title">
        <el-input v-model="form.title"></el-input>
      </el-form-item>
      <el-form-item label="活动名称：" prop="name">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="人数限制：" prop="max_number">
        <el-input v-model="form.max_number"></el-input>
      </el-form-item>
      <el-form-item label="关联项目：" prop="project_id">
        <el-select v-model="form.project_id" placeholder="请选择">
          <el-option v-for="item in projectMap" :key="item.key" :label="item.value" :value="item.key"> </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="活动开始时间：" prop="activity_time">
        <el-date-picker
          v-model="form.activity_time"
          type="datetime"
          @change="activityDateChange"
          placeholder="选择日期时间"
          :picker-options="pickerOptions"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="报名时间：" prop="time">
        <el-date-picker
          @change="dateChange"
          v-model="form.time"
          type="datetimerange"
          range-separator="至"
          start-placeholder="报名开始日期"
          end-placeholder="报名结束日期"
        >
        </el-date-picker>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  props: {
    form: { type: Object, default: () => {} }
  },
  data() {
    return {
      rules: {
        title: { required: true, message: '请填写页面标题', trigger: 'blur' },
        name: { required: true, message: '请填写活动标题', trigger: 'blur' },
        max_number: [
          { required: true, message: '请填写最大参与人数', trigger: 'blur' },
          {
            trigger: 'blur',
            min: 1,
            message: '最大人数限制不能小于1人',
            validator(rule, value, callback) {
              if (parseInt(Number(value)) && Number(value) >= 1) {
                callback()
              } else {
                callback(new Error('最大人数限制不能小于1人'))
              }
            }
          }
        ],
        project_id: { required: true, message: '请关联项目', trigger: 'change' },
        time: { required: true, message: '请选择时间', trigger: 'change' },
        activity_time: { required: true, message: '请选择时间', trigger: 'change' }
      },
      pickerOptions: {
        disabledDate(v) {
          return v.getTime() < new Date().getTime() - 86400000
        }
      }
    }
  },
  computed: {
    projectMap() {
      return this.$store.state.commonMap.project_map || {}
    }
  },
  mounted() {
    console.log(this.form)
  },
  methods: {
    submitForm() {
      let flag = false
      this.$refs.form.validate(valid => {
        if (valid) {
          flag = true
        }
      })
      return flag
    },
    // 日期改变的时候。吧日期转成后台需要的格式
    dateChange(date) {
      this.form.start_time = this.setDate(date[0])
      this.form.end_time = this.setDate(date[1])
    },
    setDate(val) {
      const d = new Date(val)
      const date = `${d.getFullYear()}-${this.toDo(d.getMonth() + 1)}-${this.toDo(d.getDate())} ${this.toDo(
        d.getHours()
      )}:${this.toDo(d.getMinutes())}:${this.toDo(d.getSeconds())}`
      return date
    },
    toDo(n) {
      return n < 10 ? `0${n}` : n
    },
    activityDateChange() {
      this.form.activity_time = this.setDate(this.form.activity_time)
    }
  }
}
</script>

<style lang="scss" scoped></style>
