<template>
	<view class="app">
		<u-tabs :list="tabslist" :is-scroll="false" :current="tabscurrent" @change="tabschange" inactive-color='#fff'
			active-color='#fff'></u-tabs>
		<view class="top">
			<u-dropdown active-color='#26A888'>
				<u-dropdown-item v-model="optionindex" :title="optionname" :options="options"
					@change='dropitemchange'></u-dropdown-item>
			</u-dropdown>
			<view class="inputs">
				<!-- <i class="icon"></i> -->
				<!-- <input type="text" name="" id="" class="input" placeholder="搜索" v-model="query.label"> -->
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabslist: [{
					name: '全部工单'
				}, {
					name: '我的工单'
				}, {
					name: '已完成工单',
				}],
				tabscurrent: 0,
				optionindex: 1,
				optionname: '待处理',
				options: [{
					label: '待处理',
					value: 1,
				}, {
					label: '已完成',
					value: 2,
				}],
				query: {
					label: '',
				}
			}
		},
		onLoad() {

		},
		methods: {
			tabschange(index) {
				this.tabscurrent = index;
			},
			dropitemchange(e) {
				this.optionname = this.options.find(m => m.value === e).label
				console.log(e)
			},
		}
	}
</script>

<style lang="scss">
	.app {
		width: 100%;
		// margin: 20rpx auto;
		padding: 0 0 100rpx 0;
		background-color: #fff;
		font-size: 24rpx;

		::v-deep .u-tabs {
			background-color: #18CBB3 !important;
		}

		.top {
			width: 90%;
			margin: 0 auto;
			display: flex;
			height: 84rpx;
			justify-content: space-around;

			.inputs {
				background-color: #fff;
				width: 65%;
				// height: 60rpx;
				// border: 1px solid #F6F6F6;
				height: 0rpx;
				border-radius: 5rpx;
				background-color: #ffffff;
				z-index: 999;
				position: relative;
				top: 50%;
				transform: translateY(-50%);
				background: #F6F6F6;
				border-radius: 38rpx;

				.input {
					margin: 0 auto;
					position: absolute;
					height: 60rpx;
					// top: 8%;
					left: 13%;
					width: 80%;
					font-size: 26rpx;
					color: #000000;
				}

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

			::v-deep .u-flex {
				width: 100% !important;
			}

			::v-deep .u-dropdown__content {
				overflow-y: scroll !important;
				height: 500rpx;

				.u-flex {
					width: 0 !important;
				}
			}

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

			::v-deep .u-dropdown__menu__item {
				width: 100% !important;
			}

			::v-deep .u-cell__value {
				flex: 0;
			}

			::v-deep .u-dropdown {
				:v-deep .u-dropdown__menu {}
			}

			::v-deep .u-cell-box {}
		}
	}
</style>