<template>
    <div class="communication-publish">
        <el-form label-position="right" label-width="80px" :model="form">
            <el-form-item label="标题">
                <el-input v-model="form.title"></el-input>
            </el-form-item>
            <el-form-item label="类别">
                <el-select v-model="form.type" placeholder="请选择">
                    <el-option
                            v-for="item in typeOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="详细描述">
                <span style="color: grey;font-size: 12px">推荐填写：技术背景、技术挑战、当前结果、技术诉求等内容</span>
                <el-input type="textarea" :rows="2"
                        placeholder="请输入内容"
                        v-model="form.textarea">
                </el-input>
            </el-form-item>
            <el-form-item label="单位院校">
                <el-input v-model="form.organization"></el-input>
            </el-form-item>
            <el-form-item label="手机号">
                <el-input v-model="form.phone"></el-input>
            </el-form-item>
            <el-form-item label="微信">
                <el-input v-model="form.wechat"></el-input>
            </el-form-item>
            <el-form-item label="QQ">
                <el-input v-model="form.qq"></el-input>
            </el-form-item>
            <el-form-item label="邮箱">
                <el-input v-model="form.email"></el-input>
            </el-form-item>
            <el-form-item label="图片" >
                <el-upload action="" :auto-upload="false" :limit="3" accept="image/*"
                           :on-change="handlePictureChange"
                           :before-remove="beforeRemoved"
                           :on-exceed="handleExceed" list-type="picture"
                >
                    <el-button size="small" type="primary">点击上传</el-button>
                </el-upload>
            </el-form-item>
            <el-form-item label="附件">
                <el-upload action="" :auto-upload="false" :limit="3"
                           :on-change="handleFileChange"
                           :before-remove="beforeRemoved"
                           :on-exceed="handleExceed">
                    <el-button size="small" type="primary">点击上传</el-button>
                </el-upload>
            </el-form-item>
            <el-form-item label="截止时间">
                <el-date-picker
                    v-model="form.deadline"
                    type="datetime"
                    size="mini"
                />
            </el-form-item>
        </el-form>

        <el-button size="big" type="primary" style="margin-left: 500px" @click="publish">发布</el-button>
    </div>
</template>

<script>
import {ElMessage} from "element-plus";
export default {
  name: "Publish",
  data() {
    return {
      form: {
        title: "",
        organization: "",
        phone: "",
        wechat:"",
        qq:"",
        email:"",
        deadline:null,
        type: null,
        textarea: "",
        //pictureList:[],
        //fileList:[],
        photos:[],
        attachments:[],
      },
      typeOptions: [
        {
        value: "PROBLEM",
        label: "难题"
      }, {
        value: "NOTICE",
        label: "通知"
      }],
    };
  },
    methods: {
        handlePictureChange(file,fileList) {
            //this.form.pictureList=fileList;
            this.$apis.uploadFile(file.raw).then(res=>{
              this.form.photos.push(res.data.data);
            });
        },
        handleFileChange(file,fileList){
            //this.form.fileList=fileList;
          this.$apis.uploadFile(file.raw).then(res=>{
            this.form.attachments.push(res.data.data);
          });
        },
        beforeRemoved(){
          ElMessage.error("不允许删除！") ;
          return false;
        },
        handleExceed(file,fileList){
            ElMessage.error("最多上传3个!");
        },
        publish(){
                const communication={
                    publisherId: Number(this.$store.state.user.id),
                    title: this.form.title,
                    type: this.form.type,
                    description:this.form.textarea,
                    organization: this.form.organization,
                    phone: this.form.phone,
                    wechat:this.form.wechat,
                    qq:this.form.qq,
                    email:this.form.email,
                    publishTime:new Date(),
                    deadline:this.form.deadline,
                    photos:this.form.photos,
                    attachments:this.form.attachments,
                    publisherName:this.$store.state.user.username
                };
                 this.$apis.postCommunication(communication).then(res=>{
                     console.log(res.data.data);
                     ElMessage.success("发布成功");
                     this.$router.go(0);
                 });
        }
    }
};
</script>

<style scoped>
.communication-publish {
    flex: 1;
    margin: 10px 10px 0;
    /*overflow: scroll;*/
}

</style>