<template>
	<!--微课详情页-->
	<view><watermark></watermark>
		<u-toast ref="messager"></u-toast>
		<page-title :showBack="true">{{courseInfo.name}}</page-title>
		<view class="tabbar">
			<view class="tabbar-item"  @click="clicktab(0)" :class="{'active':tabIndex==0}">课件</view>
			<view v-if="homeworkInfo.has" class="tabbar-item"  @click="clicktab(1)" :class="{'active':tabIndex==1}">作业</view>
			<view v-if="examInfo.has" class="tabbar-item"  @click="clicktab(2)" :class="{'active':tabIndex==2}">考试</view>
			<view v-if="assessInfo.has" class="tabbar-item"  @click="clicktab(3)" :class="{'active':tabIndex==3}">评估</view>
			<view class="tabbar-item"  @click="clicktab(4)" :class="{'active':tabIndex==4}">评论</view>
		</view>
		<view>
			<view v-if="tabIndex==0">
				<!--视频-->
				<view style="background-color: #FFFFFF;min-height: 230px;">
					<view v-if="studyId==''" >
						<view style="width: 100%;height: 500upx;">
							<course-image v-if="courseInfo.id!=''" :course="courseInfo"></course-image>
						</view>
						<!-- <view style="position: absolute;top: 150upx;z-index: 90;width: 100%;">
							<view class="bm-button" style="text-align: center;">
								<u-button class="u-but"  @click="submitSignup" text="报名后即刻开始学习" type="warning"></u-button>
							</view>
						</view> -->
					</view>
					<view v-else style="min-height: 210px;">
						<view v-if="coursewareInfo.content.contentType==10">
							<!--视频-->
							<view style="position: relative;">
								 <video v-if="curriculumData.url"
								    @touchend="doubleClick"
								    id="myVideo" 
									style="width: 100%;"
									ref="videoone"
									:src="fileBaseUrl+curriculumData.url"
									@error="videoErrorCallback" 
									:initial-time="videoPlayingTime"
									@play="onPlayerPlay"
									@pause="onPlayerPause"
									@ended="onPlayerEnded"
									@timeupdate="onPlayerPlaying"
									@fullscreenchange="onFullScreen"
									controls>
								</video>
								<!--倍速度-->
								<view id="myVideoSpeed" class="player-controls-btn cursor-pointer btn-speed">
								  <view style="margin-top: 10px;" @click="showSpeedCtrl">{{videoSpeed === 1 ? '倍速' : `${videoSpeed}x`}}</view>
								  <view class="speed-control" v-if="speedListShow">
								    <view class="speed-control-list">
										<view class="li"
											v-for="item in speedList"
											:key="item"
											@click="changeSpeed(item)"
											:data-value="item"
											:class="{'current': videoSpeed === Number(item)}">
											{{ item }}x
										</view>
								    </view>
								  </view>
								</view>
								<view class="player-box" v-if="playerBoxShow">
									  <view class="player-praise">
										<view @click="praiseContent" style="cursor: pointer;">
										  <image class="icon-small" v-if="isPraise" src="/static/images/icon/praise-active.png" />
										  <image class="icon-small" v-else src="/static/images/icon/praise1.png" />
										  <!-- {{ courseInfo.praises }} -->
										  <view style="color:#fff;cursor: pointer;">赞</view>
										</view>
										<view style="margin-left: 15px;cursor: pointer;" @click="treadContent">
										  <image class="icon-small" v-if="isTrample" src="/static/images/icon/trample-active.png" />
										  <image class="icon-small" v-else src="/static/images/icon/trample.png" />
										  <!-- {{ courseInfo.trampleCount }} -->
										  <view style="color:#fff;cursor: pointer;">踩</view>
										</view>
									  </view>
									  <view v-if="!scoreInfo.has" class="player-rate">
										<u-rate v-model="scoreInfo.score" active-color="#f7ba2a" text-color="#ff9900" score-template="{value}" void-color="#fff" @change="addScore"></u-rate>
									  </view>
									  <view v-if="scoreInfo.has" style="padding-top: 5px;display: flex;">
										<view class="player-rate" style="padding-left: 5px;">
										  <u-rate active-color="#f7ba2a" readonly v-model="courseInfo.score" :allow-half="true" ></u-rate>
										</view>
										<view class="score-text" style="margin-top:20px">
										  <text style="color:#ffb30f;">{{ toScore(courseInfo.score) }}</text>
										  <text style="font-size: 12px;color: #fff">分</text>
										</view>
									 </view>
								</view>
							</view>
						</view>
						<view v-else-if="coursewareInfo.content.contentType==20">
							<!--音频播放-->
							<audio-player
								:src="fileBaseUrl+curriculumData.url" 
								:name="courseInfo.name"
								:drag="curriculumData.isDrag"
								@onPlay="audioPlay"
								@onPause="audioPause"
								@onPlaying="audioPlaying"
								@onEnded="audioEnd">
							</audio-player>
						</view>
						<view v-else-if="coursewareInfo.content.contentType==30">
							<image :src="fileBaseUrl+coursewareInfo.content.content" style="width: 100%;"></image>
						</view>
						<view v-else-if="coursewareInfo.content.contentType==40">
							<!--pdf文档-->
							<view style="min-height: 500px;position: relative;">
								<pdf-preview v-if="coursewareInfo.content.content && coursewareInfo.content.content!=''" :src="coursewareInfo.content.content ? fileBaseUrl+coursewareInfo.content.content : ''"></pdf-preview>
							</view>
						</view>
						<view v-else-if="coursewareInfo.content.contentType==41" style="padding: 10upx;">
							<view style="position: relative; word-break:break-all;">
								<u-parse :content="coursewareInfo.content.content"></u-parse>
							</view>
						</view>
						<view v-else-if="coursewareInfo.content.contentType==52">
							<view v-if="conLink.url!=''" style="min-height: 400px;position: relative;">
								<web-view :src="conLink.url"></web-view>
							</view>
						</view>
					</view>
					<view>
						<!-- 评分，赞和踩 -->
						<u-popup :show="scoreInfo.dlgShow" mode="top"  @close="closeScore" @open="openScore">
							<view style="text-align: center;padding: 50upx;">
								<view style="text-align: center;">给课程打分</view>
								<view style="padding-top: 100upx;display: flex;justify-content: center;">
									<u-rate  :count="5" :size="25" v-model="scoreInfo.score"></u-rate>
								</view>
								<view  style="padding-top: 100upx;height: 100upx;">
									<u-button type="primary" @click="addScore()" text="提交评分"></u-button>
								</view>
							</view>
						</u-popup>
						<view class="main-footer" v-if="studyId !==''">
							<view style="padding-top: 10px;height: 32px;">
								<u-rate v-if="!scoreInfo.has" :count="5" :size="25" active-color="#f7ba2a" v-model="scoreInfo.score" @change="addScore()"></u-rate>
								<u-rate v-else :size="25" active-color="#f7ba2a" :value="scoreInfo.score" readonly ></u-rate>
								<!-- <text v-if="!scoreInfo.has" @click="openScore()" class="main-scroe">去评分</text>
								<text class="main-praise" v-else style="color: #ffaa00;font-size: 32upx;">{{changeScore(scoreInfo.score)}} 分 </text> -->
								<!-- <u-rate class="star-rate" :disabled="true" activeColor="#FA3534" :allowHalf="true" v-show="isPraise" :count="5" :size="25" v-model="courseInfo.score"></u-rate> -->
							</view>
							<view style="display: flex;justify-content: flex-end;padding-top: 13px">
								<view @click="praiseContent()">
									<image :src="'/static/images/icon/'+(isPraise? 'praise-active.png':'praise1.png')" style="width:35upx;height: 35upx;margin-right: 5px;"></image> {{courseInfo.praises}}
								</view>
								<view @click="treadContent()">
									<image :src="'/static/images/icon/'+(isTrample? 'trample-active.png':'trample.png')" style="width:35upx;height: 35upx;margin-left: 30upx;margin-right: 5px;"></image> {{ courseInfo.trampleCount }}
								</view>
							</view>
						</view>
					</view>
				</view>
                <view class="content" style="margin-top: 20upx;">
					<view class="content-tit" style="margin-top: 16rpx">{{courseInfo.name}}</view>
                	<view class="content_top" >
                		<view class="top_top">
							<view class="item-author" style="display: flex;flex-wrap: wrap;">
								<!-- <view><u-avatar :size="25" :src="avatar"></u-avatar></view> -->
							<!-- 	<view style="padding-left: 10upx;padding-top: 6upx;display: flex;line-height: 45upx;">
									<u-avatar v-if="authorInfo.avatar==''" :size="25" shape="square" icon="account"></u-avatar>
									<u-avatar v-else :size="25" shape="square" :src="authorInfo.avatar"></u-avatar>
									<text style="margin-left: 10upx;"> {{courseInfo.sysCreateBy}}</text>
									<text style="margin-left: 10upx;"> ({{authorInfo.code}})</text>
								</view> -->
								
							<!-- 	<author v-if="authorInfo" :showInfo="true" :data="authorInfo"></author> -->
							<!-- <view v-for="(item, idx) in teachers" :key="idx" > -->
								<!-- <view> -->
									<!-- <u-avatar v-if="item.authorInfo.avatar && item.authorInfo.avatar!=''" shape="square" :size="25"
									 :src="$config.fileUrl+item.authorInfo.avatar" ></u-avatar> -->
									<!-- <u-avatar v-else :size="25" icon="account" shape="square"></u-avatar> -->
									<!-- <view  v-else class="uavatar"><view class="uavatar-scale"> {{avatarText(item.teacherName)}}</view> </view> -->
								<!-- </view> -->
								<view v-for="(item, idx) in teachers" :key="idx">
									<text style="font-size: 32upx;color: #787878;padding-right: 20upx;">{{ item.teacherName }}</text>
									<!-- <text style="margin-left: 15upx;font-size: 26upx;color: #444444;">授课老师</text> -->
									
								</view>
							<!-- </view> -->
							
							</view>
                        </view>
						<view>
							<!-- <view class="share-btn" @click="openShare">
								<view class="share-btn-icon"><image style="width: 30upx;height: 30upx;" :src="'/static/images/icon/share.png'" alt=""></image></view> 
								<view class="share-btn-name">分享</view>
							</view>	 -->
						</view>
                	</view>
                </view>	
				<!--属性-->
				<view>
					<view class="content">
				        
						<!-- <view class="tags">
							<view v-for="(tag,tidx) in tags"  :key="tidx" class="tags-item">{{tag}}</view>
						</view> -->
						 <!-- style="display: flex;justify-content: space-between;" -->
						<view>
							<view class="cfield">
							<!-- 	<view class="cfield-lable">资源归属: 
									<text class="cfield-value">{{courseInfo.resOwner1}}</text>
									<text class="cfield-value">/{{courseInfo.resOwner2}}</text>
									<text v-if="courseInfo.resOwner3!==''" class="cfield-value">/{{courseInfo.resOwner3}}</text>
								</view> -->
								<view class="cfield-lable"><text class="cfield-value">{{courseInfo.studys}}人学习</text></view>
							</view>
					
					
							<!-- <view class="cscore"> -->
								<!-- <text class="cscore-value">{{changeScore(courseInfo.score)}}</text> -->
								<!-- <text class="cscore-unit">分</text> -->
							<!-- </view> -->
						</view>
					</view>
					<view class="content" style="margin-top: 10px;min-height: 300upx;margin-bottom: 40upx;">
						<view class="consultant">
							<view class="content-title">目标人群</view>
							<view class="content-text">{{courseInfo.forUsers}}</view>
						</view>
						<view v-if="courseInfo.value!=''" class="consultant">
							<view class="content-title">课程价值</view>
							<view class="content-text">{{courseInfo.value}}</view>
						</view>
						<view v-if="courseInfo.summary!=''" class="consultant">
							<view class="content-title">课程详情</view>
							<view class="content-text"><u-parse :content="courseInfo.summary"></u-parse></view>
						</view>
					</view>
				<!--    <view class="cinfo">
				    	<view>
				    		<u-parse :content="courseInfo.overview"></u-parse>
				    	</view>
				    </view> -->
				</view>
			</view>
			<!--作业-->
			<view v-if="tabIndex==1">
				<course-homework ref="homework" v-if="homeworkInfo.content.id" :content="homeworkInfo.content" :studyId="studyId"></course-homework>
			</view>
			<!--考试-->
			<view  v-show="tabIndex==2">
				<course-exam v-if="examInfo.content.id" :courseType="courseInfo.type" :content="examInfo.content" :studyId="studyId"></course-exam>
			</view>
			<!--评估-->
			<view v-show="tabIndex==3">
				<course-assess v-if="assessInfo.content.id" :content="assessInfo.content" :studyId="studyId"></course-assess>
			</view>
            <!--评论-->
            <view v-show="tabIndex==4">
                <comments ref="comments" v-if="courseId && courseId!=''" :objType="1" :objId="courseId"></comments>
            </view>
			
		</view>
		<!--底部-->
		<interact-fixed ref="fiexdbar" :type="1" :users="teachers" :data="courseInfo" :comments="isComments" :praises="false" @handle-comment="handleComment" @comment-success="refreshComments" @share-success="shareSuccess">
			<view v-if="studyId==''">
				 <!-- <view class="btn" @click="submitSignup()">立即报名</view> -->
			</view>
			<!--评论-->
			<view v-else class="fixed-field" @click="openComment()">
				<u-icon name="edit-pen-fill" size="18" class="fixed-field-icon"></u-icon>
				<text class="fixed-field-text">说点什么..</text>
			</view>
		</interact-fixed>
	</view>
</template>

<script>
	import apiCoursePortal from '@/api/modules/coursePortal.js'
	import apiCourseFile from '@/api/modules/courseFile.js'
	import apiCourseStudy from '@/api/modules/courseStudy.js'
	import apiVideoStudy from "@/api/modules/videoStudy.js";
	import apiCourseGrade from "@/api/modules/courseGrade.js";
	import apiUser from '@/api/system/user.js'
	import apiResOwner from '@/api/modules/resowner.js'
	import apiPraises from "@/api/modules/praises.js";
	import apiTrample from "@/api/modules/trample.js";
	import studyUtil from '@/utils/study.js';
	import {toScore} from '@/utils/tools.js';
	import { mapGetters } from 'vuex'
	export default {
		computed: {
			...mapGetters(['userInfo']),
		},
		props:{
			avatar:{
				type:String,
				default:''
			},
			name:{
				type:String,
				default:''
			},
			showInfo:{
				type:Boolean,
				default:false
			},
			showCode:{
				type:Boolean,
				default:false
			},
			info:{
				type:String,
				default:''
			}
		},
	    data() {
	        return {
				isPlaying:false,
				onplay:false,
				touchNum : 0,
				playerBoxShow:false,
				isComments: true,
				toScore:toScore,
				isShow: false,
				courseId:'',
				studyId:'',
				fileBaseUrl:this.$config.fileUrl,
				courseInfo:{
					id:'',
					type:1,
					answers:0,
					favorites:0,
					comments:0,
					shares:0,
					praises:0,
					views:0,
				},
				authorInfo:{aid:'',name:'',code:'',orgInfo:''},
				tags:[],
				teachers:[],
				totalContent:4,
				conLink:{
					openType:1,
					url:''
				},
				curriculumData:{url:'',isDrag:true,completeSetup:1,setupTage:0,second:0},// 课件内容
				coursewareInfo:{
				  content:{},
				  process:0,
				  status:1,
				  finish:false,
				  studyItemId:''
				},
				homeworkInfo:{
				  has:false,
				  content:{},
				  info:{},
				  studyItemId:'',
				  filePath:'',
				  answer:'',
				  close:false,
				  records:[]//作业记录
				},
				examInfo:{
				  has:false,
				  content:{},
				  info:{},
				  paper:[],
				  studyItemId:'',
				  records:[] ,//考试记录
				  allowSubmit:true,//是否允许考试，尝试次数达到后不能再考试
				  startTime:'',
				  detailShow:false,
				  detailItems:[]
				},
				assessInfo:{
				  has:false,
				  allowSubmit:true,
				  content:{},
				  info:{},
				  studyItemId:'',
				},
				tabIndex:0,
				videoScore:3,
				videoPlayer:null,
				speedListShow:false,
				speedList:["2.0", "1.5", "1.25", "1.0", "0.75", "0.5"],
				videoSpeed: 1.0, // 当前倍速:
				scoreInfo:{
				  dlgShow:false,
				  score:5,
				  has:false,
				},
				isPraise:false,
				isTrample:false,
				interactRuning:false,
				handleTimeout:null,
				isAppendTime:true,
				appendStartTime: null, //记录追加的开始时间
				appendHandle:null,
				appentId:'',//当前追加的学习时长的id
				appentInterval:30000,//追加学习时间的间隔 30秒加一次
				videoPlayingTime:0,
				preTime:-1,
				userAvatar:'',
	        }
	    },
		
		onLoad(options) {

			this.courseId = options.id;
			if(options.exam === '1') {
				this.tabIndex = 2;
			}
			//console.log(this.courseId)
			if(!this.courseId){
				//this.$refs.messager.show({message:'未指定课程参数',type:'error'});
				//在这个阶段中，上面的代码不起作用
				uni.showToast({
					title:'未指定课程'
				})
			}else{
				this.loadDetail(this.courseId);
			}
			
		},
		onShow(){
			//实时渲染当前的播放状态
			uni.setNavigationBarTitle({ title:'\u200E' })
		},
		onReady() {
			this.videoPlayer=uni.createVideoContext("myVideo", this);
		},
	    methods: {
			videoErrorCallback(e){
				console.log(e);
			},
			doubleClick(e){
				this.touchNum ++
				setTimeout(()=>{
					if(this.touchNum == 1){
						// console.log('单击')
					}else if(this.touchNum >= 2){
						if(this.isPlaying){
							this.onPlayerPause()
						} else {
							this.onPlayerPlay()
						}
					}
					this.touchNum = 0
				},250)
			
			},
			handleComment() {
				this.tabIndex=4;
				this.isComments = false;
			},
			avatarText(name){
				let text=name;
				if(text){
					let len=text.length;
					if(text.length>2){
						text=text.substring(len-2);
					}
				}
				return text;
			},
			jupeRoute(route) {
				window.location.href = route.content.content;
			},
			loadDetail(id){
				let $this=this;
				apiCoursePortal.detail(id).then(rs=>{
				  if(rs.status==200){
				    this.courseInfo=rs.result.course;
				    this.teachers=rs.result.teachers;
				    this.totalContent=rs.result.contents.length;//计算总内容数
					// this.loadUserInfo(this.courseInfo.sysCreateAid);
					 if(rs.result.teachers && rs.result.teachers.length > 0) {
						let userIds = [];
						let ctoUsers = [];
						rs.result.teachers.forEach(item => {
						  // item.authorInfo = { aid: '', name: '', orgInfo: '', avatar: '', code: '',sex:null };
						  item.name='';
						  item.orgInfo= '';
						  item.avatar= '';
						  item.code= '';
						  item.sex=null;
						  userIds.push(item.teacherId);
						  ctoUsers.push({ aid: item.teacherId, name: item.teacherName });
						});
						// this.toUsers = ctoUsers;
						this.loadAuthorInfo(rs.result.teachers, userIds);
					  }
					this.loadResOwner();
					if(this.courseInfo.tags!=''){
						this.tags=this.courseInfo.tags.split(',');
					}
				    rs.result.contents.forEach(con=>{
				      if(con.sortIndex==1){
				        $this.coursewareInfo.content=con;
				        if(con.contentType == 40) {
						    if(con.content!='' && con.content.indexOf('.pdf')==-1){
								// 先置空，否则会有延迟
								$this.coursewareInfo.content.content = '';
								apiCourseFile.detail($this.coursewareInfo.content.contentRefId).then(cfrs=>{
								  if(cfrs.status==200){
									  $this.coursewareInfo.content.content=cfrs.result.previewFilePath;
								  }else{
									 $this.$message.error('加载pdf课件文件失败');
								  }
								});
							}
				        }else if(con.contentType==52){
							if(con.content.startsWith('\{')){
							   this.conLink=JSON.parse(con.content);
							}else{
							   this.conLink.url=con.content;
							   this.conLink.openType=1;
							}
							
						} else if(con.contentType==10 || con.contentType==20) {
							if(con.content.startsWith('\{')){
							   this.curriculumData=JSON.parse(con.content);
							}else{
							   this.curriculumData.url=con.content;
							}
						}
				      }else if(con.sortIndex==2){
				        $this.homeworkInfo.content=con;
				        $this.homeworkInfo.has=true;
				        //查询作业信息，并显示
				        //$this.loadHomeworkInfo();
				      }else if(con.sortIndex==3){
				        $this.examInfo.has=true;
				        $this.examInfo.content=con;
				        //查询考试信息并显示
				        //$this.loadExamInfo();
				      }else if(con.sortIndex==4){
				        $this.assessInfo.has=true;
				        $this.assessInfo.content=con;
				        //转化文本为json内容
				        //$this.loadAssessInfo();
				      }
				    })
				    //study info
				    this.loadStudyInfo();
				  }else{
					this.$refs.messager.show({message:rs.message,type:'error'});
				  }
				})
			},
			loadAuthorInfo(list, ids) {
			      //加载作者信息，头像，机构信息
			      if (ids.length == 0) {
			        return;
			      }
			      apiUser.getByIds(ids).then(res => {
			        if (res.status == 200) {
			          list.forEach((item, index) => {
			            res.result.some(author => {
			              if (author.aid == item.teacherId) {
			                // item.authorInfo = author;
							item.name= author.name;
							item.orgInfo= author.orgInfo;
							item.avatar= author.avatar;
							item.code= author.code;
							item.sex=author.sex;
							if(author.avatar != '') {
								item.avatar=this.$config.fileUrl + author.avatar;
							}
			                return true;
			              } else {
			                return false;
			              }
			            });
			          });
			        } else {
			          //console.log('加载课程信息失败:'+res.error);
			          //this.$message.error(res.message);
			        }
			      });
			    },
			loadStudyInfo() {
			  //获取学习信息
			  let $this = this;
			  apiCourseStudy.studyInfo(this.courseId).then(res => {
			    if(res.status == 200){
					// console.log(res);
					//this.playCourseware();
			      if(res.result.signup) {
			        this.loadScorePraiseAndTrample();
			        //this.appendStudyTime();
					// console.log(res.result,'result11111');
			        this.studyId = res.result.studyId; //设置学习id
			        //需要判断此内容是否已学习完成，如果已学习完成，不需要再请不说了
			        res.result.contents.forEach(con => {
				      if(con.contentId == $this.coursewareInfo.content.id) {
			            $this.coursewareInfo.finish = true; //课件已学习
						$this.coursewareInfo.studyItemId=con.id;
						$this.videoPlayingTime=con.lastStudyTime;
			          } else if (con.contentId == $this.homeworkInfo.content.id) {
			            $this.homeworkInfo.studyItemId = con.id;
			          } else if (con.contentId == $this.examInfo.content.id) {
			            $this.examInfo.studyItemId = con.id;
			          } else if (con.contentId == $this.assessInfo.content.id) {
			            $this.assessInfo.studyItemId = con.id;
			          }
			        });
			        this.playCourseware();
			      }else{
					this.submitSignup();
				  }
			    } else {
			 	  this.$refs.messager.show({message:res.message,type:'error'});
			    }
			  });
			},
			loadResOwner(){
				let c=this.courseInfo;
				apiResOwner.list(1,'').then(rs=>{
					rs.result.forEach(item=>{
						if(item.code==c.resOwner1){
							c.resOwner1=item.name;
						}
						if(item.code==c.resOwner2){
							c.resOwner2=item.name;
						}
						if(item.code==c.resOwner3){
							c.resOwner3=item.name;
						}
					})
				});
			},
			saveStudyItem(){ //先保存学习的内容,针对于音视频的内容
			  if(this.coursewareInfo.finish || this.coursewareInfo.studyItemId) {
			    return;//已记录学习记录的不再保存
			  }
			  let params = {
			    studyId: this.studyId, //学习id,
			    courseId: this.courseId, //课程id,
			    contentId: this.coursewareInfo.content.id, //内容id,
			    contentType:this.coursewareInfo.content.contentType, //内容id,
			    contentName: this.coursewareInfo.content.contentName, //内容名称
			    progress: 0,
			    lastStudyTime:0,
			    status:2,
			    studyDuration:0,
			    contentTotal: this.totalContent
			  };
			  apiVideoStudy.saveStudyItem(params).then(res=>{
			      if(res.status == 200){
			        this.coursewareInfo.studyItemId=res.result.id;
			        this.coursewareInfo.finish = false;
			        this.coursewareInfo.status = 2;
			        this.coursewareInfo.progress = 1;
			      }else{
			        console.log("记录学习失败:" + res.message + "，" + res.error);
			      }
			  });
			},
			finishStudyItem(){ //设置完成学习的内容,针对于音视频的内容
			    let params={
			      itemId:this.coursewareInfo.studyItemId,
			      studyId:this.studyId,
			      courseId:this.courseId,
			      cnum:this.totalContent
			    }
			    apiVideoStudy.finishStudyItem(params).then(res=>{
			        if(res.status == 200){
			          this.coursewareInfo.finish = true;
			          this.coursewareInfo.status = 9;
			          this.coursewareInfo.progress = 100;
			        }else{
			          console.log("记录完成学习失败:" + res.message + "，" + res.error);
			        }
			    });
			},
			onFullScreen(e){
				console.log(e,'e');
				let full=e.detail.fullScreen;
				let divId='videowatermark';
				setTimeout(() => {
					var div = document.getElementById('myVideo')
					var div1 = div.firstChild;
					var speedDiv=div1.querySelector("#myVideoSpeed");
					if(full){
						var div3 = document.createElement("div");
					    div3.id =divId;
					    div3.setAttribute("class", "fullmark");
						div3.innerHTML='';
					    // 从父组件传过来的水印内容
					    //div3.innerText =this.userInfo.name+this.userInfo.code;
						for(var i=0;i<4;i++){
							div3.innerHTML+='<div style="color:#ffffff;width: 40%;height: 155px;padding-left:60px;padding-top:50px; display: flex;justify-content: center; transform: rotate(-36deg);font-size:20px;">'+this.userInfo.name+this.userInfo.code+'</div>';
						}
						
					    div3.style.cssText = "position:absolute;pointer-events: none; width: 100%;height: 100%;top:0;left:0;bottom: 0;right: 0; display: flex;justify-content: center;flex-wrap: wrap;overflow: hidden; opacity:0.3;padding-top:10px";
					    //console.log(div3,'div3');
						div1.appendChild(div3);
						if(!speedDiv){
							var speedDiv=document.getElementById('myVideoSpeed');
							div1.appendChild(speedDiv)
						}
					}else{
						var markDiv=div1.querySelector("#"+divId);
						//var speedDiv=div1.querySelector("#myVideoSpeed");
						if(markDiv){
							div1.removeChild(markDiv);
						}
						if(speedDiv){
							//div1.removeChild(speedDiv);
						}
					}
				 }, 200);
			},
			onPlayerPlay(){
				this.isPlaying = true;
			  //console.log("开始播放");
			  this.playerBoxShow = false;
			  this.isAppendTime=false;
			  this.videoSpeed=studyUtil.getVideoSpeed();
			  this.videoPlayer.playbackRate(this.videoSpeed);
			  this.$refs.videoone.play();
			  let $this=this;
			  if(!$this.coursewareInfo.finish){
			    let completeType=this.curriculumData.completeSetup;
			    if(completeType==0){
			      //默认5秒后学习完成.
			     this.handleTimeout= setTimeout(() => {$this.saveStudyInfo();}, 5000);
			    }else{
			      //先记录进行中的学习内容
			      this.saveStudyItem();
			    }
			  }
			   
			},
			onPlayerPause(){
				this.isPlaying = false;
				this.$refs.videoone.pause();
			  //console.log("暂停");
			},
			onPlayerEnded(){
				this.playerBoxShow = true;
			  //console.log("播放结束");
			  //this.isAppendTime=true;//开启追加学习时间
			  if(!this.coursewareInfo.finish && this.coursewareInfo.studyItemId){
				  this.finishStudyItem();
			  }
			},
			changeSpeed(e) {
			  // 获取选择的倍速
			  let value = e;
			  // 标记变更后的倍速，用于显示文字
			  this.videoSpeed = Number(value);
			  this.videoPlayer.playbackRate(this.videoSpeed);
			  studyUtil.setVideoSpeed(this.videoSpeed);
			  this.speedListShow=false;
			},
			showSpeedCtrl(){
				if(this.speedListShow){
					this.speedListShow=false;
				}else{
					this.speedListShow=true;
				}
			},
			onPlayerPlaying(e){
        console.log("=======microDetail");
			  //console.log("当前播放11",itme);
			  this.isAppendTime=false;//禁止追加学习时间
			  //console.log("当前播放11"+itme);
			  let intTime=parseInt(e.detail.currentTime);
			  
			  //判断是否完成
			  let completeType=this.curriculumData.completeSetup;
			  let completeSecond=this.curriculumData.second;
			  if(!completeSecond){
			    completeSecond=5;//如果没有就采用默认的时间了
			  }
			  if(completeType>0 && !this.coursewareInfo.finish){ //因为1按进度，2按时长都是计算时间，所以这里直接大于0处理
			      if(completeType==1){
			        let finishPercent=this.curriculumData.setupTage;
			        let videDuration=this.coursewareInfo.content.duration;
			        let percent =intTime*100/videDuration;
			        if(percent>=finishPercent){
			            this.finishStudyItem();
			        }
			      }else if(completeType==2){
			        if(intTime>completeSecond){
			           this.finishStudyItem();
			        }
			      }
			  
			  }
			  
			  let saveTime=Math.floor(intTime%10);
			  //console.log(intTime,saveTime,'aa',this.coursewareInfo.studyItemId)
			  if(this.preTime!=intTime && saveTime==0 && this.coursewareInfo.studyItemId!=''){
				 this.preTime=intTime;
				 this.videoPlayingTime=intTime;
			    //记录播放时间
			    //console.log('记录播放时间:'+intTime);
			    let postData={
			      itemId:this.coursewareInfo.studyItemId,
			      videoTime:intTime
			    }
			    apiCourseStudy.updateStudyVideoTime(postData).then(rs=>{
			       if(rs.status!=200){
			         console.log('记录播放时间错误');
			       }
			    })
			  }
			},
			audioPlay(){
				//console.log('audioPlay');
				let $this=this;
				if(!$this.coursewareInfo.finish){
				  let completeType=this.curriculumData.completeSetup;
				  if(completeType==0){
				    //默认5秒后学习完成.
				    this.handleTimeout= setTimeout(() => {$this.saveStudyInfo();}, 5000);
				  }else{
				    //先记录进行中的学习内容
				    this.saveStudyItem();
				  }
				}
			},
			audioEnd(){
				//console.log('audioEnd');
				if(!this.coursewareInfo.finish && this.coursewareInfo.studyItemId){
					this.finishStudyItem();
				}
			},
			audioPause(){
				//console.log('audioPause');
			},
			audioPlaying(e,second){
        console.log("=======microDetail");
				// console.log(e,'e');
				// console.log(e.currentTime,'currentTime');
				// console.log(second,'second');
				this.isAppendTime=false;//禁止追加学习时间
				let videDuration=e.duration;
				//let videDuration=this.coursewareInfo.content.duration;
				let intTime=second;
				
				//判断是否完成
				let completeType=this.curriculumData.completeSetup;
				let completeSecond=this.curriculumData.second;
				if(!completeSecond){
				  completeSecond=5;//如果没有就采用默认的时间了
				}
				if(completeType>0 && !this.coursewareInfo.finish){ //因为1按进度，2按时长都是计算时间，所以这里直接大于0处理
				    if(completeType==1){
				      let finishPercent=this.curriculumData.setupTage;
				      let percent =intTime*100/videDuration;
				      if(percent>=finishPercent){
				          this.finishStudyItem();
				      }
				    }else if(completeType==2){
				      if(intTime>completeSecond){
				         this.finishStudyItem();
				      }
				    }
				
				}
				
				let saveTime=Math.floor(intTime%10);
				//console.log(intTime,saveTime,'aa',this.coursewareInfo.studyItemId)
				if(this.preTime!=intTime && saveTime==0 && this.coursewareInfo.studyItemId!=''){
								 this.preTime=intTime;
								 this.videoPlayingTime=intTime;
				  //记录播放时间
				  //console.log('记录播放时间:'+intTime);
				  let postData={
				    itemId:this.coursewareInfo.studyItemId,
				    videoTime:intTime
				  }
				  apiCourseStudy.updateStudyVideoTime(postData).then(rs=>{
				     if(rs.status!=200){
				       console.log('记录播放时间错误');
				     }
				  })
				}
			},
			saveStudyInfo() {
			  //记录课件学习信息
			  if (this.tabIndex != 0) {
			    //只有在课件页面停留超过5秒才会记录
			    return;
			  }
			  if (this.coursewareInfo.finish) {
			    return;
			  }
			  let params = {
			    studyId: this.studyId, //学习id,
			    courseId: this.courseId, //课程id,
			    contentId: this.coursewareInfo.content.id, //内容id,
			    contentName: this.coursewareInfo.content.contentName, //内容名称
			    progress: 100,
			    contentTotal: this.totalContent
			  };
			  apiCourseStudy.studyContent(params).then(res => {
			    if (res.status == 200) {
			      this.coursewareInfo.finish = true; //课件内容已学习，记录状态
			    } else {
			      console.log("记录学习失败:" + res.message + "，" + res.error);
			    }
			  });
			},
			submitSignup(){ //报名
			
				let pamars = {
				  courseId: this.courseId,
				  courseName: this.courseInfo.name,
				  courseType: this.courseInfo.type,
				  signType: 1,
				  signInfo: "自主报名"
				};
				let $this = this;
				apiCourseStudy.signup(pamars).then(res => {
				  if (res.status == 200) {
					//this.$refs.messager.show({message:'报名成功',type:'success'});
				    this.studyId =res.result.studyId;//设置学习id
				    //this.appendStudyTime(); //报名成功记录开始时间
				    //报名成功后，就直接记录课件学习情况，5秋后
					this.playCourseware();
				  } else {
					this.$refs.messager.show({message:res.message,type:'error'});
				  }
				});
				
			},
			playCourseware(){ //播放课件内容
				let ctype=this.coursewareInfo.content.contentType;
				let $this=this;
				if(ctype==10){
					//视频播放
				}else if(ctype==20){
					//音频处理
				}else{
					if(!$this.coursewareInfo.finish){
						this.handleTimeout=setTimeout(() => {$this.saveStudyInfo();}, 5000);
					}
				}
				
			},
			loadScorePraiseAndTrample(){
			    //加载是否请过分
			    apiCourseGrade.has(this.courseId).then(rs=>{
			      if(rs.status==200 && rs.result){
			        this.scoreInfo.has=true;
			      }
			    });
			    apiPraises.has(1,this.courseId).then(rs=>{
			      if(rs.status==200 && rs.result){
			        this.isPraise=true;
			      }
			    });
			    apiTrample.has(this.courseId).then(rs=>{
			      if(rs.status==200 && rs.result){
			        this.isTrample=true;
			      }
			    });
			},
			closeScore(){
				this.scoreInfo.dlgShow=false;
			},
			openScore(){
				if(this.studyId==''){
					this.$refs.messager.show({message:'学习后才可评分',type:'error'});
					return;
				}
				if(this.scoreInfo.has){
					this.$refs.messager.show({message:'您已评过分',type:'error'});
					return;
				}
				this.scoreInfo.dlgShow=true;
			},
			addScore(){
				if(this.studyId==''){
					this.$refs.messager.show({message:'学习后才可评分',type:'error'});
					return;
				}
				if(this.scoreInfo.has){
					this.$refs.messager.show({message:'您已评过分',type:'error'});
					this.scoreInfo.dlgShow=false;
					return;
				}
			  let postData={
			    courseId:this.courseInfo.id,
			    studyId:this.studyId,
			    score:this.scoreInfo.score
			  }
			  if(this.scoreInfo.score>0){
			    apiCourseGrade.grade(postData).then(rs=>{
			        if(rs.status==200){
					    this.scoreInfo.dlgShow=false;
						this.scoreInfo.has=true;
					    this.$refs.messager.show({message:'评分成功，谢谢您的评分',type:'success'});
			        }else{
						this.$refs.messager.show({message:'评分分处理失败，请稍后再试',type:'error'});
			        }
			    });
			  }
			},
			praiseContent(){
				
				if(this.studyId==''){
					this.$refs.messager.show({message:'学习后才可点赞',type:'error'});
					return;
				}
				//赞和踩只能是一个
				if(this.isTrample){
					this.$refs.messager.show({message:'踩过了不能再赞了',type:'error'});
					return;
				}
				
			  let postData={
			    objType:1,
			    objId:this.courseInfo.id,
			    title:this.courseInfo.name
			  }
			  if(this.interactRuning){
			  	return;
			  }
			  this.interactRuning=true;
			  if(this.isPraise){
				  apiPraises.remove(1,this.courseInfo.id).then(rs=>{
					  this.interactRuning=false;
				    if(rs.status==200){
						this.$refs.messager.show({message:'已取消点赞',type:'success'});
						this.isPraise=false;
						this.courseInfo.praises--;
				    }else{
						this.$refs.messager.show({message:'取消点赞失败,请稍后再试',type:'success'});
				    }
				  })
			  }else{
				  apiPraises.save(postData).then(rs=>{
					   this.interactRuning=false;
				    if(rs.status==200){
						this.$refs.messager.show({message:'点赞成功',type:'success'});
						this.isPraise=true;
						this.courseInfo.praises++;
				    }else{
						this.$refs.messager.show({message:'点赞失败,请稍后再试',type:'success'});
				    }
				  })
			  }
			  
			},
			treadContent(){
				if(this.studyId==''){
					this.$refs.messager.show({message:'学习后才能踩吆',type:'error'});
					return;
				}
				//赞和踩只能是一个
				if(this.isPraise){
					this.$refs.messager.show({message:'赞过了不能再踩了',type:'error'});
					return;
				}
				if(this.interactRuning){
					return;
				}
				this.interactRuning=true;
				if(this.isTrample){
					apiTrample.remove(this.courseInfo.id).then(rs=>{
						 this.interactRuning=false;
					  if(rs.status==200){
						this.$refs.messager.show({message:'已取消踩',type:'success'});
						this.isTrample=false;
						this.courseInfo.trampleCount--;
					  }else{
					   this.$refs.messager.show({message:'取消踩失败,请稍后再试',type:'error'});
					  }
					})
				}else{
					apiTrample.trample(this.courseInfo.id).then(rs=>{
						 this.interactRuning=false;
					  if(rs.status==200){
						this.$refs.messager.show({message:'已踩',type:'success'});
						this.isTrample=true;
						this.courseInfo.trampleCount++;
					  }else{
					   this.$refs.messager.show({message:'踩失败,请稍后再试',type:'error'});
					  }
					})
				}
			  
			},
			changeScore(score){
				if(!score){
					return '0.0'
				}
				score=String(score)
				if(score.indexOf('.')!=-1){
					score=score.toFixed(1)
				}else{
					score=score+'.0'
				}
				return score
			},
			openComment(){
				//打开评论窗口，调用组件内事件
				this.$refs.fiexdbar.openInput();
			},
			refreshComments(){
				this.$refs.comments.loadData(false);
			},
			openShare(){
				this.$refs.fiexdbar.addShare();
			},
			shareSuccess(rs){
				this.$refs.messager.show({message:'分享成功',type:'success'});
			},
			clicktab(idx) {
				if(idx==1 || idx==2 || idx==3){
					if(this.studyId==''){
						uni.showToast({title:'报名后可以查看'})
						return;
					}
				}
				this.playerBoxShow = false;
            	this.tabIndex=idx;
				if(idx == 4) {
					this.isComments = false;
				} else {
					this.isComments = true;
				}
			}
		}
	}
</script>
<style lang="scss" scoped>
	// .fullmark{
	// 	position: fixed;
	// 	width: 100%;
	// 	height: 100%;
	// 	top:0;
	// 	left: 0;
	// 	bottom: 0;
	// 	right: 0;
	// 	pointer-events: none;
	// 	z-index: 9999999;
	// 	display: flex;
	// 	flex-wrap: wrap;
	// 	overflow: hidden;
	// 	.fullmark-text{
	// 		width: 375upx;
	// 		height: 375upx;
	// 		display: flex;
	// 		justify-content: center;
	// 		align-items: center;
	// 		transform: rotate(-36deg);
	// 		color: #d4d4d4;
	// 		font-size: 32upx;
	// 		white-space: nowrap;
	// 	}
		
	// }
	.player-box{
	  position: absolute;
	  // top: 62px;
	  // left: 184px;
	  width: 200px;
	  left: 50%;
	  top: 50%;
	  transform: translate(-50%, -50%);
	  height: 147px;
	  background:#a9abb3;
	  border-radius: 33px;
	  text-align: center;
	  padding: 20px;
	  box-sizing: border-box;
	  image{
		  width: 40px;
		  height: 40px;
		  margin: 0px 10px;
	  }
	  .player-praise{
	    margin-top: 5px;
	    display: flex;
	    // justify-items: center;
	    justify-content: center;
	  }
	  .player-rate{
	    margin-top: 20px;
		text-align: center;
		display: flex;
		justify-content: center;
	  }
	}
	.uavatar{
		border:1px solid #73adfe;
		background-color: #d9e9ff;
		color:#73adfe;
		font-size: 12px;
		width: 25px;
		height: 25px;
		display: flex;
		justify-content: center;
		align-items: center;
		.uavatar-scale{
			transform:scale(0.8);
		}
	}
	.bm-button{
		text-align: center;
		 //padding: 158upx 100%;
		
		
		.u-but{
			width: 320rpx;
			height: 64rpx;
			background-color: #2F2F2F;
			opacity: 0.4;
			border-radius: 10rpx;
			border-color:#2F2F2F;
			margin: 158rpx auto;
		}
	}
	.player-controls-btn {
		position: absolute;
		right: 10px;
		top: 0px;
		display: inline-block;
		color: #e5e5e5;
		padding: 0 0.4rem;
		transition: color 0.3s;
		height: 22px;
	}
	.btn-speed:hover .speed-control {
	  // visibility: visible;
	}
	.speed-control {
	  position: absolute;
	  top: 180px;
	  right: -20px;
	  transition: visibility 0.3s;
	  transform: translate(-50%, -100%);
	}
	.speed-control .speed-control-list {
	  list-style: none;
	  color: #e5e5e5;
	  width: 50px;
	  font-size: 12px;
	  text-align: left;
	  padding: 0px 0px 0px 5px;
	  margin: 0;
	  overflow: hidden;
	  border-radius: 4px;
	  background: rgba(21, 21, 21, 0.8);
	}
	.speed-control .speed-control-list .li {
	  position: relative;
	  display: block;
	  height: 25px;
	  line-height: 25px;
	}
	.speed-control .speed-control-list .li:hover {
	  color: #fff;
	  background: rgba(99, 99, 99, 0.8);
	}
	.speed-control .speed-control-list .li.current {
	  color: var(--primaryColor);
	}
	.consultant{
		border-bottom: 2px solid #fafafa;
		padding: 20upx 0;
		.content-title{
			font-size: 32upx;
			font-family: PingFang SC;
			font-weight: 650;
			color: #444444;
			margin-top: 30upx;
			// line-height: 24upx;
			
		}
		.content-text{
			font-size: 28upx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #787878;
			line-height: 33upx;
			word-break:break-all;
			margin-top: 20upx;
		}
	}
	
	.main-footer{
		background-color: #FFFFFF;
		padding: 5px 18px;
		display: flex;
		
		justify-content: space-between;
		.main-scroe{
			display: inline-block;
			width: 130rpx;
			line-height: 68rpx;
			text-align: center;
			margin-top: -15rpx;
			height: 68rpx;
			// padding:20upx 30upx;
			background-color: #E5E5E5;
			border-radius: 10upx;
			font-size: 24upx;
		}
		.main-praise{
			line-height: 30rpx;
		}
		
	}
	.main-cata{
		margin-top: 20upx;
		.main-cata-top{
			display: flex;
			padding: 20upx;
			background-color: #FFFFFF;
			border-bottom: 1px solid #ececec;
		}
		.main-cata-active{
			background-color: #FFFFFF;
			padding: 20upx 20upx 20upx 20upx;
		}
	}
	.tabbar{
		height: 50px;
		line-height: 50px;
		background-color: #FFFFFF;
		display: flex;
		justify-content: space-around;
		color: #575757;
		.tabbar-item{
			text-align: center;
			line-height: 40px;
			height: 40px;
		}
		.active{
			border-bottom: 2px solid #00aaff;
			color: #00aaff;
		}
	}
    .content-tit{
        font-size: 36upx;
		font-weight: 700;
		word-break:break-all;
        // margin-left: 10px;
    }
    .tags{
        margin-top: 5px;
        padding-bottom: 10upx;
        
    	.tags-item{
    		display: inline-block;
    		background: #F6FAFD;
            border-radius: 14px;
    		padding: 8upx 20upx;
    		margin: 6upx;
    		color: #6D99FC;
    		font-size: 28upx;
    	}
    }
	.cfield{
		line-height: 30upx;
		font-size: 28upx;
		.cfield-lable{
			color: #767676;
		}
		.cfield-value{
			color: #767676;
			// margin-left: 10upx;
		}   font-size: 26rpx;
	}
	.cscore{
		font-size: 24upx;
		.cscore-value{
			font-size: 38upx;
			color: #FFB30F;
		}
		.cscore-unit{
			
		}
	}
    .text-row{
    	margin-top: 6upx;
    	color: #494949;
    	line-height: 30px;
    	font-size: 26upx;
        
    	.text-row-label{
            margin-left: 10px;
        }
    }
    .btn{
        width: 88px;
        height: 34px;
        background: #5BA2FC;
        font-size: 12px;
        color: #FFFFFF;
        text-align: center;
        line-height: 34px;
        border-radius: 4px;
        margin-left: 10px;
    }
	.video-div{
	  position: absolute;
	  z-index: 999999999;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 100%;
	  background: #bcbcbc;
	}
	.paperinfo{
		padding-top: 10px;
		.paperinfo-title{
			text-align: center;
			font-size: 30upx;
			font-weight: 600;
			padding: 10px;
		}
		.paperinfo-item{
			background-color: #FFFFFF;
		}
	}
    .course-title{
    	text-align: center;
    	padding: 15px;
    }
    .endurance{
        height: 90px;
        background: #FFFFFF;
        margin-top: 10px;
        
        .exam{
            font-size: 15px;
            color: #5EB6A4;
            padding-top: 15px;
            margin-left: 15px;
        }
        
        .endurance-cen{
            display: flex;
            justify-content: space-between;
            margin-right: 11px;
            
            .schedule{
                font-size: 12px;
                color: #868686;
                margin-left: 16px;
            }
            
            .schedules{
                font-size: 2px;
                color: #000000;
                margin-left: 13px;
            }
            
            .patiently{
                font-size: 12px;
                color: #868686;
                margin-left: 16px;
            }
            
            .patientlys{
                font-size: 12px;
                color: #000000;
                margin-left: 13px;
            }
        }
    }
    
    .query{
        width: 71px;
        height: 27px;
        background: #FFB30F;
        font-size: 12px;
        color: #FFFFFF;
        text-align: center;
        line-height: 27px;
        margin-top: 18px;
    }
    /deep/.content{
        border-radius: 0px;
        padding: 2px 20px 10px 15px;
      
    }
    .content_top{
        display: flex;
        justify-content: space-between;
        margin-top: 20rpx;
        .top_top{
            display: flex;
        }
        
        .imgs{
            width: 30px;
            height: 30px;
            border-radius: 50%;
        }
        
        .teaters{
            display: flex;
            
            .top_top{
                font-size: 18px;
                color: #696969;
                margin-top: 12px;
                font-weight: bold;
            }
            
            .top_bot{
                font-size: 15px;
                color: #787878;
                margin-top: 15px;
                font-weight: bold;
                margin-left: 2px;
            }
        }
        
        .share{
            width: 64px;
            height: 27px;
            background: #F8F7FC;
            margin-right: 10px;
            margin-top: 10px;
            
            .share-img{
                width: 16px;
                height: 14px;
                margin-left: 11px;
            }
            
            .session{
                font-size: 14px;
                text-align: center;
                line-height: 28px;
            }
        }
    }
    .cinfo{
        background: #FFFFFF;
        min-height: 800upx;
		padding: 20upx;
        .cinfo-top{
            width: 90%;
            height: 58px;
            margin-left: 5%;
            border-bottom: 2px solid #FAFAFA;
            padding-bottom: 10px;
            
            .demar{
                font-size: 32upx;
                color: #666666;
                margin-top: 10px;
                padding-top: 18px;
            }
            
            .identity{
                font-size: 28upx;
                color: #787878;
                margin-left: 12px;
                margin-top: 6px;
            }
        }
        .cinfo-center{
            width: 90%;
            height: 58px;
            margin-left: 5%;
            border-bottom: 2px solid #FAFAFA;
            
            .worth{
                font-size: 32upx;
                color: #666666;
                margin-top: 18px;
            }
            
            .details{
                font-size: 28upx;
                color: #787878;
                margin-left: 12px;
                margin-top: 6px;
            }
        }
        .consultant{
            width: 90%;
            height: 58px;
            margin-left: 5%;
            border-bottom: 2px solid #FAFAFA;
            
            .particulars{
                font-size: 32upx;
                color: #666666;
                margin-top: 18px;
            }
            
            .matter{
                font-size: 28upx;
                color: #787878;
                margin-left: 12px;
                margin-top: 6px;
				word-break:break-all;
            }
        }
    }
	.fixed-field{
		width: 200px;
		height: 40px;
		line-height: 30px;
		background: rgb(247,247,249);
		border-radius: 10upx;
		display: flex;
		.fixed-field-icon{
			margin-top: 2px;
			margin-left: 10px;
		}
		.fixed-field-text{
			font-size: 12px;
			color: #000000;
			margin-left: 2px;
			margin-top: 5px;
		}
	}
</style>
