<!--
 * @Description: 提交创业计划
 * @Author: 空白格
 * @Date: 2022-08-29 10:55:10
 * @LastEditors: 空白格
 * @LastEditTime: 2022-08-29 13:48:43
 * @FilePath: \veterans_client_web\src\views\WorkGuide\AddWorkGuide\AddWorkGuideIndex.vue
 * @Copyright: Copyright (c) 2016~2022 by 空白格, All Rights Reserved.
-->
<template>
  <div class="app-main work-guide">
    <BannerBreadcrumb title="创业指引" :isRouter="true" />
    <div class="app-main-box">
      <div class="app-main-box-content">
        <div class="work-guide-title">提交创业计划</div>
        <div class="work-guide-form">
          <el-form :model="form" :rules="rules" ref="form" label-position="top">
            <el-form-item prop="title" label="名称：">
              <el-input v-model="form.title" placeholder="请输入名称" />
            </el-form-item>
            <el-form-item prop="description" label="描述：">
              <Quill
                class="quill"
                :content="form.description"
                placeholder="请输入描述"
                @onEditorChange="onEditorChange"
              />
            </el-form-item>
            <el-form-item prop="planBookUrl" label="创业计划书：">
              <el-upload
                :action="upload.action"
                :headers="upload.headers"
                :on-success="uploadSuccess"
                :on-error="uploadError"
                :on-preview="filePreview"
                :limit="1"
                :multiple="false"
                accept=".pdf"
                class="pdf-box"
              >
                <el-button class="pdf-btn">*请上传文件.（仅支持pdf）</el-button>
              </el-upload>
              <view-pdf ref="viewPdf" />
            </el-form-item>
            <el-form-item align="center">
              <el-button class="sub-btn" :loading="loading" @click="submitForm"
                >提交</el-button
              >
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import BannerBreadcrumb from "@/components/BannerBreadcrumb";
import ViewPdf from "@/components/ViewPdf";
import Quill from "@/components/Quill";
import { addWorkGuide } from "@/api/WorkGuide";
export default {
  name: "AddWorkGuideIndex",
  components: {
    BannerBreadcrumb,
    Quill,
    ViewPdf,
  },
  data() {
    return {
      form: {
        title: "",
        description: "",
        planBookUrl: "",
        planBookName: "",
      },
      rules: {
        title: [{ required: true, message: "请输入名称", trigger: "blur" }],
        description: [
          {
            required: true,
            message: "请输入描述",
            trigger: ["blur", "change"],
          },
        ],
        planBookUrl: [
          {
            required: true,
            message: "请上传创业计划书",
            trigger: ["blur", "change"],
          },
        ],
      },
      upload: {
        action: process.env.VUE_APP_BASE_API + "/file/upload/single/minio",
        headers: {
          Authorization: `Bearer ${this.$store.state.user.token}`,
        },
      },
      loading: false,
    };
  },
  methods: {
    /**
     * 富文本编辑器修改触发
     * @date 2022-08-29
     * @param {any} content
     * @returns {any}
     */
    onEditorChange(content) {
      this.form.description = content;
    },
    /**
     * 上传成功
     * @date 2022-08-29
     * @param {any} res
     * @returns {any}
     */
    uploadSuccess(res) {
      if (res.code === 200) {
        this.form.planBookUrl = res.data.url;
        this.form.planBookName = res.data.fileName;
      }
    },
    /**
     * 上传失败
     * @date 2022-08-29
     * @param {any} err
     * @returns {any}
     */
    uploadError(err) {
      this.$message.error(err.msg || "上传失败!");
    },
    /**
     * 预览pdf
     * @date 2022-08-29
     * @param {any} file
     * @returns {any}
     */
    filePreview(file) {
      const { url } = file.response.data;
      if (url) {
        this.$refs["viewPdf"].openDialog(url);
      }
    },
    /**
     * 提交表单
     * @date 2022-08-29
     * @returns {any}
     */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.loading = true;
          addWorkGuide(this.form)
            .then((res) => {
              if (res.code === 200) {
                this.$message.success("提交成功!");
                setTimeout(() => {
                  this.loading = false;
                  this.$router.push("/workguide");
                }, 300);
              } else {
                this.$message.error("提交失败!");
                this.loading = false;
              }
            })
            .catch(() => {
              this.loading = false;
            });
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.work-guide {
  &-title {
    text-align: center;
    border-bottom: 1px solid #d7d7d7;
    padding-bottom: 20px;
    font-size: 20px;
    color: #222222;
  }
  &-form {
    width: 80%;
    margin: 0 auto;
    padding: 20px 0;
    .quill {
      :deep(.ql-editor) {
        min-height: 20vh;
      }
    }
    .pdf-box {
      width: 100%;
      :deep(.el-upload) {
        width: 100%;
      }
    }
    .pdf-btn {
      width: 100%;
      text-align: center;
      border: dashed 1px #0091ff;
      color: #008fff;
      cursor: pointer;
      font-size: 14px;
    }
    .sub-btn {
      background: #709078;
      border-bottom: 1px solid #709078;
      color: #fff;
      padding: 12px 100px;
    }
  }
}
</style>
