<template>
	<view class="search-doorplate"   :class="{ 'search-doorplate--elder': $uiStyle === 'elder' }">
		<view class="search">
			<uni-easyinput
				prefixIcon="search"
				v-model="inputValue"
				confirmType="search"
				placeholder="请输入门牌关键字"
				@clear="clear"
				@confirm="confirm">
			</uni-easyinput>
		</view>
		<view class="doorplate-list">
			<view class="list" v-for="item in doorplateList" :key="item.uuid" @tap="selectDoorplate(item)">
				<uni-icons type="location-filled" size="30"></uni-icons>
				<view class="name">{{ item.bzdz }}</view>
			</view>
			<uni-load-more v-if="showLoadMore" :status="status" :content-text="contentText" @clickLoadMore="clickLoadMore"></uni-load-more>
		</view>
	</view>
</template>

<script>
import { search } from "@/api/control";
import { DOOR_TYPE } from "@/utils/const";
const app = getApp();

export default {
	data() {
		return {
			inputValue: '',
			doorplateList: [],
			total: 0,
			pageIndex: 1,
			pageSize: 20,
			status: '',
			showLoadMore: false,
			contentText: {
				contentdown: '查看更多',
				contentrefresh: '加载中',
				contentnomore: '没有更多'
			}
		};
	},
	methods: {
		search () {
			this.status = 'loading';
			const data = {
				type: 1,
        name: this.inputValue,
        current: this.pageIndex,
        size: this.pageSize,
			}
      search(data).then(res => {
				this.total = res.total;
				this.doorplateList.push(...res.data.doorplateList);
				if (this.total > this.doorplateList.length) {
					this.status = 'more';
				} else {
					this.status = 'noMore';
				}
			}); 
		},
		confirm () {
			this.pageIndex = 1;
			this.doorplateList = [];
			this.showLoadMore = true;
			this.search();
		},
		clickLoadMore() {
			if (this.status === 'more') {
				this.pageIndex += 1;
				this.search();
			}
		},
		clear() {
			this.pageIndex = 1;
			this.doorplateList = [];
			this.showLoadMore = false;
		},
		selectDoorplate (val) {
			let doorplateType = '';
			for (const key in DOOR_TYPE) {
				if (DOOR_TYPE[key].LABEL === val.type) {
					doorplateType = DOOR_TYPE[key].VALUE;
					break;
				}
			}
			app.globalData.options = {
				NBID: '',
				Type: doorplateType,
				code: val.code
			};
			uni.switchTab({
              url: '/pages/home/home'
            });
		}
	}
};
</script>

<style lang="scss" scoped>
	.search-doorplate {
		padding: 15px;
		.search {
			margin-bottom: 10px;
			display: flex;
			justify-content: center;
		}
		.doorplate-list {
			height: calc(100vh - 90px);
			overflow: auto;
			.list {
				display: flex;
				align-items: center;
				height: 45px;
				// line-height: 45px;
				border-bottom: 0.5px solid #c9c5c5;
				.name {
					padding-left: 10px;
					font-size: 15px;
					font-weight: 400;
					color: #999;
				}
			}
		}
	}
	.search-doorplate--elder{
		.doorplate-list{
			.list{
				height: calc(45px * $zlb-elder-font-scale);
				.name {
				 font-size: calc(15px * $zlb-elder-font-scale);
				}
			}
		}
	}
</style>

<style>
	.uni-easyinput {
		width: calc(100% - 30px) !important;
	}
	.is-input-border {
    border-radius: 10px !important;
	}
</style>
