<template>
  <div class="project-cost-ledger-inner">
    <el-upload
      ref="uploadpro"
      class="upload-demo"
      :multiple="true"
      accept=".xls,.xlsx"
      action=""
      drag
      :auto-upload="false"
      :on-change="handleFileListChange"
      :headers="headers">

    </el-upload>
    <div class="pro-upload">
    <div class="title_wrap i">
      <div class="title-small"><span>项目成本台账 <i class="el-icon-arrow-right"></i> </span>导入项目</div>
      <div class="enterprise_title">
        项目信息
      </div>
    </div>
      <div class="content-project">
        <el-form :model="formdata" label-width="82px" :rules="rules" label-position="right" :inline="true">
          <el-row>
            <el-form-item label="项目名称">
              <el-input v-model="formdata.projectName" disabled placeholder="请输入工程名称" clearable></el-input>
            </el-form-item>
            <el-form-item label="IPM项目编码" label-width="100px">
              <el-input v-model="formdata.ipmProjectNo" disabled placeholder="请输入IPM项目编码" clearable></el-input>
            </el-form-item>
            <el-form-item label="文件名称" label-width="100px">
              <el-input v-model="formdata.projectFileName" disabled placeholder="请输入文件名称" clearable></el-input>
            </el-form-item>
            <el-form-item label="成本阶段" prop="cbStage">
              <el-select v-model="formdata.cbStage" disabled placeholder="请选择" :collapse-tags="true"
                         clearable>
                <el-option v-for="(item,index) in cbStagelist" :label="item.dictLabel" :value="item.dictValue"
                           :key="index"></el-option>
              </el-select>
            </el-form-item>
          </el-row>
        </el-form>
      </div>
      <div class="title_wrap i">
        <div class="enterprise_title">
          导入文件 <div class="tips">操作指引 <img src="../../../assets/images/icon_tips_question.svg"/></div>
        </div>
      </div>
      <div class="upload-project">
        <el-form :model="uploaddata" label-width="200px" :rules="uprules" label-position="right" :inline="true">
          <el-row>
            <el-form-item label="直接费成本" prop="zjfcb">
              <div class="filelist">
                <div class="fileli" v-for="(item,index) in directExpense">
                  <div>
                    <img src="../../../assets/images/icon_wrapper.png">
                    <div class="name">{{item.fileName}}</div>
                    <template v-if="item.fileParseStatus">
                    <div class="prostatus i2" v-if="item.fileParseStatus == 1">解析中</div>
                    <div class="prostatus i1" v-if="item.fileParseStatus == 2">解析成功</div>
                    <div class="prostatus i3" v-if="item.fileParseStatus == 3">解析失败</div>
                    </template>
                    <div class="cz" v-if="item.fileParseStatus != 1">
                      <div v-if="item.fileParseStatus != 3"><a :href="item.fileOssUrl">下载</a></div>
                      <div v-if="item.fileParseStatus == 3 && prodetail == false">重新上传</div>
                      <div class="i" @click="deletefille(item.id)" v-if="prodetail == false">删除</div>
                    </div>
                  </div>
                  <div class="wrong" v-if="item.fileParseStatus&&item.fileParseStatus == 3">
                    失败原因：{{item.failRemark||'--'}}
                  </div>
                </div>
              </div>
              <div class="upload">
                <el-button class="uploadpro" @click="uplpro(0)"><img src="../../../assets/images/tips-plus.png">上传文件</el-button>
              </div>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="工料汇总" prop="glhz">
              <div class="filelist">
                <div class="fileli" v-for="(item,index) in quantitySummary">
                  <div>
                    <img src="../../../assets/images/icon_wrapper.png">
                    <div class="name">{{item.fileName}}</div>
                    <template v-if="item.fileParseStatus">
                      <div class="prostatus i2" v-if="item.fileParseStatus == 1">解析中</div>
                      <div class="prostatus i1" v-if="item.fileParseStatus == 2">解析成功</div>
                      <div class="prostatus i3" v-if="item.fileParseStatus == 3">解析失败</div>
                    </template>
                    <div class="cz" v-if="item.fileParseStatus != 1">
                      <div v-if="item.fileParseStatus != 3"><a :href="item.fileOssUrl">下载</a></div>
                      <div v-if="item.fileParseStatus == 3 && prodetail == false">重新上传</div>
                      <div class="i" @click="deletefille(item.id)" v-if="prodetail == false">删除</div>
                    </div>
                  </div>
                  <div class="wrong" v-if="item.fileParseStatus&&item.fileParseStatus == 3">
                    失败原因：{{item.failRemark||'--'}}
                  </div>
                </div>
              </div>
              <div class="upload">
                <el-button class="uploadpro" @click="uplpro(1)"><img src="../../../assets/images/tips-plus.png">上传文件</el-button>
              </div>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="措施项目" prop="csxm">
              <div class="filelist">
                <div class="fileli" v-for="(item,index) in measureProject">
                  <div>
                    <img src="../../../assets/images/icon_wrapper.png">
                    <div class="name">{{item.fileName}}</div>
                    <template v-if="item.fileParseStatus">
                      <div class="prostatus i2" v-if="item.fileParseStatus == 1">解析中</div>
                      <div class="prostatus i1" v-if="item.fileParseStatus == 2">解析成功</div>
                      <div class="prostatus i3" v-if="item.fileParseStatus == 3">解析失败</div>
                    </template>
                    <div class="cz" v-if="item.fileParseStatus != 1">
                      <div v-if="item.fileParseStatus != 3"><a :href="item.fileOssUrl">下载</a></div>
                      <div v-if="item.fileParseStatus == 3 && prodetail == false">重新上传</div>
                      <div class="i" @click="deletefille(item.id)" v-if="prodetail == false">删除</div>
                    </div>
                  </div>
                  <div class="wrong" v-if="item.fileParseStatus&&item.fileParseStatus == 3">
                    失败原因：{{item.failRemark||'--'}}
                  </div>
                </div>
              </div>
              <div class="upload">
                <el-button class="uploadpro" @click="uplpro(2)"><img src="../../../assets/images/tips-plus.png">上传文件</el-button>
              </div>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="其他项目" prop="qtxm">
              <div class="filelist">
                <div class="fileli" v-for="(item,index) in otherProject">
                  <div>
                    <img src="../../../assets/images/icon_wrapper.png">
                    <div class="name">{{item.fileName}}</div>
                    <template v-if="item.fileParseStatus">
                      <div class="prostatus i2" v-if="item.fileParseStatus == 1">解析中</div>
                      <div class="prostatus i1" v-if="item.fileParseStatus == 2">解析成功</div>
                      <div class="prostatus i3" v-if="item.fileParseStatus == 3">解析失败</div>
                    </template>
                    <div class="cz" v-if="item.fileParseStatus != 1">
                      <div v-if="item.fileParseStatus != 3"><a :href="item.fileOssUrl">下载</a></div>
                      <div v-if="item.fileParseStatus == 3 && prodetail == false">重新上传</div>
                      <div class="i" @click="deletefille(item.id)" v-if="prodetail == false">删除</div>
                    </div>
                  </div>
                  <div class="wrong" v-if="item.fileParseStatus&&item.fileParseStatus == 3">
                    失败原因：{{item.failRemark||'--'}}
                  </div>
                </div>
              </div>
              <div class="upload">
                <el-button class="uploadpro" @click="uplpro(3)"><img src="../../../assets/images/tips-plus.png">上传文件</el-button>
              </div>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="现场经费" prop="xcjf">
              <div class="filelist">
                <div class="fileli" v-for="(item,index) in sceneExpense">
                  <div>
                    <img src="../../../assets/images/icon_wrapper.png">
                    <div class="name">{{item.fileName}}</div>
                    <template v-if="item.fileParseStatus">
                      <div class="prostatus i2" v-if="item.fileParseStatus == 1">解析中</div>
                      <div class="prostatus i1" v-if="item.fileParseStatus == 2">解析成功</div>
                      <div class="prostatus i3" v-if="item.fileParseStatus == 3">解析失败</div>
                    </template>
                    <div class="cz" v-if="item.fileParseStatus != 1">
                      <div v-if="item.fileParseStatus != 3"><a :href="item.fileOssUrl">下载</a></div>
                      <div v-if="item.fileParseStatus == 3 && prodetail == false">重新上传</div>
                      <div class="i" @click="deletefille(item.id)" v-if="prodetail == false">删除</div>
                    </div>
                  </div>
                  <div class="wrong" v-if="item.fileParseStatus&&item.fileParseStatus == 3">
                    失败原因：{{item.failRemark||'--'}}
                  </div>
                </div>
              </div>
              <div class="upload">
                <el-button class="uploadpro" @click="uplpro(4)"><img src="../../../assets/images/tips-plus.png">上传文件</el-button>
              </div>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="成本汇总" prop="cbhz">
              <div class="filelist">
                <div class="fileli" v-for="(item,index) in cbSummary">
                  <div>
                    <img src="../../../assets/images/icon_wrapper.png">
                    <div class="name">{{item.fileName}}</div>
                    <template v-if="item.fileParseStatus">
                      <div class="prostatus i2" v-if="item.fileParseStatus == 1">解析中</div>
                      <div class="prostatus i1" v-if="item.fileParseStatus == 2">解析成功</div>
                      <div class="prostatus i3" v-if="item.fileParseStatus == 3">解析失败</div>
                    </template>
                    <div class="cz" v-if="item.fileParseStatus != 1">
                      <div v-if="item.fileParseStatus != 3"><a :href="item.fileOssUrl">下载</a></div>
                      <div v-if="item.fileParseStatus == 3 && prodetail == false">重新上传</div>
                      <div class="i" @click="deletefille(item.id)" v-if="prodetail == false">删除</div>
                    </div>
                  </div>
                  <div class="wrong" v-if="item.fileParseStatus&&item.fileParseStatus == 3">
                    失败原因：{{item.failRemark||'--'}}
                  </div>
                </div>
              </div>
              <div class="upload">
                <el-button class="uploadpro" @click="uplpro(5)"><img src="../../../assets/images/tips-plus.png">上传文件</el-button>
              </div>
            </el-form-item>
          </el-row>
        </el-form>
      </div>
      <el-divider></el-divider>
      <div class="pro-btns">
        <el-button type="primary" size="small" >导入数据</el-button>
        <el-button size="small" @click="goback">返回</el-button>
      </div>

    </div>
  </div>
</template>

<script>
  import { getToken } from '@/utils/auth'
  // import { getDicts } from '@/api/system/dict/data'
  import { deleteCbProjectFile, getProjectFileUploadDetail, uploadCbProjectFile } from '@/api/projectCostLedger/index'

  export default {
    name: 'upload',
    props: {
      uploadData: Object,
      cbStagelist: Array,
      prodetail: Boolean,//是否是查看 true 不可编辑 false 可编辑
    },
    data(){
      return{
        formdata:{
          cbStage:"",
        },
        headers: {
          Authorization: "Bearer " + getToken(),
        },
        rules:{
          cbStage:[{ required: true, message: '请选择成本阶段！', trigger: 'blur' },],
        },
        uploaddata:{},
        uprules:{
          zjfcb:[{ required: true, trigger: 'blur' },],
          glhz:[{ required: true, trigger: 'blur' },],
          csxm:[{ required: true, trigger: 'blur' },],
          qtxm:[{ required: true, trigger: 'blur' },],
          xcjf:[{ required: true, trigger: 'blur' },],
          cbhz:[{ required: true, trigger: 'blur' },],
        },

        //各个类型数据集
        directExpense:[],
        quantitySummary:[],
        measureProject:[],
        otherProject:[],
        sceneExpense:[],
        cbSummary:[],
        uploadtype:0,//上传的版块类型
      }
    },
    created() {
      this.formdata = JSON.parse(JSON.stringify(this.uploadData))
      this.formdata.cbStage = this.formdata.cbStage.toString()
      this.getDetail()
    },
    methods:{
      goback(){
        this.$emit('closeupload')
      },
      getDetail(){
        this.directExpense=[]
        this.quantitySummary=[]
        this.measureProject=[]
        this.otherProject=[]
        this.sceneExpense=[]
        this.cbSummary=[]
        getProjectFileUploadDetail(this.uploadData.id).then(res=>{
          if(res.code == 200){
            if(res.data){
              this.directExpense = [...this.directExpense,...res.data.directExpense]
              this.quantitySummary = [...this.quantitySummary,...res.data.quantitySummary]
              this.measureProject = [...this.measureProject,...res.data.measureProject]
              this.otherProject = [...this.otherProject,...res.data.otherProject]
              this.sceneExpense = [...this.sceneExpense,...res.data.sceneExpense]
              this.cbSummary = [...this.cbSummary,...res.data.cbSummary]
            }
          }
        })
      },
      uplpro(type){
        if(!this.prodetail){
          this.uploadtype = type
          this.$refs.uploadpro.$el.querySelector('input').click()
        }
      },
      deletefille(id){
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteCbProjectFile(id).then(res=>{
            if(res.code == 200){
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
              this.getDetail()
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      handleFileListChange(file, fileList) {
        var testmsg = file.name.substring(file.name.lastIndexOf(".") + 1);
        const extension = testmsg === "xlsx";
        const extension1 = testmsg === "xls";
        if (!extension && !extension1 ) {
          this.$message({
            message: "上传文件只能是.xls,.xlsx格式!",
            type: "warning",
          });
          return false;
        }
        const isLt2M = file.size / 1024 / 1024 < 10
        if (!isLt2M) {
          this.$refs.upload.clearFiles()
          this.$message({
            message: '上传文件大小不能超过 10MB!',
            type: 'warning'
          })
          return false
        }
        const formdata = new FormData()
        formdata.append("file",new File([file.raw],encodeURIComponent(file.name)))
        formdata.append("projectId",this.formdata.id)
        formdata.append("cbType",this.uploadtype)
        uploadCbProjectFile(formdata).then(res=>{
          if(res.code == 200){
            let data = res.data
            data.id = data.fileId
            switch (this.uploadtype) {
              case 0:
                this.directExpense.push(data)
                break;
              case 1:
                this.quantitySummary.push(data)
                break;
              case 2:
                this.measureProject.push(data)
                break;
              case 3:
                this.otherProject.push(data)
                break;
              case 4:
                this.sceneExpense.push(data)
                break;
              case 5:
                this.cbSummary.push(data)
                break;
              default:
                break
            }
          }
        })
      },
    }
  }
</script>

<style scoped lang="scss">
.title-small{
  font-size: 12px;
  line-height: 24px;
  margin-bottom: 16px;
  >span{
    font-size: 14px;
    opacity: 0.4;
    >i{
      font-size: 12px;
      margin-right: 4px;
    }
  }
}
.title_wrap.i{
  border: 0;
  padding: 16px;
  .tips{
    display: inline-block;
    font-size: 14px;
    color: #FFAB44;
    line-height: 22px;
    font-weight: 400;
    padding-left: 8px;
    cursor: pointer;
    >img{
      float: right;
      margin-top: 5px;
      margin-left: 2px;
    }
  }
}
 ::v-deep .pro-upload{
    background: #fff;
   .el-form-item{
     margin-bottom: 16px;
   }
   .el-form-item__label {
     font-weight: 400;
     opacity: 0.8;
     padding: 0;
     font-size: 14px;
     color: #232323;
     padding-right: 16px;
   }
  }
  ::v-deep .upload-project{
    padding: 0 16px;
    .el-form-item{
      width: 751px;
      .el-form-item__label{
        display: block;
        text-align: left;
      }
    }
    .filelist{
      .fileli{
        min-height: 36px;
        margin-top: 8px;
        width: 751px;
        background: #F7F8FA;
        border-radius: 2px;
        padding: 7px 12px 7px 40px;
        img{
          width: 16px;
          float: left;
          margin-left: -26px;
          margin-top: 3px;
        }
        .name{
          float: left;
          height: 22px;
          font-size: 14px;
          font-weight: 400;
          color: #232323;
          line-height: 22px;
          max-width: 515px;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
        }
        .prostatus{
          float: left;
          margin-left: 12px;
          height: 22px;
          border-radius: 2px;
          color: #fff;
          padding: 0 8px;
          line-height: 22px;
          font-size: 12px;
          &.i1{
            background: #0CBC6D;
          }
          &.i2{
            background: #FFAB44;
          }
          &.i3{
            background: #FF3C3C;
          }
        }
        .cz{
          float: right;
          height: 22px;
          line-height: 22px;
          >div{
            cursor: pointer;
            margin-left: 12px;
            color: #0081FF;
            display: inline-block;
            &.i{
              color: #FF3C3C;
            }
          }
        }
      }
      .wrong{
        clear: both;
        margin-left: -28px;
        font-size: 12px;
        color: #FF3C3C;
        line-height: 21px;
        padding-top: 4px;
      }
    }
    .upload{
      margin-top: 8px;
      .el-upload{
        width: 100%;
      }
      .uploadpro{
        width: 750px;
        height: 36px;
        line-height: 36px;
        background: #FFFFFF;
        border-radius: 2px;
        border: 1px solid #DCDFE6;
        padding: 0;
        display: block;
        font-size: 14px;
        color: #232323;
        img{
          margin-right: 12px;
          width: 14px;
          margin-top: -4px;
        }
      }
    }
  }
  .pro-btns{
    padding: 16px 0;
    text-align: center;
    .el-button--primary{
      background: #0081ff;
      border-color: #0081ff;
    }
    .el-button{
      padding: 0 16px;
      height: 34px;
      line-height: 34px;
      border-radius: 2px;
    }
    .el-button + .el-button{
      margin-left: 12px;
    }
  }
.upload-demo{
  opacity: 0;
  position: absolute;
  z-index: -9999;
}
</style>
