<template>
	<!-- 应急预案弹框 -->
	<div>
		<el-dialog custom-class="bbsl-location-dialog" top="10vh" :close-on-click-modal="false" :title="title+'（应急预案）'"
			:visible.sync="showFormDia" width="80%" :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" disabled v-model="params.rscd" clearable
								placeholder="请选择水库名称">
								<el-option v-for="item in waterList" :key="item.id" :label="item.rsnm"
									:value="item.rscd"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="预案标题：" prop="planTitle">
							<el-input placeholder="请输入预案标题" size="mini" v-model="params.planTitle"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="预案摘要：" prop="planAbstract">
							<el-input placeholder="请输入预案摘要" size="mini" v-model="params.planAbstract"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="8">
						<el-form-item label="编制单位：" prop="weaveCompany">
							<el-input placeholder="请输入编制单位" size="mini" v-model="params.weaveCompany"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="编制时间：" prop="weaveDate">
							<el-date-picker style="width: 100%"  size="mini" value-format="yyyy-MM-dd" v-model="params.weaveDate"
								type="date" placeholder="请选择编制时间">
							</el-date-picker>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="批复单位：" prop="approvalCompany">
							<el-input placeholder="请输入批复单位" size="mini" v-model="params.approvalCompany"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="8">
						<el-form-item label="批复时间：" prop="approvalDate">
							<el-date-picker style="width: 100%" size="mini" value-format="yyyy-MM-dd" v-model="params.approvalDate"
								type="date" placeholder="请选择批复时间">
							</el-date-picker>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="上传文件：">
							<el-upload name="img" class="avatar-uploader" :action="uploadUrl"
								:on-success="uploadSuccess" :before-upload="beforeUpload" :headers="header"
								 :accept="accept" :file-list="fileList">
								<el-button icon="el-icon-upload" type="success">上传</el-button>
							</el-upload>
						</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 req from '@/request.js'
	import reinforcement from '@/api/reservoirManagement/resFrom.js'
	import {
		mapState
	} from 'vuex'
	export default {
		props: {
			showFormDia: {
				type: Boolean,
				default: false,
			},
			title: {
				type: String,
				default: '',
			},
			wId: {
				type: String,
				default: '',
			},
			plId: {
				type: String,
				default: '',
			},
		},
		data() {
			return {
				uploadUrl: window.context.portal + '/file/v1/upload', // 服务器上传地址
				accept: '.pdf',
				previewUrl: window.context.portal + '/file/onlinePreviewController/v1/getFileById_',
				params: {
					rscd: null,
					rsnm: null,
					planAbstract: null,
					planTitle: null,
					weaveCompany: null,
					weaveDate: null,
					approvalCompany: null,
					approvalDate: null,
					filePaths: null, //文件路径
				},
				fileList: [],
				waterList: [],
				previewUrl: window.context.portal +
					'/file/onlinePreviewController/v1/getFileById_',
				rules: {
					yhName: [{
						required: true,
						message: '请输入护养名称',
						trigger: 'blur',
					}, ],
					yhType: [{
						required: true,
						message: '请输入护养类型',
						trigger: 'blur',
					}, ],
				}
			}
		},
		created() {
			this.getWaters()
			this.getDetailInfo()
			this.getSysDict()
		},
		computed: mapState({
			header: (state) => {
				return {
					Authorization: `Bearer ${state.login.currentUser.token}`
				}
			},
		}),
		methods: {
			handleClose() {
				this.params = {}
				this.$emit('closeFormDiao')
			},
			//获取水库
			getWaters() {
				reinforcement.getWater({}, (res) => {
					this.waterList = res.value
					this.waterList.forEach((ee) => {
						if (this.wId == ee.id) {
							this.params.rscd = ee.rscd
							this.params.rsnm = ee.rsnm
						}
					})
				})
			},
			beforeUpload(file) {
				return true
			},
			uploadSuccess(res) {
				console.log(res);
				if (res) {
					let arr=[]
					arr.push({
						fileName:res.fileName,
						fileId:res.fileId
					})
					this.params.filePaths = JSON.stringify(arr)
				} else {
					// 提示信息，需引入Message
					this.$message.error('上传失败！')
				}
			},
			//保存
			goInfo(e) {
				this.$refs.formInfo.validate((valid) => {
					if (valid) {
						if (this.title === '新增') {
							let arr = JSON.parse(JSON.stringify(this.params))
							reinforcement.addSaveCon(this.params, (response) => {
								if (response.state) {
									this.$notify({
										type: 'success',
										message: '新增成功',
										duration: 2000,
									})
									this.$emit('closeFormDiao')
									this.$emit('refList')
								} else {}
							})
						}
						if (this.title === '修改') {
							reinforcement.upDataCon(this.params, (response) => {
								if (response.state) {
									this.$notify({
										type: 'success',
										message: '修改成功',
										duration: 2000,
									})
									this.$emit('closeFormDiao')
									this.$emit('refList')
								} else {}
							})
						}
					} else {
						return false
					}
				})
			},
			//取消
			handleClose() {
				this.params = {}
				this.$emit('closeFormDiao')
			},
			//修改查询
			getDetailInfo() {
				if (this.title === '修改') {
					reinforcement.detailIdCon(this.plId, (res) => {
						if (res.state) {
							this.params.rscd = res.value.rscd
							this.params.rsnm = res.value.rsnm
							this.params.planAbstract = res.value.planAbstract
							this.params.planTitle = res.value.planTitle
							this.params.planTitle = res.value.planTitle
							this.params.weaveDate = res.value.weaveDate
							this.params.approvalCompany = res.value.approvalCompany
							this.params.approvalDate = res.value.approvalDate
							this.params.id = res.value.id
							this.params.pkVal = res.value.pkVal
							this.params.filePaths = res.value.filePaths
							let aaa = JSON.parse(res.value.filePaths)
							if (res.value.filePaths) {
								aaa.forEach(e=>{
									this.fileList.push({
									name: e.fileName,
									url: this.previewUrl + e.fileId
								})
								})
							}

						}
					})
				} else {

				}
			},
			//获取字典数据
			getSysDict() {
				let portal = window.context.portal
				return new Promise((resolve, reject) => {
					req.post(portal + '/sys/sysDictionary/v1/queryAllDictItems').then(
						(response) => {
							resolve(response.data)
						},
						(error) => {
							reject(error)
						}
					)
				})
			},
		}
	}
</script>

<style>

</style>
