<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="year">
							<el-date-picker style="width: 100%" value-format="yyyy" v-model="params.year" type="year" placeholder="选择年份">
							</el-date-picker>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="年计划量（万m³）" prop="yearPlan">
							<el-input size="small" clearable placeholder="请输入年计划量（万m³）"
								oninput="value=value.replace(/[^\d]/g,'')" maxlength="10" v-model.number="params.yearPlan">
							</el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="8">
						<el-form-item label="一月（万m³）" prop="month1Plan">
							<el-input size="small" clearable placeholder="请输入一月（万m³）"
								oninput="value=value.replace(/[^\d]/g,'')" maxlength="10" v-model.number="params.month1Plan">
							</el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="二月（万m³）" prop="month2Plan">
							<el-input size="small" clearable placeholder="请输入二月（万m³）"
								oninput="value=value.replace(/[^\d]/g,'')" maxlength="10" v-model.number="params.month2Plan">
							</el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="三月（万m³）" prop="month3Plan">
							<el-input size="small" clearable placeholder="请输入三月（万m³）"
								oninput="value=value.replace(/[^\d]/g,'')" maxlength="10" v-model.number="params.month3Plan">
							</el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="8">
						<el-form-item label="四月（万m³）" prop="month4Plan">
							<el-input size="small" clearable placeholder="请输入四月（万m³）"
								oninput="value=value.replace(/[^\d]/g,'')" maxlength="10" v-model.number="params.month4Plan">
							</el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="五月（万m³）" prop="month5Plan">
							<el-input size="small" clearable placeholder="请输入五月（万m³）"
								oninput="value=value.replace(/[^\d]/g,'')" maxlength="10" v-model.number="params.month5Plan">
							</el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="六月（万m³）" prop="month6Plan">
							<el-input size="small" clearable placeholder="请输入六月（万m³）"
								oninput="value=value.replace(/[^\d]/g,'')" maxlength="10" v-model.number="params.month6Plan">
							</el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="8">
						<el-form-item label="七月（万m³）" prop="month7Plan">
							<el-input size="small" clearable placeholder="请输入七月（万m³）"
								oninput="value=value.replace(/[^\d]/g,'')" maxlength="10" v-model.number="params.month7Plan">
							</el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="八月（万m³）" prop="month8Plan">
							<el-input size="small" clearable placeholder="请输入八月（万m³）"
								oninput="value=value.replace(/[^\d]/g,'')" maxlength="10" v-model.number="params.month8Plan">
							</el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="九月（万m³）" prop="month9Plan">
							<el-input size="small" clearable placeholder="请输入九月（万m³）"
								oninput="value=value.replace(/[^\d]/g,'')" maxlength="10" v-model.number="params.month9Plan">
							</el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="8">
						<el-form-item label="十月（万m³）" prop="month10Plan">
							<el-input size="small" clearable placeholder="请输入十月（万m³）"
								oninput="value=value.replace(/[^\d]/g,'')" maxlength="10" v-model.number="params.month10Plan">
							</el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="十一月（万m³）" prop="month11Plan">
							<el-input size="small" clearable placeholder="请输入十一月（万m³）"
								oninput="value=value.replace(/[^\d]/g,'')" maxlength="10" v-model.number="params.month11Plan">
							</el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="十二月（万m³）" prop="month12Plan">
							<el-input size="small" clearable placeholder="请输入十二月（万m³）"
								oninput="value=value.replace(/[^\d]/g,'')" maxlength="10" v-model.number="params.month12Plan">
							</el-input>
						</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: 'plFormDialog',
		props: {
			showFormDia: {
				type: Boolean,
				default: false,
			},
			title: {
				type: String,
				default: '',
			},
			plId: {
				type: String,
				default: '',
			},
		},
		data() {
			return {
				params: {
					paperId: null, //取水证id
					year: null, //年份
					yearPlan: null, //年计划量
					month1Plan: null, //一月计划量
					month2Plan: null,
					month3Plan: null,
					month4Plan: null,
					month5Plan: null,
					month6Plan: null,
					month7Plan: null,
					month8Plan: null,
					month9Plan: null,
					month10Plan: null,
					month11Plan: null,
					month12Plan: null,
					memo: null, //备注
				},
				waterCards: [], //取水证
				rules: {
					paperId: [{
						required: true,
						message: '请选择取水证',
						trigger: 'blur',
					}],
					year: [{
						required: true,
						message: '请选择年份',
						trigger: 'blur',
					}],
				},
			}
		},
		created() {
			this.getwaterCard()
			this.getDetailInfo()
			
		},
		methods: {
			// 获取取水证
			getwaterCard(){
				waterPaper.getwaterCard({},(res)=>{
					this.waterCards=res.value
					this.params.paperId=res.value[0].id
				})
			},
			selectChange() {
				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.detailIdPlan(this.plId, (res) => {
						if (res.state) {
							this.params.paperId = res.value.paperId
							this.params.year = res.value.year.toString()
							this.params.yearPlan = res.value.yearPlan
							this.params.month1Plan = res.value.month1Plan
							this.params.month2Plan = res.value.month2Plan
							this.params.month3Plan = res.value.month3Plan
							this.params.month4Plan = res.value.month4Plan
							this.params.month5Plan = res.value.month5Plan
							this.params.month6Plan = res.value.month6Plan
							this.params.month7Plan = res.value.month7Plan
							this.params.month8Plan = res.value.month8Plan
							this.params.month9Plan = res.value.month9Plan
							this.params.month10Plan = res.value.month10Plan
							this.params.month11Plan = res.value.month11Plan
							this.params.month12Plan = res.value.month12Plan
							this.params.memo = res.value.memo
						}
					})
				} else {

				}
			},

			goInfo(e) {
				this.$refs.formInfo.validate((valid) => {
					if (valid) {
						// this.params.year=Number(this.params.year)
						if (this.title === '新增') {
							let arr = JSON.parse(JSON.stringify(this.params))
							waterPaper.addSavePlan(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.upDataPlan(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
			},
		},
	}
</script>
<style lang="scss" scoped>
	.redBull {
		border: 1px solid red;
	}
