<template>
	<div>
		<div class="head">
			<el-row>
				<el-form-item>
					当前医院
					<el-select style="margin-left: 8px;" filterable v-model="searchInfo.hospital_id"
						placeholder="所有医嘱大类">
						<el-option v-for="(item, index) in hospital_list" :key="index" :label="item.name"
							:value="item.id" />
					</el-select>
					<el-button type="primary" style="margin-left: 10px;" @click="ChangeHospital()">切换</el-button>
					<el-button type="success" style="margin-left: 10px;" @click="EditClick()">新建问题</el-button>
				</el-form-item>
			</el-row>
			<el-row>
				<el-form-item>
					问卷类型
					<el-radio-group style="margin-left: 8px;" v-model="searchInfo.q_type"
						@change="QuestionBigTypeChange()">
						<el-radio-button :label="2">满意度调查</el-radio-button>
						<el-radio-button :label="1">健康问卷</el-radio-button>
					</el-radio-group>
				</el-form-item>
				<el-form-item>
					<el-button type="warning" style="margin-left: 50px;" @click="Export()">导出用户问卷</el-button>
					
					
				</el-form-item>
			</el-row>
		</div>
		<el-table :data="tableData" style="width: 100%;" row-key="id" v-loading="loading">
			<el-table-column prop="question" label="题目" />
			<el-table-column prop="type" label="类型">
				<template #default="scope">
					<el-tag v-if="scope.row.type==1" class="ml-2" type="success">填空</el-tag>
					<el-tag v-if="scope.row.type==2" class="ml-2">单选</el-tag>
					<el-tag v-if="scope.row.type==3" class="ml-2" type="warning">多选</el-tag>
				</template>
			</el-table-column>
			<el-table-column prop="status" label="状态">
				<template #default="scope">
					<el-tag v-if="scope.row.status==1" class="ml-2" type="success">正常</el-tag>
					<el-tag v-if="scope.row.status==0" class="ml-2" type="danger">关闭</el-tag>
				</template>
			</el-table-column>
			<!-- <el-table-column prop="" label="必填">
				<template #default="scope">
					<el-tag v-if="scope.row.must==1" class="ml-2" type="success">是</el-tag>
					<el-tag v-else class="ml-2">否</el-tag>
				</template>
			</el-table-column> -->
			<el-table-column prop="order" label="排序" />
			<el-table-column prop="created_at" label="创建时间" />
			<el-table-column label="操作">
				<template #default="scope">
					<el-button type="primary" @click="EditClick(scope.row)" :icon="Edit" circle />
					<el-button type="danger" @click="Del(scope.row)" :icon="Delete" circle />
				</template>
			</el-table-column>
		</el-table>
		<el-dialog v-model="dialogVisible" title="编辑题目">
			<div v-loading="loading">
				<el-form :model="QuestionInfo" label-width="80px">
					<el-form-item label="名称">
						<el-input v-model="QuestionInfo.question" style="width: 300px;" />
					</el-form-item>
					<el-form-item label="类型">
						<el-radio-group style="margin-left: 8px;" v-model="QuestionInfo.type"
							@change="QuestionTypeChange">
							<el-radio :label="1">填空</el-radio>
							<el-radio :label="2">单选</el-radio>
							<el-radio :label="3">多选</el-radio>
						</el-radio-group>
					</el-form-item>
					<el-form-item label="内容">
						<el-input v-model="QuestionInfo.Tempcontent" style="width: 300px;" />
						<el-button v-if="QuestionInfo.type==2 ||QuestionInfo.type==3" type="primary"
							style="margin-left: 10px;" @click="QuestionOptionAdd()">添加</el-button>
					</el-form-item>
					<el-form-item>
						<div style="display: flex;flex-direction: column;">
							<div style="display: flex;flex-direction: row;margin-bottom: 4px;" v-for="(item,index) in QuestionInfo.item"
								:key="index">
								<el-input v-model="QuestionInfo.item[index]" style="width: 300px;" />
								<el-button type="primary" plain style="margin-left: 10px;" :disabled="index==0" @click="OptionUp(index)"
									:icon="Top" />
								<el-button type="primary" plain style="margin-left: 10px;" :disabled="index==QuestionInfo.item.length-1" @click="OptionDown(index)"
									:icon="Bottom" />
									<el-button type="danger" plain style="margin-left: 10px;" @click="OptionDel(index)"
										:icon="Delete" />
							</div>

						</div>

					</el-form-item>
					<el-form-item label="状态">
						<el-switch v-model="QuestionInfo.status" size="large" active-text="可用" inactive-text="停用"
							:active-value="1" :inactive-value="0" />
					</el-form-item>
					<el-form-item label="排序">
						<el-input-number v-model="QuestionInfo.order" :min="1" :max="999" />
					</el-form-item>
				</el-form>
			</div>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="dialogVisible = false">取消</el-button>
					<el-button type="primary" @click="AddQuestion()">
						确定
					</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue'
	import {
		ElMessage,ElMessageBox
	} from 'element-plus'
	import {
		HospitalGetEnableList,
		QuestionGetList,QuestionSave,QuestionGetDetail,QuestionDel,QuestionExport
	} from '@/api/api.js'
	import {
		Edit,
		Top,
		Bottom,Delete
	} from '@element-plus/icons-vue'
	let loading = ref(false)
	let tableData = ref([])
	let currentPage = ref(1) //当前页码
	let pageSize = ref(15) //每页数量
	let total = 0 //总数量
	let dialogVisible = ref(false)
	let searchInfo = ref({});
	const PageSizeChange = (e) => { // 修改每页数量
		pageSize.value = e
		GetList()
	}
	const PageCurrentChange = (e) => { //切换页码
		currentPage.value = e
		GetList()
	}
	const ChangeHospital = () => {
		GetList()
	}
	const QuestionBigTypeChange = () => {
		GetList()
		
	}
	//弹框里切换题目类型
	const QuestionTypeChange = () => {
		QuestionInfo.value.Tempcontent = ''
		QuestionInfo.value.item = []
	}
	//弹框里点击添加题目选项
	const QuestionOptionAdd = () => {
		if (QuestionInfo.value.Tempcontent.length > 0) {
			QuestionInfo.value.item.push(QuestionInfo.value.Tempcontent)
			QuestionInfo.value.Tempcontent = ''
		}
	}
	const OptionUp=(index)=>{
		let temp = QuestionInfo.value.item[index-1];
		QuestionInfo.value.item[index-1]=QuestionInfo.value.item[index]
		QuestionInfo.value.item[index]=temp
	}
	const OptionDown=(index)=>{
		let temp = QuestionInfo.value.item[index+1];
		QuestionInfo.value.item[index+1]=QuestionInfo.value.item[index]
		QuestionInfo.value.item[index]=temp
	}
	const OptionDel=(index)=>{
		QuestionInfo.value.item.splice(index, 1);
	}
	let hospital_list = ref([]);
	const GetEnableHospitalList_func = () => {
		loading.value = true
		HospitalGetEnableList().then(res => {
			loading.value = false
			if (res.status) {
				hospital_list.value = res.data.list
				searchInfo.value.hospital_id = res.data.list[0].id
				GetList()
			} else {
				ElMessage.error(res.msg)
			}
		})
	}
	let QuestionInfo = ref({});
	const EditClick = (row='') => {
		dialogVisible.value = true
		QuestionInfo.value.order = 1
		QuestionInfo.value.status = 1
		QuestionInfo.value.Tempcontent = ''
		QuestionInfo.value.item = []
		QuestionInfo.value.id=0
		if(row!=''){
			GetDetail(row.id);
		}
		
		
	}
	//获取详情
	const GetDetail=(id)=>{
		loading.value = true
		QuestionGetDetail({
			id: id
		}).then(res => {
			loading.value = false
			if (res.status) {
				 QuestionInfo.value=res.data
				 if(QuestionInfo.value.type===1){
					 QuestionInfo.value.Tempcontent=res.data.content
				 }else{
					  QuestionInfo.value.item=res.data.content
				 }
				 
			} else {
				ElMessage.error(res.msg)
			}
		})
	}
	const Del=(row)=>{
		 ElMessageBox.confirm(
		    '确定删除吗?',
		    '提示',
		    {
		      confirmButtonText: '确定',
		      cancelButtonText: '取消',
		      type: 'warning',
		    }
		  )
		    .then(() => {
		       loading.value = true
		       QuestionDel({
		       	id: row.id
		       }).then(res => {
		       	loading.value = false
		       	if (res.status) {
		       		  ElMessage({
		       		         type: 'success',
		       		         message: '删除完成',
		       		       })
		       		 GetList()
		       	} else {
		       		ElMessage.error(res.msg)
		       	}
		       })
		    })
	}
	const AddQuestion=()=>{
		QuestionInfo.value.q_type=searchInfo.value.q_type
		QuestionInfo.value.hospital_id=searchInfo.value.hospital_id
		QuestionInfo.value.content=QuestionInfo.value.item
		if(QuestionInfo.value.type===1){
			QuestionInfo.value.content=QuestionInfo.value.Tempcontent
		}
		console.log(QuestionInfo.value);
		loading.value = true
		QuestionSave({
			QuestionInfo: QuestionInfo.value
		}).then(res => {
			loading.value = false
			if (res.status) {
				 dialogVisible.value = false
				 GetList()
			} else {
				ElMessage.error(res.msg)
			}
		})
		
	}
	const GetList = () => {
		loading.value = true
		QuestionGetList({
			searchInfo: searchInfo.value
		}).then(res => {
			loading.value = false
			if (res.status) {
				tableData.value = res.data.list
			} else {
				ElMessage.error(res.msg)
			}
		})
	}
	const Export=()=>{
		loading.value = true
		QuestionExport({
			q_type: searchInfo.value.q_type
		}).then(res => {
			loading.value = false
			if (res.status) {
				 const a = document.createElement('a');
				 a.style.display = 'none';
				 a.href = res.data.url;
				 document.body.appendChild(a);
				 a.click();
			} else {
				ElMessage.error(res.msg)
			}
		})
	}
	onMounted(() => {
		searchInfo.value.q_type = 2
		GetEnableHospitalList_func()

	})
</script>

<style>
</style>