<template>
	<el-dialog 
		:title="modalTitle" 
		:visible.sync="modalVisible" 
		:width="formLabelWidth" 
		top="2vh"
		@close="handleCancel">
		<div class="userMobile">
			<el-form label-width="120px" :model="form" :rules="rules" label-position="right" ref="form">
				<el-collapse v-model="activeNames">
				  <el-collapse-item title="1.基本信息" name="1">
						<el-row :gutter="20">
							<el-col :span="20">
								<el-form-item label="专题名称:" prop="topicName">
									<el-input v-model="form.topicName" :disabled="limit.isRead"></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"
									  :disabled="limit.isRead"
									  placeholder="请输入内容"
									  v-model="form.topicDesc"></el-input>
								</el-form-item>
							</el-col>
						</el-row>
				  </el-collapse-item>
				  <el-collapse-item title="2.数据源配置" name="2">
						<el-row :gutter="20">
							<el-col :span="20">
								<el-form-item label="数据来源:" prop="sourceId">
									<el-select v-model="form.sourceId" filterable placeholder="请选择/或搜索" :disabled="limit.isRead" class="w100">
									    <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-col>
						</el-row>
				  </el-collapse-item>
				  <el-collapse-item title="3.专题配置" name="3">
						<el-row :gutter="20">
							<el-col :span="20">
								<el-form-item label="专题展现形式:" prop="showType">
									<el-select v-model="form.showType" placeholder="请选择" class="w100" :disabled="limit.isRead">
									    <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="20">
								<el-form-item label="分布点名称:" prop="pointName">
										<el-select v-model="form.pointName" class="w100" placeholder="请选择" :disabled="limit.isRead">
											<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="address" class="w100">
									<el-select v-model="form.address" class="w100" placeholder="请选择" :disabled="limit.isRead">
									    <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" :disabled="limit.isRead">
									    <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-collapse-item>
				</el-collapse>
			</el-form>
		</div>
		<div slot="footer" class="dialog-footer">
			<el-button @click="handleCancel">取 消</el-button>
			<el-button type="primary" @click="submit" v-if="!limit.isRead">确 定</el-button>
		</div>
	</el-dialog>
</template>

<script>
import {globalReg} from '@/api/CONST'
export default {
	name: 'veMobiel',
	props: {
		visible: {
			type: Boolean,
			default: false
		},
		title: {
			type: String,
			default: 'title'
		},
		action: {
			type: String,
			default: 'add'
		},
		selectRow:{
			type:Object,
			default:{}
		}
	},
	watch: {
		visible(newVal, oldVal) {
			this.modalVisible = newVal;
		},
		title(newVal, oldVal) {
			this.modalTitle = newVal;
		},
		action(newVal, oldVal) {
			this.modalAction = newVal;
		},
		selectRow(newVal,oldVal){
			this.modalSelectRow = newVal
		}
	},
	data() {
		return {
			modalTitle: this.title,
			modalVisible: this.visible,
			modalAction: this.action,
			modalSelectRow:this.selectRow,
			formLabelWidth: '820px',
			activeNames:['1','2','3'],
			limit:{
				isRead:false,
				isAdd:false
			},
			getList:{
				dataSouceList:[],
				showTypeList:[{
					label:'气泡',
					value:1
				},{
					label:'点状',
					value:2
				},{
					label:'箭头',
					value:3
				}],
				topIcdataList:[]
			},
			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' }]
			},
			form: {
			}
		};
	},
	created() {
		this.form = this.modalSelectRow
		this.getDataSource()
		this.getRound()
		if(this.modalAction === 'view'){
			this.limit.isRead = true
		}
	},
	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
				})
		},
		//获取详情
		getDetail(id){
			let params = {
				id:id
			}
			this.$port.viewUser(params)
				.then(res => {
					console.log(res)
					this.form = res
					this.form.roleIds = res.roles
				})
		},
		submit(){
			this.$refs.form.validate(valid => {
				if (valid) {
					console.log(this.form)
					this.$port.updateTopic(this.form)
						.then(res=>{
							this.$emit('closeModal',true)
						})
				}
			})	
		},
		handleCancel() {
			this.$emit('closeModal', false);
		}
	}
};
</script>

<style scoped lang="less">
	.w100{
		width:529px;
	}
</style>
