<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="waterName">
						<el-select style="width: 100%" size="mini" v-model="params.waterId" clearable
							placeholder="请选择取水户"  @change="selectChange">
							<el-option v-for="item in waterNames" :key="item.id" :label="item.waterName"
								:value="item.waterCode"></el-option>
						</el-select>
					</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="电子证编号" prop="wecSn">
							<el-input size="mini" clearable placeholder="请输入电子证编号" 
								v-model="params.wecSn"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="纸质证编号" prop="wpcSn">
							<el-input size="mini" clearable placeholder="请输入纸质证编号"   v-model="params.wpcSn"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="8">
						<el-form-item label="统一社会信用代码" prop="wscSn">
							<el-input size="mini" clearable placeholder="请输入统一社会信用代码"   v-model="params.wscSn">
							</el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="水源类型" prop="waterSource">
							<el-select style="width: 100%" size="mini" v-model="params.waterSource" clearable
								placeholder="请选择水源类型">
								<el-option v-for="item in headwatersTypes" :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="address">
							<el-input size="mini" clearable placeholder="请输入取水地址" v-model="params.address"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="8">
						<el-form-item label="取水方式">
							<el-select style="width: 100%" size="mini" v-model="params.waterFetch" clearable
								placeholder="请选择取水方式">
								<el-option v-for="item in waterModes" :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="取水用途">
							<el-select style="width: 100%" size="mini" v-model="params.waterPurpose" clearable
								placeholder="请选择取水用途">
								<el-option v-for="item in waterPurposes" :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="waterIntake">
							<el-input size="mini" clearable placeholder="请输入许可水量(万立方米)"  v-on:input="deadLevs(1)"  v-model="params.waterIntake">
							</el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="8">
						<el-form-item label="发证机关" prop="sendCompany">
							<el-input size="mini" clearable placeholder="请输入发证机关" v-model="params.sendCompany">
							</el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="发证日期" prop="sendDate">
							<el-date-picker style="width: 100%"  size="mini" value-format="yyyy-MM-dd" v-model="params.sendDate"
								type="date" placeholder="选择日期">
							</el-date-picker>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="有效日期" prop="endDate">
							<el-date-picker style="width: 100%"  size="mini" value-format="yyyy-MM-dd" v-model="params.endDate"
								type="date" placeholder="选择日期">
							</el-date-picker>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="8">
						<el-form-item label="证件状态">
							<el-select style="width: 100%" size="mini" v-model="params.status" clearable
								placeholder="请选择证件状态">
								<el-option v-for="item in certificates" :key="item.id" :label="item.name"
									:value="item.value"></el-option>
							</el-select>
						</el-form-item>
					</el-col>

				</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: 'wpFormDialog',
		props: {
			showFormDia: {
				type: Boolean,
				default: false,
			},
			title: {
				type: String,
				default: '',
			},
			pId: {
				type: String,
				default: '',
			},
			waterName: {
				type: String,
				default: '',
			},
		},
		data() {
			return {
				params: {
					waterName: null, //取水户
					wecSn: null, //电子证编号
					wpcSn: null, //纸质证编号
					wscSn: null, //统一社会信用代码
					waterSource: null, //水源类型
					address: null, //取水地址
					waterFetch: null, //取水方式
					waterPurpose: null, //取水用途
					waterIntake: null, //许可水量
					sendCompany: null, //发证机关
					sendDate: null, //发证日期
					endDate: null, //有效日期
					status: null, //证件状态
				},
				waterTypes: [], //取水类型
				monitorLevels: [], //监控级别
				certificates: [], //证件状态
				headwatersTypes: [], //水源类型
				waterPurposes: [], //取水用途
				waterModes: [], //取水方式
				waterNames:[],//取水户
				rules: {
					waterName: [{
						required: true,
						message: '请输入取水户',
						trigger: 'blur',
					}],
					wecSn: [{
						required: true,
						message: '请输入电子证编号',
						trigger: 'blur',
					}],
					wpcSn: [{
						required: true,
						message: '请输入纸质证编号',
						trigger: 'blur',
					}],
					wscSn: [{
						required: true,
						message: '请输入统一社会信用代码',
						trigger: 'blur',
					}],
					waterSource: [{
						required: true,
						message: '请选择水源类型',
						trigger: 'blur',
					}],
					address: [{
						required: true,
						message: '请输入取水地址',
						trigger: 'blur',
					}],
				},
			}
		},
		created() {
			this.getwaterNames()
			this.waterNames.forEach((ee)=>{
				if(this.waterName==ee.waterName){
					this.params.waterId=ee.waterId
				}
			})
			// this.params.waterName = this.waterName
			this.getDetailInfo()
			this.getSysDict()
		},
		methods: {
			deadLevs(val) {
						this.params.waterIntake = latitude.FiveTwo(this.params.waterIntake)
			},
			//获取取水户下拉数据
			getwaterNames(){
				waterPaper.getwaterName({},(res)=>{
					if(res.state){
						this.waterNames=res.value
						this.params.waterId=this.waterNames[0].waterCode
					}
				})
			},
			 selectChange(val){
				 console.log(val);
			    this.$forceUpdate()
			  },
			onhouChange(val) {
				this.AdName = val
				this.params.addvcd = val.pop().toString()
			},
			//取消
			handleClose() {
				this.params = {}
				this.$emit('closeFormDiao')
			},

			// 根据ID查询
			getDetailInfo() {
				
				if (this.title === '修改') {
					waterPaper.detailId(this.pId, (res) => {
						if (res.state) {
							this.params.wecSn = res.value.wecSn
							this.params.wpcSn = res.value.wpcSn
							this.params.wscSn = res.value.wscSn
							this.params.waterSource = res.value.waterSource
							this.params.address = res.value.address
							this.params.waterFetch = res.value.waterFetch
							this.params.waterPurpose = res.value.waterPurpose
							this.params.sendCompany = res.value.sendCompany
							this.params.sendDate = res.value.sendDate
							this.params.endDate = res.value.endDate
							this.params.status = res.value.status
							this.params.id = res.value.id
							this.params.waterId = res.value.waterId
							// this.params.waterName=res.value.waterId
						}
					})
				} else {

				}
			},

			goInfo(e) {
				this.waterNames.forEach((ee)=>{
					if(this.params.waterId==ee.waterCode){
						this.params.waterName=ee.waterName
					}
				})
				this.$refs.formInfo.validate((valid) => {
					if (valid) {
						if (this.title === '新增') {
							let arr = JSON.parse(JSON.stringify(this.params))
							this.params.waterId = this.pId||this.params.waterId
							waterPaper.addSave(this.params, (response) => {
								if (response.state) {
									this.$notify({
										type: 'success',
										message: '新增成功',
										duration: 2000,
										// offset: 80
									})
									this.$emit('closeFormDiao')
									this.$emit('refList')
								} else {}
							})
						}
						if (this.title === '修改') {
							waterPaper.upData(this.params, (response) => {
								if (response.state) {
									this.$notify({
										type: 'success',
										message: '修改成功',
										duration: 2000,
									})
									this.$emit('closeFormDiao')
									this.$emit('refList')
								} else {}
							})
						}
					} else {
						return false
					}
				})
			},
			//获取字典数据
			getSysDict() {
				let portal = window.context.portal
				return new Promise((resolve, reject) => {
					req.post(portal + '/sys/sysDictionary/v1/queryAllDictItems').then(
						(response) => {
							resolve(response.data)
							this.waterTypes = response.data.qslx //取水类型
							this.monitorLevels = response.data.jkjb //监控级别
							this.certificates = response.data.zjzt //证件状态
							this.headwatersTypes = response.data.sylx //水源类型
							this.waterPurposes = response.data.qsyt //取水用途
							this.waterModes = response.data.qsfs //取水方式
							this.params.waterSource=this.headwatersTypes[0].value||''
							this.params.waterFetch=this.waterModes[0].value||''
							this.params.waterPurpose=this.waterPurposes[0].value||''
							this.params.status=this.certificates[0].value||''
						},
						(error) => {
							reject(error)
						}
					)
				})
			},
			getRowKey(row) {
				return row.id
			},
		},
	}
</script>
<style lang="scss" scoped>
	.redBull {
		border: 1px solid red;
	}
