<template>
    <div class="upload">
        <div class="upload-left">
          <div class='uploadC' style="background:rgba(244,244,244,1);height:300px">
            <div class='upload-title'>
              <Input type='text' v-model='fileName' style='width:70%;margin-left:4%;margin-top:40px'></Input>
              <input
                ref="input"
                class='nativeInput'
                type="file"
                :class="['prefixCls' + '-input']"
                @change="handleChange"
                :multiple="true"
                :format="['html','doc','pdf','txt','docx']"
                :accept="accept"
                >
              <Button @click='selFiles' style='width:20%;margin-top:40px;margin-left:-4px;color:black'>选择文件</Button>
              <div class='contentTips'>
                <p style="font-size:12px;margin-left:3.5%;text-align:center;height:40px;line-height:40px;width:90%;display:inline-block;margin-top:30px">单个文件不能大于2MB，支持html,doc,docx,txt,pdf等格式，暂时不支持压缩格式</p>
                <p style="font-size:12px;margin-left:2%;text-align:center;height:40px;line-height:40px;width:90%">支持最多二十份简历批量上传</p>
              </div>
              <Button @click='uploadBtn' style='width:20%;margin-left:38%;margin-top:30px' type='primary'>上传</Button>
            </div>   
              <!-- 上传文件 -->
            <Modal v-model='uploadModal' :closable='false' :mask-closable='false'>
              <div>
                <h4 style="font-size:20px;text-align:center;margin-bottom:20px">{{filetile}}</h4>
                <div v-for='(item,index) in dataList' class='process' :key='index'>
                    <p style='padding-top:5px;'>{{item.name}}</p>
                    <span class='title' style="float:right;" v-show="item.Code==0">{{item.title}}</span>
                    <span class='title' style="float:right;color:red" v-show="item.Code==1||item.Code==2">{{item.title}}</span>
                    <Progress :percent="item.percentage" hide-info :status='item.status'></Progress>
                </div>
              </div>
              <div slot='footer'  >
                    <Button @click='closeModal' v-show="activeT==true">完成</Button>
              </div>
            </Modal>
            <Modal
            v-model="modal6"
            width='280px'
            :closable='false'
            >
            <div >
                <h2 style="text-align: center;color:black">提示</h2>
                <p>删除后不可恢复，是否确定永久删除简历？</p>
            </div>
            <div  slot='footer' style="text-align:center">
                <Button type='primary' @click='modal6=false'>取消</Button>
                <Button type='primary' @click="delateONE" >确定</Button>
            </div>
            </Modal>
          </div>
        <div class="leftcontrentFotter">
          <h5 style="width:100%;height:7%;background:rgb(0,176,160);text-align:center;line-height:40px;color:white;font-size:15px;font-weight:bold">上传记录</h5>
          <div style="width:100%;background:rgb(0,176,160); opacity: 0.7;overflow-y:auto;height:93%;">
              <!-- <div style="width:100%;height:10px;background:rgb(0,176,160)"></div> -->
              <div class="contentMASSAGE" v-for="(item,index) in ajaxData" :key="index">
                  <p @click="getResumeData(item.resumeId)" style="margin-top:10px">
                      <span style="color:#000000;margin:10px 0 0 10px;display:inline-block;overflow:hidden;text-overflow:ellipsis;white-space: nowrap; cursor:pointer">{{item.name}}  |</span>
                      <span style="color:#000000;display:inline-block;overflow:hidden;text-overflow:ellipsis;white-space: nowrap; cursor:pointer">{{item.mobile}}  |</span>
                      <span style="color:#000000;display:inline-block;overflow:hidden;text-overflow:ellipsis;white-space: nowrap; cursor:pointer">{{item.age}}岁|</span>
                      <span style="color:#000000;display:inline-block;overflow:hidden;text-overflow:ellipsis;white-space: nowrap; cursor:pointer">{{item.gender}}  |</span>
                      <span style="color:#000000;display:inline-block;overflow:hidden;text-overflow:ellipsis;white-space: nowrap; cursor:pointer">{{item.workYears}}年 |</span>
                      <span style="color:#000000;display:inline-block;overflow:hidden;text-overflow:ellipsis;white-space: nowrap; cursor:pointer">{{item.degree}}  |</span>
                      <span style="color:#000000;width:28%;display:inline-block;overflow:hidden;text-overflow:ellipsis;white-space: nowrap; cursor:pointer">{{item.expectedTitle}}</span>
                  </p>
                  <p style="margin-top:0px;color:Grey">
                      <span style="color:Grey;margin:5px 0 0 10px;display:inline-block">{{item.createTime}}入库|</span>
                      <span>{{item.creator}}</span>
                  </p>
                  <Button  type='primary' style="margin:-55px 0 0 83%;width:60px;z-index:99" @click="delateONEModal(item.resumeId)">删除</Button>
              </div>
          </div>
        </div>
    </div>
    <div class="upload-right" style="width:68%">
        <p style="height:40px;width:100%;line-height:40px;background:#F2F2F2;">
            <span style="margin-left:30px;color:#2d8cf0;font-size:16px">预览</span>
        </p>
        <div style="width:100%;float:left;">
        <div style="margin:0 auto;width:860px">
        <div class="personalInformation" v-show="JSON.stringify(resume)!=='{}'">
      <p class="bestmessage">
        <span>
          <img src="https://o7oe0d6qz.qnssl.com/image/icon_%E5%9F%BA%E6%9C%AC%E4%BF%A1%E6%81%AF_23_16px.png" style="height:16px;width:23px;vertical-align: middle;margin-top:-4px"></span>
        <span style="margin-left:7px;font-size:16px;color:#0092FF">基本信息</span>
        <span style="float:right;width:50px;height:24px;margin-right:5px"><Button type="primary" size='small' style="width:50px;height:24px" @click="downloadONE(downloadId)">下载</Button></span>
      </p>
      <div class="personalInformation-left">
        <p style="margin-top:20px">姓名：{{resume&&resume.ownerName}}</p>
        <p>联系电话：{{resume&&resume.ownerMobile}}</p>
        <p>电子邮箱：{{resume&&resume.email}}</p>
        <p>所在地：{{resume&&resume.locationCity}}</p>
        <p>求职状态：{{resume&&resume.statusMessage}}</p>
        <p>期望行业：{{resume&&resume.industries}}</p>
        <p>期望职位：{{resume&&resume.expectTitles}}</p>
      </div>
      <div class="personalInformation-right">
        <p style="margin-top:20px">年龄：{{resume&&resume.ownerAge}}岁</p>
        <p>职位：{{resume&&resume.ownerExpectTitles}}</p>
        <p>学历：{{resume&&resume.ownerHighestDegree}}</p>
        <p>经验：{{resume&&resume.workYearsOriginal}}年</p>
        <p style="margin-top:30px">期望薪资：{{resume&&resume.expectSalary}}</p>
        <p>期望地区：{{resume&&resume.city}}</p>
      </div>
    </div>
    <div class="workExperience" v-show="roList.length !==0 ">
      <p class="bestmessage">
        <span>
          <img img src="https://o7oe0d6qz.qnssl.com/image/icon_%E5%B7%A5%E4%BD%9C%E7%BB%8F%E5%8E%86_20_18px.png" style="height:16px;width:23px; vertical-align: middle;margin-top:-4px"></span>
        <span style="margin-left:7px;font-size:16px;color:#0092FF">工作经历</span>
      </p>
      <div class="workExperience-detail"  v-for="(item,index) in roList" :key="index">
        <div class="workExperience-top">
         <p style="height:28px;line-height:28px;font-size:14px;">
           <span style="margin-left:30px">{{item.startTime}}-{{item.endTime}}</span>
           <span style="margin-left:18px"><span>{{item.company}}<span>({{item.workTime}})</span></span></span>
           <span style="float:right;margin-right:30px">
            <span>{{item.industry}}</span>
            <span>{{item.companyType}}</span>
           </span>
         </p>
         <p style="height:28px;line-height:28px;font-size:14px;">
           <span style="float:right;margin-right:30px">{{item.department}}</span>
         </p>
        </div>
        <div class="workExperience-bottom">{{item.desc}}</div>
      </div>
    </div>
    <div class="projectExperience" v-show="rpList.length !==0 ">
      <p class="bestmessage">
        <span>
          <img src="https://o7oe0d6qz.qnssl.com/image/icon_%E9%A1%B9%E7%9B%AE%E7%BB%8F%E5%8E%86_20_20px.png" style="height:14px;width:19px; vertical-align: middle;margin-top:-4px;margin-left:2px"></span>
        <span style="margin-left:7px;font-size:16px;color:#0092FF">项目经历</span>
      </p>
      <div class="projectExperience-detail" v-for="(item,index) in rpList" :key="index">
        <div class="projectExperience-top">
         <p style="height:28px;line-height:28px;font-size:14px;">
           <span style="margin-left:30px">{{item.startYear}}/{{item.startMonth}}-{{item.endYear}}/{{item.endMonth}}</span>
           <span style="margin-left:18px"><span>{{item.name}}<span></span></span></span>
           <span style="float:right;margin-right:30px">
            <span>{{item.post}}</span>
           </span>
         </p>
        </div>
        <div class="projectExperience-bottom">{{item.desc}}</div>
      </div>
    </div>
    <div class="internshipExperience" v-show="riList.length !==0 ">
      <p class="bestmessage">
        <span >
          <img src="https://o7oe0d6qz.qnssl.com/image/icon_%E5%AE%9E%E4%B9%A0%E7%BB%8F%E5%8E%86_21_18px.png" style="height:16px;width:23px; vertical-align: middle;margin-top:-4px"></span>
        <span style="margin-left:7px;font-size:16px;color:#0092FF">实习经历</span>
      </p>
      <div class="internshipExperience-detail"  v-for="(item,index) in riList" :key="index">
        <div class="internshipExperience-top">
         <p style="height:28px;line-height:28px;font-size:14px;">
           <span style="margin-left:30px">{{item.startYear}}/{{item.startMonth}}-{{item.endYear}}/{{item.endMonth}}</span>
           <span style="margin-left:18px"><span>{{item.company}}<span></span></span></span>
           <span style="float:right;margin-right:30px">
            <span>{{item.industry}}</span>
           </span>
         </p>
          <p style="height:28px;line-height:28px;font-size:14px;">
           <span style="float:right;margin-right:30px">{{item.title}}</span>
          </p>
        </div>
        <div class="internshipExperience-bottom">{{item.desc}}</div>
      </div>
    </div>
    <div class="educationalExperience" v-show="reList.length !==0">
      <p class="bestmessage">
        <span>
          <img src="https://o7oe0d6qz.qnssl.com/image/icon_%E6%95%99%E8%82%B2%E7%BB%8F%E5%8E%86_26_20px.png" style="height:16px;width:23px; vertical-align: middle;margin-top:-4px"></span>
        <span style="margin-left:7px;font-size:16px;color:#0092FF">教育经历</span>
      </p>
      <div class="educationalExperience-detail"  v-for="(item,index) in reList" :key="index">
         <div class="educationalExperience-content">
           <div class="educationalExperience-left">
             <p style="line-height:25px;margin-top:20px">{{item.school}}(({{item.startYear}}.{{item.startMonth}}-{{item.endYear}}.{{item.endMonth}}))</p>
             <p style="margin-top:20px;">专业：{{item.major}}</p>
           </div>
           <div class="educationalExperience-right">
             <p style="margin-top:65px">学历：{{item.degree}}</p>
           </div>
         </div>
      </div>
    </div>
    <div class="Self-evaluation" v-show="JSON.stringify(resume)!=='{}'">
      <p class="bestmessage">
        <span >
         <img src="https://o7oe0d6qz.qnssl.com/image/icon_%E8%87%AA%E6%88%91%E8%AF%84%E4%BB%B7_18_18px.png" style="height:16px;width:23px; vertical-align: middle;margin-top:-4px"></span>
        <span style="margin-left:7px;font-size:16px;color:#0092FF">自我评价</span>
      </p>
      <div class="evaluation-content">
          {{resume&&resume.selfEvaluate}}
      </div>
    </div>
    </div>
    </div>
    </div>
 </div>
</template>
<script>
import {getuploadNumber,uploadfile,serchList,serchRESUMEdetail,deleteREsumeUPLOad} from '../../api/upload.server'
import {
    sapi
} from '../../config'
import {uploadFile} from '../../service/ajax'
 export default {
        data () {
            return {
                uploadList: [],
                dataList: [],
                fileName: '',
                ajaxData:[],
                delateARRALL:[],
                downloadId:'',
                pageIndex:1,
                pageSize:30,
                searchInfo:{
                  pageSize:30,
                  pageIndex:1,
                },
                Sid:'',
                filetile:'上传中请稍后...',
                totalSize:null,
                uploadModal: false,
                accept: '.html,.doc,.docx,.txt,.pdf',
                fileSize:2048,
                progressStatus: {
                    '0': 'active',
                    '2': 'wrong',
                    '1': 'wrong',
                },
                files: null,
                activeT:false,
                massage:'',
                Massage:'',
                Code:'',
                action: `${sapi}/api/resume/upload`,
                batchNum: '',
                modal3:false,
                modal1:false,
                modal2:false,
                modal6:false,
                Filename:'',
                uploadNUmber:'',
                // uploadList:[],
                a:[],
                files:null,
                b:'',
                uploadFile: [],
                resume:{},//简历基本详情
                riList:[],//实习经历列表
                roList:[],//工作经历列表
                rpList:[],//项目经历列表
                reList:[],//教育经历列表
                serchID:''
                
            }
        },
        methods: {
            handleChange (e) {
                this.fileName = ''
                this.dataList = []
                const files = e.target.files;
                this.files = e.target.files
                for (let key in files){
                    if (key!='length' && key!='item'){
                        let file = files[key]
                        let temp = {
                            name: file.name,
                            data: file,
                            percentage: 0,
                            type: file.type,
                            size: file.size,
                            title:null,
                            status: "active"
                        }
                        this.dataList.push(temp)
                        this.fileName += files[key].name + ';'
                    }
                }
                if (!files) {
                    return;
                }
                this.$refs.input.value = null;
            },
            uploadBtn() {
                if (this.dataList.length < 1) {
                   this.$Notice.error({
                    title: '提示',
                    desc:  '请您选择文件在上传',
                    duration:2
                });
                    return
                }
                if (this.dataList.length > 20){
                   this.$Notice.error({
                      title: '提示',
                      desc:  '批量上传文件不能大于20份',
                      duration:2
                    });
                    this.$refs.input.value = ''
                    this.fileName = ''
                    this.dataList = []
                    return
                }
                if (this.handleMaxSize()) {
                    this.$Notice.error({
                        title: '提示',
                        desc:  '单份文件不能大于2MB',
                        duration:2
                    });
                    this.$refs.input.value = ''
                    this.fileName = ''
                    this.dataList = []
                    return
                }
                this.uploadModal = true
                this.filetile='上传中请稍后...'
                uploadFile({
                    headers: this.headers,
                    data: this.dataList,
                    batchNum: this.batchNum,
                    action: this.action,
                    batchNum: this.batchNum,
                    appendName: 'batchNum',
                    appendFile: 'recFile',
                    onProgress: e => {
                      setTimeout(() => {
                          this.handleProgress(e);
                      }, 200)
                    },
                    onSuccess: res => {
                        setTimeout(() => {
                           this.handleSuccess(res, this.files);
                           this.activeT=true    
                        }, 1000)
                    },
                    onError: (err, response) => {
                        this.handleError(err, response, this.files);
                    }
                })
            },
            handleProgress(e) {
               this.dataList.map(item => {
                item.percentage = e.percent-5
               })
            },
            handleSuccess (res, files) {
              let data = res.body
              this.filetile='上传完成'
              for(let key in data){
                  let code = data[key].code
                  this.Code=data[key].code
                  this.Massage=data[key].message
                  this.dataList.map(item => {
                       if (key == item.name) {
                          item.title = this.Massage
                          if(item.Code==2){progressStatus={'2':'wrong'}}
                          item.status = this.progressStatus[code]
                          item.Code=this.Code
                          item.percentage=100
                       }
                   })
               }
            },
            handleError (err, res, files) {
              
            },
            handleMaxSize () {
                let isLimit = false
                this.dataList.map(item => {
                    if (item.size/1024 > this.fileSize) {
                        isLimit = true
                        return
                    }
                })
                return isLimit
            },
            selFiles () {
                this.$refs.input.click()
            },
            closeModal(){
                this.uploadModal = false
                this.$refs.input.value = ''
                this.dataList = []
                this.fileName = ''
                 this.activeT=false
                this.filetile='上传中请稍后...'
                this.serchlist()
            },
             //下载单条简历
            downloadONE(downID){
                window.location.href=`${sapi}/api/resume/download/formatted/one?resumeId=${downID}`
            },
            // 获取上传批次号
            getnumber(){
              getuploadNumber().then(res=>{
                this.batchNum=res.data.body
              })
            },
            //改变页码
            pageChange(page){
            this.SearchList(page)
            },
            pageSizeChange(page){
                this.searchInfo.pageSize=page
                this.pageSize=page
                this.SearchList()
            },
            // 查询记录列表
            serchlist(page){
                page = typeof(page)=='number'?page:1
                this.searchInfo.pageIndex = page
                this.pageIndex = page
                let parmars={
                    pageSize:this.searchInfo.pageSize,
                    pageIndex:this.searchInfo.pageIndex,
                    parameter:this.batchNum
                }
                serchList(parmars).then(res=>{
                    if(res.data.success==true){
                        this.totalSize=res.data.body.totalNumber
                        this.ajaxData=res.data.body.items.map((item,index)=>{
                            item.resumeId=item.resumeId
                            item.name=item.name
                            item.mobile=item.mobile
                            item.age=item.age
                            item.gender=item.gender
                            item.workYears=item.workYears
                            item.degree=item.degree
                            item.expectedTitle=item.expectedTitle
                            item.status=item.status
                            item.creator=item.creator==''?item.creator:item.creator.split('_')[0]
                            item.createTime=item.createTime
                            return item
                        })
                    }
                }) 
            },
          // 获取简历详情页数据
          getResumeData(sid){
              this.downloadId=sid
              let parmars={
                  resumeId:sid
              }
              serchRESUMEdetail(parmars).then(res=>{
                  this.resume=res.data.body.resume
                  this.riList=res.data.body.riList
                  this.roList=res.data.body.roList
                  this.reList=res.data.body.reList
                  this.rpList=res.data.body.rpList
              })
          },
        //  删除提示
        delateONEModal(vid){
          this.Sid=vid
          this.modal6=true
        },  
        // 删除单条简历
        delateONE(){
            this.delateARRALL.push(this.Sid)
          deleteREsumeUPLOad(this.delateARRALL).then(res=>{
            if(res.data.success==true){
            this.modal6=false
            this.resume={}
            this.riList=[]
            this.roList=[]
            this.rpList=[]
            this.reList=[]
            this.downloadId=''
            this.serchlist()
            }
          })
        },
        },
        mounted(){
            this.getnumber()
            this. serchlist()
        }
 }
</script>
<style lang='less' scoped>
.upload{  
    width: 100%;
    height:100%;
    background: #F2F2F2;
    overflow: hidden;
}
.upload-left{
    width: 32%;
    float: left;
    height:100%;
    // overflow: hidden;
}
.upload-right{
    width: 67%;
    float: left;
    overflow-y: auto;
    overflow-x: hidden;
    height: 100%;
    background:rgb(255,255,255)
}
.detailUload{
    width: 100%;
    margin-top: 3px;
   
}
.leftcontrentFotter{
    width: 100%;
    float: left;
    height: 70%;
    overflow: hidden;
}
.contentMASSAGE{
    width:96%;
    height:67px;
    margin-top:0px;
    margin-left: 2%;
    background: white;
    border-radius: 5px
}
.detailTW{
    height: 30px;
    width: 370px;
    position: relative;
    top: 50px;
    left: 20px;
    /* display: block */
}
.detailTB{
    background:#F4F4F4;
    color:black;
    position: relative;
    top:20px;
    left: 390px
}
.format{
    position: relative;
    top: 60px;
    left: 30px;
}
.number{
    position: relative;
    top: 90px;
    left: 160px
}
.clickUpload{
    position: relative;
    top: 120px;
    left: 190px
}
.upload-pageBottom{
    width: 26.2%;
    text-align: center;
    height:40px;
    position: fixed;
    bottom:0px;
    background:rgba(0,176,160,0.7)
}
.uploadC{
  height: 30%;
  width:100%;
  float: left;
   .upload-title{
     height: 100%;
        .nativeInput{
            display:none
        }
    }
    .contentTips{
    //  margin:20px 10px 30px 10px;
     .p{
        // margin:10px;
     }
    }
    .title{
        float:right
    }
    .process{
        margin-top:10px;
    }
}
.personalInformation{
  width:860px;
  height: 300px;
  float: left;
}
.personalInformation-left{
  width: 400px;
  height:260px;
  margin-left: 30px;
  float: left;
  font-size: 14px
}
.personalInformation-left p{
  line-height: 28px
}
.personalInformation-right{
  width: 400px;
  height:260px;
  font-size: 14px;
  float: left;
}
.personalInformation-right p{
  line-height: 28px
}
.workExperience{
  width: 860px;
   float: left;
}
.workExperience-detail{
  width: 860px;

  float: left;
  margin-top: 20px;
}
.workExperience-top{
  width: 860px;
  height: 56px;
  background: rgba(246,246,246,1);
}
.workExperience-bottom{
  width:640px;
  margin-left: 71px;
  margin-top: 20px;
  line-height: 24px
}
.projectExperience{
  width: 860px;
  margin-top: 30px;
   float: left;
}
.projectExperience-detail{
  width: 860px;
  float: left;
  margin-top: 20px;
}
.projectExperience-top{
  width: 860px;
  height: 34px;
  line-height: 34px;
  background: rgba(246,246,246,1);
}
.projectExperience-bottom{
  width:640px;
  margin-left: 71px;
  margin-top: 20px;
  line-height: 24px
}
.internshipExperience{
  width: 860px;
  margin-top: 30px;
  float: left;
}
.internshipExperience-detail{
  width: 860px;
  float: left;
  margin-top: 20px;
}
.internshipExperience-top{
  width: 860px;
  height: 56px;
  line-height: 34px;
  background: rgba(246,246,246,1);
}
.internshipExperience-bottom{
  width:640px;
  margin-left: 71px;
  margin-top: 20px;
  line-height: 24px
}
.educationalExperience{
  width: 860px;
  float: left;
}
.educationalExperience-left{
  width: 430px;
  float: left;
  margin-left: 30px;
  font-size: 14px
}
.educationalExperience-right{
  width: 380px;
  float: left;
  font-size: 14px
}
.Self-evaluation{
  width: 860px;
  float: left;
}
.evaluation-content{
  width: 720px;
  margin-left:30px;
  float: left;
  margin-top: 30px;
  line-height: 30px;
  margin-bottom: 20px
}
.bestmessage{
  width: 860px;
  height: 24px;
  float: left;
  margin-top: 20px
}
</style>
