<template>
  <div>
    <div class="activity-upload" style="padding-bottom:20px">
      <div class="btnupload">
         <i class="el-icon-plus avatar-uploader-icon"></i>
         <file-upload-pdf
           class="Upload"
           :accept="'.xlsx,.xls,.pdf,.zip,.rar,.7z,.jpg,.png,.mp4'"
           :multiple="false"
           :uploadcondition="beforeOtherUpload"
           @UploadErrorEvent="UploadErrorOtherproof_url"
           @UploadSuccessEvent="UploadSuccessOtherproof_url"
         />
       </div>
       <div class="txt-tips fl">
         <p>建议大小：小于5MB</p>
         <p>文件格式：.xlsx,.xls,.pdf,.zip,.rar,.7z,.jpg,.png,.mp4</p>
      </div>
    </div>

    <div style="display:flex">
      <p style="font-size:14px;margin-left:5px;margin-right:10px">现场资料:</p>
      <el-table border size="mini" :data="proof_url">
        <!-- <el-table-column label="计划编号" /> -->
        <el-table-column label="文件名" prop="name" />
        <el-table-column label="类型">
          <template slot-scope="scope">
            {{ getFIieTypeName(matchFileSuffixType(scope.row.name)) }}
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="mini" @click="deleteItem(scope.$index)">删除</el-button>
            <el-button 
              v-if="matchFileSuffixType(scope.row.name) === 'video' || matchFileSuffixType(scope.row.name) === 'image'" 
              type="text" 
              size="mini"
               @click="previewItem(scope.row.url)"
            >预览</el-button>

            <el-button v-else type="text" size="mini" @click="previewItem(scope.row.url)">下载</el-button>
          </template>
          
        </el-table-column>
      </el-table>
    </div>

    <div style="display:flex;justify-content:flex-end;margin:10px 0px">
      <el-button size="mini" type="primary" @click="onSubmit" :loading="loading">保 存</el-button>
    </div>
  </div>
</template>

<script>
import { fileSuffixTypeUtil } from "@/utils/fileType"
import asyncRequest from "@/apis/service/customerService/demandOrder";
const { matchFileSuffixType,getFIieTypeName } = fileSuffixTypeUtil
export default {
  props: ['sitem'],
  data(){
    return {
      loading:false,
      proof_url:[]
    }
  },
  methods:{
    matchFileSuffixType,
    getFIieTypeName,
    deleteItem(index){
      this.proof_url.splice(index,1)
    },
    previewItem(url){
      console.log(url)
      window.open(url)
    },
    beforeOtherUpload(file) {
      let isJPG = false;

      console.log(file)
      if (
        file.type === "application/vnd.ms-excel" ||
        file.type ===
          "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" ||
        file.type === "application/pdf" ||
        file.type === "application/x-zip-compressed" ||
        file.type === "image/png" ||
        file.type === "image/jpg" ||
        file.type === "video/mp4"
      ) {
        isJPG = true;
      }
      let name = file.name;
      let list = name.split(".");
      if (list[list.length - 1] === "rar" || list[list.length - 1] === "7z" || list[list.length - 1] === "zip") {
        isJPG = true;
      }

      const isLt2M = file.size / 1024 / 1024 < 5;
      if (!isJPG) {
        this.$message.error("文件格式不正确！");
      }
      if (!isLt2M) {
        this.$message.error("文件大小不能超过 5MB!");
      }
      return isJPG && isLt2M;
    },
        //其他文件上传失败
    UploadErrorOtherproof_url(res) {
      if (res !== "break") {
        this.$message.error("文件上传失败!");
      }
    },
    async UploadSuccessOtherproof_url(data) {
      const { url, name } = data;
      this.proof_url.push({ url, name });
    },

    async onSubmit(){
      if(this.proof_url.length === 0){
        this.$message.warning('请上传现场资料')
        return
      }

      this.loading = true
      
      const params = {
        id: this.sitem.id, 
        proof_url: this.proof_url.map(({url}) => url),
        status: 7 
      }

      const { code } = await asyncRequest.proofCheck(params)
      this.loading = false
      if(code !== 1) return
      this.$emit('refresh')
    }
  }
}
</script>
