<template>
  <el-form
    :model="ruleForm"
    ref="ruleForm"
    label-width="150px"
    class="demo-ruleForm"
  >
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item
          label="活动标题"
          prop="activityTitle"
          :rules="[
            {
              required: true,
              message: '活动标题不能为空',
              trigger: 'blur',
            },
          ]"
        >
          <el-input v-model="ruleForm.activityTitle"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item
          label="活动副标题"
          prop="activitySubTitle"
          label-width="150px"
        >
          <el-input v-model="ruleForm.activitySubTitle"></el-input>
        </el-form-item>
      </el-col>
    </el-row>

    <!-- 第二行 -->
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item
          label="活动开始时间"
          label-width="150px"
          prop="activityStartTime"
          :rules="[
            {
              required: true,
              message: '活动开始时间不能为空',
              trigger: 'blur',
            },
          ]"
        >
          <el-date-picker
            v-model="ruleForm.activityStartTime"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="datetime"
            placeholder="选择开始时间"
            style="width: 100%"
          >
          </el-date-picker>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item
          label="活动结束时间"
          label-width="150px"
          prop="activityEndTime"
          :rules="[
            {
              required: true,
              message: '活动结束时间不能为空',
              trigger: 'blur',
            },
          ]"
        >
          <el-date-picker
            v-model="ruleForm.activityEndTime"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="datetime"
            placeholder="选择结束时间"
            style="width: 100%"
          >
          </el-date-picker>
        </el-form-item>
      </el-col>
    </el-row>

    <!-- 其余部分保留 -->
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item
          label="活动封面图"
          prop="avatarImgUrl"
          label-width="150px"
        >
          <el-input v-model="ruleForm.avatarImgUrl"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="活动简介" prop="activityInfo" label-width="150px">
          <el-input v-model="ruleForm.activityInfo"></el-input>
        </el-form-item>
      </el-col>
    </el-row>

    <!-- 其他代码按原样继续 -->

    <!-- 底部 -->
    <el-col :span="24">
      <el-form-item label="活动详情" prop="activityDetails">
        <el-input type="textarea" v-model="ruleForm.activityDetails"></el-input>
      </el-form-item>
    </el-col>
  </el-form>
</template>
  
  <script>
export default {
  name: "NewActivityForm",
  props: {
    ruleForm: {
      type: Object,
      required: true,
    },
    isPriceDisabled: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    handlePayTypeChange(value) {
      this.$emit("pay-type-change", value); // 触发父组件的事件
    },
  },
};
</script>
  
  <style scoped>
.demo-ruleForm {
  padding: 20px;
}
</style>
  
