<template>
    <div>
      <div class="container" v-loading="importIoading" element-loading-text="In the process of importing, please later">             
           <div v-if="tableData.length == 0">  
          <!-- 没有引用时 -->
          <div class="noneData">            
            <img src="../../assets/img/noneData.png" alt="" class="icon_img">
            <p class="nodatatext">TMR did not identify an available article citation in your latest uploaded document</p>             
          </div>
          <el-row :gutter="20">
          <!-- 教程 -->
          <el-col >
          <div class=" whoDo mt20">                        
            <div>
                <h2>What should I do 
                    <el-tooltip class="item" effect="light" content="click for more help" placement="right">
                    <span class="el-icon-warning-outline help" @click="showHelp"></span>
                </el-tooltip>
                </h2>
                <p class="mt10 c666">you can add a citation in the following way.</p>
                <ul> 
                    <!-- 文本域 -->
                    <li>
                        <div class="mt20">
                            <h4>Add in bulk by text field &nbsp;&nbsp;&nbsp;<el-button @click="addText" class="inlinebutton" type="primary" plain size="mini">Add</el-button></h4> 
                            <div v-if="textareaVisible">
                                <el-input class="textarea mt10"
                                type="textarea"
                                :rows="3"
                                placeholder="Put your reference entry here"
                                v-model="textarea">
                                </el-input>
                                <el-button class="mt10" icon="el-icon-check" type="primary" size="mini" @click="importText()">Import</el-button>
                            </div>
                        </div> 
                    </li>
                    <!-- 文件上传的形式 -->
                    <li>
                        <div class="mt20">
                            <h4>Add in bulk by uploading excel files</h4>
                            <p class="mt10 c666">Before uploading the file, you need to download the template file,  
                                <a  href="https://submission.tmrjournals.com/public/coverLetter/system/refer.xlsx" download="refer" target="_blank" class="downloadbtn"  >click download</a>  
                                ,to add your references to the template file, and upload it. &nbsp;&nbsp;&nbsp;
                                <el-button class="inlinebutton" type="primary" plain size="mini" @click="showUpload">upload</el-button></p>
                            <div v-if="uploadVisible">
                                <div class="uploadBox">
                                    <el-upload  ref="uploadFile" class="upload-demo up_newstyle" :action="upload_manuscirpt"
                                    accept=".xlsx" name="referFile" :before-upload="beforeupload_manuscirpt"
                                    :on-error="uperr_coverLetter" :on-success="upSuccess_manuscirpt" :limit="1"
                                    :on-exceed="alertlimit" 
                                    :on-remove="removefilemanuscirpt"
                                    :file-list="fileL_manuscirpt"
                                    >
                                        <div  class="el-upload__text" @click="clearUploadedFile">
                                            <em>Upload</em>
                                        </div>                                    
                                </el-upload>
                                </div>                                
                            </div>
                        </div>
                    </li>
                </ul>                               
            </div>
        </div>        
        </el-col>        
    </el-row>
        </div>
        <!-- 有引用数据-->
        <div v-else>
            <div class="topInfo">
                <h3>Dear {{user_name}}</h3>
                <p class="mt10">您可以在本页面对引用数据进行对应的修改和调整，主要包括如下操作:</p>
                <ul class="mt20">
                    <li>
                        <p>需要您调整一下引用条目，将                           
                           <span  class="status warn float" ><i class="el-icon-warning-outline"></i></span>
                        状态的引用信息调整到
                        <span  class="status ok float" ><i class="el-icon-warning-outline"></i></span>
                        的状态。</p>
                    </li>
                    <li>
                        <p>如果您觉得顺序有不妥，您可以点击每一条信息后面的
                            <el-button type="warning" size="mini" plain>↑</el-button>
                            和
                            <el-button type="warning" size="mini" plain>↓</el-button> 调整数据的前后顺序。</p>
                    </li>
                    <li>
                        <p>您可以点击 <el-button type="success" size="mini" plain>Add</el-button> 在这一行的后面再添加一行引用信息。</p>
                    </li>
                    <li>
                        <p>您也可以全部放弃这些引用信息，重新导入一批引用信息。<el-link type="primary" @click="removeAll">删除并重新导入</el-link></p>
                    </li>
                </ul>
            </div>
            <div class="refenceCentent mt20">
                <el-table :data="tableData"  ref="multipleTable" 
              empty-text="New messages (0)" :show-header="false" :stripe="false" :highlight-current-row="false">              
              <!-- <el-table-column type="index" label="No." width="55" align="center"></el-table-column> -->
                    <el-table-column label="state"  width="55" align="center">
                        <template slot-scope="scope">
                            <span  class="status warn"  v-if="scope.row.refer_doi == ''"  >
                                <i class="el-icon-warning-outline"></i>
                            </span>
                            <span  class="status ok"  v-else >
                                <i class="el-icon-circle-check"></i>
                            </span>                            
                        </template>
                    </el-table-column>			
                    <el-table-column  label="Title" align="left">
                        <template slot-scope="scope">
                            <p class="wrongLine" style="text-align: left;" v-if="scope.row.refer_doi == ''">
                                {{scope.row.refer_content}}                                                                  
                            </p>
                            <div style="text-align: left;" v-else>
                                <p>{{scope.row.author}}{{scope.row.title}} <em>{{scope.row.joura}}</em> {{scope.row.dateno}}<br/></p>
                                <a class="doiLink" :href="scope.row.doilink" target="_blank">{{scope.row.doilink}}</a>                         
                            </div>
                        </template> 
                    </el-table-column>
                <el-table-column align="center" width="360">
                    <div slot-scope="scope">
                        <el-button   style="margin-left:10px;" @click="change(scope.row)"  plain type="primary" size="mini" icon="el-icon-edit">edit</el-button>  
                        <el-tooltip popper-class="tps" class="item" effect="light" content="Add one under this line" placement="top">
                            <el-button @click="addLine(scope.row)" type="success" size="mini" plain>Add</el-button>   
                        </el-tooltip>                        
                        <el-button type="warning" size="mini" plain :disabled="scope.$index != 0 ? false : true" @click="changeOrder(scope.row,'up')">↑</el-button>
                        <el-button type="warning" size="mini" plain :disabled="scope.$index == tableData.length-1 ? true : false" @click="changeOrder(scope.row,'down')">↓</el-button>                                                         
                        <el-button  type="danger" icon="el-icon-delete" size="mini" style="float: right;" plain @click="deleteLine(scope.row)">delete</el-button>
                    </div>
                </el-table-column>
          </el-table>
            </div>            
        </div>    
      </div>
      <!-- 修改引用 -->
      <el-dialog title="Add References" :visible.sync="editboxVisible" width="500px">
                <p class="yinyongPre c888">现在您可以添加或者修改您的引用文献信息，如果您有引用文献的Doi数据，可以直接复制到Doi输入框，并提交，系统会自动识别您的引用文献，如果您没有Doi数据，也可以打开“Show Content”开关，直接填写您的引用文献内容。</p>
                <el-form :model="refenceForm" :rules="refenceFormrules" ref="refenceForm" label-width="80px" class="editForm mt10">
                    <el-form-item label="Show Content" label-width="120px">                        
                        <el-switch v-model="contentVisible"></el-switch>
                    </el-form-item>
                    <el-form-item label="Doi:" required prop="refer_doi" v-if="!contentVisible">
                        <el-input  v-model="refenceForm.refer_doi" ></el-input>
                    </el-form-item> 
                    <el-form-item label="Content:" required prop="refer_content" v-else>
                        <el-input rows="5" v-model="refenceForm.refer_content" type="textarea"></el-input>
                    </el-form-item> 
                </el-form>            
              <span slot="footer" class="dialog-footer">
                  <el-button @click="editboxVisible = false">Cancel</el-button>
                  <el-button type="primary" @click="saveChange">Save</el-button>
              </span>
      </el-dialog>
        <!-- 帮助信息 -->
        <el-dialog title="Any questions or Help" :visible.sync="helpVisible" width="500px">          
            <div>
                    <p class="mt20">If you do not understand the operation items on this page or need help, you can find us in the following ways:</p>
                    <p class="mt20">- Way one</p>
                    <p class="mt10">- Way two</p>
                    <p class="mt10">- Way three</p>
                </div>
              <span slot="footer" class="dialog-footer">
                  <el-button @click="helpVisible = false" type="primary">OK</el-button>                  
              </span>
        </el-dialog>
        <!-- 临时引用信息 -->
        <el-dialog title="Reference List" :visible.sync="linVisible" width="800px">           
            <div class="refenceCentent mt20" v-if="Tempredable.length > 0">
                <el-table :data="Tempredable"  ref="tempredableTable" 
                    empty-text="New messages (0)" :show-header="false" :stripe="false" :highlight-current-row="false">              
                    <el-table-column type="index" label="No." width="55" align="center"></el-table-column>
                    <el-table-column  label="Title" align="left">
                        <template slot-scope="scope">
                            <p style="text-align: left;">
                                <!-- <el-badge is-dot :hidden="scope.row.author_act==1?false:true" class="item"> -->
                                    {{scope.row.content}}<br/><el-link type="primary">{{scope.row.doi}}</el-link>
                                <!-- </el-badge> -->
                            </p>
                        </template> 
                    </el-table-column>              
                </el-table>
                <div class="shuoming mt20">
                    <p class="c888"><i class="el-icon-message-solid"></i>&nbsp;&nbsp;The above is the citation data identified according to your uploaded file, you can choose to import, or discard this data and import again.</p>
                </div>    
            </div>
              <span slot="footer" class="dialog-footer" >
                  <el-button @click="abandon">Abandon and Reimport</el-button>
                  <el-button type="primary" @click="importText">Import</el-button>
              </span>
      </el-dialog>
    </div>
  </template>
  
  <script>
  export default {
      data(){
          return{
            user_name: localStorage.getItem('U_relname'),            
            importIoading: false,
            baseUrl: this.Common.baseUrl,
            contentVisible:false,
            // 引用数据列表
              tableData:[              
              ],    
            // 临时引用列表
              Tempredable:[              
              ],       
              editboxVisible:false,
              helpVisible:false,
              uploadVisible:false,
              linVisible:false,
              textarea:'',
              textareaVisible:false,
              fileL_manuscirpt: [],
              form: {
                referFile: '',                
              },
              // 引用表单
              refenceForm:{
                refer_content:'',
                refer_doi:''
              },
              refenceFormrules:{
                title:[
                { required: true, message: 'The title cannot be empty', trigger: 'blur' },
                ]
              }
          }
      },
      created(){
         this.getRefData()
      },
      methods:{ 
         // 获取引用文献信息
         getRefData(){
            this.$api
					.post('api/Preaccept/getArticleReferences',{'article_id': this.$route.query.id})
					.then(res => {
						console.log(res)
                        if(res.code == 0 && res.data.refers.length > 0){
                            this.tableData = res.data.refers
                        }
					})
					.catch(err => {
						console.log(err);
			});
         },
         // 放弃导入数据
         abandon(){            
            this.form.referFile = '';
			this.fileL_manuscirpt = [];
            this.linVisible = false;
            this.Tempredable = []
         },                
          // 显示帮助信息
          showHelp(){
            this.helpVisible = true
          },
          // 导入文本域
          importText(){
            this.importIoading = true               
                //console.log(this.form.referFile,'referFile')  
                this.$api
					.post('api/Preaccept/addRefersByExcel', {
                       'article_id' :this.$route.query.id,
                       'referFile' : this.form.referFile
                    })
					.then(res => {
						if (res.code == 0) {
                            this.$message.success('Import succeeded')
                            this.linVisible = false
                            this.Tempredable = []
							this.importIoading = false                            
                           // 有可以可用的文献数据，刷新当前页面
                            // location.reload() // 刷新本页面
                            this.getRefData()          
						}
					})
					.catch(err => {
						console.log(err);
				});
           
          },
          // 文本域添加
          addText(){
            this.textareaVisible = true
            this.uploadVisible = false
          },
          showUpload(){
            this.textareaVisible = false
            this.uploadVisible = true
          },
          // 显示修改引用
          change(row){
            this.editboxVisible = true
            this.refenceForm = row
          },
          // 保存修改
          saveChange(){

          },
          beforeupload_manuscirpt(file) {
				let flieArr = file.name.split(".")  
				let fileSuffix = flieArr[flieArr.length - 1];
                console.log(fileSuffix)
                console.log(this.upload_manuscirpt,'upload_manuscirpt')
                // return false
				if (fileSuffix != 'xlsx') {
					this.$message.error('Only excel and compressed files can be uploaded(.xlsx)');
					return false;
				}
				// const ismau =
				//     file.type === 'application/msword' ||
				//     file.type === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' ||
				//     file.type === 'application/x-zip-compressed' ||
				//     file.name.split('.')[1] === 'rar';
				// if (!ismau) {
				//     this.$message.error('Only word and compressed files(.doc,.docx,.rar,.zip)');
				// }
				// return ismau;
			},
            uperr_coverLetter(err) {
				this.$message.error('Upload error');
			},
            upSuccess_manuscirpt(res, file) {  
				if (res.code == 0) {
					this.form.referFile = res.upurl;
					this.fileL_manuscirpt = [{}];
					this.fileL_manuscirpt[0].name = "referFile";
					this.fileL_manuscirpt[0].url = res.upurl;
                    if(res.refers.length > 0){
                        this.Tempredable = res.refers
                        this.linVisible = true
                    }    
				} else {
					this.$message.error('service error: ' + res.msg);
				}
			},            
            //超出传送文件个数限制
			alertlimit() {
				this.$message.error('The maximum number of uploaded files has been exceeded');
			},
            removefilemanuscirpt(file, fileList) {
				this.form.referFile = '';
				this.fileL_manuscirpt = [];   
                this.$message.success('Deletion succeeded!');             
				// this.$api
				// 	.post('api/Article/delArticleFile', {
				// 		file_id: this.form.manuscirptId
				// 	})
				// 	.then((res) => {
				// 		if (res.code == 0) {
				// 			this.$message.success('Deletion succeeded!');
				// 		} else {
				// 			this.$message.error(res.msg);
				// 		}
				// 	});
			},                  
            clearUploadedFile() {
				this.$refs['uploadFile'].clearFiles();
			},
            // 清空引用文献
            removeAll(){ 
                this.$api
					.post('api/Preaccept/discardRefers', {
						'article_id': this.$route.query.id
					})
					.then(res => {
						if (res.code == 0) {
							this.$message.success('success！')
                            setTimeout(()=>{
                              location.reload()  // 刷新本页面 
                            },2000)

						} else {
							this.$message.error(res.msg);
						}
					})
					.catch(err => {
						this.$message.error(err);
					});
            },
            // 添加一行
            addLine(row){
                this.editboxVisible = true
                this.refenceForm = {}
            },

            // 删除一行
            deleteLine(row){
                this.$confirm('Are you sure you want to remove this reference?', 'Tips', {
                confirmButtonText: 'Sure',
                cancelButtonText: 'Cancel',
                type: 'warning'
                }).then(() => {
                this.$message({
                    type: 'success',
                    message: 'remove successed!'
                });
                })
            },

            // 调整顺序
            changeOrder(row, opName){
                let optitle = ''
                opName == 'up' ? optitle = 'Move up this line?' : optitle = 'Move down this line?'
                this.$confirm(optitle, 'Tips', {
                confirmButtonText: 'Sure',
                cancelButtonText: 'Cancel',
                type: 'warning'
                }).then(() => {
                this.$message({
                    type: 'success',
                    message: 'remove successed!'
                });
                })
            }
      },
      computed: {
        upload_manuscirpt: function() {
				// return this.baseUrl + 'api/Article/up_file/type/manuscirpt';
                return this.baseUrl + 'api/Preaccept/up_refer_file';
			},        
      }
  }
  </script>
  
  <style  scoped>
  .wrongLine{ color: #f15f44;}
  .doiLink{color: #409EFF;}
  .editForm{background-color:#f9f9f9; padding: 20px 0; padding-right: 20px;}
  .yinyongPre{line-height: 28px; margin-bottom: 20px;}
.shuoming{font-size: 14px; line-height: 26px; }
.shuoming i{color: #F5BF6D;}
  .status{ display: block; width: 40px; height: 40px; border-radius: 40px; font-size: 22px; line-height: 40px; color: #fff; text-align: center;}
  .status.ok{background: #a7e389;}
  .status.warn{background: #ffd192;}
  .status.float{display: inline-block;}
  .topInfo{padding: 20px;  }
  .topInfo ul{padding-left: 30px;}
  .topInfo ul li{margin-top: 10px;}
  .downloadbtn{font-weight: bold; color: #409EFF !important;}
  .uploadBox{width: 400px;}
  .el-upload__text{width: 80px; height: 80px; text-align: center; line-height: 80px;}
  .help{font-size: 18px; color: #F5BF6D; cursor: pointer;}
  .el-alert__title{font-size: 26px;}
  .mt20{margin-top: 20px;}
  .content_box{padding:15px 10px; border:3px dashed  #eff6ff; }
  .flexbox{display: flex;}
  p{color: #333; font-size: 14px;}
  .mt10{margin-top: 10px;}
  .more{font-weight: bold;}
  .noneData{ margin:30px 0; padding: 20px; border:3px dashed  #F8F8F8; }
  .noneData img{display: block; margin: 10px auto; opacity: .5; width: 100px;}
  .nodatatext{color: #666; text-align: center;}
  .inlinebutton{}
 .whoDo{background: #EEF7F9; padding: 30px;}

  .whoDo ul{padding-left: 20px;}
  .helpcontent{color: #888; margin-top: 150px;}
  .helpcontent p{color: inherit; font-size: 12px;}
  .c666{color: #666;}
  .c888{color: #888;}

  /deep/ .el-table tr:nth-child(2n){
    background: #fff;
  }
</style>