<template>
	<view class="app">
		<view class="top">
			<view class="inputs">
				<i class="icon"></i>
				<input v-model="wordsName" type="text" name="" id="" class="input" placeholder="请输入企业名称">
			</view>
			<view class="query" @tap='watchwordsName'>
				查询
			</view>
			<u-dropdown>
				<u-dropdown-item v-model="value" :title="title" :options="options" @change='tapdrop(value)'>
				</u-dropdown-item>
			</u-dropdown>
		</view>
		<view class="text">
			{{title}}的工单数为:{{count}}单
		</view>
		<view class="items" v-if="list">
			<uni-table border stripe emptyText="">
				<uni-tr class='toptr'>
					<uni-th width="100">企业名称</uni-th>
					<uni-th width="60">区县</uni-th>
					<uni-th width="60">乡镇/街道</uni-th>
					<uni-th width="100">资料名称</uni-th>
					<uni-th width="60">应提交时间</uni-th>
					<uni-th width="50">逾期天数</uni-th>
					<uni-th width="60">类型</uni-th>
					<!-- <uni-th>工单生成时间</uni-th> -->
				</uni-tr>
				<uni-tr v-for="(item,index) in list" :key='index' class='tr'>
					<uni-td>{{item.enterprisename}}</uni-td>
					<uni-td>{{item.enterpriseareaname}}</uni-td>
					<uni-td>{{item.streetareaname}}</uni-td>
					<uni-td>{{item.doctypename}}</uni-td>
					<uni-td>{{item.plansubmitdate| format}}</uni-td>
					<uni-td>{{item.daycount}}</uni-td>
					<uni-td>{{item.docid==="" || item.docid===null ?'首次未提交':'到期末提交'}}</uni-td>
					<!-- <uni-td>{{item.createtime| format}}</uni-td> -->
				</uni-tr>
			</uni-table>
		</view>
		<u-back-top :scroll-top="scrollTop"></u-back-top>
	</view>
</template>
<script>
	import {
		myTaskList,
	} from '@/api/homepage/index.js'
	export default {
		data() {
			return {
				list: null,
				wordsName: '',
				page: 1,
				limit: 10,
				count: null,
				lisdata: null,
				type: '',
				title: '全部',
				value: 0,
				scrollTop: 0,
				options: [{
						label: '全部',
						value: 0,
					},
					{
						label: '逾期<3天',
						value: 3,
					},
					{
						label: '逾期3-5天',
						value: 1,
					},
					{
						label: '逾期>5天',
						value: 2,
					}
				],
			};
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onLoad(options) {},
		onShow() {
			var that = this
			if (!that.type) {
				that.info();
			}
			try {
				const value = uni.getStorageSync('type');
				if (value == that.type) {
					that.info();
				} else {
					if (value == 1) {
						that.title = '逾期3-5天'
						that.value = 1
					} else if (value == 2) {
						that.title = '逾期>5天'
						that.value = 2
					} else if (value == 3) {
						that.title = '逾期<3天'
						that.value = 3
					} else {
						that.title = '全部'
						that.value = 0
					}
					that.type = value
					that.info();
				}
			} catch (e) {
				that.title = '全部'
				that.value = 0
				that.info();
			}
		},
		filters: {
			format(value) {
				var date = new Date(value);
				var tt = [date.getFullYear(), date.getMonth() + 1, date.getDate()].join('-');
				return tt;
			}
		},
		methods: {
			tapdrop(item) {
				console.log('item', item)
				this.type = item
				if (item == 1) {
					this.title = '逾期3-5天'
					this.value = 1
				} else if (item == 2) {
					this.title = '逾期>5天'
					this.value = 2
				} else if (item == 0) {
					this.title = '全部'
					this.value = 0
				} else if (item == 3) {
					this.title = '逾期<3天'
					this.value = 3
				}
				uni.setStorageSync("type", this.type)
				this.info();
			},
			watchwordsName() {
				this.page = 1;
				myTaskList(this.page, this.limit, this.wordsName, this.type).then(res => {
					this.list = res.data
					this.count = res.count
				})
			},
			info() {
				this.page = 1;
				this.wordsName = ''
				myTaskList(this.page, this.limit, this.wordsName, this.type).then(res => {
					this.list = res.data

					this.count = res.count
				})
			},
		},
		onReachBottom() { //下滑加载
			if (this.list.length >= this.count) {} else {
				this.page++;
				myTaskList(this.page, this.limit, this.wordsName, this.type).then(res => {
					res.data.forEach(e => {
						this.list.push(e)
					})
				})
			}
		},
		onPullDownRefresh() { //下拉刷新
			this.page = 1;
			myTaskList(this.page, this.limit, this.wordsName, this.type).then(res => {
				this.list = res.data
				this.count = res.count
			})
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
	}
</script>

<style lang="scss">
	//css函数 声明函数
	@function tovmin($rpx) {
		//$rpx为需要转换的字号
		@return #{$rpx * 100 / 750}vmin;
	}
	::v-deep .u-cell_title{
		font-size: tovmin(10);
	}
	::v-deep .u-iconfont::before{
		font-size: tovmin(10);

	}

	::v-deep .uni-table {
		// min-width: 100% !important;
		// background-color: #F4F5F7;
	}

	.top::v-deep .u-dropdown__content__mask {
		background: none;
	}

	.top::v-deep .u-dropdown {
		width: 21% !important;
		border: tovmin(1) solid #169BD5;
		border-radius: tovmin(20);
		height: tovmin(65);
		line-height: tovmin(65);
		text-align: center;
		color: #169BD5;
		position: absolute;
		top: tovmin(30);
		left: 78%;
	}

	::v-deep .u-dropdown .u-dropdown__menu .u-dropdown__menu__item .u-flex .u-dropdown__menu__item__arrow .u-icon__icon {
		color: #169BD5 !important;
	}

	::v-deep .u-dropdown .u-dropdown__menu .u-dropdown__menu__item .u-flex .u-dropdown__menu__item__text {
		color: #169BD5 !important;
		font-size: tovmin(24) !important;
	}

	::v-deep .u-dropdown .u-dropdown__menu {
		height: tovmin(65) !important;
	}

	page {
		height: 100%;
	}

	.app {
		margin-top: tovmin(10);
		height: 100%;

		.text {
			float: right;
			margin-right: tovmin(20);
			margin-top: tovmin(-20);
			margin-bottom: tovmin(40);
			font-size: tovmin(22);
			color: grey;
		}

		.items {
			width: 98%;
			margin: 0 auto;
			padding-bottom: tovmin(0);

			.toptr {}
		}

		.querytype {
			border: tovmin(1) solid #169BD5;
			width: 22%;
			border-radius: tovmin(20);
			height: tovmin(65);
			line-height: tovmin(65);
			text-align: center;
			color: #169BD5;
			position: absolute;
			top: tovmin(30);
			left: 75%;

			image {
				width: tovmin(20);
				height: tovmin(12);
				padding-left: tovmin(5);
				margin-bottom: tovmin(3);
			}
		}

		.query {
			font-size: tovmin(24);
			background-color: #169BD5;
			width: 17%;
			border-radius: tovmin(20);
			height: tovmin(65);
			line-height: tovmin(65);
			text-align: center;
			color: #Ffffff;
			position: absolute;
			top: tovmin(30);
			left: 60%;
		}

		.top {
			height: 10%;
			position: relative;
		}

		.inputs {
			box-shadow: tovmin(0) tovmin(9) tovmin(31) tovmin(9) rgba(0, 0, 0, 0.03);
			border: tovmin(1) solid #f0f0f0;
			width: 52%;
			height: tovmin(65);
			margin: tovmin(30) tovmin(0) tovmin(10) 5%;
			// transform: translateX(-50%);
			border-radius: tovmin(20);
			background-color: #Ffffff;
			z-index: 999;
			float: left;
			position: relative;

			.input {
				margin: 0 auto;
				position: absolute;
				height: tovmin(62);
				left: 15%;
				width: 80%;
				font-size: tovmin(26);
				color: #000000;
			}

			.icon {
				background: url(@/static/sousuo.png) no-repeat;
				width: tovmin(30);
				height: tovmin(28);
				background-size: cover;
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				left: 3%;
			}
		}
	}
</style>
