<template>
	<view>
		<u-navbar bgColor="#ffffff" :placeholder="true" titleStyle="font-weight:600" title="调班审批" :autoBack="true">
		
		</u-navbar>
		<u-tabs :list="list1" @change="clicktabs" :current="tabIndex" :scrollable="false" lineWidth="27" gutter="25"
			:activeStyle="{
						color: '#1890FF',
						fontWeight: 'bold',
						transform: 'scale(1.25)'
					}" :inactiveStyle="{
						color: '#999999',
						transform: 'scale(1)'
					}" itemStyle=" height: 78rpx;width:80rpx" style="background-color: #fff;white-space: nowrap !important;"></u-tabs>
		<swiper :current="tabIndex" @change="tabChange" :style="fullHeight" class="home-data">
			<swiper-item v-if="isCaptain==='Y'">

				<view v-if="dspList.length === 0"
					style="display: flex;flex-direction: column;align-items: center;justify-content: center;margin-top: 200rpx;">
					<image src="../../../../static/images/none.png" style="width: 316rpx;height: 181rpx;"></image>
					<span style="color: #9f9f9f;margin-top: 30rpx;">暂无记录~</span>
				</view>
				<scroll-view scroll-y="true" enableBackToTop="true" style="height: 100%;">
					<view v-for="(item,index) in dspList" :key="index" style="margin-bottom: 25rpx;"
						@click="gotoShenpi(item.id)">
						<!-- 日期 -->
						<view class="cardTime">{{item.createTime}}</view>
						<!-- 卡片 -->
						<view class="cardInfo">
							<!-- 人员信息 -->
							<view class="cardHead">
								<view class="firstName">{{item.applyTransfer.substring(0,1)}}</view>
								<view>
									<view style="font-weight: bold;font-size: 32rpx;color: #333333;">
										{{item.applyTransfer}}
									</view>
									<view style="font-weight: 400;font-size: 24rpx;color: #999999;">调班申请</view>
								</view>
							</view>
							<!-- 调班信息 -->
							<view class="cardBottom">
								<u-row style="margin-bottom: 20rpx;">
									<u-col span="3" style="color: #7D858E;">调班原因</u-col>
									<u-col span="9" style="color: #333333;">{{item.applyReason}}</u-col>
								</u-row>
								<u-row style="margin-bottom: 20rpx;">
									<u-col span="3" style="color: #7D858E;">代班人</u-col>
									<u-col span="9" style="color: #333333;">{{item.replaceDutyName}}</u-col>
								</u-row>
								<u-row style="margin-bottom: 20rpx;">
									<u-col span="3" style="color: #7D858E;">开始时间</u-col>
									<u-col span="9" style="color: #333333;">{{item.transferBeginDate}}</u-col>
								</u-row>
								<u-row>
									<u-col span="3" style="color: #7D858E;">结束时间</u-col>
									<u-col span="9" style="color: #333333;">{{item.transferEndDate}}</u-col>
								</u-row>
							</view>
							<view style="position: absolute;top: 25rpx;right: 44rpx;" v-if="item.status === '0'">
								<image src="../../../../static/images/fireman/shenhe.png"
									style="width: 206rpx;height: 182rpx">
								</image>
							</view>
							<view style="position: absolute;top: 25rpx;right: 44rpx;" v-if="item.status === '1'">
								<image src="../../../../static/images/fireman/tongguo.png"
									style="width: 206rpx;height: 182rpx">
								</image>
							</view>
							<view style="position: absolute;top: 25rpx;right: 44rpx;" v-if="item.status === '2'">
								<image src="../../../../static/images/fireman/bohui.png"
									style="width: 206rpx;height: 182rpx">
								</image>
							</view>
						</view>
					</view>
				</scroll-view>
			</swiper-item>
			<swiper-item>
				<view v-if="allList.length === 0"
					style="display: flex;flex-direction: column;align-items: center;justify-content: center;margin-top: 200rpx;">
					<image src="../../../../static/images/none.png" style="width: 316rpx;height: 181rpx;"></image>
					<span style="color: #9f9f9f;margin-top: 30rpx;">暂无记录~</span>
				</view>
				<scroll-view scroll-y="true" enableBackToTop="true" style="height: 100%;">
					<view v-for="(item,index) in allList" :key="index" style="margin-top: 25rpx;">
						<!-- 日期 -->
						<view class="cardTime">{{item.createTime}}</view>
						<!-- 卡片 -->
						<view class="cardInfo">
							<!-- 人员信息 -->
							<view class="cardHead">
								<view class="firstName">{{item.applyTransfer.substring(0,1)}}</view>
								<view>
									<view style="font-weight: bold;font-size: 32rpx;color: #333333;">
										{{item.applyTransfer}}
									</view>
									<view style="font-weight: 400;font-size: 24rpx;color: #999999;">调班申请</view>
								</view>
							</view>
							<!-- 调班信息 -->
							<view class="cardBottom">
								<u-row style="margin-bottom: 20rpx;">
									<u-col span="3" style="color: #7D858E;">调班原因</u-col>
									<u-col span="9" style="color: #333333;">{{item.applyReason}}</u-col>
								</u-row>
								<u-row style="margin-bottom: 20rpx;">
									<u-col span="3" style="color: #7D858E;">代班人</u-col>
									<u-col span="9" style="color: #333333;">{{item.replaceDutyName}}</u-col>
								</u-row>
								<u-row style="margin-bottom: 20rpx;">
									<u-col span="3" style="color: #7D858E;">开始时间</u-col>
									<u-col span="9" style="color: #333333;">{{item.transferBeginDate}}</u-col>
								</u-row>
								<u-row>
									<u-col span="3" style="color: #7D858E;">结束时间</u-col>
									<u-col span="9" style="color: #333333;">{{item.transferEndDate}}</u-col>
								</u-row>
							</view>
							<view style="position: absolute;top: 25rpx;right: 44rpx;" v-if="item.status === '0'">
								<image src="../../../../static/images/fireman/shenhe.png"
									style="width: 206rpx;height: 182rpx">
								</image>
							</view>
							<view style="position: absolute;top: 25rpx;right: 44rpx;" v-if="item.status === '1'">
								<image src="../../../../static/images/fireman/tongguo.png"
									style="width: 206rpx;height: 182rpx">
								</image>
							</view>
							<view style="position: absolute;top: 25rpx;right: 44rpx;" v-if="item.status === '2'">
								<image src="../../../../static/images/fireman/bohui.png"
									style="width: 206rpx;height: 182rpx">
								</image>
							</view>
						</view>
					</view>
				</scroll-view>
			</swiper-item>
			<swiper-item>
				<view v-if="tgList.length === 0"
					style="display: flex;flex-direction: column;align-items: center;justify-content: center;margin-top: 200rpx;">
					<image src="../../../../static/images/none.png" style="width: 316rpx;height: 181rpx;"></image>
					<span style="color: #9f9f9f;margin-top: 30rpx;">暂无记录~</span>
				</view>
				<scroll-view scroll-y="true" enableBackToTop="true" style="height: 100%;">
					<view v-for="(item,index) in tgList" :key="index" style="margin-bottom: 25rpx;">
						<!-- 日期 -->
						<view class="cardTime">{{item.createTime}}</view>
						<!-- 卡片 -->
						<view class="cardInfo">
							<!-- 人员信息 -->
							<view class="cardHead">
								<view class="firstName">{{item.applyTransfer.substring(0,1)}}</view>
								<view>
									<view style="font-weight: bold;font-size: 32rpx;color: #333333;">
										{{item.applyTransfer}}
									</view>
									<view style="font-weight: 400;font-size: 24rpx;color: #999999;">调班申请</view>
								</view>
							</view>
							<!-- 调班信息 -->
							<view class="cardBottom">
								<u-row style="margin-bottom: 20rpx;">
									<u-col span="3" style="color: #7D858E;">调班原因</u-col>
									<u-col span="9" style="color: #333333;">{{item.applyReason}}</u-col>
								</u-row>
								<u-row style="margin-bottom: 20rpx;">
									<u-col span="3" style="color: #7D858E;">代班人</u-col>
									<u-col span="9" style="color: #333333;">{{item.replaceDutyName}}</u-col>
								</u-row>
								<u-row style="margin-bottom: 20rpx;">
									<u-col span="3" style="color: #7D858E;">开始时间</u-col>
									<u-col span="9" style="color: #333333;">{{item.transferBeginDate}}</u-col>
								</u-row>
								<u-row>
									<u-col span="3" style="color: #7D858E;">结束时间</u-col>
									<u-col span="9" style="color: #333333;">{{item.transferEndDate}}</u-col>
								</u-row>
							</view>
							<view style="position: absolute;top: 25rpx;right: 44rpx;" v-if="item.status === '0'">
								<image src="../../../../static/images/fireman/shenhe.png"
									style="width: 206rpx;height: 182rpx">
								</image>
							</view>
							<view style="position: absolute;top: 25rpx;right: 44rpx;" v-if="item.status === '1'">
								<image src="../../../../static/images/fireman/tongguo.png"
									style="width: 206rpx;height: 182rpx">
								</image>
							</view>
							<view style="position: absolute;top: 25rpx;right: 44rpx;" v-if="item.status === '2'">
								<image src="../../../../static/images/fireman/bohui.png"
									style="width: 206rpx;height: 182rpx">
								</image>
							</view>
						</view>
					</view>
				</scroll-view>
			</swiper-item>

			<swiper-item>
				<view v-if="bhList.length === 0"
					style="display: flex;flex-direction: column;align-items: center;justify-content: center;margin-top: 200rpx;">
					<image src="../../../../static/images/none.png" style="width: 316rpx;height: 181rpx;"></image>
					<span style="color: #9f9f9f;margin-top: 30rpx;">暂无记录~</span>
				</view>
				<scroll-view scroll-y="true" enableBackToTop="true" style="height: 100%;">
					<view v-for="(item,index) in bhList" :key="index" style="margin-bottom: 25rpx;">
						<!-- 日期 -->
						<view class="cardTime">{{item.createTime}}</view>
						<!-- 卡片 -->
						<view class="cardInfo">
							<!-- 人员信息 -->
							<view class="cardHead">
								<view class="firstName">{{item.applyTransfer.substring(0,1)}}</view>
								<view>
									<view style="font-weight: bold;font-size: 32rpx;color: #333333;">
										{{item.applyTransfer}}
									</view>
									<view style="font-weight: 400;font-size: 24rpx;color: #999999;">调班申请</view>
								</view>
							</view>
							<!-- 调班信息 -->
							<view class="cardBottom">
								<u-row style="margin-bottom: 20rpx;">
									<u-col span="3" style="color: #7D858E;">调班原因</u-col>
									<u-col span="9" style="color: #333333;">{{item.applyReason}}</u-col>
								</u-row>
								<u-row style="margin-bottom: 20rpx;">
									<u-col span="3" style="color: #7D858E;">代班人</u-col>
									<u-col span="9" style="color: #333333;">{{item.replaceDutyName}}</u-col>
								</u-row>
								<u-row style="margin-bottom: 20rpx;">
									<u-col span="3" style="color: #7D858E;">开始时间</u-col>
									<u-col span="9" style="color: #333333;">{{item.transferBeginDate}}</u-col>
								</u-row>
								<u-row>
									<u-col span="3" style="color: #7D858E;">结束时间</u-col>
									<u-col span="9" style="color: #333333;">{{item.transferEndDate}}</u-col>
								</u-row>
							</view>
							<view style="position: absolute;top: 25rpx;right: 44rpx;" v-if="item.status === '0'">
								<image src="../../../../static/images/fireman/shenhe.png"
									style="width: 206rpx;height: 182rpx">
								</image>
							</view>
							<view style="position: absolute;top: 25rpx;right: 44rpx;" v-if="item.status === '1'">
								<image src="../../../../static/images/fireman/tongguo.png"
									style="width: 206rpx;height: 182rpx">
								</image>
							</view>
							<view style="position: absolute;top: 25rpx;right: 44rpx;" v-if="item.status === '2'">
								<image src="../../../../static/images/fireman/bohui.png"
									style="width: 206rpx;height: 182rpx">
								</image>
							</view>
						</view>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>

	</view>
</template>

<script>
	import {
		listInfoForApp
	} from "@/api/fireman/tiaoban.js"
	export default {
		data() {
			return {
				isCaptain: 'N', //是否队长
				allList: [], //我的申请
				tgList: [], //审批通过
				dspList: [], //待审批
				bhList: [], //驳回
				fullHeight: '',
				tabIndex: 0,
				list1: [{
						name: "我的审批"
					}, {
						name: "我的申请"
					},
					{
						name: "审批通过"
					},

					{
						name: '审批驳回'
					}
				],
			};
		},
		mounted() {
			this.getList()
		},
		onReady() {
			let view = uni.createSelectorQuery().select(".home-data");
			view.boundingClientRect(data => {
				this.fullHeight = 'height:' + "calc(100vh - " + (data.top + 120) +
					"rpx)";
			}).exec();
		},
		methods: {
			getList() {
				listInfoForApp().then(res => {
					this.allList = res.allList
					this.tgList = res.tgList
					this.dspList = res.dspList
					this.bhList = res.bhList
					this.isCaptain = res.isCaptain; //是否队长
					if (this.isCaptain == 'N') {
						this.list1 = [{
								name: "我的申请"
							},
							{
								name: "审批通过"
							},

							{
								name: '审批驳回'
							}
						]
					}
					console.log(res, "调班审核");
				})
			},
			// 管理员跳转审批页面
			gotoShenpi(id) {
				this.$tab.navigateTo(`/pages/indexpage/fireMan/shenpi/detail/detail?id=${id}`)
			},
			// tabs点击切换
			clicktabs(e) {
				this.switchTab(e.index);
			},
			// 轮播图切换
			tabChange(e) {
				let index = e.target.current || e.detail.current; // 获取到当前移动到第几个
				this.switchTab(index);
			},
			//优化---当index相同时，不执行代码
			switchTab(index) {
				if (this.tabIndex == index) {
					return;
				} else {
					this.tabIndex = index;
				}
			},
		}

	}
</script>

<style lang="scss" scoped>
	page {
		// padding: 40rpx 30rpx;
		box-sizing: border-box !important;

		.home-data {
			padding: 0 30rpx;
		}

		.cardTime {
			font-family: Noto Sans S Chinese;
			font-weight: 400;
			font-size: 26rpx;
			color: #666666;
			margin-bottom: 28rpx;
		}

		.cardInfo {
			position: relative;
			width: 690rpx;
			height: 385rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 6rpx 8rpx 0rpx rgba(190, 207, 228, 0.4);
			border-radius: 10rpx;

			.cardHead {
				padding: 23rpx 33rpx;
				display: flex;
				border-bottom: 1rpx solid #EEEEEE;

				.firstName {
					width: 70rpx;
					height: 74rpx;
					background: #1890FF;
					border-radius: 10rpx;
					font-family: Noto Sans S Chinese;
					font-weight: bold;
					font-size: 30rpx;
					color: #FFFFFF;
					line-height: 68rpx;
					text-align: center;
					margin-right: 24rpx;

				}
			}

			.cardBottom {
				padding: 29rpx 36rpx;
			}
		}
	}
</style>