<template>
	<view class="pagesCons">
		<view class="tab-body">
			<view class="uTabs">
				<u-tabs-swiper ref="uTabs" :list="tabList" name="dispName" :current="current" @change="tabsChange" :is-scroll="false"
				 swiperWidth="750"></u-tabs-swiper>
			</view>
			<view class="all-filter" v-show="current==2">
				<u-row>
					<text>发起时间</text>
					<view @click="changeSort('createTime')" class="filter-icon">
						<u-icon name="arrow-up-fill" :color="(sortIndex===0)?'#2979ff':'#888888'" size="24"></u-icon>
						<u-icon name="arrow-down-fill" :color="(sortIndex===1)?'#2979ff':'#888888'" size="24"></u-icon>
					</view>
				</u-row>
				<u-row>
					<text>处理时间</text>
					<view @click="changeSort('handleTime')" class="filter-icon">
						<u-icon name="arrow-up-fill" :color="(sortIndex===2)?'#2979ff':'#888888'" size="24"></u-icon>
						<u-icon name="arrow-down-fill" :color="(sortIndex===3)?'#2979ff':'#888888'" size="24"></u-icon>
					</view>
				</u-row>
				<view class="filter" @click="showSearch=true">
					<text>筛选</text>
					<u-icon name="shaixuan" custom-prefix="xd-icon" size="32" color="#888888"></u-icon>
				</view>
			</view>
			<swiper class="check-list" :current="swiperCurrent" @transition="transition" @change="swiperChange" @animationfinish="animationfinish">
				<swiper-item class="swiper-item" v-for="(tabs, index) in tabList" :key="index">
					<scroll-view scroll-y class="scroll-view" @scrolltolower="onreachBottom">
						<view class="check-order-list" v-if="index==current" v-for="(item,sindex) in list" :key="item.id+'-'+sindex"
						 @click="viewRow(item)">
							<view class="check-row">
								<view class="ellipsis-one">{{item.storeName}}</view>
								<view class="createDate">{{item.createDate}}</view>
							</view>
							<view class="check-row">
								<view v-if="item.clsName" class="ellipsis-one">
									{{item.clsName}}
								</view>
								<view v-else class="ygq">
									<u-icon name="info-circle"></u-icon>
									未关联问题项
								</view>
								<view class="text-right">
									<text>{{item.putUserName}}</text>
								</view>
								<view v-if="$hasPermissions('M_backlog_detail_mobile')" class="icon-xian">
									<u-icon name="icon-xian-11" custom-prefix="xd-icon" size="30" color="#888888"></u-icon>
								</view>
							</view>
							<view class="check-row">
								<view>
									{{item.sourceTypeDictValue}}
								</view>
								<view class="text-right">
									<text v-if="item.copyFlag && item.copyFlag == 1" class="mark">
										抄送
									</text>
									<view :class="['status',clsStatus(item.statusDictValue)]">{{item.statusDictValue}}</view>
								</view>
							</view>
						</view>
						<u-empty style="padding-top: 10vh;height: auto;" :text="noDataText" img-width="120" v-if="list.length==0 && status!='loading'"
						 mode="list"></u-empty>
						<view class="list-nomore" v-if="status == 'nomore'">已经到底了</view>
						<view v-if="index==current" style="padding: 20upx;">
							<u-loadmore v-if="total>pageSize || status=='loading'" :status="status" />
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
		<!-- 待办单查询弹框 -->
		<search-modal :visible="showSearch" @refresh="refresh" @close="showSearch=false"></search-modal>
	</view>
</template>

<script>
	import {
		getBackLogList
	} from '@/api/backLog.js'
	import {
		getLookUpDatas,
		listLookUp
	} from '@/api/data'
	import searchModal from './searchModal.vue'
	export default {
		components: {
			searchModal
		},
		data() {
			return {
				showSearch: false, // 是否显示搜索弹框
				searchParams: {}, // 全部查询数据参数
				status: 'loadmore',
				noDataText: '暂无数据',
				background: {
					// 渐变色
					backgroundImage: 'linear-gradient(45deg, rgb(85, 170, 255), rgb(21, 102, 223))'
				},
				tabList: [{
						dispName: '我创建的',
						typeId: 1,
						queryLabel: 'FROM_ME' // tab参数
					},
					{
						dispName: '发给我的',
						typeId: 3,
						queryLabel: 'TO_ME' // tab参数
					},
					{
						dispName: '全部',
						typeId: 2,
						queryLabel: 'ALL' // tab参数
					},
				],
				current: 0,
				swiperCurrent: 0,
				pageNo: 1,
				pageSize: 10,
				list: [],
				total: 0,
				action: 'swiperChange', // 操作类型，上划分页，或左右滑动
				sortField: 'create_time', // 全部  排序字段 默认按发起时间
				sortOrder: 'desc', // 全部  排序字段 默认按发起时间降序
				sortList: [ // 排序列表
					{
						sortField: 'create_time',
						sortOrder: 'asc'
					},
					{
						sortField: 'create_time',
						sortOrder: 'desc'
					},
					{
						sortField: 'handle_time',
						sortOrder: 'asc'
					},
					{
						sortField: 'handle_time',
						sortOrder: 'desc'
					}
				],
				sortIndex: 1, // 排序下标 默认按发起时间降序
			}
		},
		onLoad() {
			if (this.$hasPermissions("B_todoList_new_mobile")) {
				// #ifdef APP-PLUS
				// 设置标题栏按钮
				let currentWebview = this.$scope.$getAppWebview();
				currentWebview.setTitleNViewButtonStyle(0, {
					text: '\ue610 新增',
					fontSize: 16,
					color: '#eee',
					width: '80px',
					fontSrc: '/static/iconfont/iconfont.ttf'
				});
				// #endif
			}
			// 监听新增后刷新
			uni.$on('refreshBL', this.refresh)
			// 监听待办处理后刷新
			uni.$on('refreshBl-handle', this.handleRefresh)
			this.pageInit()
		},
		onUnload() {
			uni.$off('refreshBL', this.refresh)
			uni.$off('refreshBl-handle', this.handleRefresh)
		},
		methods: {
			pageInit() {
				this.sortIndex = 1
				this.searchParams = {}
				this.pageNo = 1
				this.getRow()
			},
			handleRefresh() {
				this.getRow()
			},
			// tabs通知swiper切换
			tabsChange(index) {
				this.swiperCurrent = index;
			},
			swiperChange(event) {
				this.action = 'swiperChange'
				this.status = 'loading'
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				let current = e.detail.current;
				let isCurtab = this.current == current
				if (this.status != "nomore") {
					let loadData = this.action == 'swiperChange' ? !isCurtab : isCurtab;
					if (loadData) {
						this.$refs.uTabs.setFinishCurrent(current);
						this.swiperCurrent = current;
						this.current = current;
						this.resetPage();
					}
				}
			},
			// 全部 排序
			changeSort(type) {
				if (type === 'createTime') {
					this.sortIndex = this.sortIndex === 1 ? 0 : 1
				}
				if (type === 'handleTime') {
					this.sortIndex = this.sortIndex === 2 ? 3 : 2
				}
				this.getRow(1)
			},
			// scroll-view到底部加载更多
			onreachBottom() {
				this.action = 'onreachBottom'
				if (this.list.length < this.total) {
					this.pageNo += 1
					this.getRow()
				} else {
					uni.showToast({
						title: '已经到底了',
						icon: 'none'
					});
					this.status = "nomore"
				}
			},
			// 查询列表
			getRow(pageNo) {
				if (pageNo) {
					this.pageNo = pageNo
				}
				let params = {
					pageNo: this.pageNo,
					pageSize: this.pageSize,
					queryLabel: this.tabList[this.current].queryLabel, // tab分类
				}
				if (params.queryLabel == 'ALL') {
					// 排序字段 create_time  发起时间  handle_time 处理时间
					params.sortField = this.sortList[this.sortIndex].sortField
					// asc 升序    desc 降序
					params.sortOrder = this.sortList[this.sortIndex].sortOrder
					params.statusList = this.searchParams.status ? this.searchParams.status : [] // 状态（pending 待整改 check_pending待审核 finished 整改完成 expired 已过期）
					params.sourceTypeList = this.searchParams.sourceType ? this.searchParams.sourceType : [] // 问题来源（远程巡店 VIDEO_INSPECTION /现场巡店 SPOT_INSPECTION/点检 POINT_INSPECTION /手动创建  MANUAL）
					params.putUserName = this.searchParams.putUserName ? this.searchParams.putUserName : '' // 巡店人
					params.storeName = this.searchParams.storeName ? this.searchParams.storeName : '' // 门店名称
					params.beginDate = this.searchParams.beginDate ? this.searchParams.beginDate : '' // 发起开始时间
					params.endDate = this.searchParams.endDate ? this.searchParams.endDate : '' // 发起结束时间
				}
				this.status = "loading"
				getBackLogList(params).then(res => {
					if (res.status == 200) {
						if (this.pageNo > 1) {
							this.list = this.list.concat(res.data.list || [])
						} else {
							this.list = res.data.list || []
						}
						this.total = res.data.count || 0
					} else {
						this.list = []
						this.total = 0
						this.noDataText = res.message
					}
					this.status = "loadmore"
				})
			},
			resetPage() {
				this.status = 'loading';
				// 上划分页
				if (this.action == 'onreachBottom') {
					this.getRow();
				}
				// 左右切换tab
				if (this.action == 'swiperChange') {
					this.list = [];
					this.getRow(1);
				}
			},
			// 获取查询参数 刷新列表
			refresh(params) {
				// console.log(params,'1111111111')
				this.searchParams = params
				this.getRow(1)
			},
			// 新增页
			onNavigationBarButtonTap(e) {
				uni.navigateTo({
					url: "/pages/toDoList/addBacklog"
				})
			},
			// 详细页
			viewRow(item) {
				if (!this.$hasPermissions('M_backlog_detail_mobile')) {
					return
				}
				// 已完成的
				uni.navigateTo({
					url: "/pages/toDoList/backlogDetail?id=" + item.id
				})
			},
			// 状态颜色处理
			clsStatus(status) {
				if (status == '待审核') {
					return 'dsh'
				}
				if (status == '待整改') {
					return 'dzg'
				}
				if (status == '整改完成') {
					return 'ywc'
				}
				if (status == '已过期') {
					return 'ygq'
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		height: 100%;
		background: #F8F8F8;
	}

	.pagesCons {
		height: 100%;
		background: #F8F8F8;
		display: flex;
		flex-direction: column;

		.text-right {
			text-align: right;
		}

		.tab-body {
			flex: 1;
			display: flex;
			flex-direction: column;

			.uTabs {
				border-bottom: 1px solid #EEEEEE;
				box-shadow: 1px 1px 3px #eeeeee;
			}

			.check-list {
				flex: 1;
				overflow-y: scroll;

				.swiper-item {
					width: 100%;
					height: 100%;
					overflow: hidden;

					.scroll-view {
						width: 100%;
						height: 100%;
						overflow: auto;
					}
				}
			}

			// 全部筛选 
			.all-filter {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-around;
				box-shadow: 1px 1px 3px #EEEEEE;

				.filter-icon {
					display: flex;
					flex-direction: column;
					padding: 20upx;
				}
			}

			// 列表样式
			.check-order-list {
				background: #ffffff;
				padding: 10upx 20upx;
				margin: 25upx;
				border-radius: 6upx;
				box-shadow: 1px 1px 3px #EEEEEE;

				.check-row {
					display: flex;
					align-items: center;
					padding: 20upx 10upx;
					font-size: 28upx;

					.icon-xian {
						text-align: right;
						width: 40upx;
					}

					&:first-child {
						border-bottom: 1px dashed #F8F8F8;

						.createDate {
							color: #666;
							font-size: 26upx;
							margin-left: 10upx;
						}
					}

					&:last-child {
						border-top: 1px dashed #F8F8F8;
					}

					>view {
						&:first-child {
							flex: 1;
						}
					}

					// 抄送标记
					.mark {
						color: #00C1DE;
						padding: 6upx;
						font-size: 24upx;
						border: 1px solid #00C1DE;
						border-radius: 6upx;
						margin-right: 10upx;
					}

					// 状态
					.status {
						display: inline-block;
						width: 200upx;
					}

					.dsh {
						color: red;
					}

					.dzg {
						color: #ff736e;
					}

					.ygq {
						color: #999;
					}

					.ywc {
						color: #10c71e;
					}
				}
			}
		}
	}
</style>
