<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.accountName" placeholder="请填写员工账号，建议使用手机号" />
		</view>
		<view>
			<view>  <text style="color: red;">*</text>登录密码 </view>
			<view style="margin: 24rpx 0;display: flex;justify-content: space-between;align-items: center;">
				<input type="text" v-model="datas.formData.accountPwd" @change="datas.isPassword = true" placeholder="请输入登录密码" />
				<view style="color: #2979ff;" @click="datas.isPassword = true;datas.formData.accountPwd=''">重置密码</view>
			</view>
		
		</view>
		<view>
			<view style="margin-bottom: 24rpx;"> 优惠类型 </view>
			<up-radio-group v-model="datas.formData.discountType" placement="row" >
				<up-radio label="折扣" name="1"></up-radio>&nbsp;&nbsp;&nbsp;&nbsp;
				<up-radio 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;margin-top: 24rpx;">{{datas.rolesdata }}</view>
		</view>
	</view>
	<view class="h7">员工权限设置</view>
	<view class="contentBottom" v-for="item in datas.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>
	
	<!-- 消息提示 -->
	<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 { shopStaffDetail,getShopStaffPermission,shopStaffAdd,shopStaffPut } from "@/http/api/staff.js"
	import { getShopPermission } from "@/http/api/index.js"
	import { getRoleList } from "@/http/api/role.js"
	const currentInstance = getCurrentInstance()
	const props = defineProps({
		type: {
			type: String
		},
		id: {
			type: Number
		}
	})
	let datas = reactive({
		formData: {
			shopPermissionIds: [],
			maxDiscountAmount: 0,
			discountType: 0
		},
		isPassword: false,
		rolesList: [],
		permissions: [],
		columns: [],
		rolesdata: '请选择角色'
	})
	const columns = reactive([
		[]
	]);
	const show = ref(false)
	onShow(() => {
		init()
	})
	
	async function init () {
		// 获取角色信息
		getrolesEvent()
		//获取权限列表
		let res = await getShopPermission()
		datas.permissions = res
		Object.assign(datas.permissions, res)
		if (props.type == 'edit') {
			uni.setNavigationBarTitle({
				title: '编辑员工'
			})
			// 调用id查询接口和编辑接口
			getShopStaffDetail(props.id)
			getStaffPermission(props.id)
		} else {
			datas.isPassword = true;
		}
	}
	
	/**
	 * 获取角色列表
	 */
	function getrolesEvent() {
		getRoleList({page: 1,size: 999}).then((res) => {
			datas.rolesList = res.records
			res.records.forEach(ele => {
				columns[0].push(ele.name)
			})
		})
	}
	
	/**
	 * 获取角色列表
	 */
	function getStaffPermission(id) {
		getShopStaffPermission({id: id}).then((res2) => {
			
			datas.permissions.forEach(ele => {
				ele.children.forEach(res => {
					res2.forEach(v => {
						if (res.id == v ) {
							res.hasPermission = 1
						}
					})
				})
			})
		})
	}
	
	
	/**
	 * 获取用户详情
	 * @param {Object} id
	 */
	function getShopStaffDetail(id) {
		shopStaffDetail({id:id}).then(res => {
			Object.assign(datas.formData, res)
			if (datas.rolesList&&datas.rolesList.length>0) {
				let rolefilter = datas.rolesList.filter(ele => ele.id == res.roleId)
				datas.rolesdata = rolefilter[0].name
			}
		})
	}

	async function sumbitEvent() {
		// 效验
		if (!datas.formData.name || !datas.formData.phone || !datas.formData.code || !datas.formData.accountPwd) {
			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
		if(datas.permissions){
			datas.permissions.forEach(ele => {
				ele.children.forEach(res => {
					
					if (res.hasPermission) {
						console.log(res)
						console.log(datas.formData.shopPermissionIds)
						res.hasPermission = 1
						datas.formData.shopPermissionIds.push(res.id)
					}
				})
			})
		}
		if ( !datas.isPassword ) {
			delete datas.formData.accountPwd;
		}
		let res;
		if( props.type == 'add'){
			res = await shopStaffAdd({...datas.formData})
		} else {
			res = await shopStaffPut({...datas.formData})
		}
		go.back()
	}
	

	
	/**
	 * 优惠金额限制
	 * @param {Object} d
	 */
	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)
		}
	}

	/**
	 * 角色选择
	 * @param {Object} e
	 */
	function confirm(e) {
		datas.rolesdata = e.value[0]
		show.value = false
	}
	
</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>