<template>
	<view class="con-body">
		<view class="con-bg">
			<customHeader ref="customHeaderRef" :title="'我的审批'" :leftFlag="true">
			</customHeader>
			<!-- #ifdef H5 -->
			<view style="height:50rpx"></view>
			<!-- #endif -->

			<!-- 高度来避免头部遮挡 -->
			<view class="top-height"></view>

			<view class="white-bg">
				<view class="tabs-container">
					<view class="search">
						<uni-search-bar class="custom-search" radius="28" placeholder="姓名" clearButton="auto"
							cancelButton="none" bgColor="#6FA2F8" textColor="#ffffff" v-model="searchValue" />
						<button type="default" @click="handleSearch" size="mini" class="btn-search">查询</button>
					</view>

					<view class="tabs-scorll">
						<view class="tabs-header">
							<view v-for="(tab, index) in tabHeaderList" :key="index"
								:class="['tab-item-main', { 'active': activeTabHeader === index }]"
								@click="switchTabHeader(index)">
								{{ tab }}
							</view>
						</view>
					</view>
					<view class="tabs-scorll">
						<view class="tabs-header">
							<view v-for="(tab, index) in tabList" :key="index"
								:class="['tab-item', { 'active': activeTab === index }]" @click="switchTab(index)">
								{{ tab }}
							</view>
						</view>
					</view>

					<view class="white-bg-2" v-for="item in detailList">
						<view class="report-list" @click="showDetail(item)">
							<view class="report-list">
								<view class="title" style="font-size: 30rpx;margin-top: 20rpx;">
									{{ item.typeval == '1' ? '全天' : item.typeval == '2' ? '前半个班次' : '后半个班次' }}

									<label v-if="item.applyType == '请假'" style="float: right;color: #03ca03;">
										{{ item.applyType }}</label>
									<label v-if="item.applyType == '销假'" style="float: right;color: #eaa303;">
										{{ item.applyType }}</label>
								</view>
								<view class="r-list">
									<view class="r-left">姓名</view>
									<view class="r-right">{{ item.applyUserName }} </view>
								</view>
								<view class="r-list">
									<view class="r-left">{{ item.applyType }}日期</view>
									<view class="r-right">{{ item.startDate }} 至 {{ item.endDate }}
										（ <label v-if="item.applyType == '请假'" style="color: #03ca03;">
											{{ item.days.replace('.0', '') }}天</label>
										<label v-if="item.applyType == '销假'" style="color: #eaa303;">
											{{ item.days.replace('.0', '') }}天</label> ）
									</view>
								</view>

								<view class="r-list">
									<view class="r-left">详细说明</view>
									<view v-if="item.reason && item.reason.length <= 18" class="r-right">{{ item.reason
										}}</view>
								</view>
								<view class="r-list" style="margin-top: -30rpx;"
									v-if="item.reason && item.reason.length > 18">
									<view class="r-right">{{ item.reason }}</view>
								</view>

							</view>
							<view class="border-bottom" style="margin: 20rpx 0;"></view>
						</view>
					</view>
					<view class="uni-pagination-box"><uni-pagination show-icon :page-size="pageSize"
							:current="pageCurrent" :total="total" @change="change" /></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import {
	ref,
	onMounted,
	reactive
} from 'vue'
import {
	onShow
} from '@dcloudio/uni-app'
import customHeader from '@/components/customHeader.vue'
import {
	getNavBarPaddingTop
} from '@/utils/system.js'

import {
	getMyReviewList
} from '@/api/crm/activity/activity';

// 获取导航栏高度用于内容区域padding
const navBarPaddingTop = ref(0);
onMounted(() => {
	navBarPaddingTop.value = getNavBarPaddingTop() * 2;
	getlist();
})

onShow(() => {
	uni.$on('isRefresh', function () {
		isRefresh.value = true
		getApplyList();
	})
})

function getApplyList() {
	getlist({
		applyUserName: searchValue.value
	})
}

let isRefresh = ref(false)

let searchValue = ref(null)
// 查询搜索跳转
let handleSearch = () => {
	isRefresh.value = true
	getApplyList();
}

const pageSize = ref(4);
const pageCurrent = ref(1);
const loading = ref(false);
let tabList = ref([])
let tabHeaderList = ref(['待审核', '已审核'])

let total = ref(0);
const totalAll = ref(0);
const totalReview = ref(0);
const totalReviewA = ref(0);
const totalReviewB = ref(0);
const totalReject = ref(0);
const totalPass = ref(0);


let activeTab = ref(0);
let activeTabHeader = ref(0);

let detailList = ref([])
let detailLists = ref([])

//请假
let reviewListA = ref([])
//销假
let reviewListB = ref([])
//驳回
let rejectList = ref([])
//通过
let passList = ref([])
//已审批
let reviewList = ref([])

const getlist = async (param) => {
	loading.value = true

	let res = await getMyReviewList(param);
	detailLists.value = res.rows;
	reviewListA.value = res.rows.filter(t => (t.status == '待审批' || t.status == '审批中') && t
		.applyType == '请假' && t.reviewerIdR == null)
	reviewListB.value = res.rows.filter(t => (t.status == '待审批' || t.status == '审批中') && t
		.applyType == '销假' && t.reviewerIdR == null)

	rejectList.value = res.rows.filter(t => t.status == '驳回' && t.reviewerIdR != null)
	passList.value = res.rows.filter(t => t.status != '驳回' && t.reviewerIdR != null)

	reviewList.value = res.rows.filter(t => t.reviewerIdR != null)

	total.value = res.total

	totalReviewA.value = reviewListA.value.length
	totalReviewB.value = reviewListB.value.length

	totalReview.value = totalReviewA.value + totalReviewB.value
	totalReject.value = rejectList.value.length
	totalPass.value = passList.value.length

	totalAll.value = reviewList.value.length

	if (isRefresh.value == false) {
		switchTabHeader(0)
		switchTab(0)
	}

	if (activeTabHeader.value == 0) {
		tabList.value = ['请假(' + totalReviewA.value + ')', '销假(' + totalReviewB.value + ')']
	} else if (activeTabHeader.value == 1) {
		let all = '全部(' + totalAll.value + ')'
		let pass = '已批准(' + totalPass.value + ')'
		let reject = '已驳回(' + totalReject.value + ')'

		tabList.value = [all, pass, reject]
	}

	change({
		current: 1
	})

	loading.value = false
}

const switchTab = (index) => {
	isRefresh.value = false
	activeTab.value = index

	change({
		current: 1
	})
}

const switchTabHeader = (index) => {
	isRefresh.value = false
	tabList.value = []
	activeTabHeader.value = index

	if (activeTabHeader.value == 0) {
		tabList.value = ['请假(' + totalReviewA.value + ')', '销假(' + totalReviewB.value + ')']
	} else if (activeTabHeader.value == 1) {
		let all = '全部(' + totalAll.value + ')'
		let pass = '已批准(' + totalPass.value + ')'
		let reject = '已驳回(' + totalReject.value + ')'

		tabList.value = [all, pass, reject]
	}

	switchTab(0)
}

// 分页触发
let change = (e) => {
	pageCurrent.value = e.current

	let end = pageSize.value * e.current
	let start = end - pageSize.value

	if (activeTabHeader.value == 0) {
		if (activeTab.value == 0) {
			detailList.value = reviewListA.value.slice(start, end)
			total.value = totalReviewA.value
		} else if (activeTab.value == 1) {
			detailList.value = reviewListB.value.slice(start, end)
			total.value = totalReviewB.value
		}
	} else if (activeTabHeader.value == 1) {
		if (activeTab.value == 0) {
			detailList.value = reviewList.value.slice(start, end)
			total.value = totalAll.value
		} else if (activeTab.value == 1) {
			detailList.value = passList.value.slice(start, end)
			total.value = totalPass.value
		} else if (activeTab.value == 2) {
			detailList.value = rejectList.value.slice(start, end)
			total.value = totalReject.value
		}
	}
}

// 跳转
let showDetail = (item) => {
	uni.navigateTo({
		url: "/pages/business/CRM/leave/reviewDetail?data=" + encodeURIComponent(JSON
			.stringify(item))
	})
}
</script>

<style lang="scss" scoped>
.apply-row {
	margin: 5px;
}

.border-bottom {
	margin: 5px;
	width: 100%;
}

.tabs-header {
	display: flex;
	height: 80rpx;
	background: #fff;
	border-bottom: 1rpx solid #eee;
}

.tab-item {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 28rpx;
	color: #666;
}

.tab-item.active {
	color: #007AFF;
	position: relative;
}

.tab-item.active::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 200rpx;
	height: 4rpx;
	background-color: #007AFF;
}

.tab-item-main {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 30rpx;
	color: #666;
}

.tab-item-main.active {
	color: #007AFF;
	position: relative;
}

.tab-item-main.active::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 300rpx;
	height: 4rpx;
	background-color: #007AFF;
}

:deep(.report-list .r-list) {
	padding: 0.5rem 0;
}

.search {
	display: flex;
}

.search .btn-search {
	border: none;
	background: none;
	line-height: normal;
	color: #666;
	line-height: 56rpx !important;
	padding: 10rpx 0 0;
	text-align: left;
	cursor: pointer;
}

.search .btn-search::after {
	display: none;
}

.search .custom-search {
	width: 80%;

}

.search .custom-search.uni-searchbar {
	padding-right: 0 !important;
}
</style>