<template>
	<ul class="liststyle">
		<li v-for="item in datas.list " :key="item.id">
			<view class="">
				<view class="">
					<span style="font-size: 28rpx;color: #333333; ">{{item.name}}</span>
					<span style="font-size: 24rpx;color: #999; ">{{item.code}}</span>
				</view>
				<view class="" style="font-size: 24rpx;color: #666666;">
					{{item.account}}
				</view>
			</view>
			<view class="">
				<view style="display: flex;justify-content: center;align-items: center;">
					<span style="font-size: 28rpx;color: #999999;">是否启用用</span>
					<up-switch :activeValue="1" :inactiveValue="0" v-model="item.status" size="18"
						@change="switch2Change($event,item)"></up-switch>
				</view>
				<view class="df">
					<up-button size="small" style="border-radius: 28rpx  28rpx  28rpx  28rpx;"
						@tap="datas.show = true;datas.rolesId=item.id" text="删除"></up-button>
					<up-button type="primary" plain size="small"
						style="border-radius: 28rpx  28rpx  28rpx  28rpx;margin-left: 16rpx;" @tap="toUrl(item)"
						text="编辑"></up-button>
				</view>
			</view>
		</li>
	</ul>
	<view class="bottomBotton" @tap="toUrl">
		添加员工
	</view>
	<!-- 删除确认框 -->
	<up-modal :show="datas.show" contentTextAlign="center" showCancelButton @confirm='delTableHandle'
		@cancel='datas.show=false' content='是否确认删除？'></up-modal>
</template>

<script setup>
	import {
		reactive,
		ref,
		watch,
		onMounted
	} from 'vue';
	import go from '@/commons/utils/go.js';
	import {
		rolesGet,
		shopStaffDelete,
		updateStatus
	} from "@/http/yskApi/requestAll.js"
	let datas = reactive({
		list: [],
		show: false,
		// 删除员工id
		rolesId: ""
	})
	onMounted(() => {
		getList()
	})

	function delTableHandle() {
		shopStaffDelete(
			[datas.rolesId]
		)
		datas.show = false
		setTimeout(() => {
			getList()
		}, 500)
	}

	function toUrl(d) {
		if (d.id) {
			go.to('PAGES_ADD_STAFF', {
				type: '',
				id: d.id
			})
		} else {
			go.to('PAGES_ADD_STAFF', {
				type: 'add',
			})
		}
	}

	function switch2Change(e, d) {
		updateStatus({
			id: d.id,
			status: e
		}).then(res => {
			setTimeout(() => {
				getList()
			}, 500)
		})
	}

	function getList() {
		rolesGet({
			shopId: uni.getStorageSync("shopId"),
			page: 1,
			size: 100
		}).then((res) => {
			datas.list = res.content
		})
	}
</script>

<style lang="less" scoped>
	* {
		padding: 0;
		margin: 0;
		text-decoration: none;
		outline: none;
	}

	page {
		background-color: #f9f9f9;
	}

	ul,
	li {
		list-style: none;
	}

	.liststyle {
		>li {
			// width: 694rpx;
			height: 192rpx;
			background: #FFFFFF;
			border-radius: 10rpx 10rpx 10rpx 10rpx;
			padding: 0 16rpx;
			margin: 32rpx 16rpx;

			>view {
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 96rpx;

			}

			>view:first-child {
				border-bottom: 2rpx solid #E5E5E5;
			}
		}
	}

	.bottomBotton {
		width: 530rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		background: #318AFE;
		border-radius: 56rpx 56rpx 56rpx 56rpx;
		font-family: Source Han Sans CN, Source Han Sans CN;
		font-weight: 500;
		font-size: 32rpx;
		color: #FFFFFF;
		position: fixed;
		bottom: 20rpx;
		left: 50%;
		transform: translateX(-50%);
	}

	.df {
		display: flex;
		justify-content: center;
	}
</style>