<template>
	<div>
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item>售后管理</el-breadcrumb-item>
			<el-breadcrumb-item to="/index/saleAppli">售后列表</el-breadcrumb-item>
			<el-breadcrumb-item to="/index/saleAfterDetail">售后详情</el-breadcrumb-item>
			<el-breadcrumb-item>人员分配</el-breadcrumb-item>
		</el-breadcrumb>
		<div class="check-btns">
			<el-input placeholder="请输入售后人员姓名" size="mini" suffix-icon="el-icon-search" v-model="name"></el-input>
			<el-button type="primary" size="mini" @click="allotSubmVisible">确定</el-button>
		</div>
		<el-row :gutter="10">
			<el-col :xs="24" :sm="24" :md="12" :lg="6" :xl="6" v-for="(item,index) in peoList" :key="index">
				<el-card class="box-card">
					<img src="@/assets/images/12.jpg" />
					<p>姓名 : {{item.name}}</p>
					<p>联系电话 : {{item.tel}}</p>
					<template v-if="item.isAllot">
						<span class="active btn" @click="allotPeople(index,item.isAllot)">
							<i :style="{backgroundImage:'url('+checkedIcon+')'}"></i>
							分配
						</span>
					</template>
					<template v-else>
						<span class="btn" @click="allotPeople(index,item.isAllot)">分配</span>
					</template>
				</el-card>
			</el-col>
		</el-row>
		<el-pagination
			background
			layout="prev, pager, next"
			:total="totalNum"
			:current-page="page"
			@current-change="changePage"
		></el-pagination>
	</div>
</template>

<script>
export default {
	data() {
		return {
			peoList: [
				{ imgUrl: '', name: '赵先超', tel: '18511111111', isAllot: false },
				{ imgUrl: '', name: '赵先超', tel: '18511111111', isAllot: false },
				{ imgUrl: '', name: '赵先超', tel: '18511111111', isAllot: false },
				{ imgUrl: '', name: '赵先超', tel: '18511111111', isAllot: false },
				{ imgUrl: '', name: '赵先超', tel: '18511111111', isAllot: false },
				{ imgUrl: '', name: '赵先超', tel: '18511111111', isAllot: false },
				{ imgUrl: '', name: '赵先超', tel: '18511111111', isAllot: true },
				{ imgUrl: '', name: '赵先超', tel: '18511111111', isAllot: false }
			],
			name: '',
			checkedIcon: require('@/assets/images/saleAfter/checked.png'),
			totalNum: 0,
			page: 1
		}
	},
	methods: {
		allotSubmVisible() {
			this.$confirm(`确定分配么?`, '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			})
				.then(() => {
					this.$message({
						type: 'success',
						message: '分配成功!'
					})
				})
				.catch(() => {
					this.$message({
						type: 'info',
						message: '已取消分配'
					})
				})
		},
		allotPeople(index, isAllot) {
			this.peoList.forEach((item) => {
				item.isAllot = false
			})
			this.peoList[index].isAllot = !this.peoList[index].isAllot
		},
		changePage() {}
	}
}
</script>

<style lang='less' scoped>
.check-btns {
	display: flex;
	margin-bottom: 20px;
	justify-content: space-between;
	.el-input {
		width: 200px;
	}
}
.box-card {
	text-align: center;
	img {
		width: 70px;
		height: 70px;
		border-radius: 50%;
		margin-bottom: 10px;
	}
	p {
		font-size: 14px;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
		line-height: 30px;
		margin-bottom: 10px;
	}
	.btn {
		margin-top: 15px;
		display: inline-block;
		color: #fff;
		background: #bbbfbe;
		width: 150px;
		height: 30px;
		line-height: 30px;
		border-radius: 20px;
		font-size: 13px;
		cursor: pointer;
		i {
			width: 17px;
			height: 14px;
			display: inline-block;
			background-repeat: no-repeat;
			background-size: 100% auto;
			vertical-align: middle;
		}
	}
	.active {
		background: #17bb89;
	}
}
</style>