<template>
  <div class="app-container">
    <el-row>
      <el-col :span="24" v-loading="loading">
        <div class="title">
          {{institution.title}}
          <el-button class="button" type="primary" @click="goBack" size="small">返回</el-button>
          <el-button class="button" @click="openDialog" size="small">修改</el-button>
          <el-button class="button" type="danger" @click="deleteInstitution" size="small">删除</el-button>
        </div>
        <div class="content">{{institution.content}}</div>
      </el-col>
    </el-row>
    <el-divider></el-divider>

    <!-- 上传文件 -->
    <el-button type="primary" @click="openFileDialog" size="small">添加附件</el-button>

    <!-- 文件显示 -->
    <p class="file" v-if="files.length==0">暂无文件</p>
    <p class="file" v-for="file in files" :key="file.id">
      <a
        class="name"
        :href="'http://localhost:9102/img' + file.url"
        :download="file.name"
      >{{file.name}}</a>
      <el-button
        type="danger"
        size="small"
        @click="deleteFile(file.id, file.name)"
        :loading="loading"
      >删除</el-button>
    </p>

    <!-- 上传文件的dialog -->
    <el-dialog title="上传附件" :visible.sync="fileDialogVisible" @closed="clearFile" width="400px">
      <el-upload
        ref="upload"
        action="customize"
        :http-request="uploadDiscardFile"
        :limit="10"
        multiple
        :before-remove="beforeRemove"
      >
        <el-button :loading="loading">添加文件</el-button>
      </el-upload>
      <span slot="footer" class="dialog-footer">
        <el-button @click="fileDialogVisible=false">取消</el-button>
        <el-button type="primary" @click="uploadFile" :loading="loading">上传</el-button>
      </span>
    </el-dialog>

    <!-- 修改的dialog -->
    <el-dialog title="修改制度" :visible.sync="dialogVisible" width="600px">
      <el-form ref="form1" :model="institutionForm" :rules="rules" label-width="110px">
        <el-form-item label="制度标题" prop="title">
          <el-input v-model="institutionForm.title" placeholder="请输入制度标题" clearable></el-input>
        </el-form-item>
        <el-form-item label="制度内容" prop="content">
          <el-input v-model="institutionForm.content" placeholder="请输入制度内容" clearable></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible=false">取消</el-button>
        <el-button type="primary" @click="editInstitution">提交</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import request from "@/utils/request";
export default {
  data() {
    return {
      institutionId: this.$route.params.id,
      institution: {}, //制度信息
      files: [], //制度附件
      uploadingFiles: [], //要上传的文件
      loading: false,
      institutionForm: {
        title: "",
        content: ""
      },
      dialogVisible: false,
      fileDialogVisible: false,
      rules: {
        title: [{ required: true, message: "请输入制度标题", trigger: "blur" }],
        content: [
          { required: true, message: "请输入制度内容", trigger: "blur" }
        ]
      }
    };
  },
  methods: {
    //根据本页的id获取制度详情
    getInstitution() {
      this.loading = true;
      request({
        url: "/institution/getInstitutionById",
        method: "post",
        params: {
          id: this.institutionId
        }
      })
        .then(response => {
          this.institution = response.data.institution;
          this.files = response.data.files;
          this.loading = false;
        })
        .catch(error => {
          this.loading = false;
        });
    },

    //单独获取文件
    getFiles() {
      this.loading = true;
      request({
        url: "/institution/getFiles",
        method: "post",
        params: {
          id: this.institutionId
        }
      })
        .then(response => {
          this.files = response.data;
          this.loading = false;
        })
        .catch(error => {
          this.loading = false;
        });
    },

    //删除文件
    deleteFile(id, name) {
      this.$confirm("是否删除文件" + name, "删除", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.loading = true;
          request({
            url: "/institution/deleteFileById",
            method: "post",
            params: {
              id: id
            }
          })
            .then(response => {
              this.$message({
                message: "删除成功",
                type: "success"
              });
              this.loading = false;
              this.getFiles();
            })
            .catch(error => {
              this.loading = false;
            });
        })
        .catch(() => {});
    },

    //上传文件
    uploadFile() {
      if (this.uploadingFiles != []) {
        this.loading = true;
        var form = new FormData();
        form.append("id", this.institutionId);
        this.uploadingFiles.forEach(file => {
          form.append("files", file);
        });
        request({
          url: "/institution/uploadFiles",
          method: "post",
          data: form
        })
          .then(response => {
            this.$message({
              message: "上传成功",
              type: "success"
            });
            this.loading = false;
            this.getFiles();
            this.fileDialogVisible = false;
          })
          .catch(error => {
            this.loading = false;
          });
      } else {
        this.$message({
          message: "请选择要上传的文件",
          type: "error"
        });
      }
    },

    //清除文件
    clearFile() {
      this.$refs.upload.clearFiles();
    },

    //删除制度
    deleteInstitution() {
      this.$confirm("是否删除本篇制度", "删除", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          request({
            url: "/institution/deleteInstitution",
            method: "post",
            params: {
              id: this.institutionId
            }
          })
            .then(response => {
              this.$message({
                message: "删除成功",
                type: "success"
              });
              this.$router.go(-1);
            })
            .catch(error => {});
        })
        .catch(() => {});
    },

    //打开dialog
    openDialog() {
      this.institutionForm.title = this.institution.title;
      this.institutionForm.content = this.institution.content;
      this.dialogVisible = true;
    },

    //打开上传文件Dialog
    openFileDialog() {
      this.uploadingFiles = [];
      this.fileDialogVisible = true;
    },

    //编辑制度
    editInstitution() {
      this.$refs.form1.validate(valid => {
        if (valid) {
          this.loading = true;
          request({
            url: "/institution/insertInstitution",
            method: "post",
            params: {
              id: this.institutionId,
              title: this.institutionForm.title,
              content: this.institutionForm.content
            }
          })
            .then(response => {
              this.$message({
                message: "编辑制度成功",
                type: "success"
              });
              this.loading = false;
              this.dialogVisible = false;
              this.getInstitution();
            })
            .catch(error => {
              this.loading = false;
            });
        }
      });
    },

    //获取上传的文件
    uploadDiscardFile(params) {
      this.uploadingFiles.push(params.file);
      console.log(this.uploadingFiles);
      return false;
    },

    //文件上传的移除操作
    beforeRemove() {
      this.uploadingFiles = [];
    },

    //回到列表页
    goBack() {
      this.$router.go(-1);
    }
  },
  mounted() {
    //如果没有传进来id的话
    if (this.institutionId == null) {
      this.$router.go(-1);
    } else {
      this.getInstitution();
    }
  }
};
</script>

<style scoped>
.button {
  float: right;
  margin: 0 5px 0 0;
}
.title {
  font-size: 22px;
  margin-bottom: 20px;
}
.content {
  font-size: 18px;
  color: #aaa;
}
.file .name {
  font-size: 18px;
  color: #409eff;
  cursor: pointer;
  margin-right: 15px;
}
</style>

