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

		<view>
			<view>
				<text style="color: red;">*</text>员工编号
			</view>
			<input type="text" v-model="datas.formData.code" placeholder="请填写员工编号" />
		</view>

		<view>
			<view>
				<text style="color: red;">*</text>员工账号
			</view>
			<input type="text" v-model="datas.formData.account" placeholder="请填写员工账号，建议使用手机号" />
		</view>
		<view>
			<view>
				登录密码
			</view>
			<input type="text" v-model="datas.formData.password" placeholder="请输入登录密码，不填写默认123456" />
		</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>
		</view>
		<view>
			<view>
				最低优惠折扣
			</view>
			<input v-if="datas.formData.discountType==1" @blur="maxdisinput" type="number"
				v-model="datas.formData.maxDiscountAmount" placeholder="请输入最低优惠折扣" />
			<input v-if="datas.formData.discountType==0" type="number" v-model="datas.formData.maxDiscountAmount"
				placeholder="请输入最低优惠折扣" />
		</view>
		<view>
			<view>
				<text style="color: red;">*</text> 角色
			</view>
			<view @tap="show=true" style="height: 50rpx;font-size: 28rpx;color: #999999;">{{datas.rolesdata }}</view>
		</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"
				:labelColor="ele.isImportant==1?'#e66c6d':''" style="margin-right: 40rpx;font-size: 28rpx;">
			</up-checkbox>
		</view>
	</view>
	<view class="bottomBotton" @tap="sumbitEvent">
		保存
	</view>
	<!-- <view class="bottomBotton2" @tap="toUrl">
		取消
	</view> -->
	<!-- 消息提示 -->
	<up-toast ref="uToastRef"></up-toast>
	<!-- 角色选择器 -->
	<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,
	 
		reactive,
		ref
	} from 'vue';
	import {
		onShow,
	} from '@dcloudio/uni-app';
	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: [],
			maxDiscountAmount: 0,
			discountType:0
		},
		rolesList: [],
		columns: [],
		rolesdata: '请选择角色'
	})
	const columns = reactive([
		[]
	]);
	const show = ref(false)
	onShow(() => {
		// 获取角色信息
		getrolesEvent()
		if (props.type == 'add') {
			getList()
		} else {
			// 调用id查询接口和编辑接口
			gettbPlussShopStaffDetail(props.id)
			uni.setNavigationBarTitle({
				title: '编辑员工'
			})
		}
	})

	function gettbPlussShopStaffDetail(id) {
		tbPlussShopStaffDetail(id).then(res => {
			console.log(res,'编辑员工后的提示')
			datas.formData = res
			if (datas.rolesList) {
				let rolefilter = datas.rolesList.filter(ele => ele.id == res.roleId)
				datas.rolesdata = rolefilter[0].name
			}
		})
	}

	function sumbitEvent() {
		// 效验
		if (!datas.formData.name || !datas.formData.phone || !datas.formData.code || !datas.formData.account) {
			currentInstance.ctx.$refs.uToastRef.show({
				message: "请填写必填项",
				type: 'default',
			})
			return
		}

		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 => {
			go.back()
		})
	}

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

	function maxdisinput(d) {
		let num = d.detail.value * 1
		if (num >= 1) {
			datas.formData.maxDiscountAmount = 0.99
		}else{
			datas.formData.maxDiscountAmount = d.detail.value.substring(0,4)
		}
	}

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

	function confirm(e) {
		datas.rolesdata = e.value[0]
		show.value = false
	}

	function toUrl() {
		go.to('PAGES_STAFF')
	}
</script>
<style>
	page {
		background-color: #f9f9f9;
		padding: 32rpx 28rpx;
	}
</style>
<style scoped lang="less">
	.h7 {
		margin: 32rpx 0;
		font-family: Source Han Sans CN, Source Han Sans CN;
		font-weight: 500;
		font-size: 32rpx;
		color: #333333;
		width: 400rpx;
	}

	.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;
			border-bottom: 1px solid #999999;

			>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: 0 auto;
		// 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>