<template>
  <div>
    <a-form :form="form" style="max-width: 500px; margin: 40px auto 0;">
      <a-form-item label="计划名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
        <a-input v-decorator="['Name', { rules: [{required: true, message: '必填项'}] }]" placeholder="请填写" />
      </a-form-item>

      <a-form-item label="选择公众号" :labelCol="labelCol" :wrapperCol="wrapperCol">
        <a-col :span="17">
          <a-select placeholder="请选择" v-decorator="['paymentUser', { rules: [{required: true, message: '必填项'}] }]">
            <a-select-option value="1">ant-design@alipay.com</a-select-option>
          </a-select>
        </a-col>
        <a-col :span="3" offset="1">
          <a-button type="primary">点击授权</a-button>
        </a-col>
      </a-form-item>
      <a-form-item :wrapperCol="{span: 10, offset:10}">
        <a-button type="primary" @click="nextStep">下一步</a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<script>
  import pick from 'lodash.pick'
  const fields = ['Name', 'paymentUser']
  export default {
    name: 'Step1',
    props: {
      editInfo: {
        type: Object,
        default: () => null
      }
    },
    data() {
      return {
        labelCol: {
          lg: {
            span: 5
          },
          sm: {
            span: 5
          }
        },
        wrapperCol: {
          lg: {
            span: 19
          },
          sm: {
            span: 19
          }
        },
        form: this.$form.createForm(this)
      }
    },
    created() {
      fields.forEach(v => this.form.getFieldDecorator(v))
      this.$watch('editInfo', () => {
        if (this.editInfo) {
          console.log(this.editInfo)
          this.editInfo && this.form.setFieldsValue(pick(this.editInfo, fields))
        }
      })
    },
    methods: {
      nextStep() {
        const {
          form: {
            validateFields
          }
        } = this
        // 先校验，通过表单校验后，才进入下一步
        validateFields((err, values) => {
          if (!err) {
            this.$emit('nextStep')
          }
        })
      }
    }
  }
</script>

<style lang="less" scoped>
  .step-form-style-desc {
    padding: 0 56px;
    color: rgba(0, 0, 0, .45);

    h3 {
      margin: 0 0 12px;
      color: rgba(0, 0, 0, .45);
      font-size: 16px;
      line-height: 32px;
    }

    h4 {
      margin: 0 0 4px;
      color: rgba(0, 0, 0, .45);
      font-size: 14px;
      line-height: 22px;
    }

    p {
      margin-top: 0;
      margin-bottom: 12px;
      line-height: 22px;
    }
  }
</style>
