<template>
	<view class="workFlow-v">
		<!-- <view class="search-box_sticky">
			
			<view>
				<u-tabs name="tabName" count="tabCount" :list="tabList" :is-scroll="false" :current="tabCurrent"
					@change="fnTabsChange"></u-tabs>
			</view>
		</view> -->
		<view class="search-box_sticky">
			<u-tabs name="tabName" count="tabCount" :list="tabList" :is-scroll="false" :current="tabCurrent"
				@change="fnTabsChange"></u-tabs>
			<view style="text-align: center;color: cadetblue;padding: 1px;">
				<template v-if="tabCurrent == 0">
					<text  @click="openPage('/pages/workFlow/flowLaunch/index')">更多 >>></text>
				</template>
				<template v-else-if="tabCurrent == 1">
					<text  @click="openPage('/pages/workFlow/flowTodo/index')">更多 >>></text>
				</template>
				<template v-else-if="tabCurrent == 2">
					<text  @click="openPage('/pages/workFlow/flowDone/index')">更多 >>></text>
				</template>
				<template v-else>
					<text  @click="openPage('/pages/workFlow/flowCopy/index')">更多 >>></text>
				</template>
			</view>
		</view>
		<template v-if="tabCurrent == 0">
			<flowLaunch />
		</template>
		<template v-else-if="tabCurrent == 1">
			<flowTodo />
		</template>
		<template v-else-if="tabCurrent == 2">
			<flowDone />
		</template>
		<template v-else>
			<flowCopy />
		</template>
	</view>
</template>
<script>
	import {
		// FlowEngineListAll,
		// FlowEnginePageList,
		getFlowTodoCount,
		// FlowJsonList,
	} from "@/api/workFlow/flowEngine";
	import {
		getUsualList
	} from "@/api/apply/apply.js";
	import resources from "@/libs/resources.js";
	// import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	// import IndexMixin from "./mixin.js";
	import flowLaunch from "../workFlow/flowLaunch";
	import flowTodo from "../workFlow/flowTodo";
	import flowDone from "../workFlow/flowDone";
	import flowCopy from "../workFlow/flowCopy";
	import {
		mapGetters
	} from "vuex";
	export default {
		// mixins: [MescrollMixin, IndexMixin],
		mixins: [],
		components: {
			flowLaunch,
			flowTodo,
			flowDone,
			flowCopy
		},
		data() {
			return {
				// selector: [],
				// show: false,
				// activeFlow: {},
				// templateList: [],
				// count: 0,
				// offset: [-12, 55],
				// usualList: [],
				// downOption: {
				// 	use: true,
				// 	auto: true,
				// },
				// className: "",
				// upOption: {
				// 	page: {
				// 		num: 0,
				// 		size: 50,
				// 		time: null,
				// 	},
				// 	empty: {
				// 		use: true,
				// 		icon: resources.message.nodata,
				// 		tip: "暂无数据",
				// 		fixed: false,
				// 		top: "560rpx",
				// 	},
				// 	textNoMore: "没有更多数据",
				// },
				// keyword: "",
				// category: "",
				// current: 0,
				// categoryList: [{
				// 	fullName: "全部流程",
				// }, ],
				// list: [],
				// fullName: "",
				// 
				// loading: false,
				// selectFlowValue: 0,
				// enCode: "",
				loading: false,
				tabList: [{
					tabName: '我发起的'
				}, {
					tabName: '待办事宜',
					tabCount: 0
				}, {
					tabName: '已办事宜',
				}, {
					tabName: '抄送我的'
				}],
				tabCurrent: 0
			};
		},
		onLoad() {
			uni.$on("updateUsualList", (data) => {
				this.getUsualList();
			});
			this.getPaymentMethodOptions();
			uni.$on("refresh", () => {
				this.list = [];
				this.current = 0;
				this.mescroll.resetUpScroll();
			});
		},
		onUnload() {
			// uni.$off("updateUsualList");
		},
		onShow() {
			// this.keyword = ""
			this.setFlowTodoCount()
		},
		methods: {
			fnTabsChange(index) {
				this.tabCurrent = index;
			},
			setFlowTodoCount() {
				const query = {
					flowCirculateType: [],
					flowDoneType: [],
					toBeReviewedType: [],
				}
				getFlowTodoCount(query).then((res) => {
						this.count = res.data.toBeReviewed || 0;
						this.tabList[1]['tabCount'] = this.count;
					})
					.catch(() => {});
			},
			openPage(path) {
				if (!path) return;
				uni.navigateTo({
					url: path,
				});
			},
			upCallback(page) {
				this.$nextTick(() => {
					this.getUsualList();
				});
				let query = {
					currentPage: page.num,
					pageSize: page.size,
					keyword: this.keyword,
					category: this.category == 0 ? "" : this.category,
					flowType: 0,
				};
				this.loading = false;
				FlowEnginePageList(query, {
						load: page.num == 1,
					})
					.then((res) => {
						let resData = res.data.list || [];
						this.mescroll.endSuccess(resData.length);
						if (page.num == 1) this.list = [];
						const list = resData.map((o) => ({
							show: false,
							...o,
						}));
						this.list = this.list.concat(list);
						this.loading = true;
					})
					.catch(() => {
						this.mescroll.endErr();
					});
			},
			search() {
				this.searchTimer && clearTimeout(this.searchTimer);
				this.searchTimer = setTimeout(() => {
					this.list = [];
					this.mescroll.resetUpScroll();
				}, 300);
			},

			change(index) {
				this.current = index;
				this.fullName = this.categoryList[index].fullName;
				this.category = this.categoryList[index].id ?
					this.categoryList[index].id :
					"";
				this.list = [];
				this.mescroll.resetUpScroll();
			},
			//获取常用
			getUsualList() {
				getUsualList(1).then((res) => {
					this.usualList = res.data.list.map((o) => {
						const objectData = o.objectData ? JSON.parse(o.objectData) : {};
						return {
							...o,
							...objectData,
						};
					});
				});
			},
			getPaymentMethodOptions() {
				this.$store
					.dispatch("base/getDictionaryData", {
						sort: "WorkFlowCategory",
					})
					.then((res) => {
						res.forEach((i) => {
							this.categoryList.push(i);
						});
					});
			},
			moreApp() {
				uni.navigateTo({
					url: "/pages/workFlow/allApp/index?categoryList=" +
						encodeURIComponent(JSON.stringify(this.categoryList)),
				});
			},
			confirm(e) {
				this.activeFlow = this.templateList[e[0]];
				this.Jump();
			},
			Jump() {
				const config = {
					id: "",
					flowId: this.activeFlow.id,
					opType: "-1",
					fullName: this.activeFlow.fullName,
					enCode: this.enCode,
				};
				uni.navigateTo({
					url: "/pages/workFlow/flowBefore/index?config=" +
						this.base64.encode(JSON.stringify(config), "UTF-8"),
				});
			},
			handelClick(item, type) {
				this.enCode = item.enCode;
				FlowJsonList(item.id, "1").then((res) => {
					this.templateList = res.data;
					if (!this.templateList.length) {
						this.$u.toast("流程不存在");
					} else {
						if (this.templateList.length > 1) {
							this.show = true;
							this.selector = this.templateList;
						} else {
							this.activeFlow = this.templateList[0];
							this.Jump();
						}
					}
				});
			},
		},
	};
</script>

<style lang="scss">
	page {
		background-color: #f0f2f6;
	}

	.workFlow-v {
		.common-block {
			background: #fff;
			margin-bottom: 20rpx;

			.caption {
				padding-left: 32rpx;
				font-size: 36rpx;
				line-height: 100rpx;
				font-weight: bold;
			}

			.item {
				margin-bottom: 32rpx;
				width: 25%;

				.item-icon {
					width: 88rpx;
					height: 88rpx;
					margin-bottom: 8rpx;
					line-height: 88rpx;
					text-align: center;
					border-radius: 20rpx;
					color: #fff;
					font-size: 56rpx;

					&.more {
						background: #ececec;
						color: #666666;
						font-size: 50rpx;
					}
				}

				.item-text {
					width: 100%;
					text-align: center;
					padding: 0 16rpx;
				}
			}
		}

		.search-box_sticky {
			margin-bottom: 20rpx;

			// .search-box {
			// 	padding: 20rpx;
			// }
		}

		.head-tabs {
			width: 100%;
			padding: 0 32rpx;
			height: 132rpx;
			overflow-x: scroll;

			.head-tabs-item {
				width: 25%;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				font-size: 28rpx;
				color: #303133;
				line-height: 40rpx;
				flex-shrink: 0;
				position: relative;

				.icon-style {
					font-size: 48rpx;
					color: #303133;
					margin-bottom: 24rpx;
				}
			}
		}

		.workFlow-list {
			margin-top: 20rpx;

			.part {
				background: #fff;
				margin-bottom: 20rpx;

				.caption {
					padding-left: 32rpx;
					font-size: 36rpx;
					line-height: 100rpx;
					font-weight: bold;
				}

				.item {
					margin-bottom: 32rpx;
					width: 25%;

					.item-icon {
						width: 88rpx;
						height: 88rpx;
						margin-bottom: 8rpx;
						line-height: 88rpx;
						text-align: center;
						border-radius: 20rpx;
						color: #fff;
						font-size: 56rpx;

						&.more {
							background: #ececec;
							color: #666666;
							font-size: 50rpx;
						}
					}

					.item-text {
						width: 100%;
						text-align: center;
						padding: 0 16rpx;
					}
				}
			}
		}
	}
</style>