<template>
  <div>
    <el-dialog
      :title="dialogForm.title"
      :visible.sync="dialogForm.dialogVisible"
      width="40%"
      @close="handleClose">
      <el-row>
        <el-form :model="dialogForm" ref="dialogForm" :rules="rules">
          <el-form-item :label="dialogForm.label" prop="textarea">
            <el-input
              type="textarea"
              :autosize="{ minRows: 4, maxRows:5}"
              placeholder="请输入内容"
              v-model="dialogForm.textarea">
            </el-input>
          </el-form-item>
          <el-col v-if="dialogType=='xmjz'">
            <el-form-item label="附件" prop="fileList">
              <template slot="label">附件<span style="color: #999db0;">(支持.jpg、png、pdf、doc、.xlsx、.xls文件格式，文件大小不超过20M )</span></template>
              <el-upload
                ref="signatureUpload"
                :action="action"
                class="signature-manage_upload uploadSty"
                accept=".jpeg,.jpg,.png,.pdf,.xlsx,.xls,.doc"
                :limit="8"
                :file-list="dialogForm.fileList"
                :on-remove="handleDealImgRemove"
                :http-request="httpRequest"
                :before-upload="beforeAvatarUpload"
              >
                <div style="display: flex;justify-content: space-between;width: 100%; align-items: center;">
                  <span>文件名称</span>
                  <el-button size="small" type="primary">+上传附件</el-button>
                </div>
              </el-upload>
              <el-table
                :data="tableImportData"
                style="width: 100%; margin-top: 10px;">
                <el-table-column prop="name" label=""></el-table-column>
                <el-table-column prop="size" label=""></el-table-column>
                <el-table-column prop="opt" label="" width="80">
                  <template slot-scope="scope">
                    <i class="el-icon-delete" style="color: red;cursor: pointer" @click="fileDelete(scope.row,scope.$index)"></i>
                  </template>
                </el-table-column>
              </el-table>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="handleSubmit('dialogForm')">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { submitData } from '@/api/projectSubmission'
import req from '@/utils/request.js'
export default {
  name: "projectSubmissionDialog",
  data(){
    return {
      dialogType:'rk',
      tableImportData:[],
      action: '',
      newFile: new FormData(), //   1. 定义一个newFile变量（FormData 对象）
      dialogForm:{
        dialogVisible:false,
        title:'入库',
        textarea:'',
        label:'入库说明:',
        fProjectId:'',
        fEventType:'',
        fileList:[]
      },
      rules:{
        textarea:[
          { required: true, message: this.dialogType =='rk'?'请填写入库说明':this.dialogType=='zf'?'请填写作废说明':this.dialogType == 'xmjz'?'请填写本次项目进展说明':'请填写内容', trigger: 'blur' }
        ],
        fileList:[
          {required: true,message:'请上传附件'}
        ]
      }
    }
  },
  created() {
    // 上传路径拼接
    this.action = `${window.context.portal}/system/file/v1/upload`
  },
  methods:{
    open(type,row){
      console.log('打印type',type);
      console.log('打印row',row);
      this.dialogType = type;
      this.dialogForm.fileList = [];
      this.tableImportData = [];
      console.log('打印this.dialogType',this.dialogType);
      this.dialogForm.fProjectId = row.id_;
      this.dialogForm.dialogVisible = true;
      switch (type){
        case 'rk':
          this.dialogForm.title = '入库';
          this.dialogForm.label ='入库说明:';
          this.dialogForm.fEventType = 'ruku';
          break;
        case 'zf':
          this.dialogForm.label = '作废说明:';
          this.dialogForm.title = '作废';
          this.dialogForm.fEventType = 'zuofei';
          break;
        case 'xmjz':
          this.dialogForm.title = '项目进展';
          this.dialogForm.label ='本次项目进展说明:';
          this.dialogForm.fEventType = 'xiangmujinzhan';
          break;
        case 'ck':
          this.dialogForm.label = '出库说明:';
          this.dialogForm.title = '出库';
          this.dialogForm.fEventType = 'chuku';
          break;
      }
    },
    // 自定义上传
    async httpRequest(val) {
      console.log('打印val',val);
      const formData = new FormData()
      formData.append('files', val.file)
      let response = await req.post(
        window.context.portal + '/system/file/v1/fileUpload',
        formData
      )
      if (response.success) {
        this.$message.success('上传成功')
        console.log('打印response',response);
        this.tableImportData.push({
          name:response.fileName,
          size:Number(response.size / 1024 / 1024).toFixed(4) + 'M',
          fileId:response.fileId,
          fileObj:JSON.stringify(response)
        });
        this.dialogForm.fileList = this.tableImportData;
        // this.form.fileId = response.fileId
        // this.form.userId = this.$store.state.user.userInfo.user.userId
      }
    },
    //删除附件
    // 删除
    handleDealImgRemove(file, fileList) {
      this.noneBtnImg = fileList.length >= this.limitCountImg
      this.fileList = []
    },     //头像上传
    beforeAvatarUpload(file) {
      var FileExt = file.name.replace(/.+\./, '');
      console.log('dayfileExt',FileExt);
      let arr = ['jpg','png','pdf','xlsx','doc','xls']
      if (arr.indexOf(FileExt.toLowerCase()) === -1) {
        this.$message({
          type: 'warning',
          message: '请上传后缀名为jpg、png、pdf、doc、xlsx、xls类型的附件',
        })
        return false
      }
      const isLt20M = file.size / 1024 / 1024 < 20
      if (!isLt20M) {
        setTimeout(() => {
          this.$message.error('上传附件大小不能超过 20MB!')
        }, 100);
      }
    },
    //删除附件数据
    fileDelete(row,index){
      console.log('打印row',row);
      this.tableImportData.splice(index,1)
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 8 个文件`);
    },
    handleSubmit(formName){
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          let params ={
            fProjectId:this.dialogForm.fProjectId,
            fEventType:this.dialogForm.fEventType,
            fProgressStatus:this.dialogForm.textarea
          }
          if(this.dialogType == 'xmjz'){
            // console.log('Day this.dialogForm',this.dialogForm.fileList,this.tableImportData);
            let photoList = this.tableImportData.map(item => JSON.parse(item.fileObj));
            // console.log('打印photoList',photoList);
            params.fFile = JSON.stringify(photoList);
          }
          await submitData(params).then((res)=>{
            console.log('打印res',res);
            if(res.code == 200){
              this.$message.success('操作成功!');
              // this.$emit("RefreshTable");
            }else{
              this.$message.error('操作失败!');
            }
            this.$emit('handleRefresh');
            this.dialogForm.dialogVisible = false;
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    handleClose(){
      this.$refs.dialogForm.resetFields();
      this.dialogForm.dialogVisible = false;
    },
  }
}
</script>

<style lang="scss" scoped>
::v-deep .uploadSty .el-upload-list {
  display: none;
  width: 0; /* 上传按钮隐藏 */
  height: 0;
  opacity: 0;
}
::v-deep .uploadSty .el-upload{
  width: 100%;
}

</style>