<template>
	<uni-drawer ref="drawerPicker" mode="right" :width="60" :mask-click="true">
		<scroll-view style="height: 100%;" scroll-y="true" :scroll-top="scrollTop">
			<view class="radio-wrap">
				<view style="width: 100%;display: flex;justify-content: flex-end;">
					<image src="../../static/img/clear.png" class="clearImg" @tap="closeDrawer()">
					</image>
				</view>
				<view class="flex" style="width: 100%;">
					<uni-search-bar placeholder="请输入关键字" bgColor="#EEEEEE" @confirm="confirmSearch"
						@input="blurSearch" />
				</view>
				<radio-group @change="drawerRadioChange" style="width: 100%;">
					<label class="radio-cover" v-for="(item, index) in drawerList"
						:key="index">
						<radio :value="item.value"
							:checked="index == current && current != -1">
						</radio>
						{{ item.value }}
					</label>
					<q-loading mask="true" click="true" ref="loading2"></q-loading>
				</radio-group>
			</view>
		</scroll-view>
	</uni-drawer>
</template>

<script>
    import { deepClone } from '../../common';
	import uniDrawer from '@/uni_modules/uni-drawer/uni-drawer.vue'
	export default {
		data () {
			return {
				scrollTop: 0,
				oldScrollTop: 0,
				current: -1,
				dataType: '',
				drawerList: []
			}
		},
		components: {uniDrawer},
		props: {
			originData: {
				type: Array,
				default: () => {
					return []
				}
			},
		},
		mounted () {
			
		},
		methods: {
			showDrawer (res) {
				if (this.drawerList.length == 0 || this.dataType != res.type) {
					this.drawerList = this.originData
				}
				this.dataType = res.type;
				if (typeof(res.currentValue) != 'undefined') {
					this.drawerList.forEach((ele, index) => {
						if (ele.value == res.currentValue) {
							this.current = index
						}
					})
				}
				this.$refs.drawerPicker.open();
			},
			goTop (e) {
				this.scrollTop = this.oldScrollTop;
			},
			closeDrawer() {
				this.$refs.drawerPicker.close();
			},
			// 展开库存地抽屉
			showStockLocationPicker() {
				this.goTop();
				this.$refs.stockLocationPicker.open();
			},
			blurSearch(val) {
				this.searchDrawerData({
					value: val
				});
			},
			confirmSearch (val) {
				this.searchDrawerData(val);
			},
			drawerRadioChange(e) {
				for (let i = 0; i < this.drawerList.length; i++) {
					if (this.drawerList[i].value == e.detail.value) {
						this.current = i;
						break;
					}
				}
				this.$emit('recall', e.detail.value);
				this.closeDrawer();
			},
			searchDrawerData(result) {
				let _arr = [];
				let _data = this.originData;
				this.current = -1;
				if (result.value == '') {
					this.drawerList = _data;
				} else {
					_data.forEach(ele => {
						if (ele.value.indexOf(result.value.toLocaleUpperCase()) > -1) {
							_arr.push(ele);
						}
					})
					this.drawerList = _arr;
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.uni-searchbar {
		width: 100%;
		padding: 0rpx 0rpx 20rpx 0rpx !important;
	
	}
	
	.rotate-right {
		transform: rotate(-90deg);
	}
	
	.clearImg {
		height: 70rpx;
		width: 70rpx;
		flex-shrink: 0;
	}
	
	/deep/.uni-drawer--right {
		/* #ifdef H5 */
		padding-top: 45px;
		/* #endif */
		/* #ifdef APP-PLUS */
		padding-top: 90px;
		/* #endif */
		box-sizing: border-box;
	}
	
	.radio-wrap {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		box-sizing: border-box;
		padding: 0 20rpx;
	
		.radio-cover {
			width: 100%;
			display: flex;
			align-items: center;
			margin-bottom: 20rpx;
			padding-bottom: 20rpx;
			border-bottom: 1rpx solid #DDDDDD;
	
			&:last-child {
				border-bottom: 0px;
			}
	
			uni-radio {
				margin-right: 10rpx;
			}
		}
	}
</style>