<template>
	<div class="home" >
	  <el-row :gutter="20">
		<el-col :span="6">
		  <el-card style="width: 100%;">
			<div class="card-title">
			  <el-input v-model="form.name" placeholder="请输入问卷名称" @keyup.enter="handleKeyUpEnter"></el-input>
			</div>
  
			<el-button type="primary" class="card-add-btn" @click="handleGreat">添加问卷+ </el-button>
			<div style="margin: 20px 0px">
			  <el-radio-group v-model="radioState"  @change="changeState">
				<el-radio-button label="开启" value="1" />
				<el-radio-button label="未开启" value="2" />
				<el-radio-button label="未发布" value="3" />
			  </el-radio-group>
			</div>
			<div class="card-content" ref="cardListRef" @scroll="doScroll">
			  <el-card :class="index === borderIndex?'card-border':''"
				style="padding: 0; position: relative; margin-bottom: 5px;" v-for="(item,index) in planData"
				@click="handleItem(item,index)">
				<!-- <el-switch v-model="switchState"  style="position: absolute; right: 15px; top: 0px;--el-switch-on-color: #a7cef8; --el-switch-off-color: #ff4949" /> -->
				<div class="content-title">
				  <el-icon class="icon-content" :size="20">
					<Phone v-if="item.way === 1" />
					<Message v-if="item.way === 2" />
				  </el-icon>
				  <div class="titleText">{{item.title}}</div>
				</div>
				<div class="content-center">
				  时效:2024.06.28-2024.07.28
				  <!-- {{item.describes}}111 -->
				</div>
				<div>
				  <el-button type="primary" plain>
				   {{isEnd(item)}}
				  </el-button>
				</div>
				<div class="content-bottom">
				  创建人：李四
				</div>
			  </el-card>
			</div>
		  </el-card>
		</el-col>
		<el-col :span="12">
  
		  <el-card style="width: 100%;">
			<div class="page-title">
			  <div class="lf">{{planDetail.title}}</div>
			  <el-button plain type="primary">{{isEnd(planDetail)}}</el-button>
			  
			</div>
			<div class="page-content">
			  {{planDetail.describes}}
			</div>
			<div class="page-describe">
			  <span>创建人：{{planDetail.createuser}}</span>
			  <span>创建时间：{{planDetail.createtime}}</span>
			</div>
			<div>
				<el-button link type="primary"  @click="handleEdit(planDetail)" >编辑问卷</el-button>
				<el-button link type="primary"  @click="getFaBuData(planDetail)" >修改发布信息</el-button>
				<el-button link type="primary" @click="dowQR(planDetail)">下载二维码</el-button>
				<el-button link type="primary" @click="copyFn(planDetail)">复制链接</el-button>
				<el-button link type="danger" @click="deleteFn(planDetail.surveyId)">删除</el-button>
			</div>
			<div class="page-mian">
			  <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
				<el-tab-pane label="问卷详情" name="first">
				  <div class="tabList">
					<fill-out :surveyId="surveyId"></fill-out>
				  </div>
				</el-tab-pane>
				<el-tab-pane label="问卷结果" name="second">
				  <div class="tabList">
					<statistical-analysis :surveyId="surveyId"></statistical-analysis>
				  </div>
				</el-tab-pane>
			  </el-tabs>
			</div>
		  </el-card>
		</el-col>
		<el-col :span="6">
			<el-card style="width: 100%; height: 100%;">
				<ques-patient :surveyId="surveyId"></ques-patient>
			</el-card>
		</el-col>
	  </el-row>
	  <!-- 弹出框 -->
		<el-dialog v-model="faBuDis" title="修改发布信息" width="30%" @close="fabuClose">
			<div>
				<el-form :model="fabuFormData" label-width="120px">
					<!-- <el-form-item label="调研对象" v-show="false">
						<el-radio v-model="fabuFormData.surveyway" :label="公开访问"  value="1"/>
					</el-form-item> -->
					<el-form-item label="访问设置">
						<el-checkbox v-model="fabuFormData.setting" :true-label="1">只能在微信中填写</el-checkbox>
					</el-form-item>
					<el-form-item label="调研时间" @change="changeActive">
						<el-radio-group v-model="fabuFormData.active">
							<el-radio :value="0">停用</el-radio>
							<el-radio :value="1">启动</el-radio>
							<el-radio :value="2">长期</el-radio>
						</el-radio-group>
					</el-form-item>
					<el-form-item label="调研时间" v-if="fabuFormData.active ===1">
						<el-date-picker v-model="fabuFormData.time" type="datetimerange" range-separator="至"
							start-placeholder="开始时间" end-placeholder="结束时间" value-format="YYYY-MM-DD HH:mm:ss" />
					</el-form-item>
					<el-form-item label="提交时弹窗设置">
						<el-checkbox-group v-model="fabuFormData.set">
							<el-checkbox label="输入姓名" />
							<el-checkbox label="输入手机号" />
						</el-checkbox-group>
					</el-form-item>
				</el-form>
			</div>
			<template #footer>
				<el-button @click="faBuDis = false">取消</el-button>
				<el-button type="primary" @click="fabuSub()">确认</el-button>
			</template>
		</el-dialog>

	</div>
  </template>
  
  <script setup name="survey">
  
	import { onMounted, ref } from 'vue';
	import QRCode from 'qrcode';
	import fillOut from '../fillOut';
	import statisticalAnalysis from '../statisticalAnalysis';
	
	import quesPatient from './cpns/quesPatient';
	import { editPageData, getPageListData, getPageDetail,deletePageData } from '@/api/main/system/system';
	import { useRouter } from 'vue-router';
	import { followType, followWay } from "@/utils/commonDic.js";
	import moment from 'moment';
	const { proxy } = getCurrentInstance();
	// 判断状态
	function isEnd (data){
		let oldTime = new Date(data.starttime).getTime();
		let newTime = new Date(data.endtime).getTime();
		let time = new Date().getTime();
		
		if(!data.endtime || !data.starttime){
			return '未发布';
		}

		if(time < oldTime){
			return '未开始';
		}else if(time > newTime){
			return '已结束';
		}else if(time > oldTime && time < newTime){
			return '进行中';
		} 
	}
	const radioState = ref('1') // 0未开始，1进行中，2终止
	const switchState = ref(true)
	const activeName = ref('first')
	const router = useRouter();
	router.afterEach((to, from) => {
	  // 记录用户的浏览记录
	})
	const planParams = ref({
	  pageNum: 1,
	  pageSize: 10,
	  active:'1'
	})
	const form = ref({
	  name: '',
	  type: '',
	  way: '',
	  state: '',
	  beginEffective: '',
	  endEffective: ''
	})
	const borderIndex = ref(0)
	const isdetilBtn = ref(false)
	const iconFlag = ref(true)
	const contentData = ref([])
	const planData = ref([])
	const planDetail = ref({})
	const surveyId = ref()
	const activatedFlag = ref(false)
  
	const drawer = ref(false)
	const direction = ref('rtl')
	function cancelClick() {
	  drawer.value = false
	}

	function getCloseDrawer(){
	  drawer.value = false
	}
  
	const handleClick = (tab, event) => {
	  console.log(tab, event)
	}
	function iconHandle() {
	  console.log("点击")
	  iconFlag.value = !iconFlag.value
	}
	const cardListRef = ref(null)
	onActivated(() => {
	  activatedFlag.value = true
	  surveyId.value = ''
	  planData.value = []
	  geFollowUpList();
	})
	onMounted(() => {
	  planData.value = []
	  geFollowUpList()
	});
	// 发布信息弹框关闭事件
	function fabuClose() {}
	function changeState(e) {
		planParams.value.active = e
		surveyId.value = ''
		planData.value = []
		geFollowUpList()
	}
	function handleKeyUpEnter() {
	  console.log('回车');
	  planParams.value.name = form.value.name
	  planData.value = []
	  geFollowUpList()
	}

	function handleSearch() {
	  iconFlag.value = !iconFlag.value
	  console.log('搜索');
	  planParams.value.name = form.value.name
	  planParams.value.type = form.value.type
	  planParams.value.way = form.value.way
	  planParams.value.state = form.value.state
	  planParams.value.beginEffective = form.value.date1 && moment(form.value.date1[0]).format('YYYY-MM-DD HH:mm:ss')
	  planParams.value.endEffective = form.value.date1 && moment(form.value.date1[1]).format('YYYY-MM-DD HH:mm:ss')
	  planData.value = []
	  geFollowUpList()
	}
	function handleResult() {
	  console.log('重置');
	  form.value.name = ''
	  form.value.type = ''
	  form.value.way = ''
	  form.value.state = ''
	  form.value.date1 = ''
	}
	function geFollowUpList() {
	  getPageListData("/survey/survey", planParams.value).then((res) => {
		if (!surveyId.value) {
		  if (activatedFlag.value) {
			planData.value = []
			// setTimeout(() => {
			// 	surveyId.value = res.data[0].surveyId
			// }, 500)
		  }
		  surveyId.value = res.data[0].surveyId
		  planDetail.value = res.data[0]
		  console.log(surveyId.value)
		}
  
		contentData.value = res.data
		planData.value = planData.value.concat(contentData.value);
		if (planData.value.state === 2) {
		  isdetilBtn.value = false
		} else {
		  isdetilBtn.value = true
		}
	  })
	}
	function handleGreat(item) {
	  router.push({
		path: '/questionnaireManagement/surveyAdd?type=add',
		query: {
			type: 'add',
		},
		meta: { title: '添加问卷' }
	  });
	}
	function handleEdit(item) {
	  router.push({
		path: '/questionnaireManagement/surveyAdd',
		query: {
			type: 'edit',
			id: item.surveyId,
		},
		meta: { title: '编辑问卷' }
	  });
	}
	// 发布弹出框
	const faBuDis = ref(false);
	// 发布表单数据
	const fabuFormData = ref({
		surveyway: 1, //调研方式
		active: 1,
		setting: '', //只能在微信中访问
		time: [],
		set: [],
	})
	// 行数据
	const table = ref({})
	// 发布提交
	function fabuSub() {
		let rowData = table.value

		let params = {
			surveyId: rowData.surveyId,
			surveyway: fabuFormData.value.surveyway,
			active: fabuFormData.value.active,
			setting: fabuFormData.value.setting,
			starttime: fabuFormData.value.time[0],
			endtime: fabuFormData.value.time[1],
			entername: fabuFormData.value.set.includes('输入姓名') ? 1 : 0,
			enterphone: fabuFormData.value.set.includes('输入手机号') ? 1 : 0,
		};
		editPageData('/survey/survey', params).then(data => {
			geFollowUpList()
			proxy.$modal.msgSuccess('发布成功！');
			faBuDis.value = false;
		})
	}
	// 发布回显
	function getFaBuData(v) {
		// fabuFormData.value['active'] = v['active']
		console.log(v)
		if (v['active'] !== null) {
			fabuFormData.value['active'] = v['active']
		} else {
			fabuFormData.value['active'] = 1
		}
		if (v['surveyway'] === 1) {
			fabuFormData.value['surveyway'] = 1
		} else {
			fabuFormData.value['surveyway'] = ''
		}
		if (v['setting'] === 1) {
			fabuFormData.value['setting'] = 1
		} else {
			fabuFormData.value['setting'] = ''
		}
		if (v['starttime']) {
			fabuFormData.value['time'] = [
				v['starttime'],
				v['endtime']
			]
		} else {
			fabuFormData.value['time'] = []
		}
		fabuFormData.value['set'] = [
			v['entername'] === 1 ? '输入姓名' : '',
			v['enterphone'] === 1 ? '输入手机号' : '',
		]
		table.value = v;
		faBuDis.value = true;
	}
	// 删除问卷
	function deleteFn (id){ 
		deletePageData(`/survey/survey/${id}`).then(()=>{
			proxy.$modal.msgSuccess('删除成功！');
			borderIndex.value = 0
			activatedFlag.value = true
			surveyId.value = ''
			planData.value = []
			geFollowUpList();

			
		})
	}
	
	// 复制问卷
	function copyFn(id) {
		router.push(`/questionnaireManagement/surveyAdd?id=${id}&type=copy`)
	}
	// 二维码下载
	async function dowQR(v) {
		const img = await QRCode.toDataURL(returnCopyData(v), {
			width: 200,
			margin: 2,
		});

		console.log(img, 'img');
		let a = document.createElement('a');
		a.setAttribute('href', img);
		a.download = '二维码.png';
		a.click();
		a.remove();

	}
	// 复制链接原始数据
	function returnCopyData(v) {
		return `${getoRigin()}/fillOut?id=${v.surveyId}`;
	}
	// 获取域名
	function getoRigin() {
		return location.origin
	}
	function handleClose(surveyId) {
		proxy.$modal.msgSuccess('关闭成功');
	}
  
	function getPlanDetail(surveyId) {
	  getPageDetail("/SfPlan/sfPlan/" + surveyId).then((res) => {
		planDetail.value = res.data
	  })
	}
  
	function handleItem(item, index) {
	  borderIndex.value = index
	  planDetail.value = item
	  surveyId.value = item.surveyId
	  if (planDetail.value.state === 2) {
		isdetilBtn.value = false
	  } else {
		isdetilBtn.value = true
	  }
	}
  
	function getPlanState(value) {
	  let resultState = ''
	  switch (Number(value)) {
		case 0:
		  resultState = '未开始'
		  break;
		case 1:
		  resultState = '进行中'
		  break;
		case 2:
		  resultState = '终止'
		  break;
	  }
	  return resultState
	}
  
	function doScroll() {
	  const scrollwrapper = cardListRef.value
	  const { scrollTop, clientHeight, scrollHeight } = scrollwrapper // 获职滚动数据
	  // 判断是否滚动到底部
	  if (scrollTop + clientHeight >= scrollHeight - 10) {
		console.log('滚动到底部', contentData.value.length)
		if (contentData.value.length > 9) {
		  planParams.value.pageNum++
		  geFollowUpList()
		}
  
	  }
	}
  
	
  
  </script>
  
  <style scoped lang="scss">
	
	:deep(.el-drawer__footer) {
	  padding: 0;
	}
	.box-btns {
	  /* box-shadow: 0px -2px 5px rgb(176, 176, 176); */
	  border-top: 1px solid #d9d9d9;
	  padding-top: 10px;
	  height: 50px;
	  text-align: right;
	  width: 100%;
	  background-color: #ffffff;
	}
	.home {
	  padding: 15px;
	  
	  .card-title {
		display: flex;
		line-height: 30px;
		position: relative;
  
		.serach-bottom {
		  position: absolute;
		  padding: 8px;
		  top: 40px;
		  background-color: #ffffff;
		  z-index: 11;
		  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
		  transition: all 0.15s ease;
		}
  
		.iconEl {
		  margin: 6px;
		}
	  }
  
	  .card-add-btn {
		margin: 8px 0px;
		width: 100%;
	  }
  
	  .card-content {
		height: calc(100vh - 320px);
		margin-bottom: 15px;
		scrollbar-width: none;
		/* firefox */
		-ms-overflow-style: none;
		/* IE 10+ */
		overflow-x: hidden;
		overflow-y: auto;
  
		.card-border {
		  border: 1px solid #409EFF;
		  background: #409EFF;
		  .content-title {
			display: flex;
  
			.icon-content {
			  margin-right: 5px;
			  color: #ffffff;
			}
  
			.titleText {
			  font-size: 16px;
			  font-weight: bold;
			  line-height: 24px;
			  color: #ffffff;
			}
		  }
  
		  .content-center {
			color: #ffffff;
			line-height: 40px;
			height: 40px;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			overflow: hidden;
			-webkit-box-orient: vertical;
			font-size: 14px;
		  }
  
		  .content-btn {
			display: flex;
		  }
  
		  .content-progress {
			margin: 8px 0px;
		  }
  
		  .content-bottom {
			display: flex;
			width: 100%;
			font-size: 14px;
			color: #ffffff;
			margin-top: 20px;
  
			.lf {
			  width: 50%;
			  display: inline-block;
			  text-align: left;
			}
  
			.fr {
			  width: 50%;
			  display: inline-block;
			  text-align: right;
			}
		  }
		}
  
		.content-title {
		  display: flex;
  
		  .icon-content {
			margin-right: 5px;
		  }
  
		  .titleText {
			font-size: 16px;
			font-weight: bold;
			line-height: 24px;
		  }
		}
  
		.content-center {
		  line-height: 40px;
		  height: 40px;
		  text-overflow: ellipsis;
		  display: -webkit-box;
		  -webkit-line-clamp: 2;
		  overflow: hidden;
		  -webkit-box-orient: vertical;
		  color: #919191;
		  font-size: 14px;
		}
  
		.content-btn {
		  display: flex;
		}
  
		.content-progress {
		  margin: 8px 0px;
		}
  
		.content-bottom {
		  display: flex;
		  width: 100%;
		  font-size: 14px;
		  color: #919191;
		  margin-top: 20px;
  
		  .lf {
			width: 50%;
			display: inline-block;
			text-align: left;
		  }
  
		  .fr {
			width: 50%;
			display: inline-block;
			text-align: right;
		  }
		}
	  }
  
	  .page-title {
		display: flex;
		line-height: 30px;
		position: relative;
  
		.lf {
		  font-size: 16px;
		  display: inline-block;
		  font-weight: bold;
		  line-height: 38px;
		  height: 38px;
		  margin-right: 15px;
		}
  
		.btn {
		  position: absolute;
		  right: 30px;
		  top: -3px;
		}
	  }
  
	  .page-content {
		line-height: 20px;
		color: #919191;
		font-size: 14px;
	  }
  
	  .page-describe {
		line-height: 38px;
		color: #919191;
		font-size: 14px;
  
		span {
		  margin-right:15px;
		}
	  }
  
	  .page-mian {
		.tabList {
		  height: calc(100vh - 303px);
		  /* margin-bottom: 15px; */
		  scrollbar-width: none;
		  /* firefox */
		  -ms-overflow-style: none;
		  /* IE 10+ */
		  overflow-x: hidden;
		  overflow-y: auto;
		}
	  }
  
	}
  </style>