<!--
 * @Descripttion: 当前组件信息
 * @version: 1.0.0
 * @Author: 无尘
 * @Date: 2019-11-18 10:37:02
 * @LastEditors: 无尘
 * @LastEditTime: 2019-11-18 17:11:30
 -->
<!--
<poster-config @submitBack="submitBack" @submitNext="submitNext"></poster-config>

import posterConfig from '@/components/active-config/poster-config.vue';
-->
<template>
  <div class="poster-config-content">
    <div class="config-title font-14 color-303133">分享海报配置</div>
    <el-form
      label-width="114px"
      :model="activeInfoData"
      ref="posterForm"
      :rules="rules"
    >
      <el-form-item
        label="活动名称："
        prop="activeName"
      >
        <limitInput
          :inputWidth="350"
          :disflag="$route.query.interfaceId ? true : false"
          :inputValue.sync="activeInfoData.activeName"
          :holder="'请输入活动名称'"
          :getByType="'word'"
          :maxLength="30"
        > </limitInput>
      </el-form-item>
      <el-form-item
        label="活动有效期："
        prop="dateRange"
      >
        <el-date-picker
          class="m-l-10"
          prefix-icon="el-icon-time"
          v-model="activeInfoData.dateRange"
          @change="changeDate"
          :editable="false"
          :value-format="'yyyy-MM-dd'"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        > </el-date-picker>
      </el-form-item>
      <el-form-item class="m-t-50">
        <el-button
          type="primary"
          @click="submitBack"
        >上一步</el-button>
        <el-button
          type="primary"
          @click="submitForm('posterForm')"
        >下一步</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import limitInput from '@/components/limit-input.vue';

export default {
  name: 'poster-config',
  props: {

  },
  components: {
    limitInput
  },
  data() {
    return {
      activeInfoData: {
        activeName: '',
        dateRange: []
      },
      rules: {
        activeName: [{ required: true, message: '请输入活动名称', trigger: 'blur' }],
        dateRange: [{ required: true, message: '请选择活动有效期', trigger: 'blur' }]
      }
    }
  },
  methods: {
    /**
     * 日期
     */
    changeDate(e) {
      const that = this;
      if (!e) {
        that.activeInfoData.dateRange = [];
      }
    },
    /**
     * 上一步
     */
    submitBack() {
      const that = this;
      that.$emit('submitBack');
    },
    /**
     * 下一步
     */
    submitForm(formName) {
      const that = this;
      that.$refs[formName].validate(valid => {
        if (valid) {
          that.$emit('submitNext', that.activeInfoData);
          that.$store.dispatch('savePosterInfo', that.activeInfoData);
        } else {
          return false;
        }
      });
    }
  },
}
</script>
<style lang="less" scoped>
.poster-config-content {
  padding: 48px 0 0 0;
  .config-title {
    font-weight: 600;
    margin-bottom: 30px;
  }
  .m-t-50 {
    margin-top: 50px;
  }
  .el-form-item {
    /deep/ .el-form-item__label {
      color: #606266;
    }
  }
}
</style>
