<template>
  <div class="app-container">
    <!-- 附件对话框 -->
    <el-dialog v-dialogDrag :close-on-click-modal="false" :visible.sync="open" append-to-body title="现场照片"
               width="1000px" destroy-on-close :key="uploadKey">
      <el-upload
        :action="action"
        :headers="headers"
        list-type="picture-card"
        :file-list="fileList"
        :on-preview="handlePictureCardPreview"
        :on-remove="handleRemove">
        <i class="el-icon-plus"></i>
      </el-upload>
    </el-dialog>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
  </div>
</template>

<script>
import {delFile, listFile} from "@/api/pssr/file";
import {getToken} from "@/utils/auth";

export default {
  name: "pssrFile",
  data() {
    return {
      // PSSR附件表格数据
      fileList: [],
      // 是否显示弹出层
      open: false,
      uploadKey:null,
      dialogImageUrl: '',
      dialogVisible: false,
      headers: {Authorization: "Bearer " + getToken()},
      action: null,
    };
  },
  methods: {
    init(subId, forShort, itemId, fileList) {
      this.open = true;
      this.uploadKey = Date.now();
      this.fileList=[]
      listFile({subId:subId,forShort:forShort,itemId:itemId}).then(res=>{
        this.fileList=res.rows;
        this.fileList.forEach(item => {
          item.url = process.env.VUE_APP_BASE_API + item.fileUrl;
          item.name = item.fileName;
        });
      })
      this.action = process.env.VUE_APP_BASE_API + "/pssr/file/uploadFile?subId=" + subId + "&itemId=" + itemId
        + "&forShort=" + forShort
    },
    handleRemove(file, fileList) {
      delFile(file.fileId||file.response.data)
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    }
  }
};
</script>
