<template>
	<el-dialog 
		:title="modalTitle" 
		:visible.sync="modalVisible" 
		:width="formLabelWidth" 
		top="2vh"
		@close="handleCancel">
		<div class="userMobile">
			<el-steps :active="stepsAcitve">
				<el-step title="填写基本信息"></el-step>
				<el-step title="数据源配置"></el-step>
				<el-step title="专题配置"></el-step>
			</el-steps>
			<div class="stepsWrap baseInfo" v-if="stepsAcitve == 1">
				<el-form label-width="100px" :model="form" :rules="rules" label-position="right" ref="baseInfo">
					<el-row :gutter="20">
						<el-col :span="20">
							<el-form-item label="专题名称：" prop="topicName">
								<el-input v-model="form.topicName"></el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="20">
						<el-col :span="20">
							<el-form-item label="专题说明:">
								<el-input
								  type="textarea"
								  :rows="4"
								  placeholder="请输入内容"
								  v-model="form.topicDesc">
								</el-input>
							</el-form-item> 
						</el-col>
					</el-row>
				</el-form>
			</div>	
			<div class="stepsWrap dataSource" v-if="stepsAcitve == 2">
				<el-form label-width="100px" :model="form" :rules="rules" label-position="left" ref="dataSource">
					<el-row :gutter="28">
						<el-form-item label="数据来源：" prop="sourceId">
							<el-select v-model="form.sourceId" filterable placeholder="请选择/或搜索">
							    <el-option
							      v-for="item in getList.dataSouceList"
							      :key="item.id"
							      :label="item.dataName"
							      :value="item.id">
							    </el-option>
							  </el-select>
						</el-form-item>
					</el-row>
				</el-form>
				<div class="explain">
					<el-divider></el-divider>
					<h3 class="descTitle">说明</h3>
					<p>经纬地址</p>
					<p>请指定经纬度及地址字段，需指定后才可看到状态地理分布及统计</p>
					<p>数据筛选</p>
					<p>可根据专题的主题对数据源的数据进行筛选。</p>
				</div>
			</div>
			<div class="stepsWrap special" v-if="stepsAcitve == 3">
				<el-form label-width="130px" :model="form" :rules="rules" label-position="right" ref="special">
					<el-row :gutter="20">
						<el-col :span="20">
							<el-form-item label="专题展现形式：" prop="showType">
								<el-select v-model="form.showType" placeholder="请选择" class="w100">
								    <el-option
								      v-for="item in getList.showTypeList"
								      :key="item.value"
								      :label="item.label"
								      :value="item.value">
								    </el-option>
								 </el-select>
							</el-form-item>
						</el-col>
					</el-row> 
					<el-row :gutter="20">
						  <el-col :span="10">
							 <el-form-item label="分布点名称：" prop="pointName">
								<el-select v-model="form.pointName" placeholder="请选择">
								    <el-option
								      v-for="item in getList.topIcdataList"
								      :key="item.id"
								      :label="item.fieldName"
								      :value="item.fieldName">
								    </el-option>
								 </el-select>
							 </el-form-item>
						  </el-col>
						  <el-col :span="10">
							  <el-form-item label="地址:" prop="address">
							  	<el-select v-model="form.address" placeholder="请选择">
							  	    <el-option
							  	      v-for="item in getList.topIcdataList"
							  	      :key="item.id"
							  	      :label="item.fieldName"
							  	      :value="item.fieldName">
							  	    </el-option>
							  	 </el-select>
							  </el-form-item>
						  </el-col>
					</el-row>
					<el-row :gutter="20">
						<el-col :span="20">
							<el-form-item label="展示地址：" prop="showUrl">
								<el-select v-model="form.showUrl" placeholder="请选择" class="w100">
								    <el-option
								      v-for="item in getList.topIcdataList"
								      :key="item.id"
								      :label="item.fieldName"
								      :value="item.fieldName">
								    </el-option>
								 </el-select>
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
				<div class="explain">
					<el-divider></el-divider>
					<h3 class="descTitle">说明</h3>
					<p>专题模板</p>
					<p>根据配置的字段信息，自动计算，并按照模板的展现形式自动进行可视化展示</p>
				</div>
			</div>
		</div>
		<div slot="footer" class="dialog-footer">
			<el-button style="margin-top: 12px;" @click="pre" v-show="stepsAcitve > 1">上一步</el-button>
			<el-button style="margin-top: 12px;" @click="next" v-show="stepsAcitve != 3 ">下一步</el-button>
			<el-button type="primary" @click="submit" v-show="stepsAcitve == 3">确 定</el-button>
		</div>
	</el-dialog>
</template>

<script>
import {globalReg} from '@/api/CONST'
export default {
	name: 'userMobiel',
	props: {
		visible: {
			type: Boolean,
			default: false
		},
		title: {
			type: String,
			default: 'title'
		},
		action: {
			type: String,
			default: 'add'
		}
	},
	watch: {
		visible(newVal, oldVal) {
			this.modalVisible = newVal;
		},
		title(newVal, oldVal) {
			this.modalTitle = newVal;
		},
		action(newVal, oldVal) {
			this.modalAction = newVal;
		}
	},
	data() {
		return {
			modalTitle: this.title,
			modalVisible: this.visible,
			modalAction: this.action,
			formLabelWidth: '820px',
			stepsAcitve:1,
			rules: {  
				topicName: [{ required: true, message: '专题名称不能为空!', trigger: 'blur' }],
				sourceId: [{ required: true, message: '数据来源不能为空!', trigger: 'blur' }],
				showType: [{ required: true, message: '专题展现形式不能为空!', trigger: 'blur' }],
				pointName: [{ required: true, message: '分布点名称不能为空!', trigger: 'blur' }],
				address: [{ required: true, message: '地址不能为空!', trigger: 'blur' }],
				showUrl: [{ required: true, message: '展示地址不能为空!', trigger: 'blur' }]
			},
			getList:{
				dataSouceList:[],
				showTypeList:[{
					label:'气泡',
					value:1
				},{
					label:'点状',
					value:2
				},{
					label:'箭头',
					value:3
				}],
				topIcdataList:[]
			},
			form: {}
		};
	},
	created() {
		this.getDataSource();
	},
	methods: {
		//数据来源
		getDataSource(){
			let params = {
				pageNo:1,
				pageSize:10000,
			}
			this.$port.getAreaListx(params)
				.then(res=>{
					this.getList.dataSouceList = res.list
				})
		},
		//获取分布点
		getRound(){
			let params = {
				id:this.form.sourceId
			}
			this.$port.getTopIcData(params)
				.then(res=>{
					this.getList.topIcdataList = res.list
				})
		},
		pre(){
			if(this.stepsAcitve <= 3){
				this.stepsAcitve --
			}
		},
		next(){
			if(this.stepsAcitve <= 3){
				switch(this.stepsAcitve){
					case 1:
						this.$refs.baseInfo.validate(valid => {
							if (valid) {
								this.stepsAcitve ++
							} else {
								return false;
							}
						});    
						break;	
					case 2:
						this.getRound();
						this.$refs.dataSource.validate(valid => {
							if (valid) {
								this.stepsAcitve ++
							} else {
								return false;
							}
						});
						break;
					default:
						break;
				}
			} 
		},
		submit(){
			this.$refs.special.validate(valid => {
				if (valid) {
					this.$port.addTopic(this.form)
						.then(res=>{
							this.$message.success('创建成功!')
							this.handleCancel()
							this.$emit('closeModal',true)
						})
				} else {
					return false;
				}
			});
		},
		handleCancel() {
			this.$emit('closeModal', false);
		}
	}
};
</script>

<style scoped lang="less">
	.stepsWrap{
		padding:60px 0;
		p{
			line-height:30px;
		}
		.descTitle{
			margin-bottom:10px;
		}
	}
	.baseInfo{
		.el-form{
			width:550px;
			margin:0 auto;
		}
	}
	.dataSource{
		.el-form{
			width:350px;
			margin:0 auto;
			.el-select{
				width: 300px;
			}
		}
	}
	.special{
		.el-form{
			padding:0 30px;
			.w100{
				width:600px;
			}
		}
	}
</style>
