<template>
	<view class="container flex flex_column">
		<view style="flex-grow: 1;">
			<evan-form ref="formData" :rules="ruleValidate" :model="formData">
				<evan-form-item label="岗位名称：" prop="name">
					<u-input class="form-input" :maxlength="30" style="width: 100%;" placeholder="请填写岗位名称(最多30个字符)" v-model="formData.name" />
				</evan-form-item>
				<view class="role-box">
					<view style="color: #666;padding:0.5rem 0;">
						<text style="color:red;margin-right: 0.5rem;">*</text> 岗位权限：
					</view>
					<view style="flex-grow: 1;">
						<roleAuthSet ref="roleSet"></roleAuthSet>
					</view>
				</view>
			</evan-form>
		</view>
		<view class="form-footer-btn flex align_center justify_center">
			<u-button shape="circle" v-if="type=='edit'"  @click="delRole()" :custom-style="{width:'300rpx' }">删除</u-button>
			<u-button shape="circle" type="info" :custom-style="{ background: '#066cff', color: '#fff',width:'300rpx',marginLeft:'20rpx' }" @click="save('formData')">保存</u-button>
		</view>
	</view>
</template>

<script>
	import roleAuthSet from './roleAuthSet.vue'
	import {saveRoleMenu, delectRolePower} from '@/api/powerRole-md.js'
	export default{
		name:"formData",
		components:{
			roleAuthSet
		},
		data(){
			return{
				loading: false,
				formData:{
					name:'',
					isEnable:'1',
					remarks:''
				},
				type: '', //  edit 编辑页  add  新增页
				ruleValidate: {
					name: [
						{ required: true, message: '请输入岗位名称', trigger: 'change' },
						{
							validator: (rule, value, callback) => {
								let reg = /^[^<|>]{1,30}$/
								if(reg.test(value)){
									callback()
								}else{
									callback(new Error('请输入不含<或>的字符，最多30个字符'))
								}
							}
						}
					],
				},
			}
		},
		onLoad(options) {
			console.log(options)
			this.type = options.type
			uni.setNavigationBarTitle({
				title: this.type=="add" ? '添加岗位' : '编辑岗位'
			})
			// 初始化岗位
			this.$refs.roleSet.getMenuList(options.id)
			this.init()
		},
		methods:{
			// 初始化数据
			init(){
				if(this.type=='edit'){
					let data = this.$store.state.vuex_nowRoleInfo
					this.formData.name = data.name
					this.formData.id = data.id
				}else{
					this.formData.name =''
					this.formData.id  =''
				}
			},
			// 保存
			save(name){
				this.$refs[name].validate((valid) => {
				  if (valid) {
					  this.loading = true
					  const menusIds = this.$refs.roleSet.getSelMenu()
					  console.log(menusIds,'menus--')
					  if(!menusIds){
						  uni.showToast({
						  	icon: 'none',
						  	title:  '请先选择权限'
						  })
					  }else{
						  const params = Object.assign(this.formData,menusIds)
						  saveRoleMenu(this.formData).then(res=>{
						  	if(res.status == 200){
						  		this.cancel()
								uni.$emit('refashRoleList',res.data)
						  	}
						  	uni.showToast({icon: 'none', title: res.message})
						  	this.loading = false
						  }).catch(err=>{
						  	this.loading = false
						  })
					  }
				  }
				})
			},
			// 删除岗位
			delRole(){
				let _this = this
				const item = this.formData
				uni.showModal({
					title: '提示',
					content: '数据删除后无法恢复, 确认删除吗？',
					success: (ret) => {
					  if(ret.confirm||ret.index==0){
						  // 删除数据
						  delectRolePower({id: item.id}).then(res=>{
						  	if(res.status == 200){
						  		this.cancel()
						  	}
						  	uni.showToast({icon: 'none', title: res.message})
						  })
					  }
					}
				})
			},
			// 取消
			cancel(){
				setTimeout(function(){
					uni.navigateBack()
				}, 300)
			}
		}
	}
</script>

<style lang="less">
	page{
		height: 100%;
		background: #FFFFFF;
	}
	.container{
		margin: 0 30rpx;
		height: 100vh;
		.form-input-placeholder{
			text-align: right;
		}
		.role-box{
			padding: 10rpx 0 20rpx 0;
			flex-grow: 1;
		}
		.form-footer-btn{
			padding: 20rpx;
			background: #FFFFFF;
		}
	}
</style>
