<template>
  <div class="project-cost-ledger-inner">
    <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.customerName" 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 multiple 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">
                  <div>
                    <img src="../../../assets/images/icon_wrapper.png">
                    <div class="name">宝安中学（集团）初中部改扩建工程施工总承包（二次公告）-加固修缮工程.xls</div>
                    <div class="prostatus i1">解析成功</div>
                    <div class="cz">
                      <div>重新上传</div>
                      <div>删除</div>
                    </div>
                  </div>
                  <div class="wrong">
                    失败原因：解析失败的原因展示
                  </div>
                </div>
                <div class="fileli">
                  <div>
                    <img src="../../../assets/images/icon_wrapper.png">
                    <div class="name">宝安中学（集团）初中部改扩建工程施工总承包（二次公告）-加固修缮工程.xls</div>
                    <div class="prostatus i2">解析中</div>
                    <div class="cz">
                      <div>重新上传</div>
                      <div>删除</div>
                    </div>
                  </div>
                </div>
                <div class="fileli">
                  <div>
                    <img src="../../../assets/images/icon_wrapper.png">
                    <div class="name">宝安中学（集团）初中部改扩建工程施工总承包（二次公告）-加固修缮工程.xls</div>
                    <div class="prostatus i3">解析失败</div>
                    <div class="cz">
                      <div>重新上传</div>
                      <div>删除</div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="upload">
                <el-upload
                  class="upload-demo"
                  action="https://jsonplaceholder.typicode.com/posts/"
                  :on-preview="handlePreview"
                  :on-remove="handleRemove"
                  :before-remove="beforeRemove"
                  multiple
                  :limit="3"
                  :on-exceed="handleExceed"
                  :file-list="fileList">
                  <el-button class="uploadpro"><img src="../../../assets/images/tips-plus.png">上传文件</el-button>
                  <!--<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>-->
                </el-upload>
              </div>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="工料汇总" prop="glhz">
              <div class="upload">
                <el-upload
                  class="upload-demo"
                  action="https://jsonplaceholder.typicode.com/posts/"
                  :on-preview="handlePreview"
                  :on-remove="handleRemove"
                  :before-remove="beforeRemove"
                  multiple
                  :limit="3"
                  :on-exceed="handleExceed"
                  :file-list="fileList">
                  <el-button class="uploadpro"><img src="../../../assets/images/tips-plus.png">上传文件</el-button>
                  <!--<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>-->
                </el-upload>
              </div>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="措施项目" prop="csxm">
              <div class="upload">
                <el-upload
                  class="upload-demo"
                  action="https://jsonplaceholder.typicode.com/posts/"
                  :on-preview="handlePreview"
                  :on-remove="handleRemove"
                  :before-remove="beforeRemove"
                  multiple
                  :limit="3"
                  :on-exceed="handleExceed"
                  :file-list="fileList">
                  <el-button class="uploadpro"><img src="../../../assets/images/tips-plus.png">上传文件</el-button>
                  <!--<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>-->
                </el-upload>
              </div>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="其他项目" prop="qtxm">
              <div class="upload">
                <el-upload
                  class="upload-demo"
                  action="https://jsonplaceholder.typicode.com/posts/"
                  :on-preview="handlePreview"
                  :on-remove="handleRemove"
                  :before-remove="beforeRemove"
                  multiple
                  :limit="3"
                  :on-exceed="handleExceed"
                  :file-list="fileList">
                  <el-button class="uploadpro"><img src="../../../assets/images/tips-plus.png">上传文件</el-button>
                  <!--<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>-->
                </el-upload>
              </div>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="现场经费" prop="xcjf">
              <div class="upload">
                <el-upload
                  class="upload-demo"
                  action="https://jsonplaceholder.typicode.com/posts/"
                  :on-preview="handlePreview"
                  :on-remove="handleRemove"
                  :before-remove="beforeRemove"
                  multiple
                  :limit="3"
                  :on-exceed="handleExceed"
                  :file-list="fileList">
                  <el-button class="uploadpro"><img src="../../../assets/images/tips-plus.png">上传文件</el-button>
                  <!--<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>-->
                </el-upload>
              </div>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="成本汇总" prop="cbhz">
              <div class="upload">
                <el-upload
                  class="upload-demo"
                  action="https://jsonplaceholder.typicode.com/posts/"
                  :on-preview="handlePreview"
                  :on-remove="handleRemove"
                  :before-remove="beforeRemove"
                  multiple
                  :limit="3"
                  :on-exceed="handleExceed"
                  :file-list="fileList">
                  <el-button class="uploadpro"><img src="../../../assets/images/tips-plus.png">上传文件</el-button>
                  <!--<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>-->
                </el-upload>
              </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">返回</el-button>
      </div>

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

<script>
  import { getDicts } from '@/api/system/dict/data'
  import { getProjectFileUploadDetail } from '@/api/projectCostLedger/index'

  export default {
    name: 'upload',
    props:{uploadData:null},
    data(){
      return{
        formdata:{
          cbStage:null,
        },
        cbStagelist:[],
        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' },],
        },
        fileList:[],


        directExpense:[],
        quantitySummary:[],
        measureProject:[],
        otherProject:[],
        sceneExpense:[],
        cbSummary:[],
      }
    },
    created() {
      //成本阶段
      getDicts('pro_cbstage').then(res => {
        this.cbStagelist = res.data
      })
      getProjectFileUploadDetail(this.uploadData.id).then(res=>{
        if(res.code == 200){
          if(res.data){
            this.directExpense=res.data.directExpense
            this.quantitySummary=res.data.quantitySummary
            this.measureProject=res.data.measureProject
            this.otherProject=res.data.otherProject
            this.sceneExpense=res.data.sceneExpense
            this.cbSummary=res.data.cbSummary
          }else{
            this.directExpense=[]
            this.quantitySummary=[]
            this.measureProject=[]
            this.otherProject=[]
            this.sceneExpense=[]
            this.cbSummary=[]
          }
        }
      })
      this.formdata = this.uploadData
      console.log(this.uploadData)
    },
    methods:{
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      },
      handleExceed(files, fileList) {
        this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
      },
      beforeRemove(file, fileList) {
        return this.$confirm(`确定移除 ${ file.name }？`);
      }
    }
  }
</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;
            &:last-child{
              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;
    }
  }

</style>
