<template>
	<view class="h7">基本信息设置</view>
	<view class="content">
		<view>
			<view>
				员工姓名
			</view>
			<input type="text" v-model="datas.formData.name" placeholder="请填写员工名称" />
			<hr />
		</view>
		<view>
			<view>
				手机号
			</view>
			<input type="text" v-model="datas.formData.phone" placeholder="请填写手机号" />
			<hr />
		</view>

		<view>
			<view>
				员工编号
			</view>
			<input type="text" v-model="datas.formData.code" placeholder="请填写员工编号" />
			<hr />
		</view>

		<view>
			<view>
				员工账号
			</view>
			<input type="text" v-model="datas.formData.account" placeholder="请填写员工账号，建议使用手机号" />
			<hr />
		</view>
		<view>
			<view>
				登录密码
			</view>
			<input type="text" v-model="datas.formData.password" placeholder="请输入登录密码，不填写默认123456" />
			<hr />
		</view>
		<view>
			<view>
				优惠类型
			</view>
			<up-radio-group v-model="datas.formData.discountType" placement="row">
				<up-radio label="折扣" name="1"></up-radio>
				<up-radio style="margin: 18px 10px;" label="金额" name="0"></up-radio>
			</up-radio-group>
			<hr />
		</view>
		<view>
			<view>
				最低优惠折扣
			</view>
			<input type="text" v-model="datas.formData.maxDiscountAmount" placeholder="0" />
			<hr />
		</view>
		<view>
			<view>
				角色
			</view>
			<view @tap="show=true" style="height: 50rpx;font-size: 28rpx;color: #999999;">{{datas.rolesdata }}</view>
			<hr />
		</view>
	</view>
	<view class="h7">员工权限设置</view>
	<view class="contentBottom" v-for="item in datas.formData.permissions" :key="item.id">
		<view>
			{{item.label}}
		</view>
		<view class="">
			<up-checkbox shape='circle' :customStyle="{marginBottom: '8px'}" v-model:checked="ele.hasPermission"
				usedAlone v-for="(ele, index) in item.children" :key="index" :label="ele.label"
				style="margin-right: 40rpx;font-size: 28rpx;">
			</up-checkbox>
		</view>
	</view>
	<view class="bottomBotton" @tap="sumbitEvent">
		保存
	</view>
	<view class="bottomBotton2" @tap="toUrl">
		取消
	</view>
	<!-- 角色选择器 -->
	<up-picker :show="show" @confirm="confirm" @cancel="show = false" :columns="columns"></up-picker>
	<!-- 弹窗 -->
	<uni-popup ref="message" type="message">
		<uni-popup-message type="warn" message="请选择角色" :duration="2000"></uni-popup-message>
	</uni-popup>
</template>

<script setup>
	import {
		getCurrentInstance,
		onMounted,
		reactive,
		ref
	} from 'vue';
	import go from '@/commons/utils/go.js';
	import {
		tbShopPermissionList,
		getroles,
		tbPlussShopStaff,
		tbPlussShopStaffDetail
	} from "@/http/yskApi/requestAll.js"
	const currentInstance = getCurrentInstance()
	const props = defineProps({
		type: {
			type: String
		},
		id: {
			type: Number
		}
	})
	let datas = reactive({
		formData: {
			permissions: []
		},
		rolesList: [],
		columns: [],
		rolesdata: '请选择角色'
	})
	const columns = reactive([
		[]
	]);
	const show = ref(false)
	onMounted(() => {
		// 获取角色信息
		getrolesEvent()
		if (props.type == 'add') {
			getList()
		} else {
			// 调用id查询接口和编辑接口
			gettbPlussShopStaffDetail(props.id)
		}
	})

	function gettbPlussShopStaffDetail(id) {
		tbPlussShopStaffDetail(id).then(res => {
			datas.formData = res
			datas.rolesdata = datas.rolesList.filter(ele => ele.id == res.roleId)[0].name
		})
	}

	function sumbitEvent() {
		let rolesId = datas.rolesList.filter(ele => ele.name == datas.rolesdata)
		if (rolesId.length == 0) {
			currentInstance.ctx.$refs.message.open()
			return
		}
		datas.formData.roleId = rolesId[0].id
		datas.formData.permissions.forEach(ele => {
			ele.children.forEach(res => {
				if (res.hasPermission) {
					res.hasPermission = 1
				}
			})
		})
		tbPlussShopStaff({
			shopId: uni.getStorageSync("shopId"),
			...datas.formData
		}).then(res => {
			toUrl()
		})
	}

	function getList() {
		tbShopPermissionList().then((res) => {
			datas.formData.permissions = res
		})
	}

	function getrolesEvent() {
		getroles().then((res) => {
			datas.rolesList = res.content
			res.content.forEach(ele => {
				columns[0].push(ele.name)
			})
		})
	}

	function confirm(e) {
		// console.log(e.value, '调试1')
		datas.rolesdata = e.value[0]
		show.value = false
	}

	function toUrl() {
		go.to('PAGES_STAFF')
	}
</script>

<style scoped lang="less">
	page {
		background-color: #f9f9f9;
		padding: 32rpx 28rpx;
	}

	.h7 {
		margin: 32rpx 0;
		font-family: Source Han Sans CN, Source Han Sans CN;
		font-weight: 500;
		font-size: 32rpx;
		color: #333333;
	}

	.content {
		width: 694rpx;
		// height: 1256rpx;
		background: #FFFFFF;
		border-radius: 18rpx 18rpx 18rpx 18rpx;

		>view {
			padding: 32rpx 24rpx;
			background-color: #fff;
			font-weight: bold;
			font-size: 28rpx;
			color: #333333;

			>input {
				padding: 24rpx 0;
			}
		}
	}

	.contentBottom {
		width: 694rpx;
		background: #FFFFFF;
		border-radius: 18rpx 18rpx 18rpx 18rpx;
		padding: 32rpx 24rpx;
		margin-top: 24rpx;
	}

	.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;
		margin-top: 50rpx;
		margin-left: 50%;
		transform: translateX(-50%);
	}

	.bottomBotton2 {
		width: 530rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		font-size: 32rpx;
		font-weight: 400;
		color: #999999;
		margin-left: 50%;
		transform: translateX(-50%);
	}
</style>