<template>
  <page-header-wrapper>
    <div class="content">
      <a-form :form="form" :label-col="labelCol" :wrapper-col="wrapperCol" @submit="handleSubmit">
        <a-form-item label="选择标签" >
          <a-select mode="multiple" v-decorator="['note',{ rules: [{ required: true, message: '必填项' }] }]" placeholder="请选则" @change="handleChange">
            <a-select-option v-for="item in tags_list" :key="item.key">
              {{ item.name }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="选择模板">
          <a-select v-decorator="['gender',{ rules: [{ required: true, message: '必填项' }] }]" placeholder="请选则" @change="handleSelectChange">
            <a-select-option value="0">
              模板1
            </a-select-option>
            <a-select-option value="1">
              模板2
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="编辑">
          <a-textarea placeholder="请输入" :rows="4" v-decorator="['edit']" />
        </a-form-item>
        <a-form-item :wrapper-col="{ span: 12, offset: 9 }">
          <a-button type="primary" html-type="submit">
            确认并发送
          </a-button>
        </a-form-item>
      </a-form>
    </div>
  </page-header-wrapper>
</template>

<script>
  import tag from '@/static/tag.json'
  export default {
    data() {
      return {
        labelCol: {
          md: { span: 6 },
          xs: { span: 6 },
          xl: { span: 6 }
        },
        wrapperCol: {
          md: { span: 12 },
          xs: { span: 14 },
          xl: { span: 8 }
        },
        tags_list: [],
        formLayout: 'horizontal',
        form: this.$form.createForm(this),
      }
    },
    created() {
      this.tags_list = tag.data
    },
    methods: {
      // 保存
      handleSubmit(e) {
        e.preventDefault()
        this.form.validateFields((err, values) => {
          if (!err) {
            console.log('Received values of form: ', values)
          }
        })
      },
      // 模板
      handleSelectChange(value) {
        console.log(value)
      },
      // 标签
      handleChange(value) {
        console.log(`selected ${value}`)
      },
    },
  }
</script>
<style scoped="scoped">
  .content {
    height: calc(100vh - 160px) !important
  }
</style>
