<template>
	<view class="content_box">
		<view class="search-input flex_center">
			<u-search searchIconSize="50" searchIconColor="#FFFFFF" placeholderColor='#FFFFFF' color="#FFFFFF"
				:showAction="false" :placeholder="placeholder" v-model="searchValue" @clickIcon="onRefresh"
				@search="onRefresh" @clear="onRefresh" />
		</view>
		<view class="options">
			<u-radio-group v-model="currentDepartmentId" placement="column" iconPlacement="right">
				<u-radio :customStyle="{padding: '22rpx 40rpx'}" :size="40" :iconSize="32" :labelSize="32"
					:labelColor="currentDepartmentId === item.id ? '#2E75E6' : '#262626'" v-for="(item, index) in datas"
					:key="index" :label="item.name" :name="item.id">
				</u-radio>
			</u-radio-group>
		</view>
		<!-- 底部按钮 -->
		<view class="footer-btns">
			<button class="primary-btn" @click="onConfirm">选择部门</button>
		</view>
	</view>
</template>

<script>
	import {getDepartment} from '../../api/apiList'
	export default {
		data() {
			return {
				datas: [], 
				currentDepartmentId:"",
				placeholder: "请输入搜索部门", //默认提示	
				searchValue: "", //搜索值
				pageNum:1,
                pageSize:20,
                loadMore:true,
			}
		},
		onLoad() {
			this.initData()
		},
		onPullDownRefresh(){
            this.onRefresh();
        },
		onReachBottom() {
			if(this.loadMore){
                this.initData();
                this.loadMore = false;
            }
		},
		methods: {
			initData(){
				this.getDepartmentData()
			},
			getDepartmentData(){
				const { pageNum, pageSize } = this  
                let params = {
                    "args": { pageNum, pageSize,restrictions:[]},
                }	
				if(this.searchValue){
					params.args.restrictions.push({
						"field": "name",
						"type": "LK", //EQ精准匹配，LK模糊匹配
						"value": this.searchValue
					})
				}	
				getDepartment(params).then(res=>{
					uni.stopPullDownRefresh()
                    const data = res.data.data.datas
                    if (data.length > 0) {
                        this.datas = this.datas.concat(data)
                        this.pageNum += 1
                        this.loadMore = true
                    }
				})
			},
			onRefresh() {
                this.pageNum = 1
                this.datas = []
                this.initData()
            },
			onConfirm(){
				let selected = this.datas.find(item=>item.id == this.currentDepartmentId)
				uni.navigateBack({ delta: 1,success:()=>{
					uni.$emit('selectedDepart',selected)
				}})
			}
		}
	}
</script>

<style lang="scss">
	.content_box {
		background-color: #FAFAFA;
		min-height: 100vh;
		.search-input {
			width: 100%;
			position: fixed;
			top: 0;
			z-index: 999;
			height: 128rpx;
			background-color: #2E75E6FF;

			/deep/.u-search__content {
				height: 80rpx;
				margin: 24rpx;
				background-color: rgba(240, 240, 240, .5) !important;

				.u-search__content__input {
					letter-spacing: 4rpx;
					background-color: transparent !important;
				}

				.uicon-close {
					font-size: 28rpx !important;
				}
			}
		}

		.u-radio {
			background-color: #fff;
		}

		.options {
			margin: 130rpx 0 15vh;
		}

		.operation-btn {
			position: fixed;
			bottom: 30;
			width: 100%;
			button{
				width: 80%;
				color: #FFFFFF;
				font-size: 32rpx;
				background-color: #2E75E6FF;
			}
		}
	}
</style>
