<template>
  <a-form-model :model="form" :label-col="labelCol" :wrapper-col="wrapperCol">
    <a-form-model-item label="標題">
      <a-input v-model="form.title"/>
    </a-form-model-item>
    <a-form-model-item label="作者">
      <a-input v-model="form.author"/>
    </a-form-model-item>
    <a-form-model-item label="類型">
      <a-radio-group v-model="form.tag">
        <a-radio :style="radioStyle" :value="1">
          生活
        </a-radio>
        <a-radio :style="radioStyle" :value="2">
          學習
        </a-radio>
        <a-radio :style="radioStyle" :value="3">
          社會
        </a-radio>
      </a-radio-group>
    </a-form-model-item>
    <a-form-model-item label="圖片資源">
    //此處開啟了多選，并重寫了brforeUpload方法，為了關閉自動提交和將圖片轉換為base64編碼，同時聲明了文件列表的類型
      <a-upload
          :multiple="true"
          :before-upload="beforeUpload"
          name="file"
          list-type="picture"
      >
        <a-button>
          <a-icon type="upload"/>
          上傳推文圖片
        </a-button>
      </a-upload>
    </a-form-model-item>
    <a-form-model-item label="正文">
      <a-input v-model="form.content" 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-form-model-item>
  </a-form-model>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      value: 1,
      radioStyle: {
        display: 'inline',
        height: '30px',
        lineHeight: '30px',
      },
      labelCol: {span: 4},
      wrapperCol: {span: 14},
      form: {
        title: '',
        author: '',
        tag: '',
        fileList: [],
        content: ''
      }
    };
  },
  methods: {
    beforeUpload(file, fileList) {
    //將圖片轉換為Base64編碼
      const reader = new FileReader()
      reader.readAsDataURL(file)
      reader.onload = () => {
        const base64 = reader.result;
        this.form.fileList.push(base64)
      };
      console.log(this.form.fileList)
       //禁止直接提交圖片
      return false;
    },
    //提交表單
    onSubmit() {
      let formData = new FormData
      //此處需要和后端接收的參數名相同
      formData.append("form", JSON.stringify(this.form))
      axios.post(
      	  //后端接口，自行修改
          " http://localhost:8081/manage/submit",
          formData,
          {
            headers: {'Content-Type': 'multipart/form-data'}
          }
      ).then(res => {
        console.log(res.data.message)
      })
    },
  },
};
</script>

@RestController
@Slf4j
@RequestMapping("/manage")
@CrossOrigin
public class ManageArticleController {
    @Resource
    ArticleService articleService;
    @PostMapping("/submit")
    public SystemResult<String> uploadImages(@RequestParam("form") String form)throws Exception {
    //這兒將傳入的參數轉換為對應的實體類
        ArticleVo articleVo=JSON.parseObject(form,ArticleVo.class);
        return SystemResult.success("上傳成功");
    }
}

@Data
@Accessors(chain = true)
@AllArgsConstructor
@NoArgsConstructor
//對應的實體類
public class ArticleVo implements Serializable {
    private String title;
    private String author;
    private int tag;
    private List<String> fileList;
    private String content;
}