<template>
	<div class="wrap"> 
		<div class="body">  
			<div class="title">
				<div>
					<div>标&nbsp;&nbsp;&nbsp;&nbsp;题：</div>
					<div style="display: flex;">
						<el-input v-model="contentDatas.title"></el-input>
						<el-button @click="openAi" style="margin-left: 10px;">AI问卷</el-button>
					</div>
				</div>
				<div>
					<div>指导语：</div>
					<div><el-input v-model="contentDatas.remark" type="textarea"></el-input></div>
				</div>
			</div>

			<div id="sort" :key="sortInd" >
				<div class="content" v-for="(val,ind) in contentDatas.questionlist" :key="ind">
						<div class="content-one">
							<div>
								<el-select v-model="val.type" style="width: 120px">
									<el-option label="单选" value="单选" />
									<el-option label="多选" value="多选" />
									<el-option label="问答" value="问答" />
									<el-option label="排序" value="排序" />
								</el-select>
								<div> {{ `Q${ind+1}(${val.type})：` }} </div>
								<el-switch v-model="val.required" active-text="此题必答" :active-value="1" :inactive-value="0" />
							</div>
							<div class="quesOpera"> 
								<el-button :icon="Rank" text>移动</el-button>
								<el-button @click="copyTitle(val)" :icon="DocumentCopy" text>复制</el-button>
								<el-button @click="deleteTitle(contentDatas.questionlist , ind)" :icon="Delete" text>删除</el-button>
							</div>
							<div>
								<el-select
									v-model="val.classificationName"
									@change="changeData"
									filterable
									allow-create
									default-first-option
									:reserve-keyword="false"
									placeholder="请输入问卷类别"
									style="width: 180px"
								>
									<el-option
									v-for="item in classOptions"
									:key="item.value"
									:label="item.label"
									:value="item.value"
									/>
								</el-select>
								</div>
						</div>
						
						<!-- 单选 -->
						<div class="content-two" v-if="val.type === '单选'">
							<el-input v-model="val.title" type="textarea" placeholder="请输入题目" @change="changeData()" ></el-input>
							<el-input v-model="val.remark" type="textarea" placeholder="请输入题目备注说明" ></el-input> 
							<div class="content-two-option">
								
								<div v-for="(value , index) in val.optionViewList" :key="index">
									<div>选项{{value.optionname}}：</div>
									<div>
										<el-input v-model="value.optiondetail" placeholder="请输入选项"></el-input>
									</div>
									<div>
										<el-button @click="addOption(val.optionViewList)" type="primary" :icon="Plus" circle size="small"  />
										<el-button @click="deleteOption(val.optionViewList , index, val)" v-if="index !== 0" type="primary" :icon="Minus" circle size="small"  />
									</div>
								</div>
							</div>
						</div>

						<!-- 多选 -->
						<div class="content-two" v-if="val.type === '多选'">
							<el-input v-model="val.title" type="textarea" placeholder="请输入题目" @change="changeData()" ></el-input>
							<el-input v-model="val.remark" type="textarea" placeholder="请输入题目备注说明" ></el-input> 
							<div class="content-two-option">
								
								<div v-for="(value , index) in val.optionViewList" :key="index">
									<div>选项{{value.optionname}}：</div>
									<div>
										<el-input v-model="value.optiondetail" placeholder="请输入选项"></el-input>
									</div>
									<div>
										<el-button @click="addOption(val.optionViewList)" type="primary" :icon="Plus" circle size="small" />
										<el-button @click="deleteOption(val.optionViewList , index , val)" v-if="index !== 0" type="primary" :icon="Minus" circle size="small" />
									</div>
								</div>
								<div>
									<div>答题设置：</div>
									<div>
										<el-select @change="val.max = ''" v-model="val.min" placeholder="至少选择数量" style="width: 240px">
											<el-option v-for=" num in val.optionViewList.length" :key="num" :label="`至少选${num}个`" :value="num" />
										</el-select>
										<el-select v-model="val.max" placeholder="最多选择数量" style="width: 240px;margin-left:10px">
											<el-option v-show="val.min !== ''" v-for=" num in val.optionViewList.length - val.min + 1 " :key="num" :label="`最多选${val.min+num-1}个`" :value="val.min+num-1" />
										</el-select>
									</div> 
								</div>
							</div>
						</div>

						<!-- 问答 -->
						<div class="content-two" v-if="val.type === '问答'">
							<el-input v-model="val.title" type="textarea" placeholder="请输入题目"  @change="changeData()"></el-input>
							<el-input v-model="val.remark" type="textarea" placeholder="请输入题目备注说明" ></el-input> 
							<el-input disabled type="textarea" placeholder="请输入" ></el-input>  
						</div>
						
						<!-- 排序 -->
						<div class="content-two" v-if="val.type === '排序'">
							<el-input v-model="val.title" type="textarea" placeholder="请输入题目"  @change="changeData()"></el-input>
							<el-input v-model="val.remark" type="textarea" placeholder="请输入题目备注说明" ></el-input> 
							<div class="content-two-option">
								
								<div v-for="(value , index) in val.optionViewList" :key="index">
									<div>选项{{value.optionname}}：</div>
									<div>
										<el-input v-model="value.optiondetail" placeholder="请输入选项"></el-input>
									</div>
									<div>
										<el-button @click="addOption(val.optionViewList)" type="primary" :icon="Plus" circle size="small" />
										<el-button @click="deleteOption(val.optionViewList , index, val)" v-if="index !== 0" type="primary" :icon="Minus" circle size="small"  />
									</div>
								</div>
								<div>
									<div>答题设置：</div>
									<div>
										<el-select @change="val.max = ''" v-model="val.min" style="width: 240px">
											<el-option v-for=" num in val.optionViewList.length" :key="num" :label="`选择${num}项进行排序`" :value="num" />
										</el-select>
									</div> 
								</div>
							</div>
						</div>
				</div> 
			</div>

			<div class="footer">
				
				<div>
					<div>结束语：</div>
					<div><el-input v-model="contentDatas.conclusion" type="textarea"></el-input></div>
				</div>
			</div>

		</div> 
		<div class="bottomButt"> 
			<!-- <el-button @click="addTitle('单选')" type="primary" size="small">单选</el-button>
			<el-button @click="addTitle('多选')" type="primary" size="small">多选</el-button>
			<el-button @click="addTitle('问答')" type="primary" size="small">问答</el-button>
			<el-button @click="addTitle('排序')" type="primary" size="small">排序</el-button>
			&emsp;
			&emsp; -->
			<!-- <el-button @click="saveFn" type="primary" size="small">发布</el-button> -->
			<el-button @click="saveFn" type="primary" size="small">保存</el-button>
		</div> 
		<!-- <div class="rightBox">
			<el-button type="primary" v-if="!rightBox" @click="handleRightBox">展开</el-button>
			<div style="display: flex;" v-if="rightBox">
				<el-button type="primary" @click="handleRightBox">隐藏</el-button>
				<div class="boxContent">
					<div class="addItem"  v-for="o in 20" :key="o" >类型{{o}}</div>
					
				</div>
			</div>
		</div> -->
		<el-drawer v-model="ai.drawer" direction="rtl">
			<template #header>
			<h4>AI问卷</h4>
			</template>
			<template #default>
			<div style="position: relative; height: 100%;">
				<el-radio-group class="tabBut" v-model="tabPosition" @change="changeTabHtml" v-if="tabData.length">
					<el-radio-button :value="o.index" v-for="o in tabData">问卷{{o.index}}</el-radio-button>
				</el-radio-group>
				<div style="width: 100%; height: 32px;"></div>
				
				<div style="overflow-y: auto; height: calc(100vh - 253px);" id="gundong">
					<div v-show="tabPosition !== tabData.length" v-html="aiHtml" class="message" style="margin: 1rem"></div>
					<div v-show="tabPosition === tabData.length" v-html="changeItem(ai.markDownText)" class="message" style="margin: 1rem"></div>
				</div>
				
			</div>
			</template>
			<template #footer>
			<div style="flex: auto">
				<el-button @click="cancelClick">重新获取</el-button>
				<el-button type="primary" @click="confirmClick">采用</el-button>
			</div>
			</template>
		</el-drawer>
	</div>
</template>

<script setup>  
	import { ref, reactive , onMounted, getCurrentInstance, toRaw } from 'vue'  
	import sortable from 'sortablejs';
	import { Plus , Minus , Rank , DocumentCopy , Delete } from '@element-plus/icons-vue' 
	import { getPageListData, deletePageData, createPageData, editPageData } from '@/api/main/system/system'
	import { fetchEventSource } from '@microsoft/fetch-event-source';

	import MarkdownIt from 'markdown-it'
	import mdKatex from '@traptitech/markdown-it-katex'
	import hljs from 'highlight.js';
	import 'highlight.js/styles/atom-one-dark.css';

	   
	import { useRouter , useRoute } from 'vue-router'; 
	const router = useRouter();
	const { id , type } = useRoute().query; 

	const { proxy } = getCurrentInstance();

	const rightBox = ref(false)
	const sortInd = ref(0);
	const ai = reactive({
		drawer: false,
		markDownText: '',
		markdownRender:new MarkdownIt({
			html:true,
			linkify: true,
			typographer: true
		})
	});
	
	const classValue = ref([])
	const classOptions = ref([])
	onMounted(()=>{
		sortFn()
		getClassData()
	})
	const emit = defineEmits(['postSurverData'])
	function changeData(){
		emit('postSurverData', contentDatas.value)
	}
	function changeClassData(){
		emit('postSurverData', contentDatas.value)
	}
	function getClassData() {
		const params ={
			id:0
		}
		getPageListData('/survey/survey/getclassification',params).then(({ data }) => {
            if (data.length>0) {
                classOptions.value = []
				data.forEach((ele)=>{
					if (ele) {
						const obj ={}
						obj.value = ele.classificationName
						obj.label = ele.classificationName
						classOptions.value.push(obj)
					}
				})
				console.log(classOptions.value)
            }
		})
	}
	const tabPosition = ref(1)
	const tabData = ref([
		{
			index:1,
			html:'',
			text:''
		}
	])
	const aiHtml = ref('')
	const aiText = ref('')
	const aiHtmlData = ref([])
	function changeTabHtml(val) {
		aiHtml.value = tabData.value[val-1].html
		aiText.value =  tabData.value[val-1].text
	}
	// 把数组最后一项的ai属性的值转换成html
	const changeItem = (item) => {
		return ai.markdownRender.render(item);
	};

	const openAi = () => {
		ai.drawer = true;
		ai.markDownText = '';
		connectToSSE();
		// aiCreate();
	};

	const aiCreate = () => {
		const text1 = `以下是为感冒客户设计的回访问卷，包含症状、治疗情况、疗效评估、生活习惯等方面的选择和填空题：

			**客户感冒治疗回访问卷**

			1. 您本次感冒的主要症状是：（多选）
			A. 发热
			B. 咳嗽
			C. 鼻塞/流鼻涕
			D. 喉咙痛
			E. 头痛
			F. 肌肉酸痛

			2. 您本次感冒持续了多久？
			A. 1-2天
			B. 3-5天
			C. 6-7天
			D. 超过7天

			3. 您在感冒期间采取了以下哪些治疗措施？（多选）
			A. 服用感冒药
			B. 服用抗生素
			C. 休息
			D. 增加水分摄入
			E. 采用蒸汽吸入治疗
			F. 其他（请说明：__________)

			4. 您认为以下哪种治疗方式对缓解您的症状最有效？
			A. 服用感冒药
			B. 休息
			C. 增加水分摄入
			D. 蒸汽吸入
			E. 没有明显效果

			5. 您对本次治疗的疗效评估是：
			A. 非常满意
			B. 满意
			C. 一般
			D. 不满意
			E. 非常不满意

			6. 感冒期间，您的睡眠质量如何？
			A. 非常好
			B. 好
			C. 一般
			D. 差
			E. 非常差

			以下是一些生活习惯的相关问题：

			7. 您通常每周进行多少次体育锻炼？
			A. 不锻炼
			B. 1-2次
			C. 3-5次
			D. 每天

			8. 您的日常饮食习惯是：
			A. 非常健康
			B. 较健康
			C. 一般
			D. 较不健康
			E. 非常不健康

			9. 您每天平均睡眠时间是多少？
			A. 少于6小时
			B. 6-8小时
			C. 8-10小时
			D. 超过10小时

			10. 请您评估，以下哪些因素可能影响了您的感冒恢复？（多选）
				A. 压力
				B. 睡眠不足
				C. 不良饮食习惯
				D. 缺乏锻炼
				E. 环境因素（如：冷、热）

			请根据您的实际情况填写以上问卷，这将有助于我们更好地了解您的病情和提供更合适的治疗建议。`;
		let text = ''
		if (tabPosition.value === tabData.value.length) {
			text = ai.markDownText;
		} else{
			text = aiText.value;
		}
		console.log(text)
		// return
		// const text = ai.markDownText;

		const ques = [];
		const que = {
				title : '',    //题目
				remark : '', //备注
				type : '单选', //类型
				required : 1,  //是否必填
				min : '', //最少选择
				max : '', //最大选择
				optionViewList : [
					{
						optionname : 'A' , //选项
						optiondetail : '' , //选项内容
					}
				]
			};

		const arr = text.split('\n');
		let queInfo = {};
		for (let index = 0; index < arr.length; index++) {
			console.log(arr[index], 'arr[index]');
			const strArray = arr[index].split('.');
			if (strArray.length !== 2) continue;
			console.log(strArray[0].trim(), 'strArray[0].trim()')
			if (!isNaN(strArray[0].trim())) {
				if (queInfo.title) {
					ques.push(queInfo);
				}
				queInfo = {};
				queInfo.title = strArray[1].trim();
				if (queInfo.title.indexOf('多选') >= 0) {
					queInfo.type = '多选';
				} else {
					queInfo.type = '单选';
				}
				queInfo.min = '1';
				queInfo.max = '';
				queInfo.optionViewList = [];
			} else if (/^[A-Za-z]+$/.test(strArray[0].trim()) && queInfo.title) {
				queInfo.optionViewList.push({
					optionname: strArray[0].trim().toUpperCase(),
					optiondetail: strArray[1].trim(),
				});
				
			}

			if (index === arr.length - 1 && queInfo.title && queInfo.optionViewList.length > 0) {
				ques.push(queInfo);
			}
		}
		
		console.log(ques);

		contentDatas.value.questionlist = ques;
	}

	let ctrl;

	const connectToSSE = () => {
		console.log('connectToSSE');
		ctrl = new AbortController();
		// https://open.bigmodel.cn/api/paas/v4/chat/completions
		fetchEventSource('https://open.bigmodel.cn/api/paas/v4/chat/completions', {
			method: "POST",
		// fetchEventSource('http://192.168.1.15:8090/ai/getSseInvoke', {
			// method: "GET",
			// 请求头参数
			headers: {
				// enterprise_id: userStore.userInfo.enterpriseId,
				// wrnc_auth: userStore.token,
				"Content-Type": "application/json",
				"Authorization": 'Bearer e7de405badf503e226d189180b82aa98.FIoYPk5edhQTw1vB',
			},
			// 具体传参
			body: JSON.stringify({
				model: 'glm-4-0520',
				messages: [{
					role: 'system',
					content: '你作为一名资深的医生，需要生成问卷对客户进行回访，试题内容包含客户的基本信息、症状、治疗情况、疗效评估、生活习惯等方面，请根据客户提供的信息生成问卷，不需要询问基本信息，并且只需要选择和填空题，选项使用英文字母标识'
				}, {
					role: 'user',
					content: contentDatas.value.title,
				}],
				stop: ['stop'],
				stream: true,
			}),
			openWhenHidden: true, // 在调用失败时禁止重复调用
			signal: ctrl.signal,
			/*onopen: function (e: any) {
			console.log("open");
			},*/
			onmessage(msg) {
				const res = JSON.parse(msg.data);
				// showLoading.value = false;
				// setTimeout(() => {
				// 	roll();
				// }, 200);
				if (res.choices[0].finish_reason === 'stop') {
					console.log("finish");
					ctrl.abort();
					// ai.contentdata.push({
					// 	ai: res.choices[0].delta.content,
					// });
					// ctrl.abort();
					// ai.contentdata.push({
					// 	ai: res.choices[0].delta.content,
					// });
					ai.stop = 'stop';
					throw new error('stop')
				} else {
					ai.markDownText += res.choices[0].delta.content;
					// ai.contentdata.push({
					// 	ai: res.choices[0].delta.content,
					// });
				}
			},
			onclose(e) {
				console.log("close");
				console.log(e);
				ctrl.abort();
			},
			onerror(err) {
				// ElMessage.error(err.msg || "询问人数过多请稍后在试！");
				console.log("error", err);
				// showLoading.value = false;
				// 此方法会报错，但可以解决ts语法打包报错问题
				ctrl.signal[0].aborted = false;
				try {
					// onerror后关闭请求，但打包是ts语法报错
					ctrl.signal.aborted = false;
					if (ctrl) {
						ctrl.abort();
					}
				} finally {
					console.log("finally");
				}
			}
		});
	};

	const getAiToken = async () => {
		const token = localStorage.getItem('ai-token');
		if (!token) {
			const res = await fetch('https://open.bigmodel.cn/api/paas/v4/auth/token', {
				method: 'POST',
				headers: {
					'Content-Type': 'application/json',
				},
				body: JSON.stringify({
					grant_type: 'client_credentials',
				}),
			});
			const data = await res.json();
			if (data.code === 200) {
				localStorage.setItem('ai-token', data.data.access_token);
				localStorage.setItem('ai-token-expire', Date.now() + data.data.expires_in * 1000);
			} else {
				ElMessage.error('获取AI Token失败');
			}
		}
	};

	const cancelClick = () => {

		const renderHtml = changeItem(ai.markDownText);
		console.log(renderHtml)
		tabData.value[tabData.value.length-1].html = renderHtml
		tabData.value[tabData.value.length-1].text = ai.markDownText

		const obj = {}
		obj.index = tabData.value.length +1
		obj.html = ''
		tabData.value.push(obj)
		tabPosition.value = tabData.value.length

		ai.markDownText = '';
		connectToSSE();
	};

	const confirmClick = () => {
		ai.drawer = false;
		console.log(`${ai.markDownText.toString()}`);
		aiCreate();
	};

	const handleAdd = (array) => {
		array.push({
			optionname : String.fromCharCode(64 + array.length) , //选项
			optiondetail : '' , //选项内容
		    
		})
	}

	function handleRightBox() {
		rightBox.value = !rightBox.value
	}

	const contentDatas = ref({
		title : '', //标题
		remark : '', //指导语
		surveyId : 0,
		questionlist : [
			{
				title : '',    //题目
				classificationName:'', //类别
				remark : '', //备注
				type : '单选', //类型
				required : 1,  //是否必填
				min : '', //最少选择
				max : '', //最大选择

				optionViewList : [
					{
						optionname : 'A' , //选项
						optiondetail : '' , //选项内容
					}
				]
			}, 
		],
		conclusion: '',
	});

	

	// 获取初始化数据
	const getData = function _f (){
		if(id){ 
			const params ={
				id
			}
			console.log(params)
			getPageListData(`/survey/survey/getdetail`,params).then(({data})=>{
			// getPageListData(`/survey/survey/${id}`).then(({data})=>{
				contentDatas.value['title'] = type === 'copy' ? `${data['title']}（复制）` : data['title'];
				contentDatas.value['remark'] = data['remark']; 
				contentDatas.value['surveyId'] = type === 'copy' ? 0 : Number(id); 
				contentDatas.value['questionlist'] = [];
				contentDatas.value['conclusion'] = data['conclusion']; 
				
				for (const val of data.questionlist) {
					let obj = {
						title : val['title'],  
						remark : val['remark'], 
						type : val['type'], 
						required : val['required'], 
						min : val['min'], 
						max : val['max'], 
						optionViewList : [],
					}
	
					for (const value of val.optionViewList ) {
						obj.optionViewList.push({
							optionname : value['optionname'],
							optiondetail : value['optiondetail'],
						})
					}
	
					contentDatas.value['questionlist'].push(obj);
					
				} 

				console.log(contentDatas.value)
			})
		}
		return _f;
	}();

	// 添加选项
	function addOption (array){
		if(array.length === 8){
			return;
		}
		
		let zim = ['A','B','C','D','E','F','G','H'];

		array.push({
			optionname : zim[array.length] , //选项
			optiondetail : '' , //选项内容
		})
	}
	// 删除选项
	function deleteOption (array , index , data){ 

		if(data.type === '排序'){
			data.min = '';
		}
		if(data.type === '多选'){
			data.min = '';
			data.max = '';
		}

		
		let zim = ['A','B','C','D','E','F','G','H'];
 
		array.splice(index , 1);

		array.forEach((ele,ind)=>{
			ele['optionname'] = zim[ind]
		}) 
	}
	
	defineExpose({
		addTitle,
	});
	// 添加题目
	function addTitle (type){
		if(type === '问答'){
			contentDatas.value.questionlist.push(
				{
					title : '',    //题目
					remark : '', //备注
					type : type, //类型
					required : 1,  //是否必填
					min : '', //最少选择
					max : '', //最大选择
	
					optionViewList : [ ]
				}
			)
		}else{
			contentDatas.value.questionlist.push(
				{
					title : '',    //题目
					remark : '', //备注
					type : type, //类型
					required : 1,  //是否必填
					min : '', //最少选择
					max : '', //最大选择
	
					optionViewList : [
						{
							optionname : 'A' , //选项
							optiondetail : '' , //选项内容
						}
					]
				}
			) 
		}

	}
	// 删除题目
	function deleteTitle (array , index){
		array.splice(index , 1); 
	}
	// 复制题目
	function copyTitle(data){
		contentDatas.value.questionlist.push(JSON.parse(JSON.stringify(data)));
	}

	// 添加拖动效果
	function sortFn( ){
		let el = document.getElementById('sort')   
		new sortable(el,{
			animation: 300, 
  			ghostClass: 'blue-background-class',
			onEnd({oldIndex , newIndex}) {
				if(oldIndex === newIndex){
					return;
				}
				let arr = contentDatas.value.questionlist;


				[arr[oldIndex] , arr[newIndex]] = [arr[newIndex] , arr[oldIndex]] 


				sortInd.value++;

				setTimeout(() => {
					sortFn()
				}, 0); 
			},
		})
	}

	// 保存
	function saveFn (){
		console.log(contentDatas.value)
		if(! contentDatas.value.title){
			proxy.$modal.msgError('问卷标题不能为空')
			return;
		}
		for(let i = 0 ; i < contentDatas.value.questionlist.length ; i++){
			const val = contentDatas.value.questionlist[i];

			if(! val.title){
				proxy.$modal.msgError(`Q${i+1}：标题为空，请检查数据`)
				return;
			}

			for (const ite of val.optionViewList) {
				if(! ite.optiondetail){
					proxy.$modal.msgError(`Q${i+1}：选项${ite.optionname}内容为空，请检查数据`);
					return;
				}
			}
		}

		if(type === 'edit'){
			createPageData('/survey/survey' , contentDatas.value ).then(()=>{
				proxy.$modal.msgSuccess('编辑成功！');
				router.back();
			}) 
		}
		if(type === 'add' || type === 'copy'){
			createPageData('/survey/survey' , contentDatas.value ).then(()=>{
				proxy.$modal.msgSuccess('添加成功！');
				router.back();
			})
		}
	}

	// 滚动核心代码
	function roll() {
		nextTick(() => {
			var msg = document.getElementById('gundong'); // 获取对象
			msg.scrollTop = msg.scrollHeight; // 滚动高度
		});
	}
</script>

<style lang="scss" scoped>
	.tabBut{
		position: absolute;
		top: 0px;
	}
	.rightBox{
		position: absolute;
		top: 50%;
		right: 0px;
		display: flex;
		margin-top: -250px;
		.boxContent{
			background-color: #ffffff;
			border-radius: 4px;
			border: 1px solid #c8c9cc; 
			width: 300px; 
			height: 500px;
			scrollbar-width: none;
			/* firefox */
			-ms-overflow-style: none;
			/* IE 10+ */
			overflow-x: hidden;
			overflow-y: auto;
			.addItem{
				font-size: 14px;
				cursor: pointer;
				padding:15px;
				line-height: 30px;
			}
		}
	}
	.bottomButt{
		background-color: rgb(58, 89, 151);
		position: fixed;
		bottom: 47px;
		height: 45px;
		width:calc(100% - 33% - 200px);
		z-index: 999;
		display: flex;
		justify-content: end;
		align-items: center;
		right: 35px;
		padding-right: 20px;
	}
	.wrap{
		background: #EFEFEF;
		padding: 15px;
		margin: 10px;
		height: calc(100vh - 185px);
		overflow: auto; 
		padding-bottom:40px; 
		position: relative;
	}
	.body{
		background-color: #EFEFEF;
		>div:nth-child(1){
			padding: 30px 20px 70px 20px;
			border-bottom: 1px solid #a1a1a1;
			background: #fff;  
			/* width: 800px; */
			margin: 0 auto; 
		}
		>div:nth-child(2){
			>div{
				/* width: 800px; */
				margin: 0 auto; 
				background: #fff; 
				padding: 70px 20px;
			}
			>div:nth-last-child(n){
				border-bottom: 1px solid #a1a1a1;
			}
		}
		>div:nth-child(3){
			padding: 30px 20px 70px 20px;
			border-bottom: 1px solid #a1a1a1;
			background: #fff;  
			/* width: 800px; */
			margin: 0 auto; 
		}
 
		.title{
			>div:first-child{
				margin-bottom: 10px;
			}
			>div{
				display: flex;
				align-items: center;
				
				>div:nth-child(1){
					width: 80px;
				}
				>div:nth-child(2){
					width: 100%;
				}
			}
		}
		.footer{
			>div{
				display: flex;
				align-items: center;
				
				>div:nth-child(1){
					width: 80px;
				}
				>div:nth-child(2){
					width: 100%;
				}
			}
		}
		.content{ 
			>div:nth-last-child(n+2){
				margin-bottom: 10px;
			}
			.content-one{
				display: flex;
				align-items: center;
				justify-content: space-between;

				>div{ 
					display: flex;
					align-items: center;
					column-gap: 20px;
				}
				.quesOpera{
					column-gap: 0;
				}
				>div:last-child{
					column-gap: 0;
					.el-button{
						margin: 0;
						padding: 0 10px;
					}
				}
			}
			.content-two{
				.el-textarea{
					margin-bottom: 10px; 
				}
				.content-two-option{
					display: grid;
					grid-template-columns: 1fr;
					row-gap: 10px;
					>div{
						display: grid;
						grid-template-columns: 100px 1fr 80px; 
						place-items: center;
						>div:nth-child(n+2) , .el-input{
							width: 100%;
						}
						>div:nth-child(3){
							padding-left: 10px; 
						}
					}
				}
			}
		}
	}
  
</style>