<template>
	<view class="container">
		<evan-form ref="formData" :rules="ruleValidate" :model="formData">
			<evan-form-item label="角色名称" prop="name">
				<input class="form-input" :maxlength="30" placeholder-class="form-input-placeholder" placeholder="请输入角色名称(最多30个字符)" v-model="formData.name" />
			</evan-form-item>
			<evan-form-item label="角色描述" prop="remarks">
				<textarea placeholder-class="form-input-placeholder" :maxlength="500" placeholder="请输入描述(最多500个字符)" v-model="formData.remarks"/>
			</evan-form-item>
			<evan-form-item label="状态" prop="roleState">
				<view style="width: 100%;display:flex;justify-content: flex-end;">
					<u-radio-group v-model="formData.isEnable">
						<u-radio 
							v-for="(item, index) in list" :key="index" 
							:name="item.value"
							shape="circle"
						>
							{{item.name}}
						</u-radio>
					</u-radio-group>
				</view>
			</evan-form-item>
			<view class="form-footer-btn">
				<button  @click="cancel()">取消</button>
				<button type="primary" :loading="loading" :style="{background:$config('buttonColors')}" @click="save('formData')">保存</button>
			</view>
		</evan-form>
	</view>
</template>

<script>
	import {saveRolePower} from '@/api/powerRole-md.js'
	export default{
		name:"formData",
		data(){
			return{
				loading: false,
				formData:{
					name:'',
					isEnable:'',
					remarks:''
				},
				type: '', //  edit 编辑页  add  新增页
				list: [
					{
						value: 1,
						name: '启用',
						disabled: false,
					},
					{
						value: 0,
						name: '禁用',
						disabled: false
						
					}
				],
				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个字符'))
								}
							}
						}
					],
					isEnable: [
						{
						  required: true, type:'string',message: '请选择状态', trigger: 'blur'
						}
					],
				},
			}
		},
		onLoad(options) {
			console.log(options)
			this.type = options.type
			uni.setNavigationBarTitle({
				title: this.type=="add" ? '添加角色' : '编辑角色'
			})
			this.init()
		},
		methods:{
			// 初始化数据
			init(){
				if(this.type=='edit'){
					let data = this.$store.state.vuex_nowRoleInfo
					console.log(data)	
					this.formData.name = data.name
					this.formData.isEnable = data.isEnable
					this.formData.remarks = data.remarks || ''
					this.formData.id = data.id
				}else{
					this.formData.name =''
					this.formData.isEnable = 0
					this.formData.remarks =''
					this.formData.id  =''
				}
			},
			// 保存
			save(name){
				let data=this.formData
				this.formData.isEnable = String(this.formData.isEnable)
				console.log(data)
				this.$refs[name].validate((valid) => {
				  if (valid) {
					this.loading = true
					saveRolePower(data).then(res=>{
						// console.log(res)
						if(res.status == 200){
							uni.showToast({icon: 'none', title: res.message})
							this.cancel()
						}else{
							uni.showToast({icon: 'none', title: res.message})
						}
						this.loading = false
					}).catch(err=>{
						this.loading = false
					})
				}
				})
			},
			// 取消
			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;
		}
		textarea {
			text-align: right;
			margin: 20upx;
			height: 100upx;
			width: 95%;
		}
	}
</style>
