<template>
  <div class="container">
    <!-- 步骤 -->
    <el-row :gutter="20">
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <el-steps :active="active">
          <el-step title="填写信息" icon="el-icon-edit"></el-step>
          <el-step title="页面预览" icon="el-icon-thumb"></el-step>
          <el-step title="完成发布" icon="el-icon-s-promotion"></el-step>
        </el-steps>
      </el-col>
    </el-row>
    <edit ref="edit" class="marginTop" @next="handleNext" v-if="active == 1"></edit>
    <templates ref="templates" class="marginTop" @next="handleNext" v-if="active == 2"></templates>
    <complete ref="complete" class="marginTop" @next="handleNext" v-if="active == 3"></complete>
  </div>
</template>

<script>
import Complete from './components/complete'
import Edit from './components/edit'
import Templates from './components/template'
export default {
  name: 'Form',
  components: { Templates, Edit, Complete },
  data() {
    return {
      active: 1,
      form: {
        couponNum: 1,
      },
      rules: {
        name: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          {
            min: 3,
            max: 5,
            message: '长度在 3 到 5 个字符',
            trigger: 'blur',
          },
        ],
        deductionAmount: [
          { required: true, message: '请输入抵扣金额', trigger: 'blur' },
          {
            pattern: /^\d*(?:\.\d{0,2})?$/,
            //pattern: /^1[3456789]\d{9}$/,
            message: '最多能输入两位小数',
            trigger: 'blur',
          },
        ],
        couponNum: [{ required: true, message: '优惠券数量', trigger: 'blur' }],
        shareAmount: [
          { required: true, message: '请输入分润', trigger: 'blur' },
          {
            pattern: /^\d*(?:\.\d{0,2})?$/,
            //pattern: /^1[3456789]\d{9}$/,
            message: '最多能输入两位小数',
            trigger: 'blur',
          },
        ],
        phone: [
          { required: true, message: '请输入联系方式', trigger: 'blur' },
          { min: 11, max: 11, message: '请输入11位手机号码', trigger: 'blur' },
          {
            pattern: /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/,
            //pattern: /^1[3456789]\d{9}$/,
            message: '请输入正确的手机号码',
            trigger: 'blur',
          },
        ],
        imgUrl: [{ required: true, message: '请上传活动图片', trigger: 'change' }],
        region: [{ required: true, message: '请选择活动区域', trigger: 'change' }],
      },
    }
  },
  methods: {
    submitForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          alert('submit!')
        } else {
          return false
        }
      })
    },
    resetForm() {
      this.$refs.deductionAmount.reset()
      this.$refs.shareAmount.reset()
      this.$refs.form.resetFields()
    },
    handleAmount(name, amount) {
      let form = Object.assign({}, this.form)
      form[name] = amount
      this.form = Object.assign({}, form)
    },
    // 下一步
    handleNext(active) {
      this.active = active
    },
  },
}
</script>

<style scoped>
.container /deep/ .el-step__icon {
  background-color: #f1f1f1;
}
.marginTop {
  margin-top: 30px;
}
</style>
