<template>
	<div>
		<div class="crumbs">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item>
					<i class="el-icon-chat-line-square"></i> <span class="top_dao"> TMRGPT</span>
				</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="container" style="padding: 30px 20px;min-width: 800px;background: none;" v-loading="loading"
			element-loading-text="Loading..." element-loading-spinner="el-icon-loading"
			element-loading-background="rgba(0, 0, 0, 0.8)">
			<div class="anSwer" id="anSwer">
				<div v-for="(item,index) in talkTable">
					<div class="anPoint" v-if="item.role=='user'">
						<!-- <b class="el-icon-question pushBtn" style="color: #006699;"></b> -->
						<!-- <svg t="1681971463063" class="icon pushBtn" viewBox="0 0 1024 1024" version="1.1"
							xmlns="http://www.w3.org/2000/svg" p-id="7376" width="26" height="26">
							<path
								d="M525.146839 30.984258c273.474065 0 495.153548 221.316129 495.153548 494.327742 0 132.82271-52.587355 252.994065-137.909677 341.751742 26.590968 36.401548 79.706839 116.339613 98.304 144.284903a6.276129 6.276129 0 0 1-5.351226 9.777549 17354.157419 17354.157419 0 0 0-103.324903-1.45342h-355.096775l0.330323-0.330322C247.477677 1015.048258 29.927226 795.714065 29.927226 525.312 29.927226 252.20129 251.639742 30.951226 525.146839 30.951226z m-6.110968 692.95071c-20.48 0-37.16129 6.507355-51.100903 19.489032-13.939613 13.01471-20.48 29.729032-20.48 50.176 0 20.446968 6.540387 37.16129 20.48 50.176a72.340645 72.340645 0 0 0 51.067871 20.446968c20.48 0 37.16129-6.507355 51.100903-19.522065 13.939613-13.01471 21.371871-30.653935 21.371871-51.100903 0-20.446968-7.432258-37.16129-20.413936-50.176-13.939613-12.981677-31.611871-19.489032-52.025806-19.489032z m16.714323-536.080516c-68.773161 0-122.648774 19.522065-162.584775 58.533161-40.893935 39.044129-60.382968 92.919742-60.382967 161.659871h105.901419c0-39.011097 7.432258-69.698065 23.221677-91.036903 17.639226-26.029419 46.443355-38.086194 87.337291-38.086194 31.578839 0 56.683355 8.357161 74.32258 25.996387 16.714323 17.672258 25.996387 41.818839 25.996387 72.472774 0 23.221677-8.357161 45.518452-25.071483 65.96542l-11.164904 13.014709c-60.382968 53.842581-96.619355 92.88671-108.676129 117.958194-13.01471 25.104516-18.597161 55.758452-18.597161 91.069935v13.01471h106.859355v-13.01471c0-22.296774 4.624516-41.818839 13.939613-60.382967a143.987613 143.987613 0 0 1 37.16129-46.476387c44.593548-38.978065 71.514839-64.082581 79.872-73.364646 22.296774-29.729032 34.386581-67.848258 34.386581-114.291612 0-56.683355-18.597161-101.276903-55.758452-133.780646-37.128258-33.428645-86.379355-49.218065-146.762322-49.218064z"
								fill="#006699" p-id="7377"></path>
						</svg> -->
						<svg t="1681972043358" class="icon pushBtn" viewBox="0 0 1024 1024" version="1.1"
							xmlns="http://www.w3.org/2000/svg" p-id="9732" width="26" height="26">
							<path
								d="M905.728 151.552c34.304 0 62.464 28.16 61.952 63.488v497.152c0.512 34.816-27.648 63.488-61.952 63.488h-99.84l-32.256 97.28-129.536-97.28h-291.84c-35.328 0-65.024-31.232-65.024-63.488V215.04c0-34.816 28.16-63.488 62.464-63.488h556.032z"
								fill="#2196F3" p-id="9733"></path>
							<path
								d="M330.24 831.488c-51.712 0-97.28-44.544-97.28-95.744V313.856H103.936c-24.576 0-44.544 20.48-44.544 45.056v493.056c-0.512 25.088 19.968 45.056 44.544 45.056h71.168l13.824 65.024 97.28-65.024h212.992c25.6 0 46.592-22.016 46.592-45.056v-19.456l-194.048-0.512h-21.504z"
								fill="#9FDAFF" p-id="9734"></path>
							<path
								d="M555.008 431.616c0 25.088 6.144 44.544 17.92 59.392s27.648 22.016 47.616 22.016c20.48 0 36.352-7.168 48.128-21.504 11.776-14.336 17.408-34.304 17.408-59.392 0-26.112-5.632-46.592-16.896-61.44s-27.136-22.016-47.104-22.016c-20.48 0-36.864 7.68-48.64 22.528-12.288 15.872-18.432 35.84-18.432 60.416z m203.776 192c-10.24 3.072-23.04 4.608-37.888 4.608-16.896 0-33.28-4.608-48.64-13.824-15.36-9.216-35.328-27.648-59.904-55.808-34.304-1.024-61.44-13.312-81.92-36.864s-30.72-52.736-30.72-87.04c0-39.424 11.264-70.656 33.792-94.72s52.736-35.84 90.624-35.84c34.816 0 62.976 11.264 84.992 34.816 22.016 23.04 32.768 53.248 32.768 91.136 0 29.696-6.656 55.296-19.968 76.288-13.312 21.504-32.256 36.352-57.344 44.544 10.752 11.264 20.992 19.456 30.72 25.088 10.24 5.12 23.04 8.192 38.4 8.192 9.216 0 17.92-1.536 25.088-4.096v43.52z"
								fill="#FFFFFF" p-id="9735"></path>
						</svg>
						<p>{{item.content}}</p>
					</div>
					<div class="anKey" v-if="item.role=='assistant'">
						<!-- <b class="el-icon-info pushBtn" style="color: #e2a714;"></b> -->
						<svg t="1681971921971" class="icon pushBtn" viewBox="0 0 1151 1024" version="1.1"
							xmlns="http://www.w3.org/2000/svg" p-id="39578" width="26" height="26">
							<path
								d="M546.027756 0.001279c30.253149 0.12792 56.476808 21.362688 63.448464 51.423957a67.158152 67.158152 0 0 1-37.928366 77.647615c-6.523935 3.837609-15.478355 11.832627-15.478355 18.036761-1.535043 39.399449 0 44.516261 0 86.985797h300.35684c37.480645 0 46.882786 8.95442 46.882787 47.202587v432.178699c0 40.934493-8.95442 49.441192-50.528515 49.633072h-164.377572a46.754866 46.754866 0 0 0-9.849862 2.686326v60.762138h58.843333a31.212551 31.212551 0 0 1 26.54346 8.95442c7.035616 6.971656 10.425504 16.885478 9.210261 26.863261v123.059319a34.282638 34.282638 0 0 1-9.594022 28.142463 32.683634 32.683634 0 0 1-27.694743 9.466102H353.571681a32.044033 32.044033 0 0 1-27.630783-9.530062 33.579076 33.579076 0 0 1-8.95442-28.334344v-120.564873c0-28.078504 9.785902-37.160844 38.376087-38.056286h52.063558l4.349289-3.389888 0.447721-1.279203v-57.883931c-10.489464 0-20.275366-1.279203-29.869387-1.535043H229.74484c-30.95671 0-41.382214-10.681344-41.382213-41.446174V275.989304c0-32.299873 9.785902-41.638054 43.556858-41.638054h301.700003V141.73696c0-4.669091-9.146301-9.977783-14.838753-13.30371A67.158152 67.158152 0 0 1 482.195532 50.529794c7.291457-29.869388 33.706996-50.720395 63.832224-50.528515zM124.722282 370.778239v254.561376C55.837206 625.339615 0 568.415086 0 498.058927s55.837206-127.280688 124.722282-127.280688z m949.48835 62.553021a128.431971 128.431971 0 0 1 0 129.199493 122.995359 122.995359 0 0 1-111.290652 61.465699V371.865561c45.283783-1.918804 88.073119 21.682489 111.290652 61.465699z m-739.379274 20.467247c-12.024507 12.792029-18.484482 30.061268-17.84488 47.842188l-0.191881-1.790884c0 17.972801 7.035616 35.17808 19.699725 47.778228 12.600149 12.536188 29.613547 19.379924 47.202587 18.996163A67.477953 67.477953 0 0 0 449.064177 498.250807a68.437355 68.437355 0 0 0-43.109138-59.866695 66.13479 66.13479 0 0 0-71.123681 15.350435z m372.567844-22.06625l0.447721 1.343163a64.599746 64.599746 0 0 0-46.946746 18.420522c-12.600149 12.344308-19.827645 29.229786-20.211406 47.010706a68.309435 68.309435 0 0 0 65.431228 66.774391 67.158152 67.158152 0 0 0 66.646471-66.774391c0.383761-17.84488-6.396014-34.986199-18.740323-47.586348a63.384504 63.384504 0 0 0-46.626945-19.188043z"
								fill="#e2a714" p-id="39579"></path>
						</svg>
						<p>
							<font v-html="item.content" style="white-space: pre-wrap"></font>
							<span class="typer-cursor" v-if="falseMark&&index==talkTable.length-1"></span>
						</p>
					</div>
				</div>
			</div>
			<div class="queTion">
				<el-input type="textarea" v-model="gptForm.question" placeholder="Please enter the question..."
					autosize>
				</el-input>
				<!-- <el-input type="textarea" v-model="gptForm.question" placeholder="Please enter the question..." autosize
					@keyup.enter.native="submitGpt()">
				</el-input> -->
			</div>
			<div class="queSub">
				<el-button type="primary" @click="submitGpt()" :disabled="falseMark">
					Submit Question
				</el-button>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				baseUrl: this.Common.baseUrl,
				mediaUrl: this.Common.mediaUrl,
				user_id: localStorage.getItem('U_id'),
				username: localStorage.getItem('U_name'),
				loading: false,
				talkTable: [],
				gptForm: {
					question: '',
				},
				falseMark: false,
				replyIndex: 0,
				replyEnd: 0,
				replyContent: '',
			};
		},
		created() {
			this.getData();
		},
		methods: {
			// 获取数据
			getData() {

			},

			// 提交问题
			submitGpt() {
				// if (this.falseMark) {
				// 	return false
				// }

				if (this.gptForm.question == '') {
					this.$message.error('Please fill in the question first!');
					return false
				}

				this.replyContent = ''
				this.falseMark = true
				this.replyEnd = 0
				let newMark = 0

				this.talkTable.push({
					role: 'user',
					content: this.gptForm.question
				}, {
					role: 'assistant',
					content: ''
				})

				var ele = document.getElementById("anSwer");
				if (ele.scrollHeight > ele.clientHeight) {
					setTimeout(function() {
						ele.scrollTop = ele.scrollHeight;
					}, 100);
				}

				let sendTable = JSON.parse(JSON.stringify(this.talkTable)).splice(0, this.talkTable.length - 1)

				// 传递问题
				this.$api
					.post('api/Auto/GptCreateChat', {
						message: sendTable
					})
					.then((res) => {
						if (res.code == 0) {
							let ckeyData = res.data.ckey

							// 循环答案
							let timeLef = setInterval(() => {
								this.$api
									.post('api/Auto/AjaxForGpt', {
										'ckey': ckeyData
									})
									.then((res) => {
										if (res.code == 0 && res.data.msg) {
											this.replyContent = res.data.msg
											if (newMark == 0) {
												this.effactReply()
											}
											newMark++
											if (res.data.msg.indexOf("[{enddata}]") != -1) {
												this.replyContent = this.replyContent.replace(
													"[{enddata}]", "")
												this.replyEnd = 1
												clearInterval(timeLef);
											}
										}
									})
									.catch(err => {
										console.log(err);
									});
							}, 1000);

						} else {
							this.$message.error(res.msg);
						}
					})
					.catch(err => {
						console.log(err);
					});
			},

			// 打字机效果
			effactReply() {
				this.gptForm.question = ''
				let typingInterval = setInterval(() => {
					var ele = document.getElementById("anSwer");
					if (ele.scrollHeight > ele.clientHeight) {
						setTimeout(function() {
							ele.scrollTop = ele.scrollHeight;
						}, 500);
					}
					let replyText = this.replyContent;
					if (this.replyIndex > replyText.length) {
						if (this.replyEnd == 1) {
							clearInterval(typingInterval);
							this.replyIndex = 0;
							this.falseMark = false
						}
					} else {
						this.talkTable[this.talkTable.length - 1].content = this.talkTable[this.talkTable.length -
								1]
							.content + replyText.slice(this.replyIndex - 1, this.replyIndex);
						this.replyIndex++;
					}
				}, 50);
			},
		}
	};
</script>

<style scoped>
	.anSwer {
		/* height: 600px; */
		position: absolute;
		top: 85px;
		bottom: 135px;
		left: 20px;
		right: 45px;
		overflow-y: scroll;
		padding: 0 20px 0 15px;
		background: #fff;
	}

	.anSwer>div>div {
		padding: 20px 0 20px 20px;
		border-radius: 10px;
	}

	.anPoint {
		margin: 0 0 5px 0;
	}

	.anKey {
		margin: 0 0 20px 0;
		background-color: rgba(226, 167, 20, 0.2);
	}

	.pushBtn {
		display: inline-block;
		vertical-align: top;
		font-size: 26px;
	}

	.anSwer>div>div>p {
		display: inline-block;
		padding: 0 0 0 20px;
		width: 92%;
		line-height: 24px;
		font-size: 15px;
	}

	.queTion {
		position: absolute;
		bottom: 80px;
		left: 20px;
		right: 45px;
		border: 2px solid rgba(0, 102, 153, 0.4);
		border-radius: 8px;
	}

	/deep/.queTion .el-textarea__inner {
		border-radius: 8px;
		border: none !important;
	}

	.queSub {
		position: absolute;
		bottom: 30px;
		right: 45px;
		margin: 20px 0 0 0;
	}



	.anSwer::-webkit-scrollbar {
		width: 6px;
		height: 6px;
	}


	.anSwer::-webkit-scrollbar-thumb {
		border-radius: 100px;
		-webkit-box-shadow: inset 0 0 5px rgba(0, 102, 153, 0.2);
		background: #006699;
	}


	.anSwer::-webkit-scrollbar-track {
		-webkit-box-shadow: inset 0 0 5px rgba(0, 102, 153, 0.2);
		border-radius: 0;
		background: rgba(0, 102, 153, 0.1);

	}

	@keyframes mydeamon {
		0% {
			opacity: 1;
		}

		100% {
			opacity: 0;
		}
	}

	.typer-cursor {
		background-color: #e2a714;
		animation: mydeamon 0.6s infinite;
		-webkit-animation: mydeamon 0.6s infinite;
		display: inline-block;
		vertical-align: middle;
		margin: 0 0 0 3px;
		width: 15px;
		height: 15px;
	}
</style>
