<template>
	<view class="container">
		<evan-form ref="formData" :rules="ruleValidate" :model="formData">
			<evan-form-item 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>岗位权限：</view>
				<roleAuthSet ref="roleSet"></roleAuthSet>
			</view>
			<view class="form-footer-btn flex align_center justify_center">
				<u-button shape="circle" v-if="!formData.isEnable"  @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>
		</evan-form>
	</view>
</template>

<script>
	import roleAuthSet from './roleAuthSet.vue'
	import { clzConfirm } from '@/libs/tools.js'
	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--')
					  const params = Object.assign(this.formData,menusIds)
					  saveRoleMenu(this.formData).then(res=>{
					  	if(res.status == 200){
					  		this.cancel()
					  	}
					  	uni.showToast({icon: 'none', title: res.message})
					  	this.loading = false
					  }).catch(err=>{
					  	this.loading = false
					  })
				  }
				})
			},
			// 删除角色
			delRole(){
				let _this = this
				const item = this.formData
				clzConfirm({
					title: "提示",
					content: "数据删除后无法恢复, 确认删除吗？",
					showCancel: true,
					success: function(e){
						if(e.confirm||e.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;
		.form-input-placeholder{
			text-align: right;
		}
		.role-box{
			padding: 20rpx 0;
		}
	}
</style>
