NewZkgj/pages/center/prohibited/details.vue

<template>
	<view class="details">
		<!-- 头部违禁信息 -->
		<view class="header">
			<view class="h-box">
				<view class="h-b-top">
					<text class="name">{{ userlistobj.agentName || '' }}</text>
					<view class="status">
						<text class="pointer"></text>
						<text class="item">{{ userlistobj.violatedStatus | ViolatedStatus }}</text>
					</view>
				</view>
				<!-- 详细信息 -->
				<view class="h-b-btm" style="margin: 19rpx 0 30rpx;">
					<view class="item">
						<image class="item-imgs" src="@/static/images/img/time.png" mode=""></image>
						{{ userlistobj.createTime || '' }}
					</view>
				</view>
				<view class="h-b-btm">
					<view class="item">
						<image class="item-imgs" src="@/static/images/img/voice.png" mode=""></image>
						{{ userlistobj.mm || '' }}m
					</view>
					<view class="item hit">
						<image class="item-imgs" src="@/static/images/img/hit.png" mode=""></image>
						{{ userlistobj.violatedFrequency || '0' }}
					</view>
				</view>
			</view>
		</view>
		<!-- tab选择框 -->
		<template v-if="isShowMerge">
			<u-tabs :activeItemStyle="{background: '#2979ff', color: '#fff'}" :list="list" :is-scroll="false"
				bg-color="transparent" :show-bar="false" :current="current" @change="change"></u-tabs>
		</template>
		<template v-if="current == 0">
			<scroll-view :scroll-top="scrollTop" lower-threshold='100px' @scrolltolower="ltolower()"
				upper-threshold='40px' @scrolltoupper="rolltoupper()" :scroll-into-view="scrollId" scroll-y="true"
				class="zhuti text scroll-Y">
				<!-- 聊天记录-->
				<view class="dialog-block" style="border-bottom: none;">
					<block v-for="(item,index) in findTabooWordsList" :key="index">
						<view class="text">
							<view class="avatar">
								<view :style="[SPEAKERSTYLE(item.speaker)]">
									<!-- <image v-if="item.isShow && item.isShow == 0" :src="Aimg" mode="widthFix"></image> -->
									<text v-if="item.isShow == 0">顾</text>
									<text v-else>{{ item.speaker | toCapital }}</text>
								</view>
							</view>

							<view class="contentInfo">
								<view class="info">
									<!-- <text class="AudioUserName">{{ item.speaker | toCapital }}</text> -->
									<text class="AudioUserName" v-if="item.isShow == 0">{{item.username}}</text>
									<text class="AudioUserName" v-else>{{ item.speaker | toCapital }}</text>
									<text>{{conversionTiame(item.bg/1000)}}</text>
								</view>
								<view class="contentMain">
									<view class="content">
										<view v-html="item.onebest"></view>
									</view>
									<template v-if="isShowMerge">
										<image @click="clickbofang(0,item, 'show')" class="play"
											src="@/static/images/recordingManagement/play.png"></image>
									</template>
								</view>
							</view>
						</view>
					</block>
				</view>
			</scroll-view>
		</template>
		<template v-if="current == 1">
			<!-- 音频 -->
			<view class="audio">
				<!-- 标记顾问 -->
				<view class="headboxbott">
					<view class="headovfu">
						<u-tabs-swiper ref="tabs" font-size="30" :bold="true" swiper-width="600" :current="roleindex"
							@change="tapspagek()" inactive-color="#b1b1b1" active-color="#008ef2" :list="tablist"
							:is-scroll="true">
						</u-tabs-swiper>
					</view>
					<view v-if="permissions.bjgw" class="headpade">
						<view class="biaoji" @tap="tagtap()">标记</view>
					</view>
				</view>
			</view>
			<scroll-view :scroll-top="scrollTop" lower-threshold='100px' @scrolltolower="ltolower()"
				upper-threshold='40px' @scrolltoupper="rolltoupper()" :scroll-into-view="scrollId" scroll-y="true"
				class="zhuti text scroll-Y">
				<!-- 聊天记录-->
				<view class="dialog-block" v-for="(dialog,i) in dialogList" :key="i">
					<view :id="'dialog'+i" class="fileName">录音文件</view>
					<block v-for="(item,index) in dialog.message" :key="index">
						<view class="text" :id="'dialog'+csdFileindex+'text'+item.bg"
							:class="{active: item.bg < playNow &&  item.ed > playNow, reverse: Number(item.speaker) % 2 == 0}"
							:data-speaker="item.speaker">
							<view class="avatar">
								<view :style="[SPEAKERSTYLE(item.speaker)]">
									<!-- <image v-if="item.isShow == 0" :src="Aimg" mode="widthFix"></image> -->
									<text v-if="item.isShow == 0">顾</text>
									<text v-else>{{ item.speaker | toCapital }}</text>
								</view>
							</view>
							<view class="contentInfo">
								<view class="info">
									<!-- <text class="AudioUserName">{{ item.speaker | toCapital }}</text> -->
									<text class="AudioUserName" v-if="item.isShow == 0">{{ item.username }}</text>
									<text class="AudioUserName" v-else>{{ item.speaker | toCapital }}</text>
									<text>{{conversionTiame(item.bg/1000)}}</text>
								</view>
								<view class="contentMain">
									<view class="content">
										<view v-html="item.onebest"></view>
									</view>
									<image @click="clickbofang(dialog.backindex,item)" class="play"
										src="@/static/images/recordingManagement/play.png"></image>
								</view>
							</view>
						</view>
					</block>
				</view>
			</scroll-view>
		</template>

		<view class="bottombox">
			<!-- 播放块 -->
			<template v-if="current == 1">
				<zaudio :duration="duration" theme="theme4"></zaudio>
			</template>

			<template v-if="userlistobj.invalidViolatedCause">
				<view class="bottomtips">
					无效原因：{{ userlistobj.invalidViolatedCause }}
				</view>
			</template>

			<view class="botbotmm">
				<view class="item" @click="preValid">上一条</view>
				<template v-if="isShowMerge">
					<template v-if="userlistobj.disposeStatus == 0">
						<view class="item" @click="setViolated(1)">确认有效</view>
						<view class="item" @tap="showTagValid">确认无效</view>
					</template>
					<template v-if="userlistobj.disposeStatus == 1 && userlistobj.violatedStatus == 1">
						<view class="item" @tap="showTagValid">无效</view>
					</template>
					<template v-if="userlistobj.disposeStatus == 1 && userlistobj.violatedStatus == 2">
						<view class="item" @click="setViolated(1)">确认有效</view>
					</template>
				</template>
				<view class="item" @click="nextValid">下一条</view>
			</view>
		</view>

		<!-- 标记顾问 -->
		<u-popup v-model="biojiisshow" mode="center">
			<view class="bounced">
				<view class="jiajinghuatit">标记为顾问</view>
				<view
					style="width: 95%;display: flex;flex-wrap: wrap;margin: 0 auto;padding-top: 30rpx;padding-bottom: 30rpx;">
					<view class="viewclace" :class="roleindexbiaoji == index ? 'bosdttom' : ''"
						@click="biaojixuanze(index)" v-for="(item,index) in tablist.slice(1,tablist.length)"
						:key="index">
						<view>{{item.name}}</view>
					</view>
				</view>
				<view class="bounced3" style="margin-top: 20rpx;">
					<view class="bounced3-1" @tap="unmarktap">取消</view>
					<view class="bounced3-2" @tap="Confirmthetag">确认</view>
				</view>
			</view>
		</u-popup>

		<!-- 标记无效原因  border-radius="16" -->
		<u-popup v-model="tagValidShow" mode="center">
			<view class="reason">
				<text class="resaon-title">无效原因</text>
				<view class="resaon-textbox">
					<textarea v-model="reasonSrc" placeholder="请输入无效原因" maxlength="60" />
					<text class="lastlength">{{ reasonSrc.length }}/60</text>
				</view>
				<view class="button">
					<text @click="inputDone">完成</text>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	var util = require("@/utils/util.js");
	var config = require("@/config");

	import zaudio from '@/components/uniapp-zaudio/zaudio';
	export default {
		components: {
			zaudio
		},
		data() {
			return {
				Aimg: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAMAAAC5zwKfAAACqVBMVEUAAAD////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////9/f3////9/f39/f3////////9/f3////////////9/f3////9/f39/f3////9/f3////////9/f3////9/f3////////////////9/f39/f3////////9/f39/f3////9/f39/f3////////9/f39/f3////////9/f39/f39/f3////////////////+/v7+/v7////+/v7////+/v7////+/v7+/v7////////+/v7+/v7////+/v7////+/v7////////////////////////////+/v7////+/v7////+/v7+/v7////////////+/v7////+/v7////+/v7+/v7////////+/v7////+/v7////////+/v7////////+/v7////+/v7+/v7+/v7////////+/v7+/v7////+/v7+/v7////+/v7////+/v7////+/v7////+/v7+/v7////+/v7+/v7////+/v7////+/v7////+/v7+/v7////+/v5jdC9iAAAA4nRSTlMAAQIDBAUGBwgLDA0ODxARExQVFhgbHB4fICEiIyQmJygpKy4wMTIzNDY3ODk6Oz0+P0BBQkRGR0lKTE5PUFFTVFVXWFlcXV9gYWJjZWZnaGlqa2xtbm9wcXJzdHV2d3h6e319foGBgoODh4mKiouMjI2QkZKSk5OUlpeYmZmam5ycnZ+foKGio6SmqKmpq6yur7CwsbGytba5uru8wMDBwcLCw8XGx8jJysrLzM7P0dLT1dXW1tfY2drc3N7f4OHh5Obm5+jp6uvs7vDx8vLz8/T09fX29/f4+fn6+vz8/f7+RVDt+wAAA55JREFUGBntwf9/1HMAB/DX7XYbuXWV1cyMoixfugrRGNXytW33pbVdJ83XkiMLSb4LJd/zZUi0SKT5FmGS77HUVaixnHP2+kt8vt3Zbp/3+7P3XR5+8XziP1E4uiYcrh1bjMNi6NzXumnoeX3eSOSrpHUv+zi0ogJ5qd3JLN1XuJGzwqW0sW4oclT0Im19XIqcuNdQ4D0vcnEDhdYgB2f+SbFZUHbEdkrsLYeqFko9CEVH7qJUohxqLqODO6BmLR18XwAVRQfpZDxUnExHjVBRR0eroGIZHX0AFe10tA8qdtNZIRR00VEPVLxLRzuh4jk62gIVy+joSaiI0tECqPDT0blQ4f6RDpI+KHmYDjZBzWQ6aIaibZSK+6BoOqViUOXqoER8BJSdlqJYFDm4h0LveJAD7+cUiFciJ1U/01aiGjk65zfaSF6EnE3azQEO1iAPFZuZZes45MUT3cM+emLFyNfwK3fQ8k1sFA6L0cElTzx9d1OVC/8bNG/gzY+GQaKk461gCQZr8iMHSNZD4nySv6wYj0EYFv2UhqcgcTsN70ePhtzER3+lJe6BxXP9jTctvrl1yS1jkLaNlkTbBR6IlF3dyT78sHh+oqkSlrJe/uOH1jGw4apem2I/1yLtGRo6kRZiP73t57mQxb+Z2dqRdikNtyLtBWb78Cz05bomyQH+KIGljIYaWNxxDtC72ouMgsdpZzosHhqqYDmFdraOQNpttHUfLKU0TITlKtra6IZpCu3tgMVPQx0sG2ivDqaVFDgOppk0LIbJm6C9DTB1UCAMU4SGZ2GqocAumL6jQBtMMRq2wLScAik3dMV/UWB/EQwrafgSpk6KlEJ3LIXOgGE9DQdgqKDQSdBNoNAiGL6i6SjowhSaAt1UCm2CzpOk6QTonqfQJdBdSKGkD5pKWqZCU7iHQtdB10KxWmjOpqUJmtMp9gB091LsIWiCtCyFZiHFXoZuHcW+hiZGy0vQvE2xT6DbTolKAI/R8hmA4SmKdUG3jxIhAG/QkigAZlAi6QJQTJk2AF1MGwXcRRkfgJGU2V8EHzP8wBeUqQQwllKTcCozpuFESk0AMJNSC3AxM8KYT6lpAFootRGLmLEQ6ynVCCBAqcSQ1cy4f8ghSs0HcMzvlKp+lRmvVFMqNQ6aaIoyd3Yy49vllOmuh+H4WZFIpFnTpJmjadTM1oQ1oVAgFNQENA0N9f01BIKh8OzGOU3NkbmXzwuV41/wNztgHKhu7WKTAAAAAElFTkSuQmCC",
				list: [{
					name: '违禁话术'
				}, {
					name: '音频识别'
				}],
				current: 0, // tab下表
				tablist: [], // 顾问标记列表
				roleindex: 0, // 选中顾问下标

				luyinList: [], // 录音文件
				newluyinList: [],
				dialogList: [], // 录音识别列表渲染数据

				permissions: {}, // 权限菜单
				biojiisshow: false, // 标记顾问弹窗

				textindex: 0, //下拉  转写文件下标
				toptextindex: 0, //上拉  转写文件下标

				dshfkjsdkksodofydwfkhwdfkjh: 0, // 顾问的id之类的
				status: 0, // 状态（不明白是什么状态）
				speaker: '', // 角色身份
				customerId: '', // 楼盘id吧（猜）
				infos: {}, // 音频内容
				stateisshow: '', // 
				itemobj: {}, // 本地缓存的音频信息
				userlistobj: {}, // 获取到的顾问信息
				csdFileindex: 0, // 当前使用录音转写的下标

				// 录音信息
				recordPath: "", // 录音地址
				playNow: 0, // 当前播放时间
				audioType: false, // 音频是否自动播放状态
				scrollId: "", // 当前播放滚动到的位置

				tagValidShow: false, // 标记弹窗
				reasonSrc: '', // 标记无效的原因
				findTabooWordsList: [], // 违禁词列表
				nextPageObj: JSON.parse(uni.getStorageSync('nextPageObj')), // 当前页面筛选内容
				isMerge: 0, // 默认合并
				isSw: false,

				ACTION: Symbol('zaudio'), // 唯一值区分每个页面的方法
				isPageHide: false, // 是否息屏
				duration: '', // 总时长
				allTextList: [], // 所有话术列表
				isFirstWords: 0, // 第一个违禁词出现的时间
			}
		},
		computed: {
			conversionTiame() {
				return (e) => {
					return this.getTime(e);
				}
			},
			// 是否为合并录音
			isShowMerge() {
				return this.isMerge == 0 ? true : false
			}
		},
		onLoad(option) {
			this.status = option.status;
			this.customerId = option.customerId;
			this.stateisshow = option.stateisshow;
			this.itemobj = uni.getStorageSync('searchobj');
			if (option.isMerge) this.isMerge = option.isMerge
			this.$zaudio.autoPlay = true

			//注意: 不同的回调方法, 相同的业务函数方法名, 不会相互影响;
			this.$zaudio.on('stop', this.ACTION, () => {
				console.log('我是强制暂停或关闭小程序音频浮窗触发的')
			})
			this.$zaudio.on('seek', this.ACTION, (time) => {
				this.sliderChangeComplate(this.TIMEEVENT(time))
			})
			this.$zaudio.on('playing', this.ACTION, (obj) => {
				this.duration = obj.duration
				this.TimeUpdate(this.TIMEEVENT(obj.current))
			})
			this.$zaudio.on('error', this.ACTION, e => {
				console.log(e, '加载失败')
			})
			this.$zaudio.on('ended', this.ACTION, e => {
				this.$zaudio.stop()
				this.init({
					bg: 0,
					customerId: this.customerId
				})
			})
		},

		onShow() {
			this.scrollId = ''
			//实时渲染当前的播放状态
			if (this.current == 1) {
				this.$zaudio.syncRender()
			}
			this.permissions = uni.getStorageSync('weapp_session_Menu_data') // 权限

			this.roleindex = 0;
			if (this.stateisshow == 2) {
				this.infos = this.itemobj;
			} else {
				var pages = getCurrentPages();
				var currPage = pages[pages.length - 1]; //当前页面
				this.infos = currPage.data.info;
			}
			!this.isPageHide && this.init(this.infos);
			this.gituserlist()
			this.findTabooWords()
		},

		onHide() {
			this.isPageHide = true
		},
		onUnload() {
			//卸载不需要的业务和获取播放状态的业务,提高页面性能
			this.$zaudio.off('seek', this.ACTION);
			this.$zaudio.off('stop', this.ACTION);
			this.$zaudio.off('playing', this.ACTION);
			// this.$zaudio.setAudio([])
			
		},

		methods: {
			// 获取违禁词
			findTabooWords() {
				this.$u.get('/customer/findTabooWords', {
					customerId: this.customerId
				}).then(res => {
					let arr = []
					res.map(item => {
						if (item.transferContent) {
							item.transferContents = JSON.parse(item.transferContent)
							arr.push(item.transferContents)
						}
					})
					this.findTabooWordsList = arr
					this.isFirstWords = arr[0].bg
					console.log(this.findTabooWordsList, 'findTabooWordsList')
					
				})
			},

			// 确认无效标记 setViolatedStatus = 2
			inputDone() {
				if (!this.reasonSrc) {
					uni.showToast({
						title: '请输入标记无效的原因',
						icon: 'none',
						duration: 2000
					})
					return
				}
				this.setViolated(2)
			},

			// 下一条
			nextValid() {
				console.log(this.$zaudio)
				if (this.nextPageObj.pageSize < this.nextPageObj.num) {
					this.$zaudio.stop()
					this.nextPageObj.pageSize++
					this.keyWordsMatching(this.nextPageObj)
				} else {
					uni.showToast({
						title: '已经是最后一条了~',
						icon: 'none'
					})
				}
			},

			// 上一条
			preValid() {
				if (this.nextPageObj.pageSize == 1) {
					uni.showToast({
						title: '没有更早的了~'
					})
				} else {
					this.$zaudio.stop()
					this.nextPageObj.pageSize--
					this.keyWordsMatching(this.nextPageObj)
				}
			},

			// 获取违禁话术详情
			keyWordsMatching(params) {
				this.$u.post('/customer/findbynum', params).then(res => {
					this.customerId = res.results[0].id;
					this.current = 0
					uni.setStorageSync('nextPageObj', JSON.stringify(this.nextPageObj))
					this.resetAudioParams()
					this.prohibitedMatch()
				}).catch(e => {
					this.nextPageObj = JSON.parse(uni.getStorageSync('nextPageObj')), // 当前页面筛选内容
						uni.showToast({
							title: e.message,
							icon: 'none',
							duration: 2000
						})
				})
			},

			// 违禁词播放位置
			prohibitedMatch() {
				this.$u.post('/customer/prohibitedMatch', {
					customerId: this.customerId
				}).then(res => {
					let newweijin = res[0];
					newweijin.transferContent = JSON.parse(newweijin.transferContent)
					var item = {
						bg: newweijin.transferContent.bg,
						customerId: newweijin.corpusId,
					}
					// 获取是否有转写的音频
					this.$u.post("/corpus/findByPage", {
						pageNum: 1,
						pageSize: 100,
						query: {
							customerId: this.customerId,
						}
					}).then(res => {
						if (res == null) {
							uni.showToast({
								icon: "none",
								title: "暂无音频"
							})
							return
						} else {
							let newobj = res[0];
							this.isMerge = res[0].merge
							if (res[0].merge == 0) {
								this.infos = item
								this.itemobj = item
								this.recordPath = res[0].recordPath
								uni.setStorageSync("searchobj", item); //写入缓存
								console.log('在这里调用的', item)
								this.roleindex = 0;
								this.gituserlist()
								this.findTabooWords()
								// this.zyAudio()
							} else {
								uni.showToast({
									icon: "none",
									title: "暂无音频"
								})
							}
						}
					})
				})
			},



			// 设置违禁状态
			setViolated(status) {
				let params = {
					customerId: this.customerId,
					violatedStatus: status,
					invalidViolatedCause: this.reasonSrc,
				}
				this.$u.post('/customer/setViolatedStatus', params).then(res => {
					this.tagValidShow = false
					uni.showToast({
						title: '标记成功',
						duration: 2000
					});
					this.gituserlist()
					setTimeout(() => {
						this.reasonSrc = ''
					}, 2000)
				}).catch(e => {
					this.tagValidShow = false
					uni.showToast({
						title: e.message,
						duration: 2000
					});
				})
			},

			// 展示确认无效原因输入框
			showTagValid() {
				this.tagValidShow = true
			},

			//获取用户信息
			gituserlist() {
				this.$u.get("/matchKeywords/personalReceptionRecord", {
					customerId: this.customerId
				}).then(res => {
					res.endTime1 = res.endTime.substring(0, 19);
					this.userlistobj = res;
				})
			},

			//标记顾问
			tagtap() {
				this.biojiisshow = !this.biojiisshow;
			},

			//取消标记
			unmarktap() {
				this.roleindexbiaoji = this.dshfkjsdkksodofydwfkhwdfkjh;
			},

			//确认标记
			Confirmthetag() {
				var num = this.roleindexbiaoji + 1;
				let params = {
					id: this.luyinList[this.csdFileindex].id,
					speaker: num,
					customerId: this.customerId
				}
				this.$u.get(config.service.markConsultant, params).then((data) => {
					this.biojiisshow = false;
					this.biaojiyuyi()
					this.fenjiaoseunfo()
					uni.showToast({
						title: '标记成功',
						duration: 2000
					});
				})
			},


			// 切换角色展示
			tapspagek(index) {
				this.roleindex = index;
				this.newluyinList = [];
				this.fenjiaoseunfo()
				this.$forceUpdate()
			},


			// 初始化音频以及页面数据
			init(info, type) {
				this.sliderMax = 0; //进度条最大值
				this.timeStr = "00:00"; //总的时间
				const parames = {
					pageNum: 1,
					pageSize: 100,
					query: {
						customerId: this.customerId
					}
				}
				this.$u.post("/corpus/findByPage", parames).then(res => {
					if (res && res.length) {
						let alltime = 1 + res[0].recordDuration;
						this.calibration = res[0].calibration;
						if (this.calibration == 0) {
							this.kehuyixiangcenterindex = 0;
						} else {
							this.kehuyixiangcenterindex = 1;
						}
						
						if (info.bg != 0) {
							this.luyinList = res;
							this.recordPath = res[0].recordPath
							this.sliderMax = this.getTime(res[0].recordDuration)
							this.timeStr = this.getTime(res[0].recordDuration)
							this.date = res[0].receptionTime;
							this.getCorpusAnalysis(info, type);
						} else {
							this.luyinList = res;
							this.recordPath = res[0].recordPath
							this.sliderMax = this.getTime(res[0].recordDuration)
							this.timeStr = this.getTime(res[0].recordDuration)
							this.date = res[0].receptionTime;
							this.getCorpusAnalysis(info, type);
						}
					}
				})
			},

			// 重置进度条
			resetAudioParams() {
				this.scrollId = "" // 当前播放滚动到的位置
			},

			// 获取转义后的对话结果
			getCorpusAnalysis(info, type) {
				this.dialogList = [];
				this.newluyinList = []
				uni.request({
					url: config.service.getCorpusAnal + '?corpusId=' + this.luyinList[this.csdFileindex].id +
						"&bg=" + info.bg + "&speaker=" + this.roleindex + '&num=50', //仅为示例，并非真实接口地址。	
					method: "GET",
					header: {
						'content-type': 'application/json',
						'Access-Token': uni.getStorageSync('weapp_session_login_data').token
					},
					success: (data) => {
						this.tablist = [];
						this.roleindexbiaoji = 0;
						let jsonInfo = JSON.parse(data.data.data.audioContent);

						for (var i = 0; i <= data.data.data.speakerNum; i++) {
							if (i === 0) {
								this.tablist.push({
									name: '全部'
								})
							} else {
								this.tablist.push({
									name: String.fromCharCode(i + 64)
								})
							}
						}
						if (data.data.data.speaker == null) {
							this.dshfkjsdkksodofydwfkhwdfkjh = 0;
						} else {
							if (data.data.data.viewNameFlag == 1) {
								this.tablist[data.data.data.speaker].name = this.tablist[data.data.data
										.speaker]
									.name;
							} else {
								this.tablist[data.data.data.speaker].name = this.tablist[data.data.data
										.speaker]
									.name + "顾问";
							}
							this.roleindexbiaoji = data.data.data.speaker - 1;
							this.dshfkjsdkksodofydwfkhwdfkjh = data.data.data.speaker - 1;
						}

						if (data.data.data.viewNameFlag == 1) {
							let p = [{
								name: '顾问'
							}]
							this.tablist = [...this.tablist, ...p]
							this.isSw = true
						} else {
							this.isSw = false
						}

						this.speaker = data.data.data.speaker;
						//上拉标记点
						this.textindex = data.data.data.index;
						//下拉标记点
						this.toptextindex = data.data.data.index;

						jsonInfo.forEach(item => {
							item.message = JSON.parse(item.onebest)
							item.backindex = this.csdFileindex;
							if (info.onebest) {
								item.message.forEach(che => {
									if (che.onebest == info.onebest) {
										che.onebest =
											`<font style='color: red'>${che.onebest}</font>`;
									}
								})
							}
						})
						this.newluyinList = jsonInfo;
						this.dialogList.push(jsonInfo[0]);
						console.log(this.dialogList, '12312321')
						if (type == 'show') {
							var itc = parseInt(info.bg / 1000)
							this.adasdasdasd(itc)
						}
						this.$forceUpdate()
					}
				})
			},


			//下一页
			ltolower() {
				var lengthcz = this.newluyinList.length - 1;
				if (this.textindex >= lengthcz) {
					uni.showToast({
						title: '到底了',
						duration: 2000
					});
					return
				} else {
					this.textindex = this.textindex + 1;
					this.newluyinList[this.textindex].message.forEach(item => {
						this.dialogList[0].message.push(item)
					})
				}
			},

			//上一页
			rolltoupper() {
				if (this.toptextindex == 0) {
					return
				} else {
					if (this.dialogList[0] == undefined) {
						return
					} else {
						this.toptextindex = this.toptextindex - 1;
						let reverselist = this.newluyinList[this.toptextindex].message;
						let runlist = reverselist.reverse();
						runlist.forEach(item => {
							this.dialogList[0].message.unshift(item)
						})
					}
				}
			},

			//搜索跳转
			adasdasdasd(e) {
				this.stepPlay(e)
			},


			//分角色标记刷新
			fenjiaoseunfo() {
				var bgcd = this.playNow * 1000;
				this.newluyinList = [];
				this.dialogList = [];

				let voFlagValue;
				if (this.roleindex == 0) {
					voFlagValue = 0
				} else {
					voFlagValue = 1
				}
				let tempRoleIndex;
				if (this.isSw) {
					if (this.roleindex == this.tablist.length - 1) {
						tempRoleIndex = 0
					} else {
						tempRoleIndex = this.roleindex
					}
				} else {
					tempRoleIndex = this.roleindex
				}

				uni.request({
					url: config.service.getCorpusAnal + '?corpusId=' + this.luyinList[this.csdFileindex].id +
						"&bg=" + bgcd + "&speaker=" + tempRoleIndex + "&voFlag=" + voFlagValue +
						'&num=50', //仅为示例，并非真实接口地址。	
					method: "GET",
					header: {
						'content-type': 'application/json',
						'Access-Token': uni.getStorageSync('weapp_session_login_data').token
					},
					success: (data) => {
						this.tablist = [];
						let jsonInfo = JSON.parse(data.data.data.audioContent);
						for (var i = 0; i <= data.data.data.speakerNum; i++) {
							if (i === 0) {
								this.tablist.push({
									name: '全部'
								})
							} else {
								this.tablist.push({
									name: String.fromCharCode(i + 64)
								})
							}
						}

						if (data.data.data.speaker == null) {
							this.roleindexbiaoji = 0;
							this.dshfkjsdkksodofydwfkhwdfkjh = 0;
						} else {
							if (data.data.data.viewNameFlag == 1) {
								this.tablist[data.data.data.speaker].name = this.tablist[data.data.data
										.speaker]
									.name;
							} else {
								this.tablist[data.data.data.speaker].name = this.tablist[data.data.data
										.speaker]
									.name + "顾问";
							}
							this.roleindexbiaoji = data.data.data.speaker - 1;
							this.dshfkjsdkksodofydwfkhwdfkjh = data.data.data.speaker - 1;
						}

						if (data.data.data.viewNameFlag == 1) {
							let p = [{
								name: '顾问'
							}]
							this.tablist = [...this.tablist, ...p]
						}

						if (this.roleindex > this.tablist.length - 1) {
							this.roleindex = this.tablist.length - 1
							this.fenjiaoseunfo()
						}


						this.speaker = data.data.data.speaker;
						//上拉标记点
						this.textindex = data.data.data.index;
						//下拉标记点
						this.toptextindex = data.data.data.index;

						jsonInfo.forEach(item => {
							item.message = JSON.parse(item.onebest)
							item.backindex = this.csdFileindex
						})
						console.log(jsonInfo)

						this.newluyinList = jsonInfo;
						if (this.textindex == null) {
							return
						} else {
							this.dialogList.push(jsonInfo[this.textindex]);
						}
					}
				})
			},

			// 选中下标
			change(index) {
				this.current = index;
				this.scrollId = ''
				if (index == 1) {
					this.zyAudio()
				}
			},

			//长按点击播放
			clickbofang(dialog, item, type) {
				if (type == 'show') {
					this.isFirstWords = 0 // 重置为零
					this.current = 1
					this.infos = item
					this.audioType = true
					this.init(this.infos, type)
					let data = [{
						src: this.recordPath,
						title: '录音音频',
						singer: '',
						coverImgUrl: ''
					}]
					this.$zaudio.setAudio(data)
					//渲染第一首音频
					this.$zaudio.setRender(0)
					setTimeout(() => {
						this.adasdasdasd(parseInt(item.bg / 1000))
					}, 1500)
					return
				} else {
					this.audioType = false
				}
				this.dialogList.forEach(res => {
					res.message.forEach(asd => {
						asd.isshow = false;
					})
				})
				this.$forceUpdate()
				let platetime = item.bg;
				let newtime = item.bg / 1000;
				console.log(newtime, 'newTime')
				this.dialogList = []
				uni.request({
					url: config.service.fastForward + '?corpusId=' + this.luyinList[this.csdFileindex].id +
						"&bg=" + platetime, //仅为示例，并非真实接口地址。	
					method: "GET",
					header: {
						'content-type': 'application/json',
						'Access-Token': uni.getStorageSync('weapp_session_login_data').token
					},
					success: (data) => {
						this.textindex = data.data.data.index;
						this.toptextindex = data.data.data.index;
						this.dialogList.push(this.newluyinList[data.data.data.index])
						const currTimeStr = this.formatTime(newtime)
						console.log(currTimeStr, 'currTimeStr')
						this.stepPlay(newtime);
					}
				})
			},
			TimeUpdate(currentTime) {
				this.playNow = Number(currentTime)
				if (this.dialogList.length == 0) {
					return
				} else {
					const message = this.dialogList[0].message;
					if (!message) return
					for (let i = 0; i < message.length; i++) {
						if (Math.floor(message[i].bg / 1000) <= this.playNow && this.playNow < Math.floor(message[i].ed /
								1000)) {
							console.log(message[i].bg, '我是active', message[i].ed, '我是currentTime', this.playNow)
							console.log(message[i].onebest)
							this.scrollId = "dialog" + this.csdFileindex + "text" + message[i].bg;
							break;
						}
						if (i < message.length - 1 && Math.floor(message[i].ed / 1000) <= this.playNow && this.playNow <=
							Math.floor(message[i + 1].bg / 1000)) {
							this.scrollId = "dialog" + this.csdFileindex + "text" + message[i].bg;
							break;
						}
					}
				}
				this.$forceUpdate()
			},


			//音频前进回退
			sliderChangeComplate(currentTime) {
				this.dialogList = []
				for (let i = 0; i < this.newluyinList.length; i++) {
					let message = this.newluyinList[i].message
					if (!message) return
					if (Math.floor(this.newluyinList[i].bg / 1000) <= currentTime && currentTime <= Math.floor(this
							.newluyinList[i].ed / 1000)) {
						for (let j = 0; j < message.length; j++) {
							let item = message[j]
							if (Math.floor(item.bg / 1000) <= currentTime && currentTime <= Math.floor(item.ed / 1000)) {
								this.scrollId = "dialog" + this.csdFileindex + "text" + item.bg;
								break;
							}
							if (j < message.length - 1 && Math.floor(item.ed / 1000) <= currentTime && currentTime <= Math
								.floor(item.bg / 1000)) {
								this.scrollId = "dialog" + this.csdFileindex + "text" + item.bg;
								break;
							}
						}
						this.textindex = i;
						this.toptextindex = i;
						this.dialogList.push(this.newluyinList[i])
					}
				}
			},


			// 格式化时间
			getTime(time) {
				return util.formatSecond(time)
			},

			// 格式化时间
			formatTime(num) {
				//格式化时间格式
				num = num.toFixed(0);
				let second = num % 60;
				if (second < 10) second = '0' + second;
				let min = Math.floor(num / 60);
				if (min < 10) min = '0' + min;
				return min + ":" + second;
			},


			//录音实例
			zyAudio(times) {
				let data = [{
					src: this.recordPath,
					title: '录音音频',
					singer: '',
					coverImgUrl: ''
				}]
				if (this.current == 1) {
					this.$zaudio.setAudio(data)
					//渲染第一首音频
					this.$zaudio.setRender(0)
					console.log(this.$zaudio)
					if (this.isFirstWords != 0) { 
						setTimeout(() => {
							this.stepPlay(Math.floor(this.isFirstWords/1000))
							this.isFirstWords = 0
						}, 1000)
					}
					setTimeout(() => {
						this.$zaudio.operate()
					}, 150)
				}
			},

			// 跳转指定位置播放
			stepPlay(t) {
				this.$zaudio.seek(t)
				if (this.$zaudio.paused) {
					this.$zaudio.operate()
				}
			}
		},
		filters: {
			// violatedStatus 
			ViolatedStatus(status) {
				let str = '';
				switch (status) {
					case 0:
						str = '待处理'
						break;
					case 1:
						str = '有效违禁'
						break;
					case 2:
						str = '无效违禁'
						break;
				}
				return str
			},

			// 处理状态
			DisposeStatus(status) {
				let str = '';
				switch (status) {
					case 0:
						str = '待处理'
						break;
					case 1:
						str = '有效违禁'
						break;
					case 2:
						str = '无效违禁'
						break;
				}
				return str
			},
		}
	}
</script>

<style lang="scss" scoped>
	.details {
		width: 100vw;
		height: calc(100vh - var(--window-top));
		display: flex;
		flex-direction: column;

		.header {
			padding: 19rpx 30rpx 0;
			width: 100%;
			height: 210rpx;

			.h-box {
				width: 100%;
				height: 100%;
				background: #fff;
				border-radius: 16rpx;

				.h-b-top {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.name {
						font-size: 30rpx;
						font-weight: bold;
					}

					.status {
						display: flex;
						align-items: center;

						.pointer {
							margin: 0 .5em;
							width: 12rpx;
							height: 12rpx;
							border-radius: 50%;
							background: #2671E2;
						}
					}

				}

				.h-b-btm {
					display: flex;
					justify-content: space-between;

					.item {
						flex-shrink: 0;
						display: flex;
						align-items: center;

						&.hit {
							color: #E7483C;
							font-size: bold;
						}

						.item-imgs {
							margin-right: .5em;
							width: 32rpx;
							height: 32rpx;
						}
					}
				}
			}
		}


		.audio {

			.headboxbott {
				width: 100%;
				height: 88rpx;
				display: flex;
				align-items: center;

				.headovfu {
					flex: 1;
					height: 88rpx;
					overflow: hidden;
				}

				.headpade {
					width: 160rpx;
					height: 60rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					border-left: 1px solid #D6D6D6;

					.biaoji {
						min-width: 120rpx;
						height: 48rpx;
						background: #E6625B;
						border-radius: 24rpx;
						text-align: center;
						line-height: 48rpx;
						color: #FFFFFF;
						font-size: 26rpx;
					}
				}
			}

		}

		.scroll-Y {
			flex: 1;
			overflow: auto;
			font-size: 36upx;
			color: #999999;
			background: #FFFFFF;
			overflow-y: scroll;
			width: 100%;


			.dialog-block {
				margin: 20rpx 0;
				border-bottom: 1px solid #ccc;

				.fileName {
					text-align: center;
					margin: 10rpx auto;
					width: 115rpx;
					height: 42rpx;
					line-height: 42rpx;
					background: #EFEFEF;
					border-radius: 4rpx;
					font-size: 20rpx;
					font-weight: 400;
					color: #333333;
				}
			}

			.text {
				margin: 50upx 30upx;
				display: flex;
				align-items: center;


				.avatar {
					margin-right: 24rpx;
					width: 64upx;
					height: 64upx;
					line-height: 64upx;
					text-align: center;
					font-size: 36rpx;
					border-radius: 50%;
					background: #F2F2F2;
					color: #008EF2;

					image {
						width: 40upx;
					}
				}

				.content {
					margin-left: 30upx;
					line-height: 60rpx;
					text-align: left;
					padding: 0 5px;
					background: #2BC805;
					border-radius: 8upx;
					max-width: 442rpx;
					color: #FFFFFF;
					position: relative;

					.tankuangcss {
						position: absolute;
						top: -140rpx;
						left: -120rpx;
						width: 308rpx;
						height: 130rpx;
						background-color: #333333;
						font-size: 24rpx;
						color: #FFFFFF;
						padding-top: 4rpx;
						padding-bottom: 4rpx;
						display: flex;
						flex-wrap: wrap;
						border-radius: 15rpx;
						z-index: 1000;
					}

					.bottoms {
						top: unset;
						bottom: -140rpx;
					}
				}


				.contentInfo {
					.info {
						color: #ccc;
						font-size: 18rpx;
						font-size: 30rpx;

						.AudioUserName {
							margin-right: 20rpx;
						}
					}
				}

				.contentMain {
					display: flex;

					.content {
						margin-left: 0;
						margin-right: 30upx;
						// margin: 0 30upx;
					}

					.play {
						width: 50rpx;
						height: 50rpx;
						margin-right: 20rpx;
					}
				}

				&.active {
					.content {
						color: #FF7538 !important;
						position: relative;
					}
				}

				&.reverse {
					flex-direction: row-reverse;
					text-align: right;

					.avatar {
						margin-left: 24rpx;
					}

					.content {
						margin-left: 0;
						margin-right: 30upx;
						background: #F6F6F6;
						color: #999999;
					}

					.contentInfo {
						.info {
							color: #ccc;
							font-size: 18rpx;
							font-size: 30rpx;
							padding: 0 28rpx;
							display: flex;
							flex-direction: row-reverse;

							.AudioUserName {
								margin-left: 10rpx;
							}
						}

						.contentMain {
							display: flex;
							flex-direction: row-reverse;
							align-items: center;

							.content {
								margin-left: 0;
								margin-right: 30upx;
							}

							.play {
								width: 50rpx;
								height: 50rpx;
								margin-right: 20rpx;
							}
						}
					}
				}
			}
		}

		.bottombox {
			width: 100%;
			min-height: 88rpx;

			.bottomhead {
				width: 100%;
				height: 81rpx;
				border-top: 1px solid #E0E0E0;
				border-bottom: 1px solid #E0E0E0;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.audio-slider {
					width: 87%;
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding-right: 30rpx;
				}

				.audio-slider .slider {
					width: 100%;
					padding: 0px 15rpx;
					box-sizing: border-box;
				}

				.audio-time {
					width: 110rpx;
					text-align: right;
					font-size: 26rpx;
					line-height: 28rpx;
					color: #70798D;
					display: flex;
					justify-content: space-between;
				}

				.audio-play {
					width: 48rpx;
					height: 48rpx;
					flex-shrink: 0;
				}

				.audio-play .image {
					width: 100%;
					height: 100%;
					margin-left: 30rpx;
				}
			}

			.bottomtips {
				padding: 0 32rpx;
				min-height: 70rpx;
				display: flex;
				align-items: center;
				background: #FDEBC6;
			}

			.botbotmm {
				width: 100%;
				height: 88rpx;
				display: flex;
				align-items: center;

				.item {
					flex: 1;
					height: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
					border: 1rpx solid #E0E0E0;
					border-top: none;
				}

			}
		}

		.bounced {
			width: 570rpx;
			background: #FFFFFF;
			z-index: 1000;
			border-radius: 10rpx;
			position: fixed;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);

			.headpade {
				margin-top: 10rpx;
				padding: 8rpx 8rpx 8rpx 8rpx;
				background: #108ee9;
				color: #fff;
				border-radius: 16rpx;
			}

			/* 50%为自身尺寸的一半 */
			.jiajinghuatit {
				width: 100%;
				height: 68rpx;
				font-size: 30rpx;
				text-align: center;
				line-height: 68rpx;
			}

			.jiajinghuaview {
				padding: 18rpx 18rpx 18rpx 18rpx;
				display: flex;
				flex-wrap: wrap;

				.jiajinghuaview1 {
					padding: 8rpx 8rpx 8rpx 8rpx;
					font-size: 26rpx;
					border-radius: 12rpx;
					border: 1px solid #979797;
					margin-left: 8rpx;
				}

				.jighuaview2 {
					padding: 8rpx 18rpx 8rpx 18rpx;
					font-size: 26rpx;
					border-radius: 12rpx;
					border: 1px solid #979797;
					margin-left: 20rpx;
					margin-top: 10rpx;
					display: flex;

					.view1-text {
						text-align: center;
					}

					.view1-img {
						width: 50rpx;
					}
				}
			}

			.bounced3 {
				height: 100rpx;
				width: 100%;
				margin-top: 40rpx;
				border-top: 1px solid #dddddd;
				display: flex;
			}

			.bounced3-1 {
				width: 50%;
				height: 100%;
				text-align: center;
				line-height: 100rpx;
				border-right: 1px solid #dddddd;
				font-size: 36rpx;
				color: #999999;
			}

			.bounced3-2 {
				width: 50%;
				height: 100%;
				text-align: center;
				line-height: 100rpx;
				font-size: 36rpx;
				color: #108ee9;
			}
		}

		.reason {
			padding: 0 32rpx 32rpx;
			width: 686rpx;
			min-height: 350rpx;
			display: flex;
			flex-direction: column;
			box-sizing: border-box;

			.resaon-title {
				padding: 24rpx 0;
				flex-shrink: 0;
				line-height: 32rpx;
				font-size: 32rpx;
				box-sizing: border-box;
			}

			.resaon-textbox {
				padding: 12rpx 16rpx 36rpx;
				position: relative;
				flex-grow: 1;
				box-sizing: border-box;
				border: 1rpx solid #979797;
				// border-radius: 16rpx;
				display: flex;

				textarea {
					flex-grow: 1;
					box-sizing: border-box;
				}

				.lastlength {
					position: absolute;
					right: 32rpx;
					bottom: 12rpx;
					font-size: 24rpx;
					box-sizing: border-box;
				}
			}

			.button {
				margin-top: 24rpx;
				width: 100%;
				display: flex;
				justify-content: flex-end;

				text {
					padding: 10rpx 35rpx;
					color: #fff;
					background: #008EF2;
					border-radius: 16rpx;
				}
			}
		}
	}


	/deep/.u-tab-item {
		border: 1rpx solid #dedede;
	}
</style>