<template>
	<view style="width: 100%">
		<view class="u-page">
			<u-loading-page :loading="loading" bg-color="#e8e8e8"></u-loading-page>

			<u-row customStyle="margin: 5px">
				<u-col span="9">
					<u-search style="z-index: 999" :disabled="true" bgColor="rgb(255 255 255)" placeholder="搜索"
						shape="round" @click="handle_SearchBox_click" :showAction="false" :animation="true"></u-search>
				</u-col>
				<u-col span="3">
					<u-button type="primary" @click="handel_plus_click" size="small" shape="circle" class="custom-style"
						plain text="创建">
					</u-button>
				</u-col>
			</u-row>

			<!-- <u-row customStyle="margin: 10px">
				<u-col span="9"></u-col>
				<u-col span="3">
					<u-button type="primary" icon="plus" shape="circle" text="创建问卷"
						@click="handel_plus_click()"></u-button>
				</u-col>
			</u-row>
			<u-row customStyle="margin-bottom: 10px">
				<u-col span="12">
					<u-search style="z-index: 999;" :disabled='true' bgColor="rgb(255 255 255)" placeholder="搜索"
						shape="round" @click="handle_SearchBox_click" :showAction="false" :animation="true"></u-search>
				</u-col>
			</u-row> -->

			<u-popup :show="show" @close="close" @open="open">
				<view style="width: 93%; align-self: center">
					<u--form labelWidth="auto" labelPosition="left" :model="queryParams" :rules="rules" ref="form1">
						<u-form-item label="答题人姓名" prop="applyName" borderBottom ref="item1">
							<u--input inputAlign="center" shape="square" border="none"
								v-model="queryParams.answererName">
							</u--input>
						</u-form-item>
						<u-form-item label="答题人身份证号码" prop="applyIdno" borderBottom ref="item1">
							<u--input inputAlign="center" shape="square" border="none" v-model="queryParams.answererId">
							</u--input>
						</u-form-item>
					</u--form>
					<u-row customStyle="margin:10px">
						<u-col span="12">
							<u-button class="custom-style" type="primary" size="small" @click="handel_search_click">搜索
							</u-button>
						</u-col>
					</u-row>
					<u-row customStyle="margin:10px">
						<u-col span="12">
							<u-button class="custom-style" type="primary" size="small" @click="handel_reset_click">重置
							</u-button>
						</u-col>
					</u-row>
				</view>
			</u-popup>
			<u-row customStyle="margin-bottom: 10px ">
				<u-col span="12">
					<u-empty v-if="DataList.length == 0" mode="list"></u-empty>
					<u-cell-group customStyle="background-color: white;" v-else>
						<u-cell v-for="item in DataList" :key="item.assignId" size="large" isLink clickable
							:title="item.assignName" :value="item.answererName" :name="item.assignId"
							@click="handel_cell_click">
						</u-cell>
					</u-cell-group>
					<uni-load-more :status="status" :contentText="loadText" @clickLoadMore="MyonLoad" />
				</u-col>
			</u-row>
		</view>
	</view>
</template>
<script setup>
	import {
		listAssign,
		getAssign,
		delAssign,
		addAssign,
		updateAssign,
	} from "@/api/elder/questionnaire/assign";
	import {
		onLoad,
		onShow,
		onHide,
		onReady
	} from '@dcloudio/uni-app'
	import {
		computed,
		ref,
		reactive,
		onMounted,
	} from 'vue';
	const form1 = ref(null)
	// import myLoadMore from "@/pages/mixins/myLoadMore";
	// mixins: [myLoadMore],
	// 遮罩层
	let loading = ref(true)
	// 选中数组
	let ids = ref([])
	// 子表选中数据
	let checkedElderQuestionnaireAssignDetail = ref([])
	// 非单个禁用
	let single = ref(true)
	// 非多个禁用
	let multiple = ref(true)
	// 显示搜索条件
	let showSearch = ref(true)
	// 总条数
	let total = ref(0)
	// 发起问卷表格数据
	let DataList = ref([])
	// 发起问卷明细表格数据
	let elderQuestionnaireAssignDetailList = ref([])
	// 弹出层标题
	let title = ref('')
	// 是否显示弹出层
	let open = ref(false)
	// 查询参数

	let queryParams = reactive({
		pageNum: 1,
		pageSize: 10,
		assignName: null,
		assignType: null,
		answererId: null,
		answererName: null,
		assignStatus: null,
		autoRating: null,
		ruleId: null,
		value: null,
		level: null,
		status: null,
	})

	// 表单参数
	let form = reactive({})
	// 表单校验
	let rules = reactive({})
	let show = ref(false) //搜索框显示
	onShow(() => {
		getList()
	})
	/** 查询发起问卷列表 */
	function getList() {
		loading.value = true;
		listAssign(queryParams).then((response) => {
			console.log("listAssign", response);
			DataList.value = response.rows || [];
			total.value = response.total;
			loading.value = false;
		});
	}
	//加载更多合并结果
	function fetch() {
		queryParams.pageNum = queryParams.pageNum + 1; //加载下一页
		listAssign(queryParams).then((response) => {
			if (response.code == 200) {
				DataList.value = DataList.value.concat(
					response.rows.filter(
						(item) => !DataList.value.some((i) => i.assignId === item.assignId)
					)
				);
				total.value = response.total;
			}
		});
	}
	// 取消按钮
	function cancel() {
		open.value = false;
		reset();
	}
	// 表单重置
	function reset() {
		form = {
			assignId: null,
			assignName: null,
			assignType: null,
			answererId: null,
			answererName: null,
			assignStatus: "0",
			autoRating: null,
			ruleId: null,
			value: null,
			level: null,
			status: "0",
			createBy: null,
			createTime: null,
			updateBy: null,
			updateTime: null,
			remark: null,
			spare1: null,
			spare2: null,
			spare3: null,
		};
		elderQuestionnaireAssignDetailList.value = [];
		resetForm("form");
	}
	/** 搜索按钮操作 */
	function handleQuery() {
		queryParams.pageNum = 1;
		getList();
	}
	/** 重置按钮操作 */
	function resetQuery() {
		resetForm("queryForm");
		handleQuery();
	}
	// 多选框选中数据
	function handleSelectionChange(selection) {
		ids.value = selection.map((item) => item.assignId);
		single.value = selection.length !== 1;
		multiple.value = !selection.length;
	}
	/** 新增按钮操作 */
	function handleAdd() {
		reset();
		open.value = true;
		title.value = "添加发起问卷";
	}
	/** 修改按钮操作 */
	function handleUpdate(row) {
		reset();
		const assignId = row.assignId || ids.value;
		getAssign(assignId).then((response) => {
			form = response.data;
			elderQuestionnaireAssignDetailList.value =
				response.data.elderQuestionnaireAssignDetailList;
			open.value = true;
			title.value = "修改发起问卷";
		});
	}
	/** 提交按钮 */
	function submitForm() {
		form1.value.validate((valid) => {
			if (valid) {
				form.elderQuestionnaireAssignDetailList =
					elderQuestionnaireAssignDetailList.value;
				if (form.assignId != null) {
					updateAssign(form).then((response) => {
						// this.$modal.msgSuccess("修改成功");
						uni.$u.toast('修改成功')
						open.value = false;
						getList();
					});
				} else {
					addAssign(form).then((response) => {
						// this.$modal.msgSuccess("新增成功");
						uni.$u.toast('修改成功')
						open.value = false;
						getList();
					});
				}
			}
		});
	}
	/** 删除按钮操作 */
	function handleDelete(row) {
		const assignIds = row.assignId || ids.value;
		this.$modal
			.confirm('是否确认删除发起问卷编号为"' + assignIds + '"的数据项？')
			.then(function() {
				return delAssign(assignIds);
			})
			.then(() => {
				getList();
				// this.$modal.msgSuccess("删除成功");
				uni.$u.toast('删除成功')
			})
			.catch(() => {});
	}
	/** 发起问卷明细序号 */
	function rowElderQuestionnaireAssignDetailIndex({
		row,
		rowIndex
	}) {
		row.index = rowIndex + 1;
	}
	/** 发起问卷明细添加按钮操作 */
	function handleAddElderQuestionnaireAssignDetail() {
		let obj = {};
		obj.orderNum = "";
		obj.value = "";
		obj.level = "";
		obj.required = "";
		obj.status = "";
		elderQuestionnaireAssignDetailList.value.push(obj);
	}
	/** 发起问卷明细删除按钮操作 */
	function handleDeleteElderQuestionnaireAssignDetail() {
		if (checkedElderQuestionnaireAssignDetail.value.length == 0) {
			this.$modal.msgError("请先选择要删除的发起问卷明细数据");
		} else {
			const elderQuestionnaireAssignDetailList =
				elderQuestionnaireAssignDetailList.value;
			const checkedElderQuestionnaireAssignDetail =
				checkedElderQuestionnaireAssignDetail.value;
			elderQuestionnaireAssignDetailList =
				elderQuestionnaireAssignDetailList.value.filter(function(item) {
					return (
						checkedElderQuestionnaireAssignDetail.value.indexOf(item.index) == -1
					);
				});
		}
	}
	/** 复选框选中数据 */
	function handleElderQuestionnaireAssignDetailSelectionChange(selection) {
		checkedElderQuestionnaireAssignDetail.value = selection.map(
			(item) => item.index
		);
	}

	function handel_reset_click() {}

	function handel_search_click() {}

	function close() {}

	function handle_SearchBox_click() {}
	/** 导出按钮操作 */
	function handleExport() {
		download(
			"elder/questionnaire/assign/export", {
				...this.queryParams,
			},
			`assign_${new Date().getTime()}.xlsx`
		);
	}
	//跳转问卷考卷页面
	function handel_cell_click(item) {
		console.log("item", item);
		uni.navigateTo({
			url:"/WenJuanDiaoCha/Detail/index?assignId=" + item.name
		})
		//跳转考试详情页，传输
		// this.$tab.navigateTo(
			
		// );
	}
	//跳转问卷调查创建页
	function handel_plus_click() {
		uni.navigateTo({
			url:'/WenJuanDiaoCha/Add/index'
		})
		// this.$tab.navigateTo("/pages/WenJuanDiaoCha/Add/index");
	}
	//编辑问卷调查考卷
	function handle_EditDatail_click(row) {
		//URl传参跳转
		// this.$router.push({
		// 	name: `AssignDetail`,
		// 	// path: `Evaluation/Question/${row.paperId}`,//这种方式，是在url中传参，所以在跳转的时候，需要在路由中配置path和params
		// 	params: {
		// 		assignId: row.assignId, //这种传参方式，不是在url中传参，而是在路由的params中传参，所以在跳转的时候，需要在路由中配置name和params
		// 	},
		// });
	}
</script>


<style scoped>
	.demo-uni-row {
		margin-bottom: 10px;
		/* QQ、字节小程序文档写有 :host，但实测不生效 */
		/* 百度小程序没有 :host，需要设置block */
		/* #ifdef MP-TOUTIAO || MP-QQ || MP-BAIDU */
		display: block;
		/* #endif */
	}

	/* 支付宝小程序没有 demo-uni-row 层级 */
	/* 微信小程序使用了虚拟化节点，没有 demo-uni-row 层级 */
	/* #ifdef MP-ALIPAY || MP-WEIXIN */
	/deep/ .uni-row {
		margin-bottom: 10px;
	}

	/* #endif */

	.demo-uni-col {
		height: 36px;
		border-radius: 4px;
	}

	.mypage-title {
		font-size: 20px;
		font-weight: 600;
		align-self: center;
	}

	.wrap {
		padding: 12px;
	}

	.demo-layout {
		height: 25px;
		border-radius: 4px;
	}

	.list-cell {
		display: flex;
		box-sizing: border-box;
		width: 100%;
		padding: 10px 24rpx;
		overflow: hidden;
		color: #323233;
		font-size: 14px;
		line-height: 24px;
		background-color: #fff;
	}

	.custom-style {
		width: 90%;
		font-weight: bolder;
		font-size: 15px;
		height: 75rpx;
	}
</style>