<template>
	<view :class="['content',{'gray':store.isgray==1}]">
		<view class="nav">
			<view class="nav_box f-row aic jcb">
				<view class="menu" @click="showDrawer()">
					<image src="../../static/index/menu.png" mode=""></image>
				</view>
				<view class="weather_calender f-row aic">
					<view class="position f-row aic">
						<image src="../../static/index/position.png" mode=""></image>
						<text>{{!store.position?'暂未定位':store.position}}</text>
					</view>
					<view class="position f-row aic">
						<image style="height:80rpx;width:80rpx;"
							:src="`http://openweathermap.org/img/w/${store.wenduIcon}.png`" mode=""></image>
						<text>{{store.wendu}}℃</text>
					</view>
					<uni-datetime-picker type="date">
						<view class="position f-row aic">
							<image src="../../static/index/calendar.png" mode=""></image>
							<text>{{getTime()}}</text>
						</view>
					</uni-datetime-picker>

				</view>
			</view>
		</view>

		<view class="f-col aic">
			<swiper class="swiper" autoplay>
				<swiper-item v-for="item,i in banner" :key="i" class="swiper-item">
					<image :src="item" mode="aspectFill"></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="wrapper f-col aic">
			<view class="onduty">
				<view class="title f-row aic jcb">
					值班信息
					<view class="more" @click="jump(`/pages/zhiban/index`)">
						查看更多
						<image src="../../static/index/back.png" mode=""></image>
					</view>
				</view>
				<view class="info">
					<view class="info_title f-row aic">
						<view class="">
							日期
						</view>
						<view class="">
							带班领导
						</view>
						<view class="">
							值班领导
						</view>
						<view class="">
							值班干部
						</view>
					</view>
					<view class="data_box">
						<view :class="['data',' f-row', 'aic',{'first':i==0}]" v-for="item,i in zhibanArr">
							<view class="">
								{{item.date}}
							</view>
							<view class="">
								{{item.dbld_dictText}}
							</view>
							<view class="">
								{{item.zbld_dictText}}
							</view>
							<view class="">
								{{item.zbgbrealname}}
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="list_wrapper">
				<view class="">
					<view class="list_title f-row aic jca">
						<view v-for="item,i in tabArr" :class="{'active':current==i}" @click="changeTab(i)">
							{{item}}
						</view>
					</view>
					<view class="f-row aic zhidu" v-if="current==2">
						<view :class="{'active':current_zhidu==0}" @click="changeZhidu(0)">
							厂级制度
						</view>
						<view :class="{'active':current_zhidu==1}" @click="changeZhidu(1)">
							上级制度
						</view>
					</view>
				</view>
				<view style="padding-top: 24rpx;" class="more"
					@click="jump(`/pages/document/index?id=${current}`,current)">
					查看更多
					<image src="../../static/index/back.png" mode=""></image>
				</view>
				<view class="list_box">
					<view class="list" v-for="item,i in list" :key="i"
						@click="jump(`/pages/document/detail?data=${JSON.stringify(item)}&id=${current}`,current,item,'detail')">
						<view class="topic">
							{{item._title}}
						</view>
						<view class="time_Box f-row aic" v-if="item._time||item._depart">
							<view class="time" v-if="item._time">
								{{item._time}}
							</view>
							<view class="look f-row aic" v-if="item._depart">
								{{item._depart}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<uni-drawer ref="showLeft" mode="left" :width="156">
			<view class="menu_list">
				<view class="f-row aic jcb" v-for="item,i in menu" :key="i" @click="totask(item.path)">
					<text>{{item.text}}</text>
					<uni-icons type="right" size="20" color="#333333"></uni-icons>
				</view>
			</view>
		</uni-drawer>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onLoad,
		onShow,
		onPullDownRefresh,
		onReachBottom
	} from '@dcloudio/uni-app';
	import {
		bpmlistApi,
		gonggaolistApi,
		zhibanApi,
		faguiApi,
		cjzhiduApi,
		zhiduApi,
		cxcDapingApi
	} from '@/api/api.js';
	import {
		getUserPermissionApi
	} from '@/api/login.js';
	import customNav from '../../bpm/customNav.vue';
	import {
		useStore
	} from '@/store';
	import {
		beforeJump,
		getTime,
		opendocument,
		preview
	} from '@/utils/index.js';
	const baseurl = import.meta.env.VITE_REQUEST_BASE_URL + '/jeecg-boot'

	const store = useStore();
	onShow(() => {
		// if (!uni.getStorageSync('token')) {
		// 	return uni.navigateTo({
		// 		url: '/pages/login/login'
		// 	})
		// }
		cxcDaping()
		zhiban()
		// bpmlist()
		// gonggaolist()
		// zhidu()
		// fagui()
		getlist()
	})


	const banner = ref([])
	/**轮播图*/
	const cxcDaping = () => {
		cxcDapingApi({
			zslb: 6
		}).then((res) => {
			if (res.success) {
				let arr = res.result.records[0].wenjian.split(',')
				banner.value = arr.map((item) => {
					return baseurl + '/sys/common/static/' + item
				})
			}
		})
	}

	/**公文公告制度法规切换index*/
	const current = ref(0)
	/**厂级制度上级制度index 默认厂级*/
	const current_zhidu = ref(0)
	/**公文公告制度法规*/
	const tabArr = ['公文', '公告', '制度', '法规']
	/**公文公告制度法规切换*/
	const changeTab = (i) => {
		current.value = i
		pageNo = 1
		loading = false
		list.value = []
		getlist()
	}
	/**厂级制度上级制度切换*/
	const changeZhidu = (i) => {
		current_zhidu.value = i
		pageNo = 1
		loading = false
		list.value = []
		zhidu()
	}
	const res = wx.getSystemInfoSync();
	const statusHeight = res.statusBarHeight; //状态栏高度
	const cusnavbarheight = (statusHeight + 44) + "px";
	const showLeft = ref(null)
	const showDrawer = (e) => {
		showLeft.value.open()
	}
	// 关闭窗口
	const closeDrawer = (e) => {
		showLeft.value.close()
	}

	const totask = (url) => {
		closeDrawer()
		jump(url)
	}
	const jump = (url, type, item, page) => {
		// 公告不可进入详情
		if (type && type == 1 && page == 'detail') return
		// 法规点击直接打开附件
		if (type && type == 3 && item) {
			return opendocument(item.mingcheng)
		}
		// 制度查看更多 判断是厂级还是上级
		if (type && type == 2) {
			url = url + `&zhiduid=${current_zhidu.value}`
		}
		beforeJump(url, () => {
			uni.navigateTo({
				url
			})
		})
	}

	const menu = ref([{
		text: '我的任务',
		path: '/pages/task/index?id=0'
	}, {
		text: '组任务',
		path: '/pages/task/index?id=1'
	}, {
		text: '历史任务',
		path: '/pages/task/index?id=2'
	}])
	let pageNo = 1
	let pageSize = 15
	let loading = false
	const list = ref([])
	/**公文接口*/
	const bpmlist = () => {
		loading = true
		bpmlistApi({
			pageNo,
			pageSize
		}).then((res) => {
			console.log('---',res)
			if (res.success) {
				list.value = [...list.value, ...formatObj(res.result.records, 'fwbt', 'fwtime', null)]
			}
			loading = false
		}).catch((err) => {
			console.log('err', err);
		})
	}
	/**公告接口*/
	const gonggaolist = () => {
		loading = true
		gonggaolistApi({
			pageNo,
			pageSize
		}).then((res) => {
			if (res.success) {
				list.value = [...list.value, ...formatObj(res.result.records, 'neirong', 'fbdw', 'createTime')]
			}
			loading = false
		}).catch((err) => {
			console.log('err', err);
		})
	}
	const zhibanArr = ref([])
	/**值班接口*/
	const zhiban = () => {
		zhibanApi().then((res) => {
			if (res.success) {
				zhibanArr.value = res.result.records.slice(0, 2)
			}
		}).catch((err) => {
			console.log('err', err);
		})
	}
	/**法规接口*/
	const fagui = () => {
		loading = true
		faguiApi({
			pageNo,
			pageSize
		}).then((res) => {
			if (res.success) {
				list.value = [...list.value, ...formatObj(res.result.records, 'flfgmc', 'ssbm', null)]

			}
			loading = false
		}).catch((err) => {
			console.log('err', err);
		})
	}
	/**制度接口*/
	const zhidu = () => {
		loading = true
		let getzhidu = current_zhidu.value == 0 ? zhiduApi : cjzhiduApi
		getzhidu({
			pageNo,
			pageSize
		}).then((res) => {
			if (res.success) {
				let str = current_zhidu.value == 0 ? 'zbbm_dictText' : 'sbbm'
				list.value = [...list.value, ...formatObj(res.result.records, 'zdmc', str, null)]
			}
			loading = false
		}).catch((err) => {
			console.log('err', err);
		})
	}
	const formatObj = (arr, title, time, depart) => {
		arr.map((item) => {
			item['_title'] = item[title]
			item['_time'] = item[time]
			item['_depart'] = item[depart]
		})
		return arr
	}
	onPullDownRefresh(() => {
		pageNo = 1
		loading = false
		list.value = []
		cxcDaping()
		zhiban()
		getlist()
		uni.stopPullDownRefresh()
	})

	const getlist = () => {
		if (current.value == 0) {
			bpmlist()
		} else if (current.value == 1) {
			gonggaolist()
		} else if (current.value == 2) {
			zhidu()
		} else if (current.value == 3) {
			fagui()
		}
	}
	onReachBottom(() => {
		if (loading) return
		pageNo++
		getlist()
	})
</script>

<style lang="scss" scoped>
	.content {
		padding-top: v-bind(cusnavbarheight);
	}

	::v-deep .uni-drawer {
		margin-top: v-bind(cusnavbarheight);
	}





	.menu_list {
		padding: 0 30rpx;
		font-size: 28rpx;
		color: #333333;

		view {
			height: 110rpx;
			border-bottom: 1px solid #EFEFEF;
		}

		image {
			width: 13rpx;
			height: 23rpx;
		}
	}

	.nav {
		width: calc(100% - 60rpx);
		padding: 0 30rpx;
		height: v-bind(cusnavbarheight);

		font-size: 24rpx;
		color: #333333;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 99;
		background-image: url('../../static/my/navbg.png');
		background-repeat: no-repeat;
		background-size: 750rpx 458rpx;
	}

	.nav_box {
		position: absolute;
		bottom: 26rpx;
		width: calc(100% - 60rpx);
	}

	.menu {
		image {
			width: 36rpx;
			height: 46rpx;
		}
	}

	.weather_calender {
		image {
			width: 36rpx;
			height: 36rpx;
			margin-right: 8rpx;
		}

		.position:not(:last-child) {
			position: relative;
			margin-right: 60rpx;

			&::after {
				position: absolute;
				content: ' ';
				width: 2rpx;
				height: 20rpx;
				background: #EFEFEF;
				right: -30rpx;
				top: 50%;
				transform: translateY(-50%);
			}
		}
	}

	.swiper {
		width: 100vw;
		height: 400rpx;

		.swiper-item {
			image {
				width: 100vw;
				height: 400rpx;
				background-color: #a8a8a8;
			}
		}
	}

	.wrapper {
		padding: 0 30rpx;
		transform: translateY(-50rpx);

		.onduty {
			background: #FFFFFF;
			box-shadow: 0rpx 2rpx 4rpx 0rpx rgba(0, 0, 0, 0.5);
			border-radius: 16rpx;
			padding: 20rpx 24rpx 24rpx 24rpx;

			.title {
				font-size: 32rpx;
				color: #333333;
				background-size: 44rpx 12rpx;
				background-repeat: no-repeat;
				background-position: left bottom;
			}

			.info {
				background: #F8F8F8;
				border-radius: 8rpx;
				text-align: center;
				width: 642rpx;
				margin-top: 23rpx;

				.info_title {
					font-size: 24rpx;
					color: #333333;
					padding: 24rpx 0;
					border-bottom: 1px solid #EFEFEF;

					view {
						flex: 1;
					}
				}

				.data_box {
					font-size: 24rpx;
					padding-bottom: 24rpx;
					color: #888888;

					.first {
						font-weight: bold;
						color: #333333;
					}

					.data {
						margin-top: 23rpx;

						view {
							flex: 1;
						}
					}
				}
			}

		}

		.more {
			font-size: 24rpx;
			color: #999999;
			text-align: right;

			image {
				width: 10rpx;
				height: 18rpx;
			}
		}

		.list_wrapper {
			background: #FFFFFF;
			box-shadow: 0rpx 2rpx 4rpx 0rpx rgba(0, 0, 0, 0.5);
			border-radius: 16rpx;
			padding: 26rpx 24rpx 24rpx 24rpx;
			position: relative;
			margin-top: 30rpx;
			width: 642rpx;

			&::after {
				position: absolute;
				top: 100rpx;
				left: 0;
				content: ' ';
				width: 100%;
				height: 1px;
				background-color: #EFEFEF;
			}

			.zhidu {
				font-size: 24rpx;
				color: #666666;
				justify-content: flex-end;
				padding-top: 40rpx;

				view {
					width: 120rpx;
					height: 60rpx;
					line-height: 60rpx;
					text-align: center;

					&:first-child {
						margin-right: 40rpx;
					}

				}

				.active {
					position: relative;
					color: #3179d6;

					&::after {
						content: ' ';
						width: 120rpx;
						height: 60rpx;
						border-radius: 60rpx;
						left: 50%;
						top: 50%;
						transform: translate(-50%, -50%);
						position: absolute;
						background-color: rgba(49, 121, 214, 0.1);
					}
				}
			}

			.list_title {

				text-align: center;
				padding-bottom: 29rpx;
				font-size: 32rpx;
				color: #666666;

				.active {
					position: relative;
					color: #3179d6;

					&::after {
						content: ' ';
						width: 120rpx;
						height: 70rpx;
						border-radius: 70rpx;
						left: 50%;
						top: 50%;
						transform: translate(-50%, -50%);
						position: absolute;
						background-color: rgba(49, 121, 214, 0.1);
					}
				}

			}



			.list_box {
				margin-top: 24rpx;

				.list {
					margin-bottom: 24rpx;
					padding: 30rpx 30rpx 35rpx 30rpx;
					// width: 570rpx;
					background: #F8F8F8;
					border-radius: 8rpx;

					.topic {
						font-size: 28rpx;
						color: #333333;
					}

					.time_Box {
						font-size: 24rpx;
						color: #888888;
						margin-top: 20rpx;

						.time {
							margin-right: 62rpx;
						}

						.look {
							position: relative;

							&::before {
								position: absolute;
								left: -30rpx;
								top: 50%;
								transform: translateY(-50%);
								content: ' ';
								width: 2rpx;
								height: 20rpx;
								background: #999999;
							}
						}

						image {
							width: 28rpx;
							height: 22rpx;
							margin-right: 8rpx;
						}
					}
				}
			}
		}
	}
</style>