<template>
  <a-form-model
    ref="ruleForm"
    :model="formDataAll"
    :rules="rules"
    :label-col="labelCol"
    :wrapper-col="wrapperCol"
  >
    <a-form-model-item ref="name" label="名称" prop="name">
      <a-input
        v-model="formDataAll.name"
        @blur="
          () => {
            $refs.name.onFieldBlur();
          }
        "
      />
    </a-form-model-item>
    <a-form-model-item label="城市" prop="city">
      <a-select v-model="formDataAll.city" placeholder="请选择城市">
        <a-select-option value="shanghai">
          上海
        </a-select-option>
        <a-select-option value="beijing">
          北京
        </a-select-option>
      </a-select>
    </a-form-model-item>
    <a-form-model-item label="时间" required prop="date1">
      <a-date-picker
        v-model="formDataAll.date1"
        show-time
        type="date"
        placeholder="Pick a date"
        style="width: 100%;"
      />
    </a-form-model-item>
    <a-form-model-item label="多选" prop="type">
      <a-checkbox-group v-model="formDataAll.type">
        <a-checkbox value="1" name="type">
          Online
        </a-checkbox>
        <a-checkbox value="2" name="type">
          Promotion
        </a-checkbox>
        <a-checkbox value="3" name="type">
          Offline
        </a-checkbox>
      </a-checkbox-group>
    </a-form-model-item>
    <a-form-model-item label="单选" prop="resource">
      <a-radio-group v-model="formDataAll.resource">
        <a-radio value="1">
          Sponsor
        </a-radio>
        <a-radio value="2">
          Venue
        </a-radio>
      </a-radio-group>
    </a-form-model-item>
    <a-form-model-item label="上传文件">
      <a-upload
        :file-list="fileList"
        :remove="handleRemove"
        :before-upload="beforeUpload"
      >
        <a-button> <a-icon type="upload" /> Select File </a-button>
      </a-upload>
    </a-form-model-item>
    <a-form-model-item label="描述" prop="desc">
      <a-input v-model="formDataAll.desc" type="textarea" />
    </a-form-model-item>
    <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
      <a-button type="primary" @click="onSubmit">
        创建
      </a-button>
      <!-- <a-button
        type="primary"
        :disabled="fileList.length === 0"
        :loading="uploading"
        style="margin-top: 16px"
        @click="onSubmit"
      >
        {{ uploading ? "上传中" : "创建" }}
      </a-button> -->
      <a-button style="margin-left: 10px;" @click="resetForm">
        重置
      </a-button>
    </a-form-model-item>
  </a-form-model>
</template>
<script>
import reqwest from "reqwest";
export default {
  data() {
    return {
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      other: "",
      fileList: [],
      uploading: false,
      formDataAll: {
        name: "",
        city: undefined,
        date1: undefined,
        type: [],
        resource: "",
        fileName: null,
        desc: ""
      },
      rules: {
        name: [
          {
            required: true,
            message: "Please input Activity name",
            trigger: "blur"
          },
          {
            min: 3,
            max: 5,
            message: "Length should be 3 to 5",
            trigger: "blur"
          }
        ],
        city: [
          {
            required: true,
            message: "请选择城市",
            trigger: "change"
          }
        ],
        date1: [
          { required: true, message: "Please pick a date", trigger: "change" }
        ],
        type: [
          {
            type: "array",
            required: true,
            message: "Please select at least one activity type",
            trigger: "change"
          }
        ],
        resource: [
          {
            required: true,
            message: "Please select activity resource",
            trigger: "change"
          }
        ],
        desc: [
          {
            required: true,
            message: "Please input activity form",
            trigger: "blur"
          }
        ]
      }
    };
  },
  methods: {
    handleRemove(file) {
      const index = this.fileList.indexOf(file);
      const newFileList = this.fileList.slice();
      newFileList.splice(index, 1);
      this.fileList = newFileList;
    },
    beforeUpload(file) {
      this.fileList = [...this.fileList, file];
      return false;
    },
    handleUpload() {
      const { fileList } = this;
      this.formDataAll.fileName = fileList[0].name;
      const formData = new FormData();
      fileList.forEach(file => {
        formData.append("file", file);
      });
      // 请求加入新参数
      for (var prop in this.formDataAll) {
        if (this.formDataAll.hasOwnProperty(prop)) {
          formData.append(prop, this.formDataAll[prop]);
        }
      }
      // console.log(formData.get("user"));
      this.uploading = true;

      // You can use any AJAX library you like
      reqwest({
        url: "https://www.mocky.io/v2/5cc8019d300000980a055e76",
        method: "post",
        processData: false,
        data: formData,
        success: () => {
          this.fileList = [];
          this.uploading = false;
          this.$message.success("upload successfully.");
        },
        error: () => {
          this.uploading = false;
          this.$message.error("upload failed.");
        }
      });
    },
    onSubmit() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          alert("submit!");
          this.handleUpload();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm() {
      this.fileList = [];
      this.$refs.ruleForm.resetFields();
    }
  }
};
</script>