<template>
	<!-- 取水站弹框 -->
	<div>
		<el-dialog :title="title" :visible.sync="showFormDia" width="85%" :before-close="handleClose">
			<el-form ref="formInfo" :rules="rules" :model="params" label-width="150px">
				<el-row>
					<el-col :span="8">
						<el-form-item label="纸质证编号" prop="paperId">
							<el-select style="width: 100%" size="small" v-model="params.paperId" clearable
								placeholder="请选择纸质证编号" @change="selectChange">
								<el-option v-for="item in waterCards" :key="item.id" :label="item.wpcSn"
									:value="item.id"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="测站编号" prop="stcd">
							<el-input size="small" clearable placeholder="请输入测站编号" v-model="params.stcd">
							</el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="测站名称" prop="stnm">
							<el-input size="small" clearable placeholder="请输入测站名称" v-model="params.stnm">
							</el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="8">
						<el-form-item label="测站类型" prop="sttp">
							<el-select style="width: 100%" size="small" disabled v-model="params.sttp" clearable
								placeholder="请选择测站类型" @change="selectChange">
								<el-option v-for="item in stationTypeS" :key="item.id" :label="item.name"
									:value="item.value"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="行政区划" prop="addvcd">
							<el-cascader  filterable style="width: 100%" :show-all-levels="false" :options="basAdNames"
								v-model="params.addvcd" :props="{value: 'code', label: 'name', children: 'children'}"
								@change="onhouChange" placeholder="请选择所属行政区划" clearable>
								<template slot-scope="{node, data}">
									<span>{{ data.name }}</span>
									<span v-if="!node.isLeaf">
										({{ data.children === [] ? '' : data.children.length }})
									</span>
								</template>
							</el-cascader>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="安装详细地址" prop="stlc">
							<el-input size="small" clearable placeholder="请输入安装详细地址" v-model="params.stlc">
							</el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="8">
						<el-form-item label="经度" prop="lgtd">
							<el-input size="small" @input="deadLevs('1')" clearable placeholder="请输入经度"
								v-model="params.lgtd">
							</el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="纬度" prop="lttd">
							<el-input size="small" @input="deadLevs('2')" clearable placeholder="请输入纬度"
								v-model="params.lttd">
							</el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="安装位置" prop="incd">
							<el-cascader style="width: 100%" :show-all-levels="false" :options="installationTypes"
								v-model="params.incd" :props="{value: 'reCode', label: 'name', children: 'children'}"
								@change="onhouChange" placeholder="请选择安装类型" clearable>
								<template slot-scope="{node, data}">
									<span>{{ data.name }}</span>
									<span v-if="!node.isLeaf">
										({{ data.children === [] ? '' : data.children.length }})
									</span>
								</template>
							</el-cascader>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-form-item label="备注：" prop="memo">
						<el-input type="textarea" :autosize="{minRows: 2, maxRows: 4}" placeholder="请输入内容"
							v-model="params.memo">
						</el-input>
					</el-form-item>

				</el-row>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button type="primary" @click="goInfo">保 存</el-button>
				<el-button @click="handleClose">取 消</el-button>
			</span>
		</el-dialog>
	</div>
</template>
<script>
	import {
		mapState
	} from 'vuex'
	import waterPaper from '@/api/waterPaper.js'
	import latitude from '@/mixins/latitude'
	import req from '@/request.js'
	export default {
		name: 'wsFormDialog',
		props: {
			showFormDia: {
				type: Boolean,
				default: false,
			},
			title: {
				type: String,
				default: '',
			},
			plId: {
				type: String,
				default: '',
			},
			id: {
				type: String,
				default: '',
			},
		},
		data() {
			return {
				params: {
					wpcSn: null,
					paperId: null,
					stcd: null,
					stnm: null,
					sttp: null,
					addvcd: null,
					stlc: null,
					lgtd: null,
					lttd: null,
					intp: null,
					incd: null,
					memo: null, //备注
				},
				basAdNames: [], //行政区划
				waterCards: [], //取水证
				installationTypes: [], //安装类型 
				stationTypeS: [], //测站类型
				rules: {
					paperId: [{
						required: true,
						message: '请选择纸质证编号',
						trigger: 'blur',
					}],
					stcd: [{
						required: true,
						message: '请输入测站编号',
						trigger: 'blur',
					}],
					stnm: [{
						required: true,
						message: '请输入测站名称',
						trigger: 'blur',
					}],
				},
			}
		},
		created() {
			waterPaper.getbasAdName({}, (res) => {
				this.basAdNames = res.value
				// this.params.addvcd = []
				// if (this.basAdNames[0]) {
				// 	this.params.addvcd.push(this.basAdNames[0].code)
				// 	if (this.basAdNames[0].children[0]) {
				// 		this.params.addvcd.push(this.basAdNames[0].children[0].code)
				// 		if (this.basAdNames[0].children[0].children[0]) {
				// 			this.params.addvcd.push(this.basAdNames[0].children[0].children[0].code)
				// 			if (this.basAdNames[0].children[0].children[0].children[0]) {
				// 				this.params.addvcd.push(this.basAdNames[0].children[0].children[0].children[0]
				// 					.code)
				// 			}
				// 		}
				// 	}
				// }
			})
			waterPaper.positionTree({}, (res) => {
				this.installationTypes = res.value
				this.params.incd = []
				if (this.installationTypes[0]) {
					this.params.incd.push(this.installationTypes[0].reCode)
					if (this.installationTypes[0].children[0]) {
						this.params.incd.push(this.installationTypes[0].children[0].reCode)
					}
				}
			})
			this.getwaterCard()
			this.getDetailInfo()
			this.getSysDict()

		},
		methods: {
			// 获取取水证
			getwaterCard() {
				waterPaper.getwaterCard({}, (res) => {
					this.waterCards = res.value
					this.waterCards.forEach((ee) => {
						if (this.plId == ee.id) {
							this.params.paperId = ee.id
						}
					})
				})
			},
			selectChange() {
				this.$forceUpdate()
			},
			deadLevs(val) {
				switch (val) {
					case '1':
						this.params.lttd = latitude.TreeFour(this.params.lttd)
						break
					case '2':
						this.params.lttd = latitude.TreeFour(this.params.lttd)
						break

				}
			},
			onhouChange(val) {
				if (val) {
					this.params.addvcd = val[val.length - 1]
					let arr = this.basAdNames.filter((ite) => ite.code === val[0])
					this.calleArr(arr, val[val.length - 1])
				}
			},
			calleArr(array, val) {
				for (let i in array) {
					let item = array[i]
					if (item.children) {
						this.calleArr(item.children, val) //自己调用自己
					} else {
						if (item.code === val) {
							// this.params.areaName = item.fullName
						}
					}
				}
			},
			//取消
			handleClose() {
				this.params = {}
				this.$emit('closeFormDiao')
			},

			// 根据ID查询
			getDetailInfo() {
				if (this.title === '修改') {
					waterPaper.detailIdStation(this.id, (res) => {
						if (res.state) {
							this.params.wpcSn = this.plId
							this.params.id=res.value.id
							this.params.addvcd = res.value.addvcd
							this.params.incd = res.value.incd
							this.params.intp = res.value.intp
							this.params.lgtd = res.value.lgtd
							this.params.lttd = res.value.lttd
							this.params.memo = res.value.memo
							this.params.paperId = res.value.paperId
							this.params.stcd = res.value.stcd
							this.params.stcd = res.value.stcd
							this.params.stlc = res.value.stlc
							this.params.stnm = res.value.stnm
							// this.params.sttp = res.value.sttp
							this.params.usfl = res.value.usfl
						}
					})
				} else {

				}
			},

			goInfo(e) {
				this.params.wpcSn=this.params.paperId
				this.params.intp = this.params.incd[0]
				this.params.incd = this.params.incd[1]
				this.$refs.formInfo.validate((valid) => {
					if (valid) {
						if (this.title === '新增') {
							let arr = JSON.parse(JSON.stringify(this.params))
							waterPaper.addSaveStation(this.params, (response) => {
								if (response.state) {
									this.$notify({
										type: 'success',
										message: '新增成功',
										duration: 2000,
									})
									this.$emit('closeFormDiao')
									this.$emit('refList')
								} else {}
							})
						}
						if (this.title === '修改') {
							waterPaper.upDataStation(this.params, (response) => {
								if (response.state) {
									this.$notify({
										type: 'success',
										message: '修改成功',
										duration: 2000,
									})
									this.$emit('closeFormDiao')
									this.$emit('refList')
								} else {}
							})
						}
					} else {
						return false
					}
				})
			},
			getRowKey(row) {
				return row.id
			},
			//获取字典数据
			getSysDict() {
				let portal = window.context.portal
				return new Promise((resolve, reject) => {
					req.post(portal + '/sys/sysDictionary/v1/queryAllDictItems').then(
						(response) => {
							resolve(response.data)
							this.stationTypeS = response.data.sblx
							this.params.sttp = this.stationTypeS[8].value
						},
						(error) => {
							reject(error)
						}
					)
				})
			},
		},
	}
</script>
<style lang="scss" scoped>
	.redBull {
		border: 1px solid red;
	}
