<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 v-if="showAiBtn" @click="openAi" style="margin-left: 10px;">AI问卷</el-button>
					</div>
				</div>
				<div>
					<div>类&nbsp;&nbsp;&nbsp;&nbsp;型：</div>
					<div style="display: flex;">
						<el-select clearable filterable v-model="contentDatas.surveyType">
							<el-option v-for="item in surveyTypes" :key="item.dataId"
        :label="item.dictLabel"
        :value="item.dictValue"/>
						</el-select>
					</div>
				</div>
				<div class="mt-2">
					<div>指导语：</div>
					<div><el-input v-model="contentDatas.remark" rows="3" 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="flex items-center justify-between mb-2">
								<span class="text-gray-700">选项:</span>
								</div>
								<div
								v-for="(option, index) in val.optionViewList"
								:key="index"
								class="flex items-center gap-2 mb-2"
								>
								<el-input
									v-model="option.optiondetail"
									placeholder="请输入选项"
									class="flex-1"
								>
									<template #prefix>
									<span class="text-gray-400"
										>{{ option.optionname }}.</span
									>
									</template>
								</el-input>
								<el-input-number
									v-model="option.score"
									:min="0"
									:max="100"
									placeholder="分值"
									class="w-24"
									style="width: 100px"
									:controls="false"
								/>
								<el-button type="primary" circle class="!rounded-button" @click="addOption(val.optionViewList)">
									<el-icon><Plus /></el-icon>
								</el-button>
								<el-button type="primary" circle class="!rounded-button" @click="deleteOption(val.optionViewList , index, val)" v-if="inde!== 0">
									<el-icon><Minus /></el-icon>
								</el-button>
							</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="flex items-center justify-between mb-2">
								<span class="text-gray-700">选项:</span>
								</div>
								<div
								v-for="(option, index) in val.optionViewList"
								:key="index"
								class="flex items-center gap-2 mb-2"
								>
								<el-input
									v-model="option.optiondetail"
									placeholder="请输入选项"
									class="flex-1"
								>
									<template #prefix>
									<span class="text-gray-400"
										>{{ option.optionname }}.</span
									>
									</template>
								</el-input>
								<el-input-number
									v-model="option.score"
									:min="0"
									:max="100"
									placeholder="分值"
									class="w-24"
									style="width: 100px"
									:controls="false"
								/>
								<el-button type="primary" circle class="!rounded-button" @click="addOption(val.optionViewList)">
									<el-icon><Plus /></el-icon>
								</el-button>
								<el-button type="primary" circle class="!rounded-button" @click="deleteOption(val.optionViewList , index, val)" v-if="inde!== 0">
									<el-icon><Minus /></el-icon>
								</el-button>

								
							</div>
							<div>
								<span class="text-gray-700">答题设置:</span>
								<div class="mt-2">
									<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 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="flex items-center justify-between mb-2">
								<span class="text-gray-700">选项:</span>
								</div>
								<div
								v-for="(option, index) in val.optionViewList"
								:key="index"
								class="flex items-center gap-2 mb-2"
								>
								<el-input
									v-model="option.optiondetail"
									placeholder="请输入选项"
									class="flex-1"
								>
									<template #prefix>
									<span class="text-gray-400"
										>{{ option.optionname }}.</span
									>
									</template>
								</el-input>
								<el-input-number
									v-model="option.score"
									:min="0"
									:max="100"
									placeholder="分值"
									class="w-24"
									style="width: 100px"
									:controls="false"
								/>
								<el-button type="primary" circle class="!rounded-button" @click="addOption(val.optionViewList)">
									<el-icon><Plus /></el-icon>
								</el-button>
								<el-button type="primary" circle class="!rounded-button" @click="deleteOption(val.optionViewList , index, val)" v-if="inde!== 0">
									<el-icon><Minus /></el-icon>
								</el-button>
							</div>
							<div>
								<span class="text-gray-700">答题设置:</span>
								<div class="mt-2">
									<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 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" :key="o.index">问卷{{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 { ElMessage } from 'element-plus'
	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 showAiBtn = ref(import.meta.env.VITE_APP_AI_SEARCH === 'true')

	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(()=>{
		getSurveyTypes()
		sortFn()
		getClassData()
	})
	const emit = defineEmits(['postSurverData', 'submit', 'initData'])
	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 = () => {
		if (!contentDatas.value.title) {
			ElMessage.error('请输入标题');
			return;
		}
		ai.drawer = true;
		ai.markDownText = '';
		connectToSSE();
		// aiCreate();
	};

	const aiCreate = () => {
		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');
		const url = import.meta.env.VITE_APP_AI_API;
		const token = import.meta.env.VITE_APP_AI_API_KEY;
		if (!url || !token) {
			console.log('url or token is empty');
			ElMessage.error('获取AI Token未配置');
			return;
		}

		if (!contentDatas.value.title) {
			ElMessage.error('请输入标题');
			return;
		}

		ctrl = new AbortController();
		// https://open.bigmodel.cn/api/paas/v4/chat/completions

		const params = {
			model: 'deepseek-r1:32b',
			messages: [{
				role: 'system',
				content: `你是一个专业问卷设计助手，擅长生成符合心理学量表规范（如Likert量表）和医疗伦理的问卷。要求：
1. 问题清晰无歧义
2. 包含基础人口统计学问题
3. 医疗问卷需符合HIPAA隐私标准`,
			}, {
				role: 'user',
				content: `生成${contentDatas.value.title}问卷：
				- 长度：不多余20个问题
- 包含：
a) 选择题（单选、多选），选项不能有让填空的情况
b) 问答题
c) 排序题
d) 不允许出现其他题型
- 输出格式要求为markdown格式，每题一行，格式如下：
1. 问题1？
	A. 选项1
	B. 选项2
	C. 选项3
2. 问题2？
	A. 选项1
`,
			}],
			stop: ['stop'],
			stream: true,
		}
		
		fetchEventSource(url, {
			method: "POST",
			// 请求头参数
			headers: {
				// enterprise_id: userStore.userInfo.enterpriseId,
				// wrnc_auth: userStore.token,
				"Content-Type": "application/json",
				"Authorization": 'Bearer ' + token,
			},
			// 具体传参
			body: JSON.stringify(params),
			openWhenHidden: true, // 在调用失败时禁止重复调用
			signal: ctrl.signal,
			/*onopen: function (e: any) {
			console.log("open");
			},*/
			onmessage(msg) {
				const res = JSON.parse(msg.data);
				if (res.choices[0].finish_reason === 'stop') {
					console.log("finish");
					ctrl.abort();
					
					ai.stop = 'stop';
					throw new error('stop')
				} else {
					ai.markDownText += res.choices[0].delta.content;
				}
			},
			onclose(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 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 : '', //标题
		surveyType: '',
		remark : '', //指导语
		surveyId : 0,
		// scoreRanges: [],
		// surveyScoreLabel: '',
		questionlist : [
			{
				title : '',    //题目
				classificationName:'', //类别
				remark : '', //备注
				type : '单选', //类型
				required : 1,  //是否必填
				min : '', //最少选择
				max : '', //最大选择

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

	

	// 获取初始化数据
	const getData = function _f (){
		if(id){ 
			const params ={
				id
			}
			getPageListData(`/survey/survey/getdetail`,params).then(({data})=>{
			// getPageListData(`/survey/survey/${id}`).then(({data})=>{
				emit('initData', data, type);
				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'];
				contentDatas.value['surveyType'] = data['surveyType']; 
				
				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'],
							score: value['score'],
						})
					}
	
					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', 'I', 'J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'];

		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;
				}
			}
		}

		emit('submit', contentDatas.value, type)

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

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

	const surveyTypes = ref([]);

	const getSurveyTypes = () => {
		getPageListData('/common/dict/data/survey_types').then((res)=>{
			surveyTypes.value = res.data;
		})
	}
</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>