<template>
	<div class="app-content">
		<app-tabs :tabs="tabs" :isFixed="true" :currentTab="tabIndex" @change="change" itemWidth="33.33%" />
		<!-- 员工列表 -->
		<block v-if="tabIndex == 0">
			<!-- 列表 -->
			<div class="list-wrap staff-list">
				<block v-if="!$util.isEmpty(list.data)">
					<div class="list" v-for="(item, index) in list.data" :key="index">
						<div>
							<app-avatar-module :src="item.avatarUrl" :width="90" />
						</div>
						<div class="list-det">
							<div class="list-det-left">
								<div>
									<span class="staff-name">{{ item.adminName }}</span>
									<span>{{ item.roleName }}</span>
								</div>
								<div class="flex-center">
									<div class="status-list">
										<i class="iconfont icondagou" :class="[item.incomeNotice ? 'app-color-1' : '' ]"></i>
										<span :class="[item.incomeNotice ? 'app-color-1' : 'app-color-3' ]">收款通知</span>
									</div>
									<div class="status-list">
										<i class="iconfont icondagou" :class="[item.status ? 'app-color-1' : '' ]"></i>
										<span :class="[item.status ? 'app-color-1' : 'app-color-3' ]">启用</span>
									</div>
								</div>
							</div>
							<div class="list-det-right">
								<div @click="pageTo({
								url: '/admin/staff/add',
								query: {
									id: item.id
								}
							})">
									<i class="iconfont iconbianji"></i>
								</div>
								<!-- 删除 -->
								<div @click="delModalFn(item)">
									<i class="iconfont iconshanchu1"></i>
								</div>
							</div>
						</div>
					</div>
				</block>
				<block v-else>
					<app-wrapper-empty title="暂无数据" :is-empty="$util.isEmpty(list.data)" />
				</block>
			</div>
			<!-- 按钮 -->
			<div class="app-footer">
				<div class="admin-button-com middle blue" @click="pageTo('/admin/staff/add')">添加</div>
			</div>
		</block>
		<!-- 角色管理 -->
		<block v-if="tabIndex == 1">
			<!-- 列表 -->
			<div class="list-wrap role-list">
				<block v-if="!$util.isEmpty(list.data)">
					<div class="list" v-for="(item, index) in list.data" :key="index">
						<div class="app-size-32">{{ item.roleName }}(10)</div>
						<div class="role-option">
							<div @click="modifyRoleFn(item)">
								<i class="iconfont iconbianji"></i>
							</div>
							<div @click="delModalFn(item)">
								<i class="iconfont iconshanchu1"></i>
							</div>
						</div>
					</div>
				</block>
				<block v-else>
					<app-wrapper-empty title="暂无数据" :is-empty="$util.isEmpty(list.data)" />
				</block>
			</div>
			<!-- 按钮 -->
			<div class="app-footer">
				<div class="admin-button-com middle blue" @click="addRoleFn">添加角色</div>
			</div>
		</block>
		<!-- 操作记录 -->
		<block v-if="tabIndex == 2">
			<!-- 列表 -->
			<div class="axis-wrap">
				<block v-if="!$util.isEmpty(list.data)">
					<time-axis>
						<timeaxis-item class="axis-list" bgcolor="none" v-for="(item, index) in list.data" :key="index">
							<template v-slot:content>
								<div class="axis-title">{{ item.content }}</div>
								<div class="axis-det">
									<div>ID：{{ item.id }}</div>
									<div>IP：{{ item.ip }}</div>
									<div>操作者：{{ item.adminName }}</div>
									<div>操作时间：{{ item.addTime | formatTime }}</div>
								</div>
							</template>
						</timeaxis-item>
					</time-axis>
				</block>
				<block v-else>
					<app-wrapper-empty title="暂无数据" :is-empty="$util.isEmpty(list.data)" />
				</block>
			</div>
		</block>
		<!-- 角色操作 -->
		<modal-module :show="roleModal" @cancel="modalCancel" @click="roleModalClick" :title="roleModalText" padding="30rpx 30rpx">
			<template v-slot:content>
				<div class="app-modal-input-wrap">
					<div class="inp-list-line required">
						<div class="line-label">角色名称</div>
						<div class="line-input">
							<input v-model="roleModalVal" type="text" :adjust-position="false" class="inp-input">
						</div>
					</div>
				</div>
			</template>
		</modal-module>
		<!-- 删除弹窗 -->
		<modal-module :show="delModal" @cancel="modalCancel" @click="delModalClick" :content="delModalText" color="#333" :size="32" padding="30rpx 30rpx"></modal-module>
	</div>
</template>

<script>
import AppTabs from '@/components/plugin/tabs'
import AppAvatarModule from '@/components/module/app-avatar'
// 时间轴
import TimeAxis from '@/admin/home/components/plugin/time-axis'
import TimeaxisItem from '@/admin/home/components/plugin/timeaxis-item'
import AppWrapperEmpty from '@/components/app-wrapper-empty'
import ModalModule from '@/components/plugin/modal'
import { list } from '@/mixins'
// api
import { getStaffList, delStaff, getRoleList, addRole, updateRole, delRole, getLogList } from '@/api/staff'
export default {
	name: 'staff-list',
	components: {
		AppTabs,
		AppAvatarModule,
		TimeAxis,
		TimeaxisItem,
		AppWrapperEmpty,
		ModalModule
	},
	mixins: [list],
	data() {
		return {
			tabIndex: 0,
			tabs: [
				{
					name: '员工列表'
				},
				{
					name: '角色管理'
				},
				{
					name: '操作记录'
				}
			],
			// 删除弹窗操作
			delModal: false,
			delModalText: '确定删除该员工吗？',
			operateData: {},
			// 角色弹窗操作
			roleModal: false,
			roleModalText: '添加',
			roleModalVal: '',
			roleOperateData: {}
		}
	},
	onPullDownRefresh() {
		this.resetList()
		this._list().then(res => {
			uni.stopPullDownRefresh()
		})
	},
	onReachBottom() {
		if (this.list.data.length < this.list.total) {
			this._list().then(res => {
				uni.stopPullDownRefresh()
			})
		} else {
			uni.stopPullDownRefresh()
		}
	},
	onLoad: function() {
		// this.init()
	},
	methods: {
		async init() {
			this._list()
		},
		_list() {
			let hostFn = this.tabIndex == 0 ? getStaffList : this.tabIndex == 1 ? getRoleList : getLogList
			return hostFn().then(res => {
				this.completes(res)
			})
		},
		change(e) {
			if (this.tabIndex == e.index) {
				return false
			} else {
				this.tabIndex = e.index
				this.resetList()
				this._list()
			}
		},
		// 关闭弹窗
		modalCancel() {
			this.delModal = false
			this.roleModal = false
		},
		// 删除弹窗
		delModalFn(item) {
			this.delModalText = this.tabIndex == 0 ? '确定删除该员工吗？' : '确定删除该角色吗？'
			this.operateData = item
			this.delModal = true
		},
		delModalClick(e) {
			let index = e.index
			if (index === 0) {
				this.modalCancel()
			} else {
				let hostFn = this.tabIndex == 0 ? delStaff : delRole
				hostFn({ id: this.operateData.id }).then(res => {
					this.modalCancel()
					this.$msg('删除成功!')
					setTimeout(() => {
						this.resetList()
						this._list()
					}, 1000)
				})
			}
		},
		// 角色操作
		addRoleFn() {
			this.roleModal = true
			this.roleModalText = '添加'
			this.roleModalVal = ''
		},
		modifyRoleFn(item) {
			this.roleModal = true
			this.roleModalText = '修改'
			this.roleModalVal = item.roleName
			this.roleOperateData = item
		},
		roleModalClick(e) {
			let index = e.index
			if (index === 0) {
				this.modalCancel()
			} else {
				let hostFn = this.roleModalText == '添加' ? addRole : updateRole
				let params = {
					roleName: this.roleModalVal
				}
				if (this.roleModalText == '修改') {
					params.id = this.roleOperateData.id
				}
				hostFn(params).then(res => {
					this.modalCancel()
					this.$msg(`${this.roleModalText}成功!`)
					setTimeout(() => {
						this.resetList()
						this._list()
					}, 1000)
				})
			}
		}
	}
}
</script>

<style lang="scss" scoped>
	.app-content {
		min-height: calc(100vh - 200px);
		padding-top: 100px;
		padding-bottom: 100px;
	}
	// 列表公共
	.list-wrap {
		background-color: #fff;
		.list {
			@include disFlex(center, flex-start);
			margin: 0 30px;
			padding: 30px 0;
			border-bottom: 2px solid $borderColor;
		}
	}
	// 员工列表
	.staff-list {
		.list-det {
			width: calc(100% - 110px);
			color: $fontColor3;
			margin-left: 20px;
			@include disFlex(center, space-between);
			.list-det-left {
				.staff-name {
					color: #333;
					font-size: 30px;
					font-weight: 600;
					margin-right: 10px;
				}
				.flex-center {
					margin-top: 10px;
				}
				.status-list {
					margin-left: 60px;
					&:first-child {
						margin-left: 0;
					}
					.iconfont {
						// color: $fontColor3;
						font-size: 24px;
						margin-right: 10px;
					}
				}
			}
			.list-det-right {
				@include disFlex(center, flex-start);
				& > div {
					margin-left: 50px;
					&:first-child {
						margin-left: 0;
					}
				}
				.iconfont {
					font-size: 36px;
					color: $fontColor3;
				}
			}
		}
	}
	// 角色管理
	.role-list {
		.list {
			justify-content: space-between;
		}
		.role-option {
			@include disFlex(center, flex-start);
			& > div {
				margin-left: 50px;
				&:first-child {
					margin-left: 0;
				}
			}
			.iconfont {
				font-size: 36px;
				color: $fontColor3;
			}
		}
	}
	// 操作记录
	.axis-wrap {
		position: relative;
		padding: 30px 30px 30px 40px;
		background-color: #fff;
		.axis-list {
			&:last-child .axis-det {
				margin-bottom: 0;
			}
		}
		.axis-title {
			font-size: 30px;
			font-weight: 600;
			margin-bottom: 14px;
		}
		.axis-det {
			color: $fontColor2;
			margin-bottom: 40px;
			& > div {
				margin-top: 6px;
				&:first-child {
					margin-top: 0;
				}
			}
		}
	}
	// 按钮
	.app-footer {
		justify-content: flex-end;
		.admin-button-com {
			width: 160px;
			margin-right: 30px;
		}
	}
</style>
