<template>
  <el-drawer
    :title="data.id?'修改公告':'添加公告'"
    :visible.sync="visible"
    direction="rtl"
    :size="drawerWidth"
    :before-close="handleClose"
  >
    <div class="info-form">
      <el-form ref="ruleForm" :model="data" size="small" label-width="80px">
        <el-form-item label="类型" prop="type"  :rules="{
                    required: true, message: '类型不能为空', trigger: 'blur'
                  }">
          <el-radio-group v-model="data.type" size="medium">
            <el-radio :label="1" border>水务新闻</el-radio>
            <el-radio :label="2" border>政策法规</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="状态" prop="type"  :rules="{
                    required: true, message: '状态不能为空', trigger: 'blur'
                  }">
          <el-radio-group v-model="data.status" size="medium">
            <el-radio :label="1" border>发布</el-radio>
            <el-radio :label="2" border>待发布</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="主题" prop="title"  :rules="{
                    required: true, message: '主题不能为空', trigger: 'blur'
                  }">
          <el-input clearable v-model="data.title"></el-input>
        </el-form-item>
        <el-form-item label="正文" prop="content">
         <vue-editor useCustomImageHandler @image-added="handleImageAdded" v-model="data.content"></vue-editor>
        </el-form-item>
      </el-form>
      <div style="text-align: center">
        <el-button
          icon="el-icon-document-add"
          :loading="addBtnLoading"
          type="primary"
          size="medium"
          @click="submitForm('ruleForm')"
        >提交
        </el-button>
        <el-button
          icon="el-icon-back"
          style="margin-left: 15px"
          size="medium"
          @click="handleClose"
        >返回
        </el-button>
      </div>
    </div>
  </el-drawer>
</template>

<script>
  import api from '@/api/work/notice'
  import { VueEditor } from "vue2-editor";
  import userApi from '@/api/user/user'

  export default {
    name: "add-form",
    data() {
      return {
        addBtnLoading:false,
        drawerWidth: document.body.clientWidth - 190 + "px",
        data: {},
      };
    },
    props: {
      visible: {
        type: Boolean,
        default() {
          return false;
        }
      },
      ruleForm: {
        type: Object,
        default() {
          return {};
        }
      },
    },
    components: {VueEditor},
    created() {
      this.data=JSON.parse(JSON.stringify(this.ruleForm))
    },
    mounted() {
    },
    methods: {
      handleImageAdded(file, Editor, cursorLocation, resetUploader){
        var formData = new FormData();
        formData.append("file", file);
        userApi.upload(formData).then(res => {
          Editor.insertEmbed(cursorLocation, "image", res.data.url);
          resetUploader();
        }).catch(e => {
        })
      },
      handleClose() {
        this.$emit("handleClose");
      },
      submitForm(formName) {
        this.$refs[formName].validate(valid => {
          if (valid) {
            let data = JSON.parse(JSON.stringify(this.data));
            this.addBtnLoading = true;
            let method= 'add'
            if(data.id){
              method='edit'
            }
            api[method](data)
              .then(res => {
                this.addBtnLoading = false;
                this.$message({
                  type: "success",
                  message: "操作成功"
                });
                this.$emit('successSubmit')
              })
              .catch(e => {
                this.addBtnLoading = false;
              });
          }
        });
      }
    }
  };
</script>
