<template>
  <b-page @bPageLoaded="voiceCallback"></b-page>
  <count-down times=300 bottomOffset="10" rightOffset="10" fontSize="24" ref="child"></count-down>
  <div class="material">
    <div style="padding-top: 5%;">
        <ul class="title" >
          <li style="width: 10%">序号</li>
          <li style="width: 20%">资料名称</li>
          <li style="width: 55%">资料要求或说明</li>
        </ul>
    </div>
	<template v-if="materials&&materials.length > 0">
		<div  class="content" v-for="(material, index) in materials">
		    <div  style="width: 10%;text-align:left;margin-left: 6%">{{index+1}}</div>
		    <div  style="width: 30%;text-align:left;margin-left: 2%" v-if="material.name!='身份证'">{{material.name}}</div>
        <div  style="width: 30%;text-align:left;margin-left: 2%" v-if="userType=='0'&&material.name=='身份证'">{{material.name}} (本人)</div>
        <div  style="width: 30%;text-align:left;margin-left: 2%" v-if="userType=='1'&&material.name=='身份证'">{{material.name}} (法人)</div>
        <div  style="width: 50%;text-align:left;margin-left: 3.8%">{{material.description}}</div>
		</div>
	</template>
	<template v-else>
		<div  class="content">
		    <div  style="width: 100%;text-align:center;">暂无数据</div>
		</div>
	</template>
	<div style="height: 100px;">
	    &nbsp;
	</div>
	<div style="position: fixed;bottom: 80px;width: 98%;">
		<div style="position: absolute;margin-left: 80px;padding-top: 10px;" v-show='isCancel'>
			<input type="checkbox" style="height: 24px;width: 24px;" id="isRead"/>
			<font size="5" color="#FFFFFF"> 我已阅读</font>
		</div>
		<div style="position: absolute;margin-left: 250px;" v-show='isCancel'>
			<img style="width: 80%;" :src="cancelSrc" @click="cancelClick" id="cancel">
		</div>
		<div style="position: absolute;margin-left: 530px;">
			<img style="width: 80%;" src="../assets/images/btn/btnConfirm.png" @click="confirmClick" id="confirm">
		</div>
	</div>
  </div>
</template>
<style scoped>
	.material{
		background-image: url('../assets/images/background.png');
		background-repeat: no-repeat;
		background-size: cover;
		overflow:auto;
		margin-bottom: 20px;
		padding: 0 70px;
		height:100%;
	}
	.title  li{
		float:left;
		color: #ffffff;
		font-size: 24px;
		text-align:center;
		padding-top:10px;
	}
	.title{
		background-image: url('../assets/images/materialsDetailTr.png');
		background-repeat:no-repeat;
		background-size:100% 100%;
		height:50px;
	}
	.content  div{
		color: #ffffff;
		font-size: 24px;
		padding-top: 10px;
		padding-bottom: 10px;
	}
	.content{
		margin-top:1%;
		background-image: url('../assets/images/materialsDetailTd.png');
		background-repeat:no-repeat;
		background-size:100% 100%;
		display:flex;
		flex-direction:row;
	}
</style>
<script>
import { layer } from "@layui/layer-vue";
import BPage from "@/components/registerVoice";
export default{
  components: {
    BPage,
  },

	data() {
	  return {
		  isCancel: true,
		  count:0,
		  projectId: '',
		  materials: [],
      userType: "0"//用户类型 0:本人 1:委托人
	  }
	},

	created() {
    this.isCancel = this.$route.query.isCancel;
		this.projectId = this.$LocalStorage.SessionGet("projectId");
    this.userType=this.$LocalStorage.SessionGet("userType");

		if(this.isCancel == 'false'){
			this.isCancel = false;
		}
		if(this.isCancel == undefined){
			this.isCancel = true;
		}
		this.getMaterials();
		
		if(robotType && this.isCancel){
			robotsdk.playAudio({
				cmd: 'playAudio',
				animation: 0,
				videocontent: '进入资料扫描前，请您仔细阅读以下资料的扫描要求.',
				callback: "PlayAudioCallback"
			});
		}
	},

	computed:{
		cancelSrc(){
			return this.count%2==0?	require('../assets/images/btn/btnCancel.png'):require('../assets/images/btn/btnCancel_Not.png')
		}
	},

	methods:{
		getMaterials() {
      let fileType="'0','1'";
      if (this.$LocalStorage.SessionGet("scanType")==2||this.$LocalStorage.SessionGet("scanType")==undefined)
        fileType='0'
			this.$axios.get(window.config.api + 'lilo/aiCase/getMaterials', {
				params: {
					projectId : this.projectId,
          fileType:fileType
				}
			}).then(item => {
				if (item.data.success) {
					this.materials = item.data.obj;
				}
			}).catch(err => {
				this.msg = '错误';
			})
		},

		cancelClick() {
			if(robotType){
				robotsdk.closeExternalApp({
				  mode:0 
				});
			}
		},

		confirmClick() {
      if (this.materials.length<1){
          this.message("请联系管理员配置材料信息！");//提示框
      }else{
          this.$LocalStorage.SessionPut("materialsInfo",this.materials );
          if(!$("#isRead").prop("checked") && this.isCancel){
            this.$router.push({ path: '/materialRead'});
          }else {
            this.$router.push({ path: '/scanMaterial'});
          }
      }
		},

    message(content){
      if (robotType) {
        robotsdk.showMessage({//提示框
          isOpen: true,//true 打开 false 关闭
          content: content,//消息内容
          isAutoClose: true//true 5秒自动关闭 false 用户点确认关闭
        });
      }
    },

    //语音回调（只处理退出）
    voiceCallback(res){
      if (res=="quit"){
         this.cancelClick();
      }
    }

	}
}

</script>