<template>
	<view>
		<view class="nav_area"></view>
		<view class="setPage">
			<view class="">
				<view v-for="(item,index) in dataList" :key="index" class="set_item">
					<view class="item_top">
						<view class="icon_new"></view>
						<view class="">
							客服名：
							<text>{{item.name}}</text>
						</view>
						<view class="">
							微信号码：
							<text>{{item.wx_number}}</text>
						</view>
					</view>
					<view class="item_bottom">
						<view style="color: #E33837;" @click="edit(item,index)">编辑</view>
						<view style="color: #999;" @click="remove(item,index)">删除</view>
					</view>
				</view>
			</view>
			<view class="edit_mask" v-if="showEdit" @click.stop="">
				<view class="edit_area">
					<view class="title">{{title}}</view>
					<view class="content">
						<view class="input_box">
							<view class="">客服名称:</view>
							<input type="text" v-model="editInfo.name" placeholder="请输入客服名称" placeholder-style="color: #999;">
						</view>
						<view class="input_box">
							<view class="">微信号码:</view>
							<input type="text" v-model="editInfo.wx_number" placeholder="请输入微信号码" placeholder-style="color: #999;">
						</view>
					</view>
					<view class="btngroup">
						<view class="cancel" @click="cancel">取消</view>
						<view class="confirm" @click="confirm">确定</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import API from '@/common/js/api.js'
	export default {
		data() {
			return {
				dataList: [
					{name:'11'},
					{name:'22'}
				],
				showEdit: false,
				title: "添加客服",
				editInfo: {
					
				},
				noMore: false,
				page: 1,
			}
		},
		methods: {
			edit(val, i){
				this.title = "编辑客服信息";
				this.showEdit = true;
				this.editInfo = {...val};
			},
			remove(val, i){
				let _this = this;
				uni.showModal({
					title:'温馨提示',
					content:"确定是否删除该客服信息",
					success(res) {
						if(res.confirm){
							API.request('/customerService/delete', {
								id: val.id
							}, res=>{
								uni.showToast({
									title: res.msg
								})
								_this.dataList.splice(i, 1);
							})
						}
						
					}
				})
			},
			cancel(){
				this.showEdit = false;
				this.editInfo = {};
			},
			confirm(){
				API.request('/customerService/save', {
					name: this.editInfo.name, wx_number: this.editInfo.wx_number, id: this.editInfo.id
				}, res=>{
					uni.showToast({
						title: res.msg
					})
					this.showEdit = false;
					this.editInfo = {};
					this.getList();
				})
			},
			getList(){
				API.request('/customerService/list', {
					page: this.page, limit: 10
				}, res=>{
					if(res.data.list.length<10){
						this.noMore = true;
					}
					if(this.page>1){
						this.dataList = this.dataList.concat(res.data.list);
					}else{
						this.dataList = res.data.list;
					}
				})
			}
		},
		onShow() {
			this.getList();
		},
		onNavigationBarButtonTap(e){
			this.title = "添加客服";
			this.showEdit = true;
		},
		onReachBottom() {
			if(!this.noMore){
				this.page++;
				this.getList();
			}else{
				uni.showToast({
					title: '没有更多了',
					icon: 'none'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.nav_area {
		position: fixed;
		top: 0px;
		left: 0px;
		z-index: 99;
		background-color: #fff;
		box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.05);
		width: 700rpx;
		height: 88rpx;
		padding: 0px 25rpx;
		padding-top: var(--status-bar-height);
		box-sizing: content-box;
		color: #b0b0b0;
		font-size: 14px;
	}
	.setPage{
		padding: 40rpx;
		font-size: 14px;
	}
	.set_item{
		width: 670rpx;
		height: 150rpx;
		border-radius: 10px;
		font-size: 14px;
		box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.11);
		margin-bottom: 20px;
		
		.item_top{
			height: 50%;
			padding: 0px 24rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			color: #999;
			
			text{
				color: #101010;
			}
		}
		.item_bottom{
			height: 50%;
			display: flex;
			align-items: center;
			justify-content: space-around;
		}
	}
	.icon_new{
		left: 32rpx;
		top: 22rpx;
		width: 40rpx;
		height: 40rpx;
		background-color: #fff;
		background-image: url("../../../static/user/icon_manager.png");
		background-size: contain;
	}
	.edit_mask{
		width: 100vw;
		height: 100vh;
		position: fixed;
		top: 0px;
		left: 0px;
		background-color: rgba(0,0,0,.5);
		z-index: 999;
	}
	.edit_area{
		width: 670rpx;
		height: 480rpx;
		border-radius: 10px;
		background-color: #fff;
		margin: calc(50vh - 240rpx) auto;
		color: #444;
		
		.title{
			height: 140rpx;
			text-align: center;
			line-height: 140rpx;
			font-size: 18px;
		}
		.content{
			height: 248rpx;
			.input_box{
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0px 40rpx;
				margin-bottom: 40rpx;
				font-size: 16px;
				input{
					width: 426rpx;
					height: 80rpx;
					text-align: center;
					font-size: 14px;
					border: 1px solid #ededed;
					border-radius: 5px;
				}
			}
		}
		.btngroup{
			height: 90rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-top: 2rpx solid #f1f1f1;
			.cancel{
				line-height: 90rpx;
				color: #999;
				border-right: 2rpx solid #f1f1f1;
			}
			.confirm, .cancel{
				width: 50%;
				text-align: center;
			}
		}
	}
	
</style>
