<template>
    <div class="container" >
      <el-row :gutter="20" >        
          <el-alert v-if="alertShow"
          :title="'Dear '+ user_name + ' Congratulations! , The information will be hidden after ' + hideSec + ' seconds'"
    type="success"    
    show-icon>
    
  </el-alert>        
        <el-col class="mt20">
            <p>Now your article has entered the pre-inclusion state, and the platform also needs you to improve the following content for the final publication of the article.</p>  
          </el-col>  
    </el-row>
    <!-- 内容 -->
    <el-row :gutter="20" class="content_box mt20">
        <!-- 文章引用 -->             
        <el-col :class="['item', 'borderBottom', Ainfo.refer_state.state? 'passborder' : 'notPassborder']">            
                <h5 :class="['statusTop', Ainfo.refer_state.state? 'passStatus' : 'notPassStatus']">
                    <span v-if="Ainfo.refer_state.state" class="el-icon-check pass status"> Complete</span>
                    <span v-else class="el-icon-pie-chart notPass status"> Pending</span>
                </h5>
            <div class="con">
                <h4>References </h4>
               <p class="mt20">The references for this article have been compiled <i class="tip">{{Ainfo.refer_state.num}}</i> entries recorded in total.</p>
               <!-- <p class="mt10"><img src="../../assets/img/icon_9.png" alt="" class="icon_img"> <el-link @click="goAddReferences(thisArtcleId)" type="primary" >&nbsp; &nbsp;Click here to edit</el-link> </p>  -->
               <p class="mt10"><el-button @click="goAddReferences(thisArtcleId)" icon="el-icon-edit" type="text">Edit</el-button></p>
            </div>              
        </el-col>         
    </el-row>
    <!-- 答疑 -->
    <div class="mt20 helpcontent">
        <div class="flexbox">
            <span class="el-icon-info help"></span>
            <div>
                <h4>Any questions/Help</h4>
                <p class="mt20">If you experience any problems, please contact us by publisher@tmrjournals.com</p>                
            </div>
        </div>
    </div>
    </div>
  </template>
  
  <script>
  export default {
    data() {
        return {
            user_name: localStorage.getItem('U_relname'),
            thisArtcleId: this.$route.query.id,
            alertShow:true,
            dingshi:null, 
            hideSec:5,
            // 引用表单数据
            ReferenceList:[],
            Ainfo:{
                refer_state:{
                    state:null,
                    num: null
                }
            }
        }
      },
      created() {
        this.getInfoStatu()
        this.hideAlert()
      },
      methods:{
        // 跳转到引用编辑页面
        goAddReferences(id){
          this.$router.push({
                      path: 'ReferenceEditor',
                      query: {
                          id: id
                      }
                  });
        },

        // 隐藏alert
        hideAlert(){
           this.dingshi = setInterval(()=>{
                this.hideSec -= 1
                // console.log(this.hideSec)
                if(this.hideSec == 0){
                    this.alertShow = false 
                    clearInterval(this.dingshi)
                }
           },1000)
            
        },
        // 获取资料状态
        getInfoStatu(){
            this.$api
            .post('/api/Article/getPreacceptStatus', {
						'article_id': this.$route.query.id
					})
					.then(res => {
                        if(res.code == 0){
						    // console.log(res, 'res')
                            this.Ainfo = {
                                refer_state:{
                                    state: res.data.refer_state.state,
                                    num:res.data.refer_state.num
                                }
                            }
                        }
					})
					.catch(err => {
						console.log(err);
					});
        }
      }
  }
  </script>
  
  <style  scoped>
  .tip{background: #e6effb; padding: 4px; font-style: normal; border-radius:10px ;}
  .passborder{border:1px solid #f0f9eb;}
  .notPassborder{border:1px solid #fdf6ec;}
  .con{padding: 20px;}
  .statusTop{height:30px;}
    .borderBottom{ border-bottom:1px solid  #f1f1f1; margin-bottom: 20px; }    
    .help{font-size: 22px; margin-right: 10px;}
    .el-alert__title{font-size: 26px;}
    .mt20{margin-top: 20px;}
    /* .content_box{padding:15px 10px; border:3px dashed  #eff6ff;  } */
    .content_box .item{padding: 0 !important; border-radius: 20px 20px 0 0; overflow: hidden;}
    .passStatus{ background:  #f0f9eb;}
    .notPassStatus{background:  #fdf6ec;}
    .content_box .item .status{  font-size: 16px; padding:0 10px; line-height: 30px; }
    .content_box .item .status.pass{ color: #67c23a;}
    .content_box .item .status.notPass{ color: #e6a23c;}
    .flexbox{display: flex;}
    p{color: #333;}
    .mt10{margin-top: 10px;}
    .more{font-weight: bold;}
    .helpcontent{color: #888; margin-top: 150px; padding-top: 30px; border-top: 2px solid #f1f1f1;}
    .helpcontent p{color: inherit; font-size: 12px;}
  </style>