<template>
  <div>
    <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
      <Row>
        <i-col span="15" offset="2">
          <FormItem label="活动名称" prop="activityName">
            <div>{{formValidate.activityName}}</div>
          </FormItem>
          <div class="dateClass">
            <Form-item label="活动时间" prop="activityStartDate">
              <Date-picker :value="formValidate.activityStartDate" format="yyyy-MM-dd" placeholder="请选择开始日期" style="width: 200px"></Date-picker>
            </Form-item>
            <div class="text">至</div>
            <Form-item label="" prop="activityEndDate">
              <Date-picker :value="formValidate.activityEndDate" format="yyyy-MM-dd" placeholder="请选择结束日期" style="width: 200px"></Date-picker>
            </Form-item>
          </div>
          <FormItem label="活动类型" prop="activityStyle">
              <div v-for="(item, index) in formValidate.activityStyle" :key="index">
                <i-input disabled type="text" v-model="item.tips" placeholder=""></i-input>
              </div>
          </FormItem>
        </i-col>
      </Row>
    </Form>
  </div>
</template>
<script>
export default {
  name: "useActivityStepOne",
  data() {
		return {
      formValidate: {
        activityName: '红吧',
        activityStartDate: '',
        activityEndDate: '',
        activityStyle: [{
          tips: '11',
        },{
          tips: '11',
        }],
      },
      ruleValidate: {
        activityName: [
          { required: true, message: '活动名称不能为空', trigger: 'blur' }
        ],
        activityStartDate: [
          { required: true, message: '开始时间不能为空', trigger: 'blur' }
        ],
        activityEndDate: [
          { required: true, message: '结束时间不能为空', trigger: 'blur' }
        ],
        activityStyle: [
          { required: true, message: '', trigger: 'blur' }
        ],
      }
		}
  },
	mounted() {
  },
  methods: {
  }
}
</script>

<style  scoped>
.dateClass {
  display: flex;
  justify-content: space-around;
}
.text {
    position: relative;
    left: 100px;
}
</style>