<template>
	<div>
		<avue-form
			ref="formData"
			:option="option"
			v-model="formData"
		>
		</avue-form>
		<footer class="el-dialog__footer">
			<el-button icon="el-icon-circle-plus" type="primary" @click="submitForm">确 定</el-button>
		  <el-button icon="el-icon-circle-close" @click="cancel">取 消</el-button>
		</footer>
	</div>
</template>

<script>
	import {
	  editeEmpAuth,
		empDetail
	} from '@/api/system/user';
	export default {
		props:{
			obj:{
				type:Object,
				default:{}
			}
		},
		data () {
			let vm = this;
			return {
				formData:{},
				option:{
					labelWidth:80,
					menuPosition:'right',
					gutter:10,
					menuBtn:false,
					tabs: true,
					tabsActive: 1,
					group:[
						{
							label: '按区域',
							column:[
								{
									label: '省',
									labelWidth:40,
									prop: 'provinces',
									placeholder:'请选择省',
									span:24,
									type: 'select',
									multiple:true,
									filterable:true,
									// collapseTags:true,
									// maxCollapseTags:4,
									props: {
										label: 'name',
										value: 'name',
									},
									cascader: ['city'],
									dicUrl: '/blade-system/region/select',
								},
								{
									label: '市',
									labelWidth:40,
									prop: 'city',
									placeholder:'请选择市',
									type: 'select',
									multiple:true,
									filterable:true,
									props: {
										label: 'name',
										value: 'name',
									},
									cascader: ['area'],
									dicFlag: false,
									dicUrl: '/blade-system/region/select?provinceNames={{provinces}}',
									span:24,
								},
								{
									label: '区',
									labelWidth:40,
									prop: 'area',
									placeholder:'请选择区',
									type: 'select',
									multiple:true,
									filterable:true,
									props: {
										label: 'name',
										value: 'name',
									},
									dicFlag: false,
									dicUrl: '/blade-system/region/select?cityNames={{city}}',
									span:24,
								},
							]
						},
						{
							label: '按运维商',
							column:[
								{
									label: '运维商',
									labelWidth:70,
									prop: 'siteId',
									span:24,
									type: 'select',
									multiple:true,
									filterable:true,
									props: {
										label: 'name',
										value: 'id',
									},
									dicUrl: '/sf/operationSite/list',
								},
							]
						},
						{
							label: '按电站',
							column:[
								{
									label: '电站编码',
									prop: 'entryId',
									span:24,
									type: 'select',
									multiple:true,
									filterable:true,
									props: {
										label: 'powerStationCode',
										value: 'id',
									},
									dicUrl: '/nh/powerStation/getSelectPowerStaion',
								},
							]
						}
					],
				},
				
			}
		},
		mounted(){
			empDetail(this.obj.id).then(res=>{
				this.formData = {
					provinces: res.data.data.provinces ? res.data.data.provinces.split(",") : [],
					city: res.data.data.city ? res.data.data.city.split(",") : [],
					area: res.data.data.area ? res.data.data.area.split(",") : [],
					siteId: res.data.data.siteId ? res.data.data.siteId.split(",") : [],
					entryId: res.data.data.entryId ? res.data.data.entryId.split(",") : [],
					userId: this.obj.id,
				}
			});
		},
		methods:{
			cancel(){
				this.$emit('childSubmit','cancel');
			},
			submitForm(){
				this.$refs['formData'].validate((valid,done) => {
					if (valid) {
						let formData = JSON.parse(JSON.stringify(this.formData));
						let params = {
							provinces: formData.provinces.join(","),
							city: formData.city.join(","),
							area: formData.area.join(","),
							siteId: formData.siteId.join(","),
							entryId: formData.entryId.join(","),
							userId: this.obj.id,
						}
						editeEmpAuth(params).then(res => {
							this.$message({
								type: 'success',
								message: '操作成功!',
							});
							this.$emit('childSubmit');
						}, error => {
							window.console.log(error);
						});
						done();
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
		}
	}
</script>

<style>
</style>