<style scoped>
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.clearfix{overflow:hidden;_zoom:1;}
input{background:none;outline:none;border:0px;}
.text-gray{color:#717171;}
.text-orange{color:#eb7741;}
.text-danger{color:#c03546;}
.text-blue{color: #3A8AFB;}
.AnswerSend{overflow-y: auto;}
.bannerImg{width:100%;height: 10rem;}
.bannerImg img{width:100%;height: 10rem;}
.asContent{padding:0.6rem 2%;border-bottom: 0.4rem solid #f3f6ff;}
/* .asTitle{font-size: 1rem;overflow: hidden;text-overflow: ellipsis;-webkit-line-clamp: 1;-webkit-box-orient: vertical;display: -webkit-box;word-wrap:break-word;word-break:break-all;} */
.asTitle{font-size: 1rem;word-wrap:break-word;}
.asSimpleInfo .asSimpleInfoLeft{float: left;padding: 0.4rem;padding-left: 1.6rem;background: url(https://release-sup8-images.oss-cn-shanghai.aliyuncs.com/h5_key/studyCenter/icon-questionNumber.png) no-repeat left center;background-size: 1.4rem 1.4rem;}
.asSimpleInfo .asSimpleInfoRight{float: right;padding: 0.2rem 0.6rem;padding-bottom: 0.1rem;padding-left: 1.8rem;background: url(https://release-sup8-images.oss-cn-shanghai.aliyuncs.com/h5_key/studyCenter/icon-time.png) no-repeat 0.6rem 0.26rem;background-size: 1rem 1rem;border-radius: 0.6rem;background-color: #f2f6f9;}
.asIntroduction{padding:0.4rem 2%;padding-bottom: 3.4rem;word-wrap:break-word;}
/* .asIntroductionContent{background-color: #ffffff;} */
.mint-button{margin:0 auto;background-color:#3A8AFB;border-radius: 0;position: absolute;bottom:0;height: 3rem;}
</style>
<template>     
  <div class="jfBaseSize AnswerSend" v-cloak v-bind:style="isShow.vh?'height:100vh':'height: 100%;'"> 
    <div v-show="isShow.isShowPage">
      <div class="bannerImg">
        <img v-bind:src="model.PaperFace" alt="" >
      </div>
      <div class="asContent">
        <p class="asTitle" v-html="model.PaperName"></p>
        <p class="asSimpleInfo clearfix">
          <span class="asSimpleInfoLeft" v-html="'题目数量：'+model.QuestionCount"></span>
          <span class="asSimpleInfoRight" v-html="model.AnswerTimeLimit+'分钟'"></span>
        </p>
      </div>
      <div class="asIntroduction">
        <p class="text-blue">答题说明：</p>
        <div class="asIntroductionContent" v-html="model.PaperIntro"></div>
      </div>
      <mt-button class="btnAddClerk" type="danger" size="large" v-on:click="startAnswer" v-if="model.QuestionCount>0">开始答题</mt-button>
    </div>
      <ReturnHome ref="returnhome"></ReturnHome>
  </div>
</template>
<script>
import Vue from 'vue';
import { Toast,DatetimePicker,Indicator,Picker,MessageBox } from 'mint-ui';
import channelHelper from "@/assets/js/channelHelper.js";
import '@/assets/js/libs/js.cookie';
	import ReturnHome from "@/components/channel/temp001/ReturnHome";
import utils from "@/assets/js/utils.js";
export default {
  props: [],
   components: {ReturnHome},
  provide(){       
     return{           
        goPage:this.goPage       
     }   
  },
  data() {
    return {
      isShow:{
        vh:true,
        isStartAnswer:true,
        isShowPage:false,
      },
      model:{
        ID:'',
        AnswerRecordCount: '',
        AnswerTimeLimit: '',
        PaperFace: '',
        PaperIntro: '',
        PaperName: '',
        PaperNo: '',
        QuestionCount: 0,
      },
      searchRequest:{
        EnterpriseNo:'',
        UserToken:'',
        LanguageType:"zh-cn",
        ID:''
      },
    }
  },
  methods: {
    goPage(pagetype){
        this.$parent.changeSelectedPage(pagetype);
    },
    //试卷信息
    H5GetTestPaperInfo(){
      var that=this;
      var url = "/channel/H5GetTestPaperInfo";
      var dataParams = that.searchRequest;
      Indicator.open();
      var cbSuccess = function(res){
        if (res.flag) {
          var data=res.data;
          if(data.PaperIntro){
            //data.PaperIntro=data.PaperIntro.replace(/%/g, '%25');
            data.PaperIntro=decodeURIComponent(data.PaperIntro);
            const regex = new RegExp('<img', 'gi');
            data.PaperIntro = data.PaperIntro.replace(regex, `<img style="max-width: 100%; height: auto"`);
          }
          data.QuestionCount=Number(data.QuestionCount);
          that.$set(that,'model',data);
          that.$set(that.isShow,'isShowPage',true);
        }else
        { 
          Toast(res.msg);
        }
        Indicator.close();
      };
      var cbError = function(jqXHR, textStatus, errorThrown){
        Toast(jqXHR.responseText);
      };
      //请求后端
      channelHelper.CommonCallService(url,dataParams,cbSuccess,cbError,null,null);
    },
    startAnswer:function(){
      var that=this;
      if(!that.isShow.isStartAnswer){
        return;
      }
      that.$set(that.isShow,'isStartAnswer',false);
      sessionStorage.setItem('S_AnswerSendQuestionId',that.model.ID);
      this.goPage("S_AnswerS");
    },
    judgeLogin:function(){
      var eno = this.sup8.context.enterpriseno;
      if (!channelHelper.CheckLogin(this.$parent,eno,this.sup8.context.entranceid)) {
        this.$parent.changeSelectedPage('Key_Login');
        return false;
      }
    },
  },
  watch: {},
  created: function() {
    var that = this;
    var ID=sessionStorage.getItem('S_AnswerSendRepeatId');
    if(ID=='S_HomeP'){
      sessionStorage.removeItem('S_AnswerSendRepeatId');
      that.$router.go(-1);
      return;
    }
    //判断是否登录
    that.judgeLogin();
    if(!ID){
      ID=sessionStorage.getItem('studyId');
    }
    // var prevPage=sessionStorage.getItem('prevPage');
    if(ID){
      that.$set(that,'model',ID);
      that.$set(that,'searchRequest',{
        EnterpriseNo:this.sup8.context.enterpriseno,
        UserToken:channelHelper.GetUserToken(),
        LanguageType:"zh-cn",
        ID:ID
      });
      that.H5GetTestPaperInfo();
    }
    // else if(prevPage){
    //   that.$set(that,'model',prevPage);
    //   that.$set(that,'searchRequest',{
    //     EnterpriseNo:this.sup8.context.enterpriseno,
    //     UserToken:channelHelper.GetUserToken(),
    //     LanguageType:"zh-cn",
    //     ID:prevPage
    //   });
    //   that.H5GetTestPaperInfo();
    //   sessionStorage.removeItem('prevPage');
    // }
    sessionStorage.removeItem('S_AnswerSendRepeatId');
    // sessionStorage.removeItem('studyId');
  },
  mounted: function() {
    var that =this;
    var isDesign = location.pathname.indexOf('design');
    if (!(isDesign>-1)) {
        that.$set(that.isShow,'vh',true);
    }else{
        that.$set(that.isShow,'vh',false);
    }
  }
};
</script>

