<template>
	<view>
		<!-- 详情 -->
		<u-popup v-model="popupShow" mode="center" width="650" :closeable="true" border-radius="10">
			<view style="padding: 60rpx 40rpx 10rpx;">
				<u-form label-width="150" :model="form">
					<u-form-item label="姓名" :required="true"><u-input v-model="form.name" /></u-form-item>
					<u-form-item label="性别" :required="true">
						<u-input placeholder="请选择性别"  disabled @click="sexShow=true" v-model="sexLabel" />
					</u-form-item>
					<u-form-item label="身份证" :required="true"><u-input maxlength="18" v-model="form.idCard" /></u-form-item>
					<u-form-item label="籍贯" :required="true" disabled>
						<u-input placeholder="请选择籍贯" disabled @click="regionOpera=1;regionShow=true" v-model="form.birthPlace" />
					</u-form-item>
					<u-form-item label="联系方式" :required="true">
						<u-input placeholder="请填写联系方式" type="number" maxlength="11"  v-model="form.tel" />
					</u-form-item>
					<u-form-item label="所属小区" :required="true">
						<u-input placeholder="请选择所属小区" :required="true" disabled @click="operaType=1;residentialShow=true" v-model="form.residentialName" />
					</u-form-item>
					<u-form-item label="人员类型" disabled :required="true">
						<u-input placeholder="请选择人员类型"   disabled @click="typeShow=true" v-model="typeLabel" />
					</u-form-item>
				</u-form>
				<view @click="submit" class="flex cu-btn bg-blue" style="margin: 60rpx 0 10rpx;padding: 40rpx;">
					提交
				</view>
			</view>
		</u-popup>
		
		
		<u-modal @confirm="faceSubmit" ref="uModal" :async-close="true" v-model="faceShow" title="人脸门禁" confirm-text="确定下发" :show-cancel-button="true">
			<view style="padding: 20rpx 50rpx;">
				<u-form label-width="150">
					<u-form-item label="姓名" >
						<u-input disabled :value="faceItem.name"/>
					</u-form-item>
					<u-form-item label="人脸状态" >
						<text class="text-orange" v-if="faceItem.faceEnable==-1">未上传</text>
						<text class="text-green" v-else-if="faceItem.faceEnable==1">已下发</text>
						<text class="text-red " v-else-if="faceItem.faceEnable==2">已禁用</text>
					</u-form-item>
					
					<u-form-item  label-position="top" label="人脸照片"  required=true>
						<g-upload @chooseFile="chooseFile"  ref="uUpload" max-count="1" :mode="faceItem.imageUri"></g-upload>
					</u-form-item>
				</u-form>
			</view>
		</u-modal>
		<!-- 筛选标签条 -->
		<view class="cu-bar bg-white flex justify-around" style="z-index: 100;width: 100%;position: fixed;top: -2rpx;">
			<view class="u-line-1" @click="showDown(index)" v-for="(item,index) in filterMenu" :key="index"  style="width: 24%;text-align: center;height: 100%;">
				{{data[index]==""? item:data[index]}}
				<u-icon  name="arrow-down-fill" size="20" style="padding-left: 10rpx;"></u-icon>
			</view>
			
			<view class="u-line-1" @click="filterShow=true"   style="width: 26%;position: relative;text-align: center;height: 100%;">
				筛选
				<text class="cuIcon-filter padding-left-10" ></text>
				<u-badge  :offset="[2, 20]"  size="mini" type="error" :count="filterCount"></u-badge>
			</view>
			
			<view class="u-line-1"   style="text-align: center;height: 100%;">
				<view @click="form={};popupShow=true" class="cu-btn radius bg-base sm">
					<text class="cuIcon-add"></text>
					添加
				</view>
			</view>
		</view>
		
		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption">
			<view style="margin-top: 110rpx;">
				<card @openAccess="openAccess" @operFace="operFace" @del="delServiceUser" :list="list"></card>
			</view>
		</mescroll-body>
		
		<!-- 地区选择器 -->
		<u-picker  @confirm="regionConfirm"  mode="region" v-model="regionShow"></u-picker>
		<!-- 小区 -->
		<u-popup  border-radius="60" height="60%"  mode="bottom" v-model="residentialShow">
			<view class="fixed cu-bar search bg-white">
				<view class="search-form round">
					<text class="cuIcon-search"></text>
					<u-input style="width: 90%;" v-model="keyword" type="text" :adjust-position="false" placeholder="请输入关键字搜索" confirm-type="search"/>
				</view>
			</view>
			<scroll-view v-if="!$isEmpty(residentialList)"  style="padding-top: 110rpx;height: 100%;" :scroll-y="true" >
				<view @click="residentailConfirm(item)" hover-class="hoverClass" class="text-center padding-30 solid-bottom"  v-for="(item,index) in residentialList" :key="index">
					<text>{{item.label}}</text>
				</view>
				<u-divider v-if="residentialList.length>=10" height="80">只显示十条数据</u-divider>
			</scroll-view>
			<u-empty v-else name="search"></u-empty>
		</u-popup>
		

		<!-- 筛选 -->
		<u-modal :show-cancel-button="true" cancel-text="重置"   @cancel="reset" @confirm="filterConfirm" title="筛选" :mask-close-able="true" v-model="filterShow" >
			<view class="slot-content" style="margin: 20rpx;">
				<u-form label-width="150" :model="params" ref="uForm">
					<u-form-item  label="电话"><u-input placeholder="请输入电话" v-model="params.tel" /></u-form-item>
					<u-form-item :border-bottom="false" label="姓名"><u-input placeholder="请输入姓名" v-model="params.name" /></u-form-item>
				</u-form>
			</view>
		</u-modal>
		<!-- 性别 -->
		<u-select v-model="sexShow"  @confirm="sexConfirm" :list="sexList"></u-select>
		<!-- 人员类型 -->
		<u-select v-model="typeShow"  @confirm="typeConfirm" :list="typeList"></u-select>
		<!-- 通知alert -->
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import card from "./comps/card.vue"
	import MescrollMixin from "@/components/mescroll-body/mescroll-mixins.js";
	import gUpload from "@/components/g-upload/g-upload.vue"
	let that;
	export default {
		components:{
			card,
			gUpload
		},
		mixins:[MescrollMixin],
		data() {
			return {
				width:480,
				height:320,
				//新增修改详情弹窗
				popupShow:false,
				form:{},
				operaType:0,
				
				//人脸下发
				faceItem:{},
				faceShow:false,
				fileList: [],
				//顶部菜单栏
				filterMenu: ["所属地区","所属小区"],
				data:['','',''],
				
				//地区
				regionOpera:'',
				regionShow:false,
				areaValue:'',
				
				//小区
				residentialShow:false,
				residentialList:[],
				
				//筛选
				filterShow:false,
				filterCount:0,
				
				//性别
				sexLabel:'',
				sexShow:false,
				sexList: [
					{
						value: '1',
						label: '男'
					},
					{
						value: '2',
						label: '女'
					},
					{
						value: '0',
						label: '未知'
					}
				],
				//人员类型
				typeLabel:'',
				typeShow:false,
				typeList: [
					{
						value: '0',
						label: '保安'
					},
					{
						value: '1',
						label: '快递'
					},
					{
						value: '2',
						label: '外卖'
					},
					{
						value: '3',
						label: '保洁'
					},
					{
						value: '4',
						label: '其他'
					}
				],
				//参数
				params:{},
				//小区关键字
				keyword:'',
				
				list: [],
				downOption: { 
					use: true,
					auto: false
				},
				upOption: {
					page: {
						page: 0,
						size: 10
					},
					noMoreSize: 5, 
					empty: {
						tip: '暂无相关数据'
					}
				},
				
			}
		},
		onLoad(){
			that=this
			//获取小区列表
			this.getResidentailList({})
		},
		watch:{
			keyword(){
				let that=this
				//节流函数
				if (this.timer){
					clearTimeout(this.timer)//阻止setTimeout函数的执行
				}
				this.timer = setTimeout(() => {
					that.searchList=[]
					let params = {
						// isSelect: true,
						regionArea: that.areaValue,
						name: that.keyword
					}
					this.getResidentailList(params)
				}, 500)
			}
			
		},
		methods: {
			async faceSubmit(){
				let that=this
				let list=this.$refs.uUpload.lists
				if (this.$isEmpty(list)) {
					that.$u.toast('请上传人脸')
					that.$refs.uModal.clearLoading();
					return
				}
				let base64Res=await this.$mpi.changeBase64(list[0].url)
				let base64='data:image/jpeg;base64,' + base64Res.data
				let uploadRes=await this.$api.uploadBase64(base64)
				let params={
					faceCode:uploadRes.data.md5,
					openPermissionType:1,
					userId:this.faceItem.id,
					imgUri:uploadRes.data.fullPath,
					deviceAccessType:10
				}
				if (!this.$isEmpty(this.faceItem.serverUserFaceImage)) {
					//编辑人脸
					params.imageId=this.faceItem.serverUserFaceImage.id
				}
				let res=await this.$api.serverUser.addOrEditOpenPermission(params)
				if (res.data==true) {
					that.$u.toast('操作成功')
					that.mescroll.resetUpScroll()
					that.faceShow = false;
				}else{
					that.$u.toast(res.msg)
					that.$refs.uModal.clearLoading();
				}
				
			},
			openAccess(item){
				// this.$refs.uUpload.clear()
				this.faceItem=item
				this.faceShow=true
			},
			operFace(params){
				let content=''
				if (params.operType==3) {
					content='是否确定启用人脸'
				}else if (params.operType==5) {
					content='是否确定禁用人脸'
				}
				this.$dialog.showModal(content).then(()=>{
					this.$api.serverUser.accessDevicesManualPush(params).then(res=>{
						if (res.data==true) {
							this.$u.toast('操作成功')
							that.mescroll.resetUpScroll()
						}else{
							that.$u.toast(res.msg)
						}
					})
				})
			},
			delServiceUser(id){
				this.$dialog.showModal('是否确定删除').then(()=>{
					this.$api.serverUser.deleteServerUser(id).then(res=>{
						if (res.data==true) {
							this.$u.toast('操作成功')
							that.mescroll.resetUpScroll()
						}else{
							that.$u.toast(res.msg)
						}
					})
				})
			},
			submit(){
				if (this.$isEmpty(this.form.name)) {
					this.$u.toast('请输入姓名')
					return
				}
				if (this.$isEmpty(this.form.sex)) {
					this.$u.toast('请选择性别')
					return
				}
				if (this.$isEmpty(this.form.idCard)) {
					this.$u.toast('请输入身份证号')
					return
				}
				if (!this.$u.test.idCard(this.form.idCard)) {
					this.$u.toast('请输入正确的身份证号')
					return
				}
				if (this.$isEmpty(this.form.birthPlace)) {
					this.$u.toast('请选择籍贯')
					return
				}
				if (this.$isEmpty(this.form.tel)) {
					this.$u.toast('请输入手机号')
					return
				}
				if (!this.$u.test.mobile(this.form.tel)) {
					this.$u.toast('请输入正确的手机号')
					return
				}
				if (this.$isEmpty(this.form.residentialId) || this.$isEmpty(this.form.residentialName)) {
					this.$u.toast('请选择所属小区')
					return
				}
				if (this.$isEmpty(this.form.type)) {
					this.$u.toast('请选择人员类型')
					return
				}
				this.$api.serverUser.submit(this.form).then(res=>{
					if (res.code==200) {
						this.popupShow=false
						this.$u.toast('添加成功')
						this.mescroll.resetUpScroll()
					}
				})
			},
			//获取小区列表
			getResidentailList(params){
				let list = [];
				this.$api.residential.page(params).then(res=>{
					let list=[]
					res.data.records.forEach(item=>{
						let obj={
							label:item.name,
							value:item.id
						}
						list.push(obj)
					})
					this.residentialList =  list;
				})
			},
			/**
			 * 获取筛选的条件数
			 */
			getFilterCount(){
				let n=0
				console.log(this.areaValue);
				if (!this.$isEmpty(this.areaValue)) {
					//地区
					n++
				}
				if (!this.$isEmpty(this.params.residentialId)) {
					//小区
					n++
				}
				if (!this.$isEmpty(this.params.name)) {
					//楼栋
					n++
				}
				this.filterCount=n
			},
			
			/**
			 * 下拉回调
			 */
			downCallback(){
				setTimeout(()=>{
					this.mescroll.resetUpScroll()
				},1500)
			},
			/**
			 * 上拉回调
			 * @param {Object} mescroll
			 */
			upCallback(mescroll) {
				let params=this.params
				params.current=mescroll.num
				params.size=mescroll.size
				this.getFilterCount()
				try{
					this.$api.serverUser.page(params).then(res=>{
						let data=res.data.records
						let length=data.length
						let total=res.data.total
						mescroll.endBySize(length, total);
						if(mescroll.num == 1) this.list = []; 
						this.list=this.list.concat(data); 
					})
				}catch(e){
					mescroll.endErr();
				}
			},
			/**
			 * 重置
			 */
			reset(){
				//查询数据列表的参数
				this.params={}
				this.data=['','']
				//地区
				this.areaValue=''
				//小区列表
				this.residentialList=[]
				//小区关键字
				this.keyword=''
				//数据列表
				this.list=[],
				this.getResidentailList()
				this.mescroll.resetUpScroll()
			},
			/**
			 * 点击选择小区，重新获取楼栋列表
			 */
			residentailConfirm(res){
				if (this.operaType==0) {
					// 筛选楼栋列表的选择小区
					this.params.residentialId =res.value
					this.data[1] = res.label
					this.residentialShow = false
					this.mescroll.resetUpScroll()
				}else if(this.operaType==1){
					// 添加操作的选择小区
					this.form.residentialName=res.label
					this.form.residentialId=res.value
					this.residentialShow=false
					this.operaType=0
				}
			},
			/**
			 * 顶部菜单选择
			 * @param {Object} index 菜单下标
			 */
			showDown(index){
				if (index==0) {
					//地区
					this.regionShow=true
					return
				}
				if(index==1){
					//小区
					
					this.residentialShow = true;
					return;
				}
			},
			/**
			 * 确认筛选
			 */
			filterConfirm(){
				this.mescroll.resetUpScroll()
			},
			/**
			 * 地区确认回调
			 * @param {Object} object
			 */
			regionConfirm(object){
				let regionProvince=object.province.value+"0000"
				let regionCity=object.city.value+"00"
				let regionArea=object.area.value
				
				if (!this.$isEmpty(this.regionOpera)) {
					//添加
					this.form.regionProvince=regionProvince
					this.form.regionCity=regionCity
					this.form.regionArea=regionArea
					this.form.birthPlace=object.province.label+"-"+object.city.label+"-"+object.area.label
					return
				}
				//查询
				this.areaValue = regionArea
				this.data[0]= object.area.label;
				this.params={
					regionCity,
					regionProvince:regionProvince
				}
				let params = {
					// isSelect: true,
					regionArea: this.areaValue
				};
				this.getFilterCount()
				this.getResidentailList(params);
				this.mescroll.resetUpScroll()
			},
			//性别确认
			sexConfirm(e){
				this.sexLabel=e[0].label
				this.form.sex=e[0].value
			},
			typeConfirm(e){
				this.typeLabel=e[0].label
				this.form.type=e[0].value
			}
		}
	}
</script>

<style>

</style>
