<template>
	<view class="account-management">
		<view>
			<uni-nav-bar left-icon="back" @clickLeft="back" statusBar fixed title="">
				<view class="account-management-title">账号管理</view>
				<view slot="left"></view>
				<view slot="right" class="add-account" @click="addAccount">添加账号</view>
			</uni-nav-bar>
		</view>
		<view class="">
			<scroll-list style="touch-action: none" ref="orderRef" :option="orderOption" @load="orderUp" @refresh="orderDown">
				<view class="account-list" v-for="(item,index) in list" :key="index">
					<view class="account-iamge-width"><image class="list-image" src="/static/imgs/mine/client-default.png" mode=""></image></view>
					<view class="account-text">
						<view class="account-name"><text>{{item.name}}-{{item.title}}</text></view>
						<view class="account-phone"><text>{{item.mobile}}</text></view>
					</view>
					<view class="account-delete" @click="deleteAccount(item)"><text>删除账号</text></view>
				</view>
			</scroll-list>
		</view>
		<uni-popup ref="popup" type="dialog">
		    <uni-popup-dialog type="info" mode="base" title="确认删除该账号？" :duration="2000" :before-close="true" @close="close" @confirm="confirm">
				<view class="account-dialog-text">
					<text>账号删除后无法在使用系统，请谨慎操作</text>
				</view>
			</uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
import { back, go2 } from '@/utils/hook.js'
import { employeeList,deleteEmployee } from '@/apis/setting.js'
export default {
	data() {
		return {
			orderOption: {
				size: 10,
				auto: true,
				emptyText: '暂无用户~',
				background: '#F7F8FA',
				fontSize: '40rpx',
				emptyImage: '/static/imgs/order/order-empty.png'
			},
			params: {
				asc: '',
				desc: '',
				enterpriseId: this.$store.state.companyInfo.id,
			},
			pagination: {
				pageNum: 0, // 初始会执行一次下拉加载
				pageSize: 10
			},
			list:[],
			deleteId:''
		}
	},
	onShow() {
		this.getList()
	},
	methods: {
		back,
		addAccount() {
			go2('add-account')
		},
		deleteAccount(item){
			// deleteEmployee
			this.$refs.popup.open()
			this.deleteId = item.id
		},
		confirm(){
			var params= {
				id:this.deleteId,
				enterpriseId: this.$store.state.companyInfo.id,
			}
			deleteEmployee(params)
				.then(res => {
					if (res) {
						uni.showToast({
							title: '删除成功',
							icon: 'success'
						})
						this.close()
						this.pagination.pageNum = 1
						this.getList()
					} 
				})
				.catch(err => {
					reject(err)
				})
		},
		close(){
			 this.$refs.popup.close()
		},
		// 获取用户列表
		getList() {
			return new Promise((resolve, reject) => {
				employeeList({ ...this.params, ...this.pagination })
					.then(res => {
						if (res) {
							if (this.pagination.pageNum == 1) {
								this.list = res.records
							} else {
								this.list = this.list.concat(res.records)
							}
							resolve({ list: this.list, total: res.total })
						} else {
							reject()
						}
					})
					.catch(err => {
						reject(err)
					})
			})
		},
		//用户分页
		orderUp(page) {
			this.pagination.pageNum++
			this.getList()
				.then(({ list, total }) => {
					this.$refs.orderRef.refreshSuccess({ list, total })
				})
				.catch(() => {
					this.$refs.orderRef.loadFail()
				})
		},
		//用户分页
		orderDown() {
			this.pagination.pageNum = 1
			this.getList()
				.then(({ list, total }) => {
					this.$refs.orderRef.refreshSuccess({ list, total })
				})
				.catch(() => {
					this.$refs.orderRef.refreshFail()
				})
		}
	}
}
</script>

<style lang="scss">
.account-management {
	.account-management-title {
		width: 100%;
		font-size: 36rpx;
		color: #000000;
		letter-spacing: 0;
		text-align: center;
		font-weight: 500;
	}
	.add-account {
		font-size: 28rpx;
		color: #007aff;
		text-align: right;
		line-height: 40rpx;
		font-weight: 500;
	}
	.list-image {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50rpx;
	}
	.account-list {
		display: flex;
		align-items: center;
		height: 148rpx;
		background-color: #ffffff;
	}
	.account-name {
		font-size: 30rpx;
		color: #333333;
		letter-spacing: 0;
		font-weight: 500;
	}
	.account-phone {
		font-size: 26rpx;
		color: #888888;
		letter-spacing: 0;
		text-align: left;
		line-height: 32rpx;
		font-weight: 400;
	}
	.account-delete {
		font-size: 28rpx;
		color: #f5222d;
		text-align: right;
		line-height: 40rpx;
		font-weight: 400;
	}
	.account-text {
		width: 60%;
		line-height: 60rpx;
	}
	.account-iamge-width {
		margin-left: 32rpx;
		width: 15%;
	}
	.account-dialog-text{
		font-size: 28rpx;
		color: #969799;
		text-align: center;
		line-height: 40rpx;
		font-weight: 400;
	}
}
</style>
