<template>
<div class="p20">
  <div class="border-bottom-1 pb15">
    <h3 class="font-size-24">{{detailInfo.wwj_title}}</h3>
    <div class="font-size-16 color-6" v-html="detailInfo.wwj_content">
    </div>
  </div>
  <el-upload
      class="mt20"
      ref="upload"
      multiple
      action="#"
      :http-request="appendixHttpRequest"
      :on-remove="handleRemoveAppendix"
      :file-list="fileList"
      list-type="text"
      accept="image/png,image/jpg,image/jpeg,.doc,.docx,.wps,.wpt,.xls,.xlsx,.ppt,.pptx,.pdf,.txt"
  >
    <el-button type="primary">
      <span class="d-in-block v-mid el-icon-plus font-size-16"></span>
      <span class="d-in-block v-mid font-size-16">提交文件材料</span>
    </el-button>
  </el-upload>

</div>
</template>

<script>
import {wtjd_detail} from "./api";
import FileUpload from "@/components/FileUpload/index.vue";
import { useUserStore } from "@/stores/user";
const { real_name,token } = useUserStore();
export default {
  name: "index",
  components:{
    FileUpload
  },
  data() {
    return {
      wwj_id: '',
      fileList: [],
      fj:'',
      updateUrl:window.globalVariables.api+'upload/main/file',//图片上传地址(测试服)
      extraParameters: {
        api: 'json',
        urltype: 1
      },//上传时附带的额外参数
      detailInfo:{}
    }
  },
  methods:{
    getDetail() {
      let data = {
        wwj_id: this.wwj_id
      }
      wtjd_detail(data).then(res =>{
        if(res.code == 1) {
          this.detailInfo = res.data.one_info;
          this.fileList = [];
          if(this.detailInfo.wwj_qtfj_json != '') {
            let file_arr = JSON.parse(this.detailInfo.wwj_qtfj_json).split(';')
            for(let i in file_arr) {
              let file_obj = {};
              file_obj.name = file_arr[i].split('|')[1];
              file_obj.url = file_arr[i].split('|')[0];
              this.fileList.push(file_obj)
            }
          }
        }
      })
    },
    /**附件上传网络请求*/
    appendixHttpRequest(param){
      const { token } = useUserStore()
      let file=param.file;
      let formData = new FormData();
      formData.append('filedata', file)
      formData.append('api',this.extraParameters.api)
      formData.append('urltype',this.extraParameters.urltype)
      formData.append('token',token);
      //axios
      let that=this;
      that.$axios({
        method: 'post',
        url: this.updateUrl,
        headers:{'Content-Type': 'multipart/form-data'},
        data: formData
      })
          .then(res=>{
            var response=res.data;
            if(response.code=="1"){//单个上传后台返回的是相对地址
              let tempArr={
                name:response.data.file_name,
                url:response.data.url
              }
              //存入appendixList列表中
              this.fileList.push(tempArr);
              this.$message({
                message: response.msg,
                type: 'success'
              })
            }

          })
          .catch(error=>{
            console.log(error)
          })
    },
    /**附件删除*/
    handleRemoveAppendix(file){
      let fileName = file.name;
      this.fileList = this.fileList.filter(item => item.name != fileName);
    },

  },
  mounted() {
    if(this.$route.params.id != '') {
      this.wwj_id = this.$route.params.id;
      this.getDetail();
    }
  }
}
</script>

<style lang="scss" scoped>
.el-button--text{
  color:#4351FF;
}
</style>