<template>
	<div>
		<div style="padding:20px;
		overflow-y: auto;">
			<TitleWithCircle title="新建问卷" style="margin-bottom: 20px;" />
			<div>
				<el-tabs v-model="xiangTabs">
					<el-tab-pane label="基本信息" name="first">
						<div style="width: 100%">
							<div style="border:1px solid #DCDFE6;font-size:14px;margin-bottom:10px;">
								<div
									style="padding:10px 20px;border-bottom:1px solid #DCDFE6;display:flex;justify-content: space-between;">
									<div>基本信息</div>
								</div>

								<el-form ref="inlineform" :model="formInline" :rules="rules" label-width="155px"
									style="padding:20px;">
									<el-form-item label="问卷标题" prop="title">
										<el-input v-model="formInline.title" maxlength="50" placeholder="请输入"/>
									</el-form-item>
									<el-form-item label="问卷起止时间" prop="">
										<el-date-picker v-model="Xin_Time" style="width: 100%;"
											value-format="yyyy-MM-dd" type="daterange" range-separator="至"
											start-placeholder="开始日期" end-placeholder="结束日期" align="right"
											:picker-options="pickerOptions">
										</el-date-picker>
									</el-form-item>
									<el-form-item label="发布端口" prop="publishPort">
										<el-select v-model="formInline.publishPort" placeholder="请选择">
											<el-option label="用户端" value="用户端" />
											<el-option label="商家端" value="商家端" />
											<el-option label="H5端" value="H5端" />
										</el-select>
									</el-form-item>
									<el-form-item label="问卷类型" prop="questionnaireType">
										<el-select v-model="formInline.questionnaireType" placeholder="请选择">
											<el-option label="物业问卷" value="物业问卷" />
											<el-option label="招商问卷" value="招商问卷" />
											<el-option label="满意度问卷" value="满意度问卷" />
											<el-option label="社会调查问卷" value="社会调查问卷" />
										</el-select>
									</el-form-item>
									<el-form-item label="预计填写时长(分钟)" prop="estimatedTime">
										<el-input v-model.number="formInline.estimatedTime" maxlength="10" placeholder="请输入" />
									</el-form-item>

									<el-form-item label="问卷介绍" prop="remarks">
										<!-- <el-input v-model="formInline.remarks" maxlength="255"></el-input> -->
										<wang-editor ref="editor" v-model="formInline.remarks" :height="200" />
									</el-form-item>
									<el-form-item label="填写人" prop="filler">
										<el-select v-model="formInline.filler" placeholder="请选择">
											<!-- <el-option label="会员" value="会员" /> -->
											<el-option label="公众" value="公众" />
										</el-select>
									</el-form-item>
									<el-form-item label="填写条件" prop="fillingConditions">
										<el-radio-group v-model="formInline.fillingConditions" style="margin-top:13px;">
											<el-radio label="可重复填写">可重复填写</el-radio>
											<el-radio label="不可重复填写">不可重复填写</el-radio>
										</el-radio-group>
									</el-form-item>
									<el-form-item label="创建人" prop="createUser">
										<el-input v-model="formInline.createUser" placeholder="请输入" maxlength="50" />

									</el-form-item>
									<el-form-item label="问卷封面" prop="coverImage">

										<div style="position: relative;">

											<upimg filePath="wenjuan" inputtype="coverImage" :limit="1" :file-size="1"
												:is-show-tip="true" :value="formInline.coverImage"
												@changimg="e => changimg(e, '1')" />
											<!-- <div style="position: absolute;left:160px;height:80px;">()</div> -->
											<!-- @input="e=>input(e,'ing')" @input="input" -->
										</div>
									</el-form-item>
									<el-form-item label="姓名" prop="needName">
										<el-radio-group v-model="formInline.needName" style="margin-top:13px;">
											<el-radio label="必填">必填</el-radio>
											<el-radio label="不填">不填</el-radio>
										</el-radio-group>
									</el-form-item>
									<el-form-item label="电话" prop="needPhone">
										<el-radio-group v-model="formInline.needPhone" style="margin-top:13px;">
											<el-radio label="必填">必填</el-radio>
											<el-radio label="不填">不填</el-radio>
										</el-radio-group>
									</el-form-item>
									<el-form-item label="性别" prop="needGender">
										<el-radio-group v-model="formInline.needGender" style="margin-top:13px;">
											<el-radio label="必填">必填</el-radio>
											<el-radio label="不填">不填</el-radio>
										</el-radio-group>
									</el-form-item>

									<el-form-item label="意见" prop="needOpinion">
										<el-radio-group v-model="formInline.needOpinion" style="margin-top:13px;">
											<el-radio label="必填">必填</el-radio>
											<el-radio label="不填">不填</el-radio>
										</el-radio-group>
									</el-form-item>
								</el-form>
							</div>
							<div>
								<div style="border:1px solid #DCDFE6;font-size:14px;margin-bottom:10px;">
									<div
										style="padding:10px 20px;border-bottom:1px solid #DCDFE6;display:flex;justify-content: space-between;">
										<div>参与答卷奖励</div>
									</div>
									<el-form ref="form" :model="formInline" label-width="140px" style="padding:20px;">
										<el-radio-group v-model="radioreward">
											<el-radio label="不设置奖励" value="不设置奖励">不设置奖励</el-radio>
											<!-- <el-radio label="奖励积分" value="奖励积分">奖励积分</el-radio> -->
											<el-radio label="转盘抽奖" value="转盘抽奖">转盘抽奖</el-radio>
											<!-- <el-radio label="优惠券" value="优惠券">优惠券</el-radio> -->
										</el-radio-group>
									</el-form>
									<!-- <div v-if="formInline.rewardForParticipation === '奖励积分'"
													style="padding: 0  0 20px 20px;">
													<div>
														奖励 <el-input v-model="jifen" style="width:50px;" />积分
													</div>
												</div> -->
									<div v-if="radioreward === '转盘抽奖'" style="padding: 0  0 20px 20px;">
										<div v-if="jiangli.id && jiangli.id!=''" style="padding: 10px 0;">
											<span>{{jiangli.actName}}</span>
											<span style="padding: 0 20px;color: #3F9B6A;cursor: pointer;"
												@click="actGo(1)">查看</span>
											<span style="color: #3F9B6A;cursor: pointer;" @click="actGo(2)">编辑</span>
										</div>
										<div v-else>
											<el-button style="color: #fff;background-color: #3F9B6A;"
												@click="actGo(0)">创建活动</el-button>
										</div>
									</div>
									<!-- <div v-if="formInline.rewardForParticipation === '优惠券'"
													style="padding: 0  0 20px 20px;">
													<div>
														<el-select v-model="yhq" placeholder="请选择" style="width:20%">
															<el-option v-for="item in yhqSel" :label="item" :value="item" />
														</el-select>
													</div>
												</div> -->
								</div>

							</div>
						</div>

					</el-tab-pane>
					<el-tab-pane label="问卷内容" name="second">
						<div style="width: 100%">
							<div style="border:1px solid #DCDFE6;font-size:14px;margin-bottom:10px;">
								<div
									style="padding:10px 20px;border-bottom:1px solid #DCDFE6;display:flex;justify-content: space-between;">
									<div>问卷内容</div>
									<div>
										<div class="greens tableBtn" @click="addTikuShow">新增</div>
										<div class="greens tableBtn" @click="selTiku">从题库中选择</div>
									</div>

								</div>

								<div style="padding:20px;">
									<el-table :data="wenConstData"
										:header-cell-style="{ fontSize: '14px', color: '#0009', fontWeight: 'normal', backgroundColor: '#F2F3F5' }"
										class="xddTable">
										<el-table-column label="序号" min-width="100">
											<template slot-scope="scope">
												{{ scope.$index + 1 }}
											</template>
										</el-table-column>
										<el-table-column label="题目" min-width="300" prop="tikuTitle"
											show-overflow-tooltip />
										<el-table-column label="题型" min-width="80" prop="questionType" />
										<el-table-column label="是否必填" prop="isRequired" min-width="120" />
										<el-table-column label="" min-width="120">
											<template #default="scope">
												<span style="cursor: pointer;margin-right: 5px; color: #3F9B6A;"
													@click="moveUp(scope.$index)" v-if="scope.$index != 0">↑</span>
												<span style="cursor: pointer; color: #3F9B6A;"
													@click="moveDown(scope.$index)"
													v-if="scope.$index != (wenConstData.length - 1)">↓</span>
											</template>
										</el-table-column>
										<el-table-column label="操作" min-width="80">
											<template slot-scope="scope">
												<!-- <div class="tableBtn greens">编辑</div> -->
												<div class="tableBtn greens" @click="delWenCon('1', scope.$index)">
													删除</div>
											</template>
										</el-table-column>
									</el-table>
								</div>
							</div>
						</div>
					</el-tab-pane>

				</el-tabs>
				<!-- </div> -->

				<!-- <span slot="footer" class="dialog-footer">
		       <el-button class="buttonHover" style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;"
		         @click="closeFn(1)">返回</el-button>
		       <el-button @click="addCheck(2)" style="background-color: #3F9B6A;color: #fff">确认</el-button>
		
		          </span> -->
				<!-- 					</div> -->
				<el-dialog :visible.sync="tikuBox" top="8vh" width="80%" center title="题库"
					:close-on-click-modal="false" append-to-body @close="tikuquxiao(1)">
					<div style="">
						<div style="">
							<div style="display: flex;justify-content: space-between;margin-bottom: 20px;">

								<div>
									从题库中选择
									<el-select v-model="tikuNie" style="width:28%;margin-right: 15px;"
										@change="tikuchange">
										<el-option label="用户端题库" value="用户端题库" />
										<el-option label="商户端题库" value="商户端题库" />
										<el-option label="公共端题库" value="公共端题库" />
									</el-select>
									<el-select v-model="danxuan" style="width:28%;margin-right: 15px;"
										placeholder="请选择题型">
										<el-option label="单选" value="单选" />
										<el-option label="多选" value="多选" />
										<el-option label="文本" value="文本" />
									</el-select>
									<!-- <el-select v-model="manyi" style="width:20%;" placeholder="请选择题型">
		                <el-option label="物业满意度" value="物业满意度" />
		              </el-select> -->
								</div>
								<div style="">
									<el-input v-model="timuMsg" style="width:50%;margin-right: 15px;"
										placeholder="请输入题目" />
									<el-button style="background-color: #3F9B6A;color: #fff" placeholder="请输入题目"
										@click="tikusous">查询
									</el-button>
									<el-button class="buttonHover"
										style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;"
										@click="tikuclose">重置
									</el-button>
								</div>
							</div>
							<!-- v-infinite-scroll="load" -->
							<div style="padding:20px;overflow-y: auto;height:495px;">

								<el-table ref="ziyuanData"
									:data="tikuziyuan.slice((currentPageListTi - 1) * pageSizeTi, currentPageListTi * pageSizeTi)"
									:row-key="row => row.id"
									:header-cell-style="{ fontSize: '14px', color: '#0009', fontWeight: 'normal', backgroundColor: '#F2F3F5' }"
									tooltip-effect="dark" @selection-change="handleSelectionChange"
									@toggleRowSelection="hangSelchange">
									<el-table-column type="selection" width="55" :reserve-selection="true" />
									<el-table-column label="序号" min-width="100">
										<template slot-scope="scope">
											{{ scope.$index + 1 }}
										</template>
									</el-table-column>
									<el-table-column label="题目" min-width="400" prop="tikuTitle" />
									<el-table-column label="题型" min-width="80" prop="questionType" />
									<el-table-column label="操作" min-width="120">
										<template slot-scope="scope">
											<div class="tableBtn greens" @click="gotimuxiang(scope.row)">详情</div>
										</template>
									</el-table-column>

								</el-table>
								<div style="display: flex;justify-content: space-between;margin-top: 10px;">
									<div style="font-size: 14px;">共 <span style="color: #3F9B6A;">{{ totalTi }}</span> 条
									</div>
									<el-pagination :current-page="currentPageListTi" :page-sizes="[10, 20, 50, 100]"
										:page-size="pageSizeTi" background small layout="prev, pager, next"
										:total="totalTi" @size-change="handleSizeChangeTi"
										@current-change="handleCurrentChangeTi" />
								</div>
							</div>
						</div>
						<div style="padding-top:20px;display:flex;justify-content: flex-end;">
							<el-button style="background-color: #3F9B6A;color: #fff" @click="tiSelQue(1)">确定</el-button>
						</div>
					</div>
					<el-dialog :visible.sync="timuXiang" custom-class="tongyong_css" style="padding: 0;" width="50%"
						center :close-on-click-modal="false" append-to-body>
						<div style="padding:20px;">
							<div style="font-size: 14px;padding-bottom: 20px;color: #000;">详情页</div>
							<div>
								<el-descriptions class="margin-top" :column="1" border :label-style="labelStyle"
									:content-style="contentStyle">
									<el-descriptions-item>
										<template slot="label">
											题目
										</template>
										{{ timuData.tikuTitle }}
									</el-descriptions-item>
									<el-descriptions-item>
										<template slot="label">
											题型
										</template>
										{{ timuData.questionType }}
									</el-descriptions-item>
									<el-descriptions-item>
										<template slot="label">
											隶属题库
										</template>
										{{ timuData.questionBank }}
									</el-descriptions-item>
								</el-descriptions>
								<el-descriptions class="margin-top" :column="1" border :label-style="labelStyle"
									:content-style="contentStyle">
									<el-descriptions-item>
										<template slot="label">
											默认是否必填
										</template>
										{{ timuData.isRequired }}
									</el-descriptions-item>
									<el-descriptions-item>
										<template slot="label">
											选项
										</template>
										<div v-for="(value, key) in timuData.optionSettings" :key="key">
											{{ key }}：{{ value }}
										</div>
									</el-descriptions-item>

								</el-descriptions>
							</div>
							<div style="padding-top:20px;display:flex;justify-content: flex-end;">
								<el-button class="buttonHover"
									style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;"
									@click="timuXiang = false">返回</el-button>
							</div>
						</div>

					</el-dialog>
				</el-dialog>
				<el-dialog :visible.sync="tikuAdd" title="新增题目"  width="80%" top="8vh" center
					:close-on-click-modal="false" append-to-body @close="quxiao(1)">
					<div style="">
						<div style="">
							<el-form ref="tixform" :model="zhong" :rules="tixrules" label-width="140px">
								<el-form-item label="题目" prop="tikuTitle">
									<el-input v-model="zhong.tikuTitle" maxlength="100" />
								</el-form-item>
								<el-form-item label="题型" prop="questionType">
									<el-select v-model="zhong.questionType" placeholder="请选择">
										<el-option label="单选" value="单选" />
										<el-option label="多选" value="多选" />
										<el-option label="文本" value="文本" />
									</el-select>
								</el-form-item>

								<el-form-item v-if="zhong.questionType == '多选'" label="最多可选" prop="maxChoose">
									<el-input-number v-model="zhong.maxChoose" :min="0" :max="options.length" />
									0为不限制填写数量
								</el-form-item>
								<el-form-item label="隶属题库" prop="questionBank">
									<el-select v-model="zhong.questionBank" placeholder="请选择">
										<el-option label="用户端题库" value="用户端题库" />
										<el-option label="商户端题库" value="商户端题库" />
										<el-option label="公共端题库" value="公共端题库" />
									</el-select>
								</el-form-item>
								<el-form-item label="布局类型" prop="layoutType">
									<el-radio-group v-model="zhong.layoutType" style="margin-top:13px;">
										<el-radio :label="1">垂直布局</el-radio>
										<el-radio :label="2">自由布局</el-radio>
									</el-radio-group>
								</el-form-item>
								<el-form-item label="是否必填" prop="isRequired">
									<!-- <el-select v-model="zhong.isRequired" placeholder="请选择">
		                <el-option label="必填" value="必填" />
		                <el-option label="非必填" value="非必填" />
		              </el-select> -->
									<el-radio-group v-model="zhong.isRequired" style="margin-top:13px;">
										<el-radio label="必填">必填</el-radio>
										<el-radio label="非必填">非必填</el-radio>

									</el-radio-group>
								</el-form-item>

								<el-form-item v-if="zhong.questionType != '文本'" label="选项" prop="optionSettings">
									<el-table :data="options"
										:header-cell-style="{ fontSize: '14px', color: '#0009', fontWeight: 'normal', backgroundColor: '#F2F3F5' }">
										<el-table-column prop="index" label="序号" width="180">
											<template #default="scope">
												{{ scope.$index + 1 }}
											</template>
										</el-table-column>
										<el-table-column prop="name" label="选项名称" width="300">
											<template #default="scope">
												<el-input v-model="scope.row.name" :readonly="scope.row.readonly" />
											</template>
										</el-table-column>
										<el-table-column prop="name" label="分数">
											<template #default="scope">
												<el-input v-model.number="scope.row.num" :min="0" :max="100"
													:readonly="scope.row.readonly" @input="validateScore(scope.row)" />
											</template>
										</el-table-column>
										 <el-table-column label=""  min-width="120">
											                    <template #default="{ $index }">
												                      <span
													style="cursor: pointer;margin-right: 5px; color: #3F9B6A;"
													@click="answerMoveUp($index)" v-if="$index != 0">↑</span>
												                      <span style="cursor: pointer; color: #3F9B6A;"
													@click="answerMoveDown($index)"
													v-if="$index != (options.length - 1)">↓</span>
												                    </template>
											                  </el-table-column>
										<el-table-column label="操作">
											<template #default="scope">
												<div class="tableBtn greens" @click="deleteOption(scope.$index)">删除
												</div>
											</template>
										</el-table-column>
									</el-table>
									<el-button style="width:100%;background-color: #3F9B6A;color: #fff"
										@click="addOption">+
										添加</el-button>
								</el-form-item>
							</el-form>
						</div>
						<div style="display: flex;justify-content: flex-end;">
							<el-button style="background-color: #3F9B6A;color: #fff" @click="Addtiku(1)">确定
							</el-button>
						</div>
					</div>
				</el-dialog>
				<div slot="footer" class="dialog-footer">
					<div style="display: flex; justify-content: flex-end; align-items: center;">
						<!-- <el-button class="buttonHover"
							style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;"
							@click="closeFn(1)">返回</el-button> -->
						<el-button style="background-color: #3F9B6A;color: #fff" @click="addCheck(2)">确认</el-button>

					</div>
				</div>
			</div>
		</div>
		<el-dialog :visible.sync="iframaShow" title="创建活动" width="90%" center top="1%" :close-on-click-modal="false"
			append-to-body>
			<div style="padding:20px;">
				<iframe :src="iframaUrl" ref="iframe" frameborder="0" width="100%" height="700px" />
				<div style="padding-top:20px;display:flex;justify-content: flex-end;">
				</div>
			</div>
		
		</el-dialog>
	</div>
</template>

<script>
	import {
		async
	} from 'q'
	import Vue from 'vue'
	import axios from 'axios'
	import DynamicChartTable from '@/components/dajuanTongji/index.vue'
	import tiaoxing from '@/components/dajuanTongji/tiaoxing.vue'
	import wangEditor from '@/components/editor/index';
	import {
		TerminaGetAll,
		TerminaAdd,
		TerminaEdit,
		TerminaDel,
		QuestionGetAll,
		QuestionAdd,
		adminToken
	} from '../../api/investigation.js'
	import upimg from '@/components/ImageUpload/index'
	import TitleWithCircle from '@/components/top/index'
	import {
	  Message
	} from 'element-ui'
	export default {
		components: {
			upimg,
			DynamicChartTable,
			tiaoxing,
			wangEditor,
			TitleWithCircle
		},
		data() {
			return {
				xiangTabs: 'first',
				formInline: {
					createUser: '',
					title: '',
					startDate: '',
					endDate: '',
					publishPort: '',
					questionnaireType: '',
					estimatedTime: null,
					remarks: '',
					filler: '',
					fillingConditions: '可重复填写',
					coverImage: '',
					rewardForParticipation: '',
					questionId: '',
					responseStatus: '',
					reviewStatus: '1',
					needName: '必填',
					needPhone: '必填',
					needGender: '必填',
					needOpinion: '必填',
				},
				rules: {
					title: [{
						required: true,
						message: '请输入问卷标题',
						trigger: 'blur'
					}],
					startDate: [{
						required: true,
						message: '请选择问卷起止时间',
						trigger: 'change'
					}],
					publishPort: [{
						required: true,
						message: '请选择发布端口',
						trigger: 'change'
					}],
					questionnaireType: [{
						required: true,
						message: '请选择问卷类型',
						trigger: 'change'
					}],
					estimatedTime: [{
							required: true,
							message: '请输入预计填写时长'
						},
						{
							type: 'number',
							message: '必须为数字值'
						},
						{
							validator: (rule, value, callback) => {
								if (value <= 0) {
									callback(new Error('预计填写时长必须大于0'));
								} else {
									callback();
								}
							}
						}
					],

					filler: [{
						required: true,
						message: '请选择填写人',
						trigger: 'change'
					}],
					fillingConditions: [{
						required: true,
						message: '请选择填写条件',
						trigger: 'change'
					}],
					coverImage: [{
						required: true,
						message: '请上传问卷封面',
						trigger: 'change'
					}],
					createUser: [{
						required: true,
						message: '请输入创建人',
						trigger: 'blur'
					}, ],
				},
				jiangli: {
					// id: '1895043663592030209', //活动id
					// actName: '商业测试活动1', //活动名称
					// actStyle: '1', //抽奖样式 1：大转盘 2：砸金蛋 3：刮刮卡 4：翻牌乐 5：福袋 6：摇一摇
					id:'',
					actName:'',
					actStyle:'', //抽奖样式 1：大转盘 2：砸金蛋 3：刮刮卡 4：翻牌乐 5：福袋 6：摇一摇
				},
				radioreward: '不设置奖励',
				wenConstData: [],
				tikuBox: false,
				tikuNie: '用户端题库',
				danxuan: '',
				timuMsg: '',
				tikuziyuan: [],
				totalTi: 0,
				currentPageListTi: 1,
				pageSizeTi: 10,
				labelStyle: {
					width: '250px'
				},
				contentStyle: {
					width: '246px'
				},
				tikuAdd: false,
				tixrules: {
					tikuTitle: [{
						required: true,
						message: '请输入题目',
						trigger: 'blur'
					}, ],
					questionType: [{
						required: true,
						message: '请选择题型',
						trigger: 'change'
					}],
					questionBank: [{
						required: true,
						message: '请选择所属题库',
						trigger: 'change'
					}],
					optionSettings: [{
						required: true,
						message: '请设置答案',
						trigger: 'change'
					}],

				},
				
				timuXiang: false,
				timuData: {},
				multipleSelection: [],
				xuanzheData: [],
				Xin_Time: [],
				zhong: {
					tikuTitle: '',
					questionType: '',
					questionBank: '用户端题库',
					layoutType: 1,
					maxChoose: 0,
					isRequired: '必填',
					questionDescription: '',
					optionSettings: {},
				},
				options:[],
				pickerOptions: {
					disabledDate(time) {
						return time.getTime() < Date.now() - 8.64e7; // 禁用当前时间之前的日期
					}
				},
				iframaShow:false,
				iframaUrl:''
			}
		},
		computed: {

		},
		created() {
		},
		mounted() {
			this.moren()
			// 监听iframe页面点击按钮触发事件
			window.addEventListener('message', (event) => {
				const data = event.data
				if (data.code === 'success') {
					// alert(data.test)
					console.log('id', data.id)
					console.log('name', data.name)
					console.log('styles', data.style)
					this.jiangli = {
						id: '' + data.id,
						actName: data.name,
						actStyle: data.style
					}
					this.iframaShow = false
				}
			})
		},
		methods: {
			extractParamsAndHandleToken() {
			let urlPart = window.location.href
			    const queryIndex = urlPart.indexOf('?');
			    if (queryIndex === -1) {
			        return {
			            id: null,
			            token: null
			        };
			    }
			    const queryString = urlPart.slice(queryIndex + 1);
			    const paramPairs = queryString.split('&');
			    let idValue = null;
			    let tokenValue = null;
			
			    paramPairs.forEach(pair => {
			        const [key, value] = pair.split('=');
			        if (key === 'id') {
			            idValue = value;
			        } else if (key === 'token') {
			            tokenValue = value;
			        }
			    });
			
			    if (!tokenValue) {
			        window.location.href = 'https://zhgw-uat.028wlkj.com/home';
			    }
			
			    return {
			        id: idValue,
			        token: tokenValue
			    }
			},
moren(){
			let  result = this.extractParamsAndHandleToken()
	 adminToken(result.token).then(res=>{
		 
		 if(res.code ==  '200'){
			this.formInline = {
				createUser: '',
				title: '',
				startDate: '',
				endDate: '',
				publishPort: '',
				questionnaireType: '',
				estimatedTime: null,
				remarks: '',
				filler: '',
				fillingConditions: '可重复填写',
				coverImage: '',
				rewardForParticipation: '',
				questionId: '',
				responseStatus: '',
				reviewStatus: '1',
				needName: '必填',
				needPhone: '必填',
				needGender: '必填',
				needOpinion: '必填',
			}
			this.jiangli = {
				id: '',
				actName: '',
				actStyle: ''
			}
			this.xuanzheData = []
			this.radioreward = '不设置奖励'
			const today = new Date();
			const startOfToday = new Date(today.getFullYear(), today.getMonth(), today.getDate());
			const endOfToday = new Date(today.getFullYear(), today.getMonth(), today.getDate());
			this.Xin_Time = [this.getCurrentDate(), this.getNextDayDate()]
			this.wenConstData = []
			 
		 }else{
			 console.log(res)
			 Message({
			   message: res.message,
			   type: 'error',
			   duration: 5 * 1000
			 })
			  // window.location.href = 'https://zhgw-uat.028wlkj.com/home'
		 }
	 })
			
			},
			getCurrentDate() {
				const now = new Date();
				const year = now.getFullYear();
				const month = String(now.getMonth() + 1).padStart(2, '0'); // 月份从0开始，所以要+1
				const day = String(now.getDate()).padStart(2, '0');
				return `${year}-${month}-${day}`;
			},
			
			getNextDayDate() {
				const now = new Date();
				now.setDate(now.getDate() + 1); // 设置到下一天
				const year = now.getFullYear();
				const month = String(now.getMonth() + 1).padStart(2, '0'); // 月份从0开始，所以要+1
				const day = String(now.getDate()).padStart(2, '0');
				return `${year}-${month}-${day}`;
			},
			
			changimg(e, e1) {
				this.formInline.coverImage = e
			},
			addTikuShow() {
				this.zhong = {
					tikuTitle: '',
					questionType: '',
					questionBank: '用户端题库',
					layoutType: 1,
					maxChoose: 0,
					isRequired: '必填',
					questionDescription: '',
					optionSettings: {},
				}
				this.options = []
				this.tikuAdd = true
			},
			async selTiku() {
				this.tiNum = 0
				this.tikuNie = '用户端题库'
				this.tikuBox = true
				const page = {
					pageNumber: 0,
					pageSize: 10,
					questionBank: '用户端题库',
				}
				const tiku = await QuestionGetAll(page)
				this.tikuziyuan = tiku.data.content
				this.totalTi = tiku.data.totalElements
			},
			moveUp(index) {
				[this.wenConstData[index], this.wenConstData[index - 1]] = [this.wenConstData[index - 1], this
					.wenConstData[index]
				]
				this.wenConstData.sort()
			},
			moveDown(index) {
				[this.wenConstData[index], this.wenConstData[index + 1]] = [this.wenConstData[index + 1], this
					.wenConstData[index]
				]
				this.wenConstData.sort()
			},
			answerMoveUp(index) {
				[this.options[index], this.options[index - 1]] = [this.options[index - 1], this.options[index]]
				this.options[index].index = index - 1
				this.options.sort()
			},
			answerMoveDown(index) {
				[this.options[index], this.options[index + 1]] = [this.options[index + 1], this.options[index]]
				this.options[index].index = index + 1
				this.options.sort()
			},
			delWenCon(val, index) {
				this.xuanzheData.splice(index, 1)
				this.wenConstData.splice(index, 1)
			},
			// 题库切换选择
			async tikuchange(val) {
				const page = {
					pageNumber: 0,
					pageSize: 10,
					questionBank: val,
				}
				const tiku = await QuestionGetAll(page)
				this.tikuziyuan = tiku.data.content
				this.totalTi = tiku.data.totalElements
			},
			async tikusous() {
				const page = {
					pageNumber: 0,
					pageSize: 10,
					questionBank: this.tikuNie,
					questionType: this.danxuan,
					tikuTitle: this.timuMsg,
				}
				const tiku = await QuestionGetAll(page)
				this.tikuziyuan = tiku.data.content
				this.totalTi = tiku.data.totalElements
			},
			async tikuclose() {
				this.tikuNie = '用户端题库'
				this.danxuan = ''
				this.timuMsg = ''
				this.manyi = ''
				const page = {
					pageNumber: 0,
					pageSize: 10,
					questionBank: this.tikuNie,
				}
				const tiku = await QuestionGetAll(page)
				this.tikuziyuan = tiku.data.content
				this.totalTi = tiku.data.totalElements
			},
			handleSizeChangeTi(val) {
				this.pageSizeTi = val
			},
			async handleCurrentChangeTi(val) {
				const pageindex = {
					pageNumber: val - 1,
					pageSize: 10,
					questionBank: this.tikuNie,
					questionType: this.danxuan,
					tikuTitle: this.timuMsg,
				}
				const tiku = await QuestionGetAll(pageindex)
				this.tikuziyuan = tiku.data.content
				this.totalTi = tiku.data.totalElements
				// TerminaGetAll(this.pageindex).then(res => {
				//   this.tableData = res.data.content
				// })
			},
			handleSelectionChange(val) {
				// if(this.tikuNie =='用户端题库'){
				//     this.listOne = val
				// }else if(this.tikuNie =='商户端题库'){
				//   this.listTwo = val
			
				// }else{
				//   this.listThree = val
				// }
			
				this.multipleSelection = val
			
				// this.xuanzheData = this.xuanzheData.concat(val)
				// this.xuanzheData = [...new Set(this.xuanzheData)]
			},
			hangSelchange() {
				const postList = {
					pageNumber: 0,
					pageSize: 10,
					questionnaireId: item.id,
				}
				axios.post(`${this.$API}/cereQuestionnaireAnswering/queryByPage`, postList).then(
					response => {
						this.tongjiSshu = response.data.data.content
						this.total1 = response.data.data.totalElements
					})
			},
			addOption() {
				const newOption = {
					index: this.options.length + 1,
					name: '',
					readonly: false
				};
				this.options.push(newOption);
			},
			gotimuxiang(item) {
				this.timuData = item
				if (typeof item.optionSettings !== 'object') {
					this.timuData.optionSettings = JSON.parse(item.optionSettings)
				}
				this.timuXiang = true
			},
			tiSelQue(val) {
				if (val == 1) {
					// wenConstData secondDataTi
			
					// this.wenConstData = [...this.listOne, ...this.listTwo, ...this.listThree]
					this.multipleSelection.forEach(item => {
						const isDuplicate = this.wenConstData.some(existingItem => existingItem.id === item.id);
						if (!isDuplicate) {
							this.wenConstData.push(item);
						}
					})
				} else {
					this.multipleSelection.forEach(item => {
						const isDuplicate = this.secondDataTi.some(existingItem => existingItem.id === item.id);
			
						if (!isDuplicate) {
							this.secondDataTi.push(item);
						}
					});
				}
				this.tiNum = 0
				this.tikuNie = ''
				this.danxuan = ''
				this.timuMsg = ''
				this.pageSizeTi = 10
				this.currentPageListTi = 1
				this.totalTi = 0
				this.$refs.ziyuanData.clearSelection()
				this.tikuBox = false
			},
			// 新增确定按钮
			addCheck(val) {
			
				this.$refs.inlineform.validate((valid) => {
					if (valid) {
						if (this.Xin_Time != null) {
							this.formInline.startDate = this.Xin_Time[0]
							this.formInline.endDate = this.Xin_Time[1]
						} else {
							this.$message({
								type: 'error',
								message: '请选择问卷时间',
							})
							return false;
						}
						if (this.radioreward == '转盘抽奖') {
							if (this.jiangli.id == '') {
								this.$message({
									type: 'error',
									message: '请创建转盘活动',
								})
								return false;
							}
						} else {
							this.jiangli.id = ''
							this.jiangli.actName = ''
							this.jiangli.actStyle = ''
						}
						let ids = null
						if (this.wenConstData.length != 0) {
							ids = this.wenConstData.map(item => item.id);
							this.formInline.questionId = ids.join(',')
						} else {
							this.$message({
								type: 'error',
								message: '请选择问题',
							})
							return false;
						}
						this.formInline.rewardForParticipation = this.jiangli.id
						this.formInline.actStyle = this.jiangli.actStyle
						this.formInline.actName = this.jiangli.actName
						this.formInline.createTime = this.currentTime()
					
						TerminaAdd(this.formInline).then(res => {
							console.log(res.data,'问卷新增 ')
							if (res.data.code == '500') {
								this.$message({
									message: res.data.message,
									type: 'error'
								})
							} else {
								this.$message({
									message: '保存成功',
									type: 'success'
								})
							
								this.$refs.inlineform.resetFields()
								this.$refs.ziyuanData.clearSelection();
								this.multipleSelection = []
								 window.parent.postMessage({
								            data: {
								                id: res.data.id,
								            }
								        }, '*')
							}
						})
					} else {
						this.$message({
							message: '请填写完整信息',
							type: 'error'
						})
						return false;
					}
				})
			},
			tikuquxiao(val) {
				this.tikuBox = false
				this.tiNum = 0
				this.tikuNie = ''
				this.danxuan = ''
				this.timuMsg = ''
				this.pageSizeTi = 10
				this.currentPageListTi = 1
				this.totalTi = 0
				this.$refs.ziyuanData.clearSelection()
			},
			quxiao(val) {
				this.multipleSelection = []
				this.options = []
				this.$refs.tixform.resetFields()
				// if (val == 1) {
				//   this.$refs.tixform.resetFields()
				// } else {
			
				//   this.$refs.form.resetFields()
				// }
			},
			
			validateScore(row) {
				// 如果输入的不是数字或者是NaN，则重置为1
				if (isNaN(row.num) || row.num < 0) {
					row.num = 0;
				}
				// 如果输入的数字大于100，则重置为100
				if (row.num > 100) {
					row.num = 100;
				}
			},
			// 新增题库
			Addtiku(val) {
				const that = this
			
				if (this.zhong.tikuTitle == '') {
					this.$message({
						type:'error',
						message: '请输入题目',
					})
					return;
				}
				if (this.zhong.questionType == '') {
					this.$message({
						type:'error',
						message: '请选择题型',
					})
					return;
				}
				if (this.zhong.questionType != '文本' && this.options.length == 0) {
					this.$message({
						type:'error',
						message: '请添加答案选项',
					})
					return;
				}
				for (let i = 0; i < this.options.length; i++) {
					if (this.options[i].name == '') {
						this.$message({
							type:'error',
							message: '答案选项不能为空',
						})
						return
					}
				}
				let accumulator = {}
				let fenshu = {}
				this.options.forEach((item, index) => {
					accumulator[index] = item.name
					fenshu[index] = Number(item.num) || 0
				})
				// this.zhong.optionSettings = this.options.reduce((accumulator, current) => {
				//   accumulator[current.index] = current.name;
				//   return accumulator;
				// }, {}) // 初始化累加器为空对象
			
				// this.zhong.score = this.options.reduce((accumulator, current) => {
				//   accumulator[current.index] = Number(current.num);
				//   return accumulator;
				// }, {}) // 初始化累加器为空对象
				this.zhong.optionSettings = JSON.stringify(accumulator)
				this.zhong.score = JSON.stringify(fenshu)
			
				// this.zhong.optionSettings = JSON.stringify(this.zhong.optionSettings)
				// this.zhong.score = JSON.stringify(this.zhong.score)
				this.zhong.createDate = this.currentTime()
			
				QuestionAdd(this.zhong).then((res) => {
					if (val == 1) {
						that.wenConstData.push(res.data)
			
					} else {
						that.secondDataTi.push(res.data)
					}
					this.$message({
						message: '保存成功',
						type: 'success'
					})
					this.options = []
					this.multipleSelection = []
					this.tikuAdd = false
				})
			},
			// 获取时间
			currentTime() {
				const date = new Date();
				const year = date.getFullYear();
				let month = date.getMonth() + 1; // 月份从0~11，所以加一
				let day = date.getDate();
				let hours = date.getHours();
				let minutes = date.getMinutes();
				let seconds = date.getSeconds();
			
				// 为月、日、小时、分钟和秒添加前导零（如果需要）
				month = month < 10 ? '0' + month : month;
				day = day < 10 ? '0' + day : day;
				hours = hours < 10 ? '0' + hours : hours;
				minutes = minutes < 10 ? '0' + minutes : minutes;
				seconds = seconds < 10 ? '0' + seconds : seconds;
			
				// 返回格式化的日期和时间字符串
				return `${year}-${month}-${day} ${hours}:${minutes}`;
			},
			actGo(val) {
				let token = localStorage.getItem('token');
				if (token && token.startsWith('Bearer')) {
					token = token.substring(7);
				}
				// token =
				// 	'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJqd3RfdXNlcl9pbmZvIjoie1wiYXBwSWRcIjoxLFwiYXJlYUNvZGVzXCI6W10sXCJjb21wYW55QWRtaW5cIjpmYWxzZSxcImNvbXBhbnlDb2RlXCI6XCJKSkxEXzAwMVwiLFwiZGVwdENvZGVcIjpcIjAwMlwiLFwiZGVwdFRhZ1wiOlwiXCIsXCJsb2dpblR5cGVcIjpcIlBDXCIsXCJtYWluRGVwdENvZGVcIjpcIjAwMlwiLFwibWFuYWdlclwiOnRydWUsXCJuYW1lXCI6XCLotoXnuqfnrqHnkIblkZhcIixcInBob25lXCI6XCIxMzU0MTMwNDkxMFwiLFwicm9sZXNcIjpbXCJyb2xlX3N1cGVyX2FkbWluXCIsXCJ2aXAtYWRtaW5cIl0sXCJzdXBlckFkbWluXCI6dHJ1ZSxcInRvcERlcHRDb2RlXCI6XCIwMDJcIixcInVzZXJJZFwiOjEsXCJ1c2VybmFtZVwiOlwic3VwZXItampsZFwifSIsImp0aSI6ImMxMWQ5ZjJjLTc1ZjItNDM5Yy05NjMzLTliYzU4MTc2NmZmYiIsImV4cCI6MTc0MDY2Mjg2NywiaWF0IjoxNzQwNjQ4NDY3LCJzdWIiOiJDRFdMIiwiaXNzIjoiT0EifQ.-2jv7Vq8pqn8PehIpd1lMXJrSqPsmCfhXp7fddL56qI'
				this.iframaShow = true
				if (val == 0) {
					this.iframaUrl =
						// `https://jy.scjysm.asia:18086/cdwltool/addEmptyLottery?token=${token}&channel=shangye&thirdPartyUrl=http://localhost:9529/#/investigation/index`
						`https://zhgw-uat.028wlkj.com/liuliang/cdwltool/addEmptyLottery?token=${token}&channel=shangye&thirdPartyUrl=http://localhost:9529/#/investigation/index`
				} else if (val == 1) {
					this.iframaUrl =
						`https://zhgw-uat.028wlkj.com/liuliang/cdwltool/addEmptyLottery?token=${token}&id=${this.jiangli.id}&title=活动详情&channel=shangye&thirdPartyUrl=http://localhost:9529/#/investigation/index`
				} else if (val == 2) {
					this.iframaUrl =
						`https://zhgw-uat.028wlkj.com/liuliang/cdwltool/addEmptyLottery?token=${token}&id=${this.jiangli.id}&channel=shangye&thirdPartyUrl=http://localhost:9529/#/investigation/index`
				}

				// window.location.href =
			},
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .bian_css {
		.el-dialog__header {
			padding: 0px;
		}

		.el-input__inner {
			height: 18px;
			border: 0px;
			margin-top: 0px;
		}

		.el-input__inner:hover {
			border: 0px;
		}

		.el-input__inner:focus {
			border: 0px;
		}
	}

	::v-deep .buttonHover:hover {
		color: #3f9b6a !important;
		border-color: #c5e1d2 !important;
		background-color: #ecf5f0 !important;
		outline: none;
	}

	::v-deep .el-pagination__total {
		position: absolute;
		left: 33px;
	}

	::v-deep .diaslog_zhong {
		.el-dialog__body {
			padding: 10px 20px 20px 20px;
		}

		.el-upload--picture-card {
			width: 130px;
			height: 130px;
		}
	}

	::v-deep .el-radio-group {
		.el-radio {
			font-weight: 400;
			height: 29px;
		}
	}

	::v-deep .el-checkbox-group {
		.el-checkbox {
			height: 29px;
		}

		label {
			font-weight: 400;
		}
	}

	.questionnaire {
		width: 100%;
		flex-grow: 1;
		background-color: white;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
		border-radius: 5px;
		box-sizing: border-box;
	}

	.question-title {
		// font-size: 18px;
		color: #000;
		margin-bottom: 10px;
	}

	.question {
		background-color: white;
		padding: 15px;
		margin: 10px 0;
		border-radius: 10px;
	}

	.answerItem {
		width: auto;
		padding: 10px 15px;
		margin: 0 0 5px 10px;
		border-radius: 6px;
		background-color: #f5f7fa;
		display: flex;
		align-items: center;
	}

	// ::v-deep .tongyong_css {
	//   max-height: 850px;

	// }

	// .tongyong_css {
	//   max-height: calc(100vh - 200px); /* Adjust the 200px to the combined height of your header and footer */
	//   overflow-y: auto;
	// }
	::v-deep .xddTable {
		height: 100% !important;

		.el-table__body-wrapper {
			overflow: auto !important;
			height: 100% !important;
		}

		.el-table__body-wrapper is-scrolling-none {
			height: 100% !important;
		}

		.el-table--scrollable-y .el-table__body-wrapper {
			overflow-y: inherit !important;
		}

	}
</style>