<template>
	<u-sticky>
		<view class="device-top">
			<view class="search">
				<view>
					<view class="search-left" :style="{ width: width + 'rpx'}">
						<slot></slot>
					</view>
				</view>
				<view @click="$emit('openSearchDialog')" class="search-right" v-if="isShowSelect">
					<text>{{ $t('common.screen') }}</text>
					<image src="../../static/shaixuan.png" />
				</view>
			</view>
			<u-line />
			<view class="org" v-if="isShowTree">
				<u-cell @click="$emit('openOrg')" isLink :title="title" :border="false">
					<view slot="label" class="label" style="display: flex; align-items: center;margin-top: 20rpx;">
						<image src="../../static/org.png" style="width: 24rpx;height: 28rpx;"></image>
						<view style="margin-left: 10rpx; color: #666;">
							{{totalText}}
							<text style="margin-left: 20rpx;">{{ total }}</text>
						</view>
					</view>
				</u-cell>
			</view>
		</view>
	</u-sticky>
</template>

<script>
	export default {
		props: {
			isShowSelect:{
				type: Boolean,
				default: true
			},
			isShowTree:{
				type: Boolean,
				default: false
			},
			title:{
				type: String,
				default: ''
			},
			totalText:{
				type: String,
				default: ''
			},
			total:{
				type:Number
			},
			width:{
				type:Number
			}
			
			
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .u-button--primary {
		background-color: #377dff !important;
		border-color: #377dff !important;
	}

	::v-deep .u-button--info {
		background-color: #e3e3e5 !important;
		border-color: #e3e3e5 !important;
	}

	::v-deep .u-cell__right-icon-wrap {
		margin-top: -55rpx !important;
	}

	::v-deep .uni-calendar--fixed {
		bottom: 172rpx !important;
	}

	.pop-no-scroll {
		overflow: hidden;
		position: fixed;
		height: 100%;
		width: 100%;
	}

	.device-top {
		padding: 10rpx 30rpx;
		background-color: #fff;

		.search {
			display: flex;
			justify-content: space-between;
			padding-bottom: 10rpx;

			.search-left {
				width: 580rpx;
				background-color: #f8f9fa;
				border-radius: 200rpx;
			}

			.search-right {
				display: flex;
				align-items: center;

				text {
					color: #333;
					font-size: 14px;
				}

				image {
					width: 40rpx;
					height: 40rpx;
				}
			}
		}
	}
</style>