<template>
	<view class="detail">
		<!-- <view class="Content BorderBox Width100">
      <top-title
        :is-show-left="true"
        :title="'智能排查'"
        :rightWidth="40"
        class="custom_bg"
      >
        <template slot="right">
          <image
            :src="$.imgurl + '/knowledge.png'"
            mode=""
            class="knowledge"
            @click="goToKnowledge"
          ></image>
        </template>
      </top-title>
    </view> -->
		<!-- <headerNavBar title="智能排查" :isBack="true">
			<template v-slot:right>
				<image :src="$.imgurl + '/knowledge.png'" mode="" class="knowledge" @click="goToKnowledge"></image>
			</template>
		</headerNavBar> -->
		<view class="stepBox">
			<view class="step" v-for="(item, index) in tablist" :key="index">
				<view class="stepItem">
					<view :class="{
              stepCircleActive: index <= active,
              stepCircle: index > active,
            }">{{ index + 1 }}
					</view>
					<view class="stepText" :style="{ color: index <= active ? '#000000' : '#bcc3cd' }">{{ item.title||'' }}
					</view>
				</view>
				<view v-if="index !== 3" class="circles">
					<view :class="{ circleActive: index < active, circle: index >= active }" v-for="i in 8" :key="i">
					</view>
				</view>
			</view>
		</view>
		<scroll-view scroll-y="true" :scroll-top="scrollTop" :style="{
        height: isExpanded ? 'calc(100% - 350rpx)' : 'calc(100% - 250rpx)',
      }" class="chatlist" id="scrollView" ref="scrollView" @click="clickContent">
			<view :class="['bar', item.answerId == '0' ? 'currAnswer' : '']" v-for="(item, i) in msgList"
				:key="item.id">
				<!-- <image
          :src="
            item.answerId == '0' ? '/static/self.png' : '/static/left_user.png'
          "
          class="img"
        /> -->
				<image :src="
            item.answerId == '0'
              ? 'data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAACYAAAAmCAYAAACoPemuAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDY3IDc5LjE1Nzc0NywgMjAxNS8wMy8zMC0yMzo0MDo0MiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkYwQjdBNUI1OTNGMzExRTk5OEMyRUJEREM0NTA0NzFEIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkYwQjdBNUI2OTNGMzExRTk5OEMyRUJEREM0NTA0NzFEIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6RjBCN0E1QjM5M0YzMTFFOTk4QzJFQkREQzQ1MDQ3MUQiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6RjBCN0E1QjQ5M0YzMTFFOTk4QzJFQkREQzQ1MDQ3MUQiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6ceP8WAAAFRUlEQVR42sxYa0xbVRzvvb29bS9taQvtYBQ63kxhsBlw6mbwQZyabE4H6geTZfOR+MFPiyZO4jRxiYl+UOOXOdTERxyLcxs+trkFxbGxwZgb22CAPDoKpQ8ofVFa7q3/g7ekK33ce9st/pNfbnLPOf/zyzn/839hoVBIJEBKAHWAdYACQA5Azo7NAywAE+Aq4CJgmO8GGA9iFGA7YBugiOc+I4BjgJ8AvnQREwOaAC8DMkWpyRzgIKAVQKdCDF3TB4C1ovRKP2Ave90xBU+weDPgmztASsTq/JbdgxexJwEfATJEd04odo+nuF7lw+wCXHR3hAHsAXQkImZkr4/iorHvHxv13cl+fdf1KbXPHxSH/5OEmKkqznY3PV5urV9f4MKwpKrQS30JMB6LGFL8dTKbYpiQ6LeuUfWP7YP6ayN25ZI9YFho59OV5qK8TL911idpaevL884HCTSWp1P4n60vs+54pMwhlxJMkgexM/xaI6+riYuh/3B6IPu9lnPFYVLLRvlA4WzXtSnV5mqDi4ogYLZ5ZJ8d7i34+PvuPA4P4vlo46dYP5VU6u7JdeMx7iZHmxEkJWIGkZKRxAofdV9FjpuD+t1hMwoT287VeZYY1AsNdUbbbdcbCmG79p8oz9crF97/6rzxltUtjxwvK9B4tmwsdHJQn8lyWbaxVj5hxulZEL/24akytBQdXiBIwyH+d4oSAmdoOoRRMoImxHgI4fXnasw1pXofR/UofDUhAy3lG/vUCikNRi4FAxcnm4sehlYlW+ShHnEpRcRqhTifrZuKrRaHj7wxZlcgktHuEMgHy41ar05NBQpWqQI81dciYpVCiP15eUJjc/rI0nyNt7Io24PjWAg9CoZl6JjzS64M2ZRZmbKgAPVViFihEGKrwT9N2j2yG6MOJSDuvNxshVuA+jXoVeqFENt4b64rnfOiRI9zDT/RAt7ckSGXJMypYHwRzRMS4AUHaoVcwry6rXoi0RwYN6N5QvTjXFPdWPJiQ4UdQpEtZt4E/9G4QNU+RMyaSs7y7q4HTcg1RLsK9D8FtVZEbCwVYl5Id7Co2IlcBgpTKagdQ+6iD9DAZ5VnPoh3XjWregYsio7LE9rP9zw2+PeQjfqk9ZIR2d0T969xvtD889oN5XoXBG/PQ+vyXDxtrQ8R6+Y62zbrIz493Lu6vfdWFoqP4f+nLoyraTihhQCNO91+4gTka6ZplxzhaMfwKikpZurX5zveaNwwqdNQXMJTN1I+xAbOhHK6ezyz8Z22ypMXxnSRpJYMwumT7KgvtZcYNN5N1YY564yPjBxHhNG6pua2yjM948myGMRlKLzB8UQz4dqUzQfOFkemz5HSUGt0nr8+pRyemM34/eKYZvfWKgsKUSvsEYJ+84HO4nN9k4oE2x2PzMeOsMVoTIHrM9BMfGM+9tdwloJ1tih9bj1zM5uJM3+RZjDIaA1xVLlYLsvEkC9ribexFDLTRCd69opZq5CTS8SMOSr/L50juoR1Q/wXezDsV4mIn4fYenJF3v/l3i2DR/4Y0rZfMmkGTDMZ4UIj8hR6+i1KJUUuznkWCMuMVxqtA9JtBrJf7+Yag7Px0fJYjvcmy0F4+TZl90igyCCnoSKanvGSyLgpmYSGrJVBX5PFJSMIPAS5WDBHSwUgEwkYdMoA2J2g8u1/VfDG2hxN2McuuBuk9kWTStS7+BXwZioBnkugBrzF7iWoDbUfUJFmUgOAtxO1ofg07l4BqFIkhPzUF+lo3N2WGwKeYVudfOuEUbbVeRTlAOnuwSZrDlMRtpNyc/hfAQYAFFwdv9Iba+4AAAAASUVORK5CYII='
              : '/static/left_user.png'
          " class="img" />
				<view class="content">
					<view style="width: 100%; overflow: hidden;">
						<zeroMarkdownView :markdown="item.data || ''" />
						
					</view>
					<!-- <ua-markdown :source="mdvalue" /> -->
					<view class="btnBox">
						<view class="btn" @click="handleBtn(text)" v-for="(text, index) in item.options" :key="index">
							{{ text||'' }}</view>
					</view>
					<view v-if="item.answerOptions && item.answerOptions.length > 0 && item.optionType == 1"
						style="display: flex; flex-wrap: wrap;" :class="item.answerOptions.length > 1 ? '' : 'btnBox'">
						<u-checkbox-group v-model="item.checkboxValue1" placement="column" iconPlacement="right"
							style="width: 100%; padding: 0 15px; box-sizing: border-box">
							<u-checkbox :customStyle="{ marginBottom: '8px' }"
								v-for="(item, index) in item.answerOptions" :key="index" :label="item" :name="item"
								style="background-color: #ededed;padding: 8px;">
							</u-checkbox>
						</u-checkbox-group>
					</view>


					<view v-if="item.answerOptions && item.answerOptions.length > 0 && item.optionType == 0"
						:style="item.answerOptions.length > 2 ? 'display: flex; flex-wrap: wrap;' : ''"
						:class="item.answerOptions.length > 2 ? '' : 'btnBox'">
						<view v-for="(it, ind) in item.answerOptions" :key="ind"
							:style="item.answerOptions.length > 2 ? 'padding: 8px 8px;margin:0 0 8px 8px;background-color: #ededed' : ''"
							:class="item.answerOptions.length > 2 ? '' : 'btn'" @click="handleGroup(it)">
							{{ it ||''}}
						</view>
						<!-- <u-radio-group
              v-model="it.radiovalue1"
              placement="column"
              iconPlacement="right"
              style="width: 100%; padding: 0 15px; box-sizing: border-box"
              v-if="it.optionType == 0"
            >
              <u-radio
                :customStyle="{ marginBottom: '8px' }"
                v-for="(it, index) in it.answerOptions"
                :key="index"
                :label="it"
                :name="it"
              >
              </u-radio>
            </u-radio-group> -->
					</view>
					<view class="btnBox"
						v-if="item.answerOptions && item.answerOptions.length > 0 && item.optionType == 1">
						<view class="btn" @click="handleGroup(item)">确认</view>
						<view class="btn" @click="handleGroup2(i)">清空</view>
					</view>
					<!--  v-if="isShowYindao && item.isOver" -->
					<view class="yindao" v-if="isShowYindao && item.isOver && item" @click="clickYinDao(item.reference)">
						<image src="../../static/nav/yindao.png" style="height: 40rpx; width: 40rpx;"></image>
					</view>
				</view>
			</view>
			<view class="loading-animation" v-if="loading">
				<view class="bounce-dot"></view>
				<view class="bounce-dot"></view>
				<view class="bounce-dot"></view>
			</view>
			<view class="loading-animation2" v-if="loading">

			</view>
		</scroll-view>
		<view class="input-wrapper" :class="{ 'input-wrapper-expanded': isExpanded }">
			<view class="topContent">
				<input class="uni-input" :placeholder="loading ? '请等待回复结束' : '请输入内容'" :value="inputValue"
					@confirm="handleSend" @input="onKeyInput" :disabled="loading" />

				<uni-icons class="uni-icon" type="plus" size="30" @click="handlePlus" :disabled="loading"></uni-icons>
			</view>
			<view v-if="isExpanded" class="expanded">
				<view @click="chooseImage" class="expandedItem">
					<uni-icons class="camera-icon" type="image" size="28"></uni-icons>
					<view>照片</view>
				</view>
				<!-- <view class="expandedItem" style="margin-top: 6px">
          <image src="../../static/video.png" class="video"></image>
          <view>视频</view>
        </view> -->
			</view>
		</view>
		<u-popup :show="showYinDao" @close="showYinDao = false">
		  <view class="custom-pop-head">
		    <view class="title">{{ dataYinDao.title }}</view>
			<uni-icons class="left" type="closeempty" size="23" @click="showYinDao = false"></uni-icons>
		  </view>
		  <view class="custom-pop-content">
		  	{{ dataYinDao.content }}
		  </view>
		</u-popup>
	</view>
</template>

<script>
	// import AbortController from "abort-controller/dist/abort-controller";
	import TopTitle from "../../components/top-title.vue";
	// import headerNavBar from '../../components/headerNavBar/headerNavBar.vue'
	import zeroMarkdownView from "../../components/zeroMarkdownView/zeroMarkdownView.vue";
	// import {
	// 	EventSourcePolyfill
	// } from 'event-source-polyfill';
	import $ from "../../common/globalJs/globalJs.js";
	import {
		fetchEventSource
	} from "@microsoft/fetch-event-source";
	// import {
	// 	baseUrl
	// } from '../../utils/config.js';

	export default {
		components: {
			TopTitle,
			zeroMarkdownView,
		},
		data() {
			return {
				active: 0,
				tablist: [{
						title: "信息确认",
					},
					{
						title: "排查指引",
					},
					{
						title: "隐患补充",
					},
					{
						title: "工单生成",
					},
				],
				isShowYindao:false,
				inputValue: "",
				es: null,
				msgList: [],
				loading: true,
				streamLoading: true,
				scrollTop: 0,
				title: "",
				isExpanded: false,
				allContent: "",
				params: {},
				tabkey: 0,
				radiovalue1: "",
				checkboxValue1: [],
				showYinDao: false,
				dataYinDao: ''
			};
		},
		onLoad(options) {
			console.log(options);
			let params = options;
			// params.deptId = "3702000000";
			// params.id = "37020017609";
			// params.sectionId = "37020017609";
			// params.roadName = "023县道";
			// params.taskId = "000001";
			// params.userId = "admin1";
			this.params = params;
			let str = "";
			this.getChatHistory()
			if (params.roadName) {
				str += "路段名：" + params.roadName;
				this.title = params.roadName + "智能排查";
			}
			if (params.id != "undefined") {
				str += ",id：" + params.id; //params.id
			}
			console.log(params);
			if (params.id == 12121212) {
				console.log('11111111111111111111111111111')
				this.queryChat("开始隐患排查," + str);
			} else {
				// this.SSE("开始隐患排查," + str, "1");
				if (params.id != "undefined") {
					console.log('2222222222222222222222222222222')
					setTimeout(() =>{
						this.queryChat("开始隐患排查," + str);
					},500)
				} else {

					this.$.toast('缺少相关信息');
				}
				// if(this.msgListA.length==0){
				// this.SSE("开始隐患排查," + str, '1')
				// }else{
				// this.loading = false
				// this.scrollBottom();
				// }
			}
		},
		onUnload() {
			if (this.es) {
				this.es.close();
				this.es = null;
			}
		},
		// computed: {
		//    msgListA: {
		//      get() {
		//        return this.$store.state.msgList;
		//      },
		//      set(value) {
		//        this.$store.commit('setMSg_List', value);
		//      }
		//    }
		//  },
		methods: {
			clickYinDao(data) {
				console.log('data12121 ========>',data)
				this.showYinDao = true
				// let newData = data.content + data.reference.content
				// const timer = setInterval(() => {
				// 	data.content += data.reference.content
				
				// 	if (newdata == data.content) {
				// 		clearInterval(timer);
				// 	}
				// }, 50);
				// console.log('data ========>',data)
				this.dataYinDao = data
				// const timer = setInterval(() => {
				// 	data += data.reference ? data.reference.content :''
					
				// 	if (this.dataYinDao == data.content) {
				// 		clearInterval(timer);
				// 	}
				// }, 50);
				// uni.showToast({
				// 	title: data,
				// 	icon: "none",
				// 	duration: 2000,
				// });
				
				// data.content += data.reference.content
			},
			// 建立SSE长连接
			SSE(voiceText, answerId) {
				const ctrl = new AbortController();
				fetchEventSource($.chatUrl + "/chat", {
					method: "POST",
					headers: {
						"Content-Type": "application/json",
						Accept: ["text/event-stream", "application/json"],
					},

					body: JSON.stringify({
						voiceText,
						sceneFlag: "",
						sessionId: "",
						multiType: "",
						userId: this.params.userId,
						deptId: this.params.deptId,
						stream: true,
						type: "1",
						id: this.params.id,
						taskId: this.params.taskId,
						sectionId: this.params.sectionId,
						sectionType: this.params.sectionType,
					}),
					signal: ctrl.signal,
					openWhenHidden: true,
					onopen: () => {},
					onmessage: (ev) => {
						console.log('ev ==========》',ev);
						this.loading = true;
						const res = JSON.parse(ev.data);
						if (res?.code == 200 && res.result) {
							console.log(res.result.data.tabkey);
							console.log(res.result.data);
							this.tabkey = res.result.data.tabkey;
							this.optionType = res.result.data?.optionType;
							if (this.tabkey - 1 != this.active) {
								this.active = this.tabkey - 1 > 0 ? this.tabkey - 1 : 0;
							}
							if (this.msgList.length == 0) {
								this.msgList = [{
									answerId,
									data: res.result.data.content,
									optionType: res.result.data?.optionType,
									answerOptions: res.result.data ? res.result.data.answerOptions :
									[],
								}, ];
							} else {
								// debugger
								//回答
								if (this.msgList[this.msgList.length - 1].answerId == "1") {
									//最后一个是回答
									this.msgList[this.msgList.length - 1].data +=
										res.result.data.content;
									this.msgList[this.msgList.length - 1].optionType =
										res.result.data?.optionType;
									this.msgList[this.msgList.length - 1].answerOptions =
										res.result.data ? res.result.data.answerOptions : [];
								} else {
									//最后一个是问题
									this.msgList = [
										...this.msgList,
										{
											answerId: "1",
											data: res.result.data.content,
											optionType: res.result.data?.optionType,
											answerOptions: res.result.data ? res.result.data
												.answerOptions : [],
										},
									];
								}
							}

							// debugger

							this.scrollBottom();
						}
					},
					onclose: () => {
						console.log(1111);
						this.loading = false;

						if (this.isExpanded) {
							this.isExpanded = !this.isExpanded;
						}
					},
					onerror(error) {
						console.log("error", error);
						throw error;
					},
				});
			},

			async getChatHistory() {
				const [err, res] = await uni.request({
					// url: 'http://10.16.3.159:8777/api/local_doc_qa/local_doc_chat',
					url: $.chatUrl + "/getChatHistory",
					dataType: "json",
					method: "POST",
					// responseType: 'arraybuffer',
					headers: {
						// 'Accept': 'text/event-stream',
						"content-type": "application/json",
					},
					data: {
						userId: 'admin1',
						taskId: this.params.taskId
					},
				});
				console.log('getChatHistory', res)
				if (res && res.data && res.data.code == 200) {
					const result = res.data.result
					let id = 1
					let arr = this.msgList
					result.forEach((item, index) => {
						let questionList = {
							answerId: '1',
							id,
							data: item.question
						}
						let responseList = {
							answerId: '0',
							id: id + 1,
							data: item.response
						}
						arr.push(questionList)
						arr.push(responseList)
						id += 2
					})
					this.msgList = arr
					console.log('msgList =========>',this.msgList)
				}
			},
			

			async queryChat(voiceText) {
				// console.log(voiceText,"voiceText");
				this.loading = true;
				console.log({
					voiceText,
					sceneFlag: "",
					sessionId: "",
					multiType: "",
					userId: this.params.userId,
					deptId: this.params.deptId,
					stream: false,
					type: "1",
					id: this.params.id,
					taskId: this.params.taskId,
					sectionId: this.params.sectionId,
					sectionType: this.params.sectionType,
					// "user_id": "zzp",
					// "kb_ids": ["KBa80ea15e786241eca70a20f136f4e34c"],
					// "question": "隐患排查流程是什么",
					// "streaming": true,
					// "history": []
				})
				let sectionType = "2"
				if (this.params.sectionType != 'null') {
					sectionType = this.params.sectionType
				}
				const [err, res] = await uni.request({
					// url: 'http://10.16.3.159:8777/api/local_doc_qa/local_doc_chat',
					url: $.chatUrl + "/chat",
					dataType: "json",
					method: "POST",
					// responseType: 'arraybuffer',
					headers: {
						// 'Accept': 'text/event-stream',
						"content-type": "application/json",
					},
					data: {
						voiceText,
						sceneFlag: "",
						sessionId: "",
						multiType: "",
						userId: this.params.userId,
						deptId: this.params.deptId,
						stream: false,
						type: "1",
						id: this.params.id,
						taskId: this.params.taskId,
						sectionId: this.params.sectionId,

						sectionType: sectionType,
						// "user_id": "zzp",
						// "kb_ids": ["KBa80ea15e786241eca70a20f136f4e34c"],
						// "question": "隐患排查流程是什么",
						// "streaming": true,
						// "history": []
					},
				});

				if (res && res.data && res.data.code == 200) {
					// console.log('request success', res.data)
					const {
						result = {}
					} = res.data;
					const {
						data = {}
					} = result;
					if (data.tabkey - 1 != this.active) {
						this.active = data.tabkey - 1 > 0 ? data.tabkey - 1 : 0;
					}
					if (data.content) {
						console.log('1212111111111111111111111 ===========>',data)
						this.changeMsgList(
							data.answerId || "1",
							data.content,
							data.optionType,
							data.answerOptions,
							data.reference
						);
					}
					if(JSON.stringify(data.reference) != '{}'){
						if(data.reference.content != null && data.reference.title != null) {
							this.isShowYindao = true
						} else {
							this.isShowYindao = false
						}
					}else{
						this.isShowYindao = false
					}
					this.loading = false;
					if (this.isExpanded) {
						this.isExpanded = !this.isExpanded;
					}
				} else {
					if (err) {
						console.log("request fail", err.errMsg);
					}
					// uni.showToast({
					// 	title: "查询失败",
					// 	icon: "error",
					// 	duration: 2000,
					// });
				}
			},
			// 输入框
			onKeyInput(event) {
				this.inputValue = event.detail.value;
			},
			addQuestion(q, answerId) {
				const newQuestion = {
					answerId,
					data: q,
				};
				this.msgList.push(newQuestion); // 将问题添加到消息列表
				// this.$store.commit('setMSg_List', this.msgList);
			},
			scrollBottom() {
				this.$nextTick(() => {
					//   const height =
					//     this.$refs.scrollView &&
					//     this.$refs.scrollView.$refs &&
					//     this.$refs.scrollView.$refs.content
					//       ? this.$refs.scrollView.$refs.content.scrollHeight
					//       : 0;
					//   this.scrollTop = height;
					this.scrollTop = this.scrollTop + 100;
				});
			},
			// 发送
			handleSend(text) {
				if (!this.inputValue & !text) {
					uni.showToast({
						title: "请输入内容",
						icon: "closeempty",
						duration: 2000,
					});
				}
				if (text || this.inputValue) {
					if (this.params.id == 12121212) {
						this.changeMsgList("0", this.inputValue || text);
						this.queryChat(this.inputValue || text);
						this.scrollBottom();
					} else {
						// this.addQuestion(this.inputValue || text, "0");
						// this.SSE(this.inputValue || text, "0");
						this.changeMsgList("0", this.inputValue || text);
						this.queryChat(this.inputValue || text);
						this.scrollBottom();
					}
					this.inputValue = "";
				}
			},
			// 更新列表信息
			changeMsgList(answerId, data, optionType, answerOptions, reference) {
				let id = 1;
				data = data.replace("undefined", '')
				data = data.replace("null", '')
				this.msgList = [...this.msgList]
				console.log('this.msgList ==========>',this.msgList)
				if (this.msgList.length > 0) {
					id = this.msgList[this.msgList.length - 1].id + 1;
				}
				console.log('id ========>',id)
				if (answerId == "1") {
					// 后台返回来的消息
					let newdata = "";
					let index = 0;
					const timer = setInterval(() => {
						newdata = data[index] ? newdata += data[index] : newdata += '';
						if (this.msgList?.filter((item) => item.id == id).length == 0) {
							this.msgList = [
								...this.msgList,
								{
									id,
									answerId,
									data: newdata,
									// options: answerOptions // ['东南西北','东北','东南北','东南西北'] answerOptions
								},
							];
						} else {
							this.msgList[this.msgList.length - 1].data = newdata;
						}
						index += 1;
						this.scrollBottom();

						if (newdata == data) {
							if (optionType == 0 || optionType == 1) {
								this.msgList[this.msgList.length - 1].optionType = optionType;
								this.msgList[this.msgList.length - 1].answerOptions =
									answerOptions || [];
								this.msgList[this.msgList.length - 1].checkboxValue1 = [];
								this.msgList[this.msgList.length - 1].radiovalue1 = "";
								this.msgList[this.msgList.length - 1].reference = reference;
							} else {
								this.msgList[this.msgList.length - 1].options = answerOptions;
							}
							clearInterval(timer);
							this.msgList[this.msgList.length - 1].isOver = true
						}
					}, 50);
				} else {
					this.msgList = [
						...this.msgList,
						{
							id,
							answerId,
							data,
						},
					];
					this.scrollBottom();
				}
				this.msgList.forEach(item => {
					delete item.answerOptions
				})
			},

			handlePlus() {
				this.isExpanded = !this.isExpanded;
			},
			// 快捷回复
			handleBtn(text) {
				this.handleSend(text);
			},
			clickContent() {
				if (this.isExpanded) {
					this.isExpanded = !this.isExpanded;
				}
			},
			goToKnowledge() {
				uni.navigateTo({
					url: "/pages/home/knowledge",
					// url: `/pages/home/knowledge?params=${encodeURIComponent(JSON.stringify(this.$route.query.params))}`
				});
			},
			// 选择图片
			chooseImage() {
				uni.chooseImage({
					count: 6, //默认9
					sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ["album", 'camera'], //从相册选择
					success: async (res) => {
						console.log(res);
						if (res.tempFilePaths && res.tempFilePaths.length) {
							let str = "";
							let jsonArr = [];
							for (let i = 0; i < res.tempFilePaths.length; i++) {
								const result = await this.uploadFilePromise(res.tempFilePaths[i]);
								let json = JSON.parse(result);
								str += `![图${i + 1}](${json.result})`;
								jsonArr.push(json.result);
							}

							console.log(str);
							if (this.id == 12121212) {
								this.changeMsgList("0", str);
								this.queryChat(res.tempFilePaths);
							} else {
								// this.addQuestion(str, "0");
								// this.SSE(jsonArr, "0");
								this.changeMsgList("0", str);

								let j = jsonArr.join(",");
								this.queryChat(j);
							}
						}
					},
				});
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: this.$.baseUrl + "/hiddenDanger/ftp/uploadFileToFtp", // 仅为示例，非真实的接口地址
						filePath: url,
						name: "file",
						success: (res) => {
							resolve(res.data);
						},
					});
				});
			},
			handleGroup(item) {
				console.log(item)
				let text = "";
				if (item.optionType) {
					text = item.checkboxValue1.join(",");
				} else {
					text = item;
				}
				this.handleSend(text);
			},
			handleGroup2(i) {
				this.msgList[i].checkboxValue1 = []
				this.$set(this.msgList, i, this.msgList[i])

			},
		},
	};
</script>

<style scoped lang="scss">
	.detail {
		width: 100%;
		margin: auto;
		height: 100vh;
		overflow: hidden;

		.knowledge {
			width: 40rpx;
			height: 40rpx;
		}

		.stepBox {
			width: 100%;
			// height: 150rpx;
			margin-top: 10rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: #ffffff;

			.step {
				display: flex;

				.stepItem {
					display: flex;
					flex-direction: column;
					align-items: center;
				}

				.circles {
					display: flex;
					// justify-content: space-between;
					padding: 22px 0;

					.circle {
						width: 4rpx;
						height: 4rpx;
						border-radius: 50%;
						background-color: #e9edf5;
						margin: 0 1px;
					}

					.circleActive {
						width: 4rpx;
						height: 4rpx;
						border-radius: 50%;
						background-color: #ccc;
						margin: 0 1px;
					}
				}

				.stepCircle {
					width: 60rpx;
					height: 60rpx;
					line-height: 60rpx;
					border-radius: 50%;
					background-color: #e9edf5;
					color: #a0abbd;
					text-align: center;
					margin-bottom: 10rpx;
				}

				.stepCircleActive {
					width: 50rpx;
					height: 50rpx;
					line-height: 50rpx;
					border-radius: 50%;
					background-color: #295cbc;
					color: #ffffff;
					text-align: center;
					margin-bottom: 4rpx;
					border: 5px solid #c6d8fc;
				}

				.stepText {
					font-size: 16px;
					color: #bcc3cd;
				}
			}
		}

		.chatlist {
			width: 96%;
			margin: auto;
			// height: calc(100% - 340rpx);
			background-color: #f0f2f7;

			.bar {
				width: 100%;
				display: flex;
				margin-bottom: 80rpx;
				// overflow: hidden;

				.btnBox {
					display: flex;
					justify-content: flex-end;
					position: absolute;
					right: -2px;
					bottom: -44px;

					.btn {
						color: #2663BF!important;
						background-color: rgba(0, 102, 255, 0.1)!important;
						display: flex;
						justify-content: center;
						align-items: center;
						// width: 132px;
						min-width: 72rpx;
						padding: 10rpx 14rpx;
						margin: 10rpx ;
						border-radius: 4rpx;
						font-size: 30rpx;
					}
				}

				.img {
					width: 80rpx;
					height: 80rpx;
					margin-top: 15rpx;
				}

				.content {
					display: inline-block;
					max-width: 80%;
					border: 1px solid #ddd;
					border-radius: 5px;
					padding: 0;
					margin: 15rpx 20rpx 0 20rpx;
					// flex: 1;
					// overflow: hidden;
					position: relative;
					background-color: #ffffff;

					._img {
						max-width: 80%;
					}
				}

				&.currAnswer {
					flex-direction: row-reverse;

					.content {
						background-color: #cce0ff;
					}
				}
			}
		}

		.input-wrapper {
			display: flex;
			width: 100%;
			margin: 20rpx auto 0 auto;
			height: 80rpx;
			flex-direction: column;
			background-color: #ffffff;
			box-sizing: border-box;
			border-top: 1px solid #e2e4e9;
			bottom: 1px solid #e2e4e9;
			padding: 20rpx 20rpx 0 20rpx;

			.topContent {
				display: flex;
				width: 100%;
			}

			.expanded {
				background-color: #f5f7fa;
				display: flex;

				.expandedItem {
					width: 106rpx;
					height: 106rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: space-between;

					.camera-icon {
						margin-top: 5px;
					}
				}

				.video {
					width: 60rpx;
					height: 60rpx;
				}
			}
		}

		.input-wrapper-expanded {
			height: 200rpx;
		}

		.uni-input {
			height: 56rpx;
			line-height: 56rpx;
			font-size: 30rpx;
			padding: 0rpx 10rpx;
			flex: 1;
			background-color: #fff;
		}

		.uni-icon {
			font-family: uniicons;
			font-size: 48rpx;
			font-weight: normal;
			font-style: normal;
			width: 48rpx;
			height: 48rpx;
			line-height: 48rpx;
			color: #999999;
			margin: 0 10rpx;
		}

		.loading-animation {
			display: flex;
			justify-content: center;
			margin-top: 0;

			.bounce-dot {
				width: 20rpx;
				height: 20rpx;
				margin: 10rpx;
				background-color: #666;
				border-radius: 50%;
				animation: bounce 1.4s infinite both;

				&:nth-child(2) {
					animation-delay: 0.2s;
				}

				&:nth-child(3) {
					animation-delay: 0.4s;
				}
			}

			.loading-animation2 {
				width: 100%;
				height: 120rpx;
			}

		}
	}

	@keyframes bounce {

		0%,
		80%,
		100% {
			transform: scale(0);
		}

		40% {
			transform: scale(1);
		}
	}
	.yindao{
		padding: 15rpx;
		margin: 0 5px;
		font-size: 15px;
		line-height: 1.75;
		word-spacing: 0.1em;
		color: rgba(0, 102, 255, 1)
	}
	.custom-pop-head {
	  width: 100%;
	  padding: 20rpx 0;
	  display: flex;
	  align-items: center;
	  justify-content: space-between;
	  border-bottom: 1px solid #E6E6E6;
	  margin-bottom: 20rpx;
	  .left {
	    color: #666666;
	    font-size: 16px;
		margin-right: 20rpx;
	  }
	  .title {
	    font-size: 18px;
		margin-left: 20rpx;
	  }
	}
	.custom-pop-content{
		margin: 20rpx;
		font-size: 16px;
		line-height: 2.3;
		word-spacing: 0.1em;
	}
</style>