<template>
  <div class="student-upload">
    <el-form
      :model="resourceForm"
      :rules="rules"
      ref="resourceForm"
      label-width="150px"
      class="demo-ruleForm"
    >

      <el-form-item
        label="文件名称"
        prop="name"
      >
        <el-input v-model="resourceForm.name"></el-input>
      </el-form-item>
      <el-form-item
        label="上传文件"
        prop="body"
      >

        <el-upload
          class="upload-demo"
          ref="upload"
         :action="base_url+'/upload'"
          :file-list="fileList"
          :auto-upload="true"
          :on-success='uploadSuccess'
          :data='fileData'
          :on-remove="handleRemove"
          :multiple="true"
          accept=".jpg,.jpeg,.png"
          list-type="picture-card"
        >
          <i
            slot="default"
            class="el-icon-plus"
          ></i>

          <div
            slot="tip"
            class="el-upload__tip"
          >只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          @click="submitForm('resourceForm')"
        >保存</el-button>
        <el-button @click="resetForm">返回</el-button>
      </el-form-item>
    </el-form>
    <div
      class="tips"
      v-if="tips.remark"
    >
      <div class="tips-title">
        上传文件注意事项：
      </div>
      <div class="tips-content">
        {{tips.remark}}
      </div>
      <div
        @click="exportModel"
        class="downModel"
      >下载模板</div>
    </div>
  </div>
</template>

<script>
import { uploadDocument, fileTips } from "@/api/process/index";
import store from "@/store";
export default {
  data() {
    return {
      dialogVisible: false,
      disabled: false,
      dialogImageUrl: "",
      resourceForm: {
        name: "",
        resource_type: 1,
        resource_ids: [],
        body: "",
        key: "",
        staff_id: []
      },

      fileList: [], //文件列表
      fileData: {
        file_type: "img"
      },
      rules: {
        name: [{ required: true, message: "请输入文件名称", trigger: "blur" }],
        key: [{ required: true, message: "流程类型", trigger: "blur" }],
          body: [
          { required: true, message: "请选择需要上传的文件", trigger: "click" }
        ]
      },
      tips: ""
    };
  },
  created() {
    this.loadingFull = true;
    let selectedZb = JSON.parse(sessionStorage.getItem("selectedZb"));
    this.resourceForm.organization_id = store.getters.organization_ids[0];
    this.resourceForm.name = selectedZb.name;
    this.resourceForm.key = selectedZb.key;
    this.resourceForm.user_id = store.getters.id;
    this.resourceForm.staff_id = store.getters.staff_id;
    console.log(this.resourceForm.staff_id, "staff");
    console.log(JSON.parse(sessionStorage.getItem("selectedZb")), "anme");
    const params = {
      key: selectedZb.key
    };
    fileTips(params).then(res => {
      console.log(res.data.data[0], "ceshi");
      this.tips = res.data.data[0];
    });
  },
  methods: {
    uploadSuccess(response, file, fileList) {
      console.log(response, "-------------------------------");
      let that = this;
      //console.log(this.editForm.resource_ids, " this.editForm.resource_ids");
      if (response.code == 200) {
        this.file = response.data.url;
        console.log(response.data.id, "response.data.id");
        let arr = [];
        arr.push(response.data.id);
        this.resourceForm.resource_ids.push(response.data.id);
        console.log(this.resourceForm.resource_ids);
        this.resourceForm.body = response.data.url;
      }
    },

    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    //移除已上传的文件
    handleRemove(file, fileList) {
      this.resourceForm.resource_ids=[]
      fileList.map(item=>{
        let id=item.response.data.id
        this.resourceForm.resource_ids.push(id);
        console.log(this.resourceForm,item.response.data.id)
      })
      
    },
    //未上传文件时
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.uploadFile();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //点击上传
    async uploadFile() {
      console.log(this.resourceForm);
      await uploadDocument(this.resourceForm).then(res => {
        console.log(res, "shangchuan ");
        this.$message.success("上传成功");
        this.$store.dispatch("tagsView/delView", this.$route);
        // 返回上一步路由
        this.$router.go(-1);
        // this.$refs[formName].resetFields();
      });
    },

    resetForm() {
      this.$store.dispatch("tagsView/delView", this.$route);
      // 返回上一步路由
      this.$router.go(-1);
      // this.$refs[formName].resetFields();
    },
    //下载模板
    exportModel() {
      let selectedZb = JSON.parse(sessionStorage.getItem("selectedZb"));
      let name = selectedZb.name;
      let title = name + "模板";
      // let title="积极分子名单导入模板.xlsx"
      console.log(title, "tie");
      let url =this.tips.resource;
      let a = document.createElement("a");
      a.style.display = "none";
      document.body.appendChild(a);
      let triggerDownload = $(a)
        .attr("href", url)
        .attr("download", "人员名单")
        .attr('target','_blank');
      triggerDownload[0].click();
      document.body.removeChild(a);
    }
  }
};
</script>
<style lang="scss" scoped>
@import "@/assets/styles/content.scss";
.student-upload {
  position: relative;
  width: 100%;
  margin: 0 auto;
  margin-top: 50px;
  .demo-ruleForm {
    width: 40%;
    margin: 0;
    margin-left: 20%;
  }
  .tips {
    position: absolute;
    top: 0px;
    right: 5%;
    padding: 10px;
    margin-left: 30%;
    margin-top: 0px;
    border-radius: 5px;
    box-shadow: 0px 0px 20px rgb(171 13 13 / 30%);
    .tips-title {
      height: 30px;
      line-height: 30px;
      border-left: solid 5px #ab0d0d;
      padding-left: 10px;
      font-size: 18px;
      color: rgb(78, 78, 78);
      margin-bottom: 10px;
      font-weight: bold;
    }
    .tips-content {
      width: 280px;
      padding-left: 15px;
      font-size: 14px;
      word-break: break-all;
      white-space: normal;
      line-height: 24px;
    }
    .downModel {
      padding-left: 15px;
      color: #ab0d0d;
      margin-top: 20px;
      font-size: 16px;
    }
  }
}
</style>