<template>
	<view style="width: 100%">
		<view class="u-page">
			<u-subsection mode="button" :list="list" :current="current" @change="handle_subsection_change">
			</u-subsection>
			<!-- 分段器内容-选择模板 -->
			<view v-if="current == 0">
				<u-loading-page :loading="loading" bg-color="#e8e8e8"></u-loading-page>
				<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.templateId" :title="item.templateName"
								:name="item.templateId">
								<u-button slot="right-icon" type="primary" :plain="true"
									@click="handel_template_click(item)" text="创建"></u-button>
							</u-cell>
						</u-cell-group>
						<uni-load-more :status="status" :contentText="loadText" @clickLoadMore="MyonLoad" />
					</u-col>
				</u-row>
			</view>
			<!-- 分段器内容-填写信息 -->
			<view v-if="current == 1">
				<u-loading-page :loading="loading2" bg-color="#e8e8e8"></u-loading-page>
				<u-row customStyle="margin-bottom: 10px ">
					<u-col span="12">
						<u-empty v-if="DataList2.length == 0" mode="list"></u-empty>
						<u-cell-group customStyle="background-color: white;" v-else>
							<u-cell v-for="item in DataList2" :key="item.templateId" :title="item.templateName"
								:name="item.templateId" value="创建">
							</u-cell>
						</u-cell-group>
						<uni-load-more :status="status2" :contentText="loadText2" @clickLoadMore="MyonLoad2" />
					</u-col>
				</u-row>
			</view>
		</view>
	</view>
</template>


<script setup>
	import {
		listAssignDetail,
		getAssignDetail,
		delAssignDetail,
		addAssignDetail,
		updateAssignDetail,
	} from "@/api/elder/questionnaire/assignDetail";

	import {
		listAssign,
		getAssign,
		delAssign,
		addAssign,
		updateAssign,
	} from "@/api/elder/questionnaire/assign";

	import {
		addTemplate,
		delTemplate,
		getTemplate,
		listTemplate,
		updateTemplate,
	} from "@/api/elder/questionnaire/template";

	import {
		listTemplateDetail
	} from "@/api/elder/questionnaire/templateDetail";
	import {
		onLoad,
		onShow,
		onHide,
		onReady
	} from '@dcloudio/uni-app'
	import {
		computed,
		ref,
		reactive,
		onMounted,
	} from 'vue'
	let list = ref(["1.选择模板生成", "2.复制已有调查"])
	let current = ref(0)
	//模板信息
	let form = reactive({
		assignName: "",
		answererName: "",
		answererId: "",
	})
	let queryParams = reactive({
		pageNum: 1,
		pageSize: 10,
	})
	let DataList = ref([])
	let loading = ref(false) //加载中提示框显示
	let show = ref(false) //搜索框显示
	let DataList2 = ref([])
	let loading2 = ref(false) //加载中提示框显示
	let show2 = ref(false) //搜索框显示
	let finished2 = ref(false) //加载更多完结
	let total2 = ref(0) //搜索框显示
	let loadText2 = reactive({
		contentdown: "点击加载更多",
		contentrefresh: "正在加载",
		contentnomore: "没有更多数据了",
	})
	// 计算属性
	let status2 = computed(() => {
		if (DataList.value.length < total.value) {
			return "more";
		} else {
			finished2.value = true;
			return "nomore";
		}
	});
	onShow(() => {
		finished.value = false//重置搜索完结
		queryParams.pageNum = 1; //重置搜索页
		getList();
	})
	// 选项卡切换
	function handle_subsection_change(index) {
		current.value = index;
	}
	/** 查询发起问卷明细列表 */
	function getList() {
		loading.value = true;
		loading2.value = true;
		//获取模板列表
		listTemplate(queryParams).then((response) => {
			console.log("listTemplate", response);
			DataList.value = response.rows;
			total.value = response.total;
			loading.value = false;
		});

		// listAssign(this.queryParams).then((response) => {
		//   this.DataList2 = response.rows;
		//   this.total2 = response.total;
		//   this.loading2 = false;
		//   console.log("listAssign", response);
		// });
	}
	//点击创建
	 async function handel_template_click(item) {
		uni.showLoading({
			title: "创建中...",
		});

		// this.current = 1;
		console.log("handel_template_click", item);
		let 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: [],
		}

		await listTemplateDetail({
			pageNum: 1,
			pageSize: 1000,
			templateId: item.templateId,
		}).then((response) => {
			console.log("listTemplateDetail", response);
			form.elderQuestionnaireAssignDetailList = response.rows;
			form.assignName = item.templateName;
			form.assignType = item.templateType;
		});
		await addAssign(form).then((response) => {
			console.log("addAssign", response);
			uni.hideLoading();
			uni.showToast({
				title: "创建成功",
				icon: "success",
				duration: 2000,
			});
			// this.assignId = response.assignId;
			// this.$tab.navigateTo(
			//   "/pages/WenJuanDiaoCha/Answer/index?assignId=" + this.assignId
			// );
		});
	}
	//分页加载
	function MyonLoad2(e) {
		if (status2 == "more") {
			fetch2();
			finished2.value = true;
			e.detail = {
				status2: "loading",
			};
		}
		return e;
	}

	function fetch2() {
		queryParams2.pageNum = queryParams2.pageNum + 1;
		listAssignDetail(queryParams2).then((response) => {
			DataList2.value = DataList2.value.concat(response.rows);
			total2.value = response.total;
			// this.update_connetStatus();
		});
	}

	function fetch() {
		queryParams.pageNum = queryParams.pageNum + 1;
		listAssignDetail(queryParams).then((response) => {
			DataList.value = DataList.value.concat(response.rows);
			total.value = response.total;
			// this.update_connetStatus();
		});
	}
</script>

<style scoped>
	.custom-style {
		width: 90%;
		font-weight: bolder;
		font-size: 15px;
	}

	.u-slot-title {
		display: flex;
		align-items: center;
		/* 垂直居中 */
	}

	.u-cell-text {
		margin-right: 10px;
		/* 可根据需要调整元素间的间距 */
	}

	.slot-content {
		width: 90%;
		/* 自定义宽度 */
		margin: 0 auto;
		/* 水平居中 */
	}

	.status-col {
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}

	.status-wrapper {
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}
</style>