<template>
	<view class="evan-form-show flex flex_column">
			<view class="flex_1">
				<evanForm ref="formData" :rules="ruleValidate" :model="formData">
					<evanFormItem label="员工姓名" prop="name">
						<input class="form-input" placeholder-class="form-input-placeholder" :maxlength="30" placeholder="请输入姓名(最多30个字符)" v-model="formData.name" />
					</evanFormItem>
					<evanFormItem label="手机号码" prop="mobile">
						<input type="number" :disabled="formData.isManager==1 && formData.id?true:false" class="form-input" placeholder="请输入您的手机号码" placeholder-class="form-input-placeholder" v-model="formData.mobile" :maxlength="11"/>
					</evanFormItem>
					<evanFormItem label="性别" prop="sex">
						<view style="width: 100%;display:flex;justify-content: flex-end;">
							<u-radio-group v-model="formData.sex">
								<u-radio 
									v-for="(item, index) in sexList" :key="index" 
									:name="item.value"
									shape="circle"
								>
								{{item.name}}
								</u-radio>
							</u-radio-group>
						</view>
					</evanFormItem>
					<evanFormItem label="岗位" v-if="!isEdit||formData.isManager==0" prop="roleNames">
						<u-input type="select" style="width:100%" input-align="right" placeholder="请选择岗位" @click="showRoles=true" v-model="formData.roleNames"/>
						<u-popup v-model="showRoles" mode="bottom">
							<view style="padding: 1rem;width: 100%;">
								<view style="position: relative;padding: 0.5rem;width: 100%;text-align: center;border-bottom: 1px solid #eee;font-size:1.1rem;">
									<text @click="toAddRole()" style="color:#066cff;position: absolute;left:0;top:0.5rem;font-size:0.9rem;">新增岗位</text>
									选择岗位
								</view>
								<view style="padding:1rem;min-height: 15rem;" v-if="roleList.length">
									<u-radio-group wrap v-model="formData.roleIds" @change="radioGroupChange">
										<u-radio 
											v-for="(item, index) in roleList" :key="item.id" 
											:name="item.id"
											:disabled="!item.isEnable"
											:icon-size="30"
											:label-size="32"
										>
											{{item.name}}
										</u-radio>
									</u-radio-group>
								</view>
								<view style="color: #999;text-align: center;padding:3rem 0;" v-else>
									暂无岗位信息，请点击“新增岗位”
								</view>
							</view>
						</u-popup>
					</evanFormItem>
				</evanForm>
			</view>
			<view class="form-footer-btn flex align_center justify_center">
				<u-button shape="circle" v-if="isEdit" @click="delPerson()" :custom-style="{width:'300rpx',marginRight:'20rpx' }">删除</u-button>
				<u-button shape="circle" type="info" :custom-style="{ background: '#066cff', color: '#fff',width:'300rpx' }" @click="save('formData')">保存</u-button>
			</view>
	</view>
</template>

<script>
	import {saveEmployee, delEmployee } from '@/api/employee'
	import { getRoleList } from '@/api/powerRole-md.js'
	import evanForm from '@/components/evan-form/evan-form.vue'
	import evanFormItem from '@/components/evan-form-item/evan-form-item.vue'
	export default{
		components:{
			evanForm,
			evanFormItem,
		},
		data(){
			return{
				showRoles: false,
				roleList: [],  //  角色  数据列表
				roleArr: [],  //  当前所选角色
				formData:{
					name: '',
					sex: '1',
					mobile: '',
				},
				ruleValidate: {
					name: [{ required: true, message: '请输入员工姓名'}],
					mobile: [{required: true, min:11, message: '请输入正确手机号码'}],
					sex: [{ required: true, message: '请选择性别' }],
				},
				sexList: [
					{
						value: 1,
						name: '男',
						disabled: false,
					},
					{
						value: 0,
						name: '女',
						disabled: false
					}
				],
				isManager: '',
				isEdit: false
			}
		},
		onLoad() {
			this.init()
			this.getRole()
			
			const _this = this;
			uni.$on("refashRoleList",function(data){
				_this.getRole()
				if(data){
					_this.formData.roleIds = data.id;
					_this.formData.roleNames = data.name;
				}
			})
		},
		methods:{
			//  初始化数据
			init(){
				let data = this.$store.state.vuex_nowStaffData
				console.log(data)
				// 编辑信息
				if(!!data){
					this.isEdit = true
					this.formData = Object.assign({},this.formData,data)
				}else{
					this.isEdit = false
					this.formData.workFlag =  '1'
					this.formData.userType =  '1'
				}
				// 添加员工或非负责人时显示岗位
				if(!this.isEdit || this.formData.isManager==0){
					this.ruleValidate.roleNames = [{ required: true, message: '请选择岗位' }]
				}
				uni.setNavigationBarTitle({
					title: !!data ? "编辑员工" : '新增员工'
				})
			},
			// 获取角色
			getRole(){
				getRoleList().then(res => {
					this.roleList = res.data || []
				})
			},
			radioGroupChange(e) {
				console.log(e);
				this.formData.roleIds = e;
				const roleNames = this.roleList.find(item => item.id == e);
				this.formData.roleNames = roleNames?roleNames.name:'';
				this.showRoles = false
			},
			toAddRole(){
				this.showRoles = false
				uni.navigateTo({
					url:'/pages/storeManage/roleSetting/addRole?type=add'
				})
			},
			//  保存
			save(name){
				let data=this.formData
				console.log(data)
				this.$refs[name].validate((valid) => {
				  if (valid) {
					if(!this.formData.roleNames && this.formData.isManager==0){
						uni.showToast({icon: 'none', title: '请选择岗位'})
					}else{
						saveEmployee(data).then(res=>{
							console.log(res)
							if(res.status == 200){
								uni.showToast({icon: 'none', title:'保存成功'})
								this.cancel()
							}else{
								uni.showToast({icon: 'none', title: res.message})
							}
						})
					}
				}
				})
			},
			// 删除员工
			delPerson(){
				let _this = this
				const item = this.formData
				uni.showModal({
					title: '提示',
					content: '数据删除后无法恢复, 确认删除吗？',
					success: (ret) => {
					  if(ret.confirm||ret.index==0){
						  // 删除数据
						  delEmployee({id: item.id}).then(res=>{
						  	if(res.status == 200){
						  		this.cancel()
						  	}
						  	uni.showToast({icon: 'none', title: res.message})
						  })
					  }
					}
				})
			},
			cancel(){
			 setTimeout(function(){
				 uni.navigateBack()
			 },100)
			}
		}
	}
</script>

<style lang="less">
	.evan-form-show {
			padding: 0;
			background-color: #fff;
			height: 100vh;
			> view{
				padding:0.8rem;
			}
			.form-footer-btn{
				padding: 0.8rem 1.5rem;
			}
			.form-input {
				font-size: 28rpx;
				color: #333;
				text-align: right;
				width: 95%;
				box-sizing: border-box;
				height: 60rpx;
				&.textarea{
					height: 240rpx;
					padding: 24rpx 0;
					text-align: left;
				}
			}
			.form-input-placeholder {
				font-size: 28rpx;
				color: #999;
			}
		}
</style>