<template>
	<view class="box-container">
		<u-navbar leftIconSize="25px" height="70px" :titleStyle="{fontWeight:700}" title="添加关注人" @leftClick="leftClick">
		</u-navbar>
		<view class="entry-info">
			<view style="margin-bottom: 40rpx;">
				<u-input :customStyle="{backgroundColor: '#F5F5F5'}" v-model="searchData" @clear="clearData" clearable placeholder="请搜索关注人">
					<template slot="suffix">
						<view @click="search">搜索</view>
					</template>
				</u-input>
			</view>
			<u-checkbox-group v-model="checked" placement="column" @change="checkboxChange" shape="circle">
				<u-checkbox :customStyle="{marginBottom: '8px'}" v-for="(item, index) in checkboxList" :key="index"
					:label="item.optionText" :name="item.optionValue">
				</u-checkbox>
			</u-checkbox-group>
			<button class="btn" @click="saveData">保存</button>
		</view>

	</view>

</template>
<script>
	import Api from '@/api/api.js';
	export default {
		onLoad(op) {
			if (op.data) {
				const resData = JSON.parse(op.data)
				resData.map(item => {
					this.checked.push(item.optionValue)
				})
				this.followDTOList = resData
			}

		},
		onShow() {
			Api.storge.queryEmplDropDown({
				dictCode: "",
				pageNum: 1,
				pageSize: 10000,
				placeholder: {},
				searchKey: "",
				sqlText: ""
			}).then(({
				data
			}) => {
				this.checkboxList = data?.records;
			})
		},
		data() {
			return {
				checked: [],
				// 基本案列数据
				checkboxList: [],
				followDTOList: [],
				searchData:""

			}

		},
		methods: {
			clearData(){
				Api.storge.queryEmplDropDown({
					dictCode: "",
					pageNum: 1,
					pageSize: 10000,
					placeholder: {},
					searchKey: "",
					sqlText: ""
				}).then(({
					data
				}) => {
					this.checkboxList = data?.records;
				})
			},
			search(){
				Api.storge.queryEmplDropDown({
					dictCode: "",
					pageNum: 1,
					pageSize: 10000,
					placeholder: {},
					searchKey: this.searchData,
					sqlText: ""
				}).then(({
					data
				}) => {
					this.checkboxList = data?.records;
				})
			},
			leftClick() {
				uni.$emit('newPages', {
					followDTOList: this.checked,
					checkboxList: this.checkboxList,
					type: 1
				})
				uni.navigateBack()

			},
			saveData() {
				uni.$emit('newPages', {
					followDTOList: this.checked,
					checkboxList: this.checkboxList,
					type: 1
				})
				uni.navigateBack()
			},
			checkboxChange(n) {
				this.followDTOList = [...this.followDTOList, ...n]
			}
		}
	}
</script>
<style lang="scss" scoped>
	.box-container {

		.entry-info {
			width: 90%;
			margin: auto;
			margin-top: 230rpx;

			.btn {
				color: #fff;
				border-radius: 12px;
				font-size: 28rpx;
				margin: 60rpx 0;
				background-color: #1A4F94;
				margin-bottom: 100rpx;
			}



		}

	}
</style>