<template>
	<div class="content-main">
		<el-row class="search-bm-boder">
			<el-form :inline="true" :model="formInline" class="demo-form-inline">
				<el-form-item label="类型">
					<el-select
						@change="sblxChange"
						clearable
						v-model="formInline.sbfl"
						filterable
						placeholder="请选择"
					>
						<el-option
							v-for="(item,index) in sblxOptions"
							:key="index"
							:label="item.dictName"
							:value="item.dictName"
						></el-option>
					</el-select>
					<!-- <el-input clearable v-model="formInline.sbfl" placeholder="请输入"></el-input> -->
				</el-form-item>
				<el-form-item label="设施名称">
					<el-cascader
						clearable
						v-model="formInline.sbyqmc"
						placeholder="设备名称"
						:props="defaultParams"
						:options="sbmcOptions"
						:show-all-levels="false"
						filterable
					></el-cascader>
					<!-- <el-input clearable v-model="formInline.sbyqmc" placeholder="请输入"></el-input> -->
				</el-form-item>

				<el-form-item label="状态">
					<el-select clearable v-model="formInline.sfba" placeholder="请选择">
						<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<div class="search-button">
					<span class="search-line"></span>
					<el-button type="primary" size="small" class="iconfont iconchaxun" @click="doSearch">查询</el-button>
					<el-button type="primary" @click="formInline={};doSearch()" size="small" class="iconfont iconzhongzhi">重置</el-button>
					</div>
				</el-form-item>
			</el-form>
		</el-row>
		<el-row></el-row>
		<el-row
			class="addBtnBg"
			style="background: rgb(237, 245, 253); line-height: 50px;margin-bottom: 10px;"
		>
			<el-button type="primary" class="iconfont iconshenhe" size="small" @click="addSubmit()">批量审核</el-button>
			<span style="float:right;margin-right:30px;">单位:立方米;平方米;件;个;台;吨;米</span>
		</el-row>
		<el-row>
			<el-table
				:data="tableData"
				ref="multipleTable"
				@selection-change="handleSelectionChange"
				stripe
				v-loading="listLoading"
				tooltip-effect="dark"
				border
				fit
				highlight-current-row
				style="width: 100%"
			>
				<el-table-column align="center" type="selection" width="70" :selectable="checkboxT">
					<!-- <template slot-scope="scope"><span>{{scope.$index+1}}</span></template> -->
				</el-table-column>
				<el-table-column align="center" prop="sbbm" label="编码" show-overflow-tooltip>
					<template slot-scope="scope">{{scope.row.sbbm}}</template>
				</el-table-column>
				<el-table-column align="center" prop="sbfl" label="类型" show-overflow-tooltip>
					<template slot-scope="scope">{{scope.row.sbfl}}</template>
				</el-table-column>
				<el-table-column align="center" prop="sbyqmc" label="名称" show-overflow-tooltip>
					<template slot-scope="scope">{{scope.row.sbyqmc}}</template>
				</el-table-column>
				<el-table-column align="center" prop="sbsl" label="数量" show-overflow-tooltip>
					<template slot-scope="scope">{{scope.row.sbsl}}</template>
				</el-table-column>
				<el-table-column align="center" prop="whsj" label="维护日期" show-overflow-tooltip>
					<template slot-scope="scope">{{scope.row.whsj}}</template>
				</el-table-column>
				<el-table-column align="center" prop="djr" label="维护人" show-overflow-tooltip>
					<template slot-scope="scope">{{scope.row.djr}}</template>
				</el-table-column>
				<el-table-column align="center" prop="sfba" label="状态">
					<template slot-scope="scope">
						<!-- <span v-if="scope.row.sfba == '0'">未备案</span> -->
						<span v-if="scope.row.sfba == '1'">待提交</span>
						<span v-if="scope.row.sfba == '2'">审核中</span>
						<span v-if="scope.row.sfba == '3'">已驳回</span>
						<!-- <span v-if="scope.row.sfba == '4'">已备案</span> -->
						<span v-if="scope.row.sfba == '5'">审核通过</span>
					</template>
				</el-table-column>
				<el-table-column align="center" label="操作" width="150">
					<template slot-scope="scope">
						<!-- <el-button  @click="deleteSubmit(scope.row.sbbh)" title="删除" v-if="scope.row.sfba == 1" type="primary"  size="small"  class="operate_delete_btn iconfont iconshanchu"></el-button> -->
						<el-button
							style="float:left"
							@click="detailSubmit(scope.row.sbbh,scope.row)"
							title="查看"
							type="primary"
							size="small"
							class="operate_show_btn iconfont iconchakan2"
						></el-button>
						<el-button
							style="float:left"
							@click="editSubmit(scope.row.sbbh)"
							title="审批"
							v-if="scope.row.sfba == 2"
							type="primary"
							size="small"
							class="operate_edit_btn iconfont iconshenhe"
						></el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-row>
		<el-row>
			<el-pagination
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				:current-page.sync="pageForm.page"
				:page-sizes="[10,20,30,40]"
				:page-size="pageForm.size"
				layout="total, sizes, prev, pager, next, jumper"
				:total="pageForm.total"
			></el-pagination>
		</el-row>
		<el-dialog :visible.sync="littleaddDialog" :close-on-click-modal="false" title="设施信息审核" width="48%">
			<el-form ref="littledialogForm" :model="littledialogForm" label-width="100px">
				<el-row v-if="isChecked">
					<el-col :span="24">
						<h3 class="h3">设施审批信息</h3>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="24">
						<el-form-item label="审批:" prop="sfba" :rules="rules('审批')">
							<el-radio v-model="littledialogForm.sfba" @change="sss" :disabled="disSign" :label="5">通过</el-radio>
							<el-radio v-model="littledialogForm.sfba" @change="sss" :disabled="disSign" :label="3">驳回</el-radio>
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item label="审核意见:">
							<el-input :disabled="disSign" v-model="littledialogForm.shyj"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="审核人:">
							<el-input :disabled="true" v-model="littledialogForm.shrmc"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="审核时间:">
							<el-date-picker
								style="width:100%"
								:disabled="true"
								v-model="littledialogForm.shsj"
								type="date"
								value-format="yyyy-MM-dd HH:mm:ss"
								placeholder="选择日期"
							></el-date-picker>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="24">
						<div style="text-align:center;margin-top:20px">
							<el-button
								icon="iconfont icontijiao"
								type="primary"
								@click="littleupdateSubmitSend('dialogForm')"
							>保存</el-button>
							<el-button type="primary" icon="iconfont iconfanhui" @click="littlecancel">返回</el-button>
						</div>
					</el-col>
				</el-row>
			</el-form>
		</el-dialog>

		<el-dialog :visible.sync="addDialog" :close-on-click-modal="false" title="设施信息维护" width="48%">
			<el-form ref="dialogForm" :model="dialogForm" label-width="100px">
				<el-row>
					<el-col :span="12">
						<el-form-item label="编码" prop="sbbm">
							<el-input v-model="dialogForm.sbbm" :disabled="disSign"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="类型" prop="sbfl">
							<el-input v-model="dialogForm.sbfl" :disabled="disSign"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="名称" prop="sbyqmc">
							<el-input v-model="dialogForm.sbyqmc" :disabled="disSign"></el-input>
						</el-form-item>
					</el-col>

					<el-col :span="12">
						<el-form-item label="维护人" prop="djr">
							<el-input v-model="dialogForm.djr" :disabled="true"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="维护日期" prop="whsj">
							<el-date-picker
								style="width:100%"
								v-model="dialogForm.whsj"
								type="date"
								value-format="yyyy-MM-dd HH:mm:ss"
								placeholder="选择日期"
								:disabled="true"
							></el-date-picker>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="数量" prop="sbsl">
							<el-input
								placeholder="请输入内容"
								v-model="dialogForm.sbsl"
								:disabled="disSign"
								class="input-with-select"
							>
								<el-select
									v-model="dialogForm.sbdwmc"
									slot="append"
									:disabled="disSign"
									placeholder="请选择"
									style="width:120px"
								>
									<el-option label="立方米" value="2"></el-option>
									<el-option label="平方米" value="1"></el-option>
									<el-option label="件" value="3"></el-option>
									<el-option label="个" value="4"></el-option>
									<el-option label="台" value="5"></el-option>
									<el-option label="吨" value="6"></el-option>
									<el-option label="米" value="7"></el-option>
								</el-select>
							</el-input>
						</el-form-item>
					</el-col>
					<el-row v-if="isChecked">
						<el-col :span="24">
							<h3 class="h3">设施审批信息</h3>
						</el-col>
					</el-row>
					<el-row v-if="showFalse">
						<el-col :span="24">
							<el-form-item
								label="审批:"
								prop="sfba"
								:rules="{required:true, validator: validatePass, trigger: ['change','blur'] }"
							>
								<el-radio-group v-model="dialogForm.sfba" :disabled="disSigns" @change="codeval">
									<el-radio :label="5">通过</el-radio>
									<el-radio :label="3">驳回</el-radio>
								</el-radio-group>
							</el-form-item>
						</el-col>
						<el-col :span="24" >
							<el-form-item label="审核意见:">
								<el-input :disabled="disSigns" v-model="dialogForm.shyj"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="审核人:">
								<el-input :disabled="true" v-model="dialogForm.shrmc"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="审核时间:" prop="shsj">
								<el-date-picker
									style="width:100%"
									:disabled="true"
									v-model="dialogForm.shsj"
									type="date"
									value-format="yyyy-MM-dd HH:mm:ss"
									placeholder="选择日期"
								></el-date-picker>
							</el-form-item>
						</el-col>
					</el-row>
					<el-col :span="24">
						<div style="text-align:center;margin-top:20px">
							<el-button icon="iconfont icontijiao" type="primary" v-if="allShows" @click="updateSubmitSend">保存</el-button>
							<el-button
								type="primary"
								icon="iconfont iconfanhui"
								@click="cancel"
								v-if="dialogTitle === 'detail'"
							>返回</el-button>
							<el-button
								type="primary"
								icon="iconfont iconfanhui"
								@click="cancel"
								v-if="dialogTitle !== 'detail'"
							>返回</el-button>
						</div>
					</el-col>
				</el-row>
			</el-form>
		</el-dialog>
	</div>
</template>


<script>
import {
	getPageList,
	detailsFn,
	deleteFn,
	addFn,
	editFn,
	sbfindByGroupId,
	plsh
} from '@/api/jcxxwh/ssxx'
import { kd } from '@/api/jcxxwh/kd'
export default {
	data() {
		return {
			allShows:true,
			kd: '',
			defaultParams: {
				label: 'dictName',
				value: 'dictName',
				children: 'subDataDictionarys',
				name: 'dictName',
				emitPath: false
			},
			sbmcOptions: [],
			sblxOptions: [],
			bohui: false,
			bohuis: false,
			sbbhs: [],
			showFalse: false,
			multipleSelection: [],
			disSigns: false,
			formInline: {
				ssfl: 2,
				zts:[2,3,5]
			},
			addDialog: false,
			littleaddDialog: false,
			disSign: false,
			dialogTitle: 'add',
			dialogForm: {
				sbdwmc: '1',
				shrmc: sessionStorage.getItem('userName'),
				shsj: new Date()
			},
			littledialogForm: {
				shrmc: sessionStorage.getItem('userName'),
				shsj: new Date()
			},
			listLoading: false,
			tableData: [],
			pageForm: {
				page: 1,
				size: 10,
				total: 0
			},
			options: [
				// {
				// 	value: 1,
				// 	label: '待提交'
				// },
				{
					value: 2,
					label: '审核中'
				},
				{
					value: 3,
					label: '已驳回'
				},
				{
					value: 5,
					label: '审核通过'
				}
			],
			isChecked: false
		}
	},
	created() {
		//类型请求的接口
		sbfindByGroupId({ groupId: '5474', pdictCode: '5474' }).then((res) => {
			if (res.infoCode == 200) {
				this.sblxOptions = res.data
			}
		})
		// this.init()
		this.getList()
	},
	methods: {
		doSearch(){
			this.pageForm.page = 1
			this.init()
		},
		init() {
			kd().then((res) => {
				if (!res) return
				if (!res.data[0]) return
				this.kd = res.data[0].kddm
				this.getList()
			})
		},
		//设施类型的change事件
		sblxChange(val) {
			let pdictCode = ''
			this.sblxOptions.map((item) => {
				if (item.dictName == val) {
					pdictCode = item.dictCode
				}
			})
			if (val) {
				sbfindByGroupId({ groupId: '5474', pdictCode: pdictCode }).then(
					(res) => {
						if (res.infoCode == 200) {
							this.sbmcOptions = this.getTreeData(res.data)
						}
					}
				)
			} else {
				this.sbmcOptions = []
			}
		},
		getTreeData(data) {
			// 循环遍历json数据
			for (var i = 0; i < data.length; i++) {
				if (data[i].subDataDictionarys.length < 1) {
					// subDataDictionarys
					data[i].subDataDictionarys = undefined
				} else {
					// subDataDictionarys 递归调用 本方法
					this.getTreeData(data[i].subDataDictionarys)
				}
			}
			return data
		},
		getTreeVal(data, val) {
			// 循环遍历json数据
			if (data.length > 0) {
				for (var i = 0; i < data.length; i++) {
					if (data[i].subDataDictionarys == undefined) {
						if (data[i].dictCode == val) {
							// console.log(data[i].dictName)
							this.str = data[i].dictName
						}
					} else {
						// subDataDictionarys 递归调用 本方法
						this.getTreeVal(data[i].subDataDictionarys, val)
					}
				}
			} else {
				if (data.dictCode == val) {
					this.str = data.dictName
				}
			}
			console.log(this.str, 'return')
			return this.str
		},
		validatePass(rule, value, callback) {
			if (value == 3 || value == 5) {
				callback()
			} else {
				callback(new Error('请选择审核类型'))
			}
		},
		rules(label) {
			return {
				required: true,
				message: '请选择' + label + '状态',
				trigger: ['change', 'blur']
			}
		},
		//获取列表
		getList() {
			this.orgCode = sessionStorage.getItem('orgCode')
			this.formInline.jgId = this.orgCode
			this.formInline.kddm = this.kd
			getPageList(this.pageForm, this.formInline).then((res) => {
				this.tableData = res.data.list
				this.pageForm.total = res.data.total
				for (var i = 0; i < this.tableData.length; i++) {
					if (this.tableData[i].whsj) {
						var date = new Date()
						var year = date.getFullYear()
						var month =
							date.getMonth() + 1 < 10
								? '0' + (date.getMonth() + 1)
								: date.getMonth() + 1
						var day =
							date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
						this.dialogForm.whsj = year + '-' + month + '-' + day
						this.tableData[i].whsj = this.dialogForm.whsj
					}
				}
			})
		},
		codeval(val) {
			if (val == 5) {
				this.bohuis = false
			} else if (val == 3) {
				this.bohuis = true
			}
		},
		sss(val) {
			console.log(val, '999')
			if (val == 5) {
				this.bohui = false
			} else if (val == 3) {
				this.bohui = true
			}
		},
		//新增
		addSubmit() {
			if (this.multipleSelection.length) {
			this.littlerest()
			// this.dialogTitle = 'add'
			this.littleaddDialog = true
			this.disSign = false
			this.littledialogForm.shrmc = sessionStorage.getItem('userName')
			// this.littledialogForm.sfba = 5
        this.$set(this.littledialogForm,"sfba",5)
			var date = new Date()
			var year = date.getFullYear()
			var month =
				date.getMonth() + 1 < 10
					? '0' + (date.getMonth() + 1)
					: date.getMonth() + 1
			var day =
				date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
			this.littledialogForm.shsj = year + '-' + month + '-' + day
			} else {
				this.$message({
					message: '请先勾选',
					type: 'warning'
				})
			}
		},
		handleSelectionChange(val) {
			this.multipleSelection = val
			console.log(this.multipleSelection)
		},
		// 保存确认
		saveSubmit(formObj) {
			this.$refs[formObj].validate((valid) => {
				if (valid) {
					this.dialogForm.ssfl = 2
					this.dialogForm.sfba = 1
					addFn(this.dialogForm).then((res) => {
						if (res.infoCode == 200) {
							this.$message({
								message: '新增成功',
								type: 'success'
							})
							this.addDialog = false
							this.rest()
							this.getList()
						}
					})
				} else {
					this.$message({
						message: '新增失败',
						type: 'error'
					})
					return false
				}
			})
		},
		saveSubmitSend(formObj) {
			this.$refs[formObj].validate((valid) => {
				if (valid) {
					this.dialogForm.ssfl = 2
					this.dialogForm.sfba = 2
					addFn(this.dialogForm).then((res) => {
						if (res.infoCode == 200) {
							this.$message({
								message: '提交成功',
								type: 'success'
							})
							this.addDialog = false
							this.rest()
							this.getList()
						}
					})
				} else {
					this.$message({
						message: '提交失败',
						type: 'error'
					})
					return false
				}
			})
		},
		//详情
		detailSubmit(id, row) {

			this.dialogTitle = 'detail'
			detailsFn(id).then((res) => {
				if (row.sfba == 2) {
					this.showFalse = false
				} else if (row.sfba == 5) {
					this.showFalse = true
					this.bohuis = false
				} else {
					this.bohui = true
					this.bohuis = true
					this.showFalse = true
				}
				this.allShows = false
				this.dialogForm = res.data
				this.addDialog = true
				this.disSign = true
				this.disSigns = true
			})
		},
		//删除
		deleteSubmit(rowId) {
			this.$confirm('此操作将永久删除, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			})
				.then(() => {
					deleteFn(rowId).then((res) => {
						if (res.infoCode == 200) {
							this.$message({
								message: '删除成功',
								type: 'success'
							})
							this.getList()
						} else {
							this.$message({
								message: '删除失败',
								type: 'error'
							})
							this.getList()
						}
					})
				})
				.catch(() => {
					this.$message({
						message: '已取消删除',
						type: 'warning'
					})
				})
		},
		// 编辑
		editSubmit(id) {
			this.allShows = true
			this.disSign = true
			this.disSigns = false
			this.showFalse = true
			detailsFn(id).then((res) => {
				this.dialogForm = res.data
				this.addDialog = true
				this.dialogForm.shrmc = sessionStorage.getItem('userName')
        this.$set(this.dialogForm,"shyj",'')
				var date = new Date()
				var year = date.getFullYear()
				var month =
					date.getMonth() + 1 < 10
						? '0' + (date.getMonth() + 1)
						: date.getMonth() + 1
				var day =
					date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
				this.dialogForm.shsj = year + '-' + month + '-' + day

			})
		},
		// 编辑确认
		updateSubmit(formObj) {
			this.$refs.littledialogForm.validate((valid) => {
				if (valid) {
					this.dialogForm.ssfl = 2
					this.dialogForm.sfba = 1
					editFn(this.dialogForm).then((res) => {
						this.$message({
							message: '修改成功',
							type: 'success'
						})
						this.addDialog = false
						this.rest()
						this.getList()
					})
				} else {
					this.$message.warning('请先填写必填项')
				}
			})
		},
		//行内审批
		psubmists() {
			this.dialogForm.ssfl = 2
			this.orgCode = sessionStorage.getItem('orgCode')
			this.dialogForm.jgId = this.orgCode
			editFn(this.dialogForm).then((res) => {
				if (res.infoCode == 200) {
					this.$message({
						message: '修改成功',
						type: 'success'
					})
					this.addDialog = false
					this.rest()
					this.getList()
				} else {
					this.$message({
						message: '修改失败',
						type: 'error'
					})
				}
			})
		},
		updateSubmitSend() {
			this.$refs.dialogForm.validate((valid) => {
				if (valid) {
					this.psubmists()
				} else {
					this.$message.warning('请先填写必填项')
				}
			})
		},
		checkboxT(row, index) {
			if (row.sfba == 5 || row.sfba == 3) {
				return false
			} else {
				return true
			}
		},
		//little审批提交
		littlesubs() {
			this.littledialogForm.ssfl = 2
			this.orgCode = sessionStorage.getItem('orgCode')
			this.littledialogForm.jgId = this.orgCode
			for (var i = 0; i < this.multipleSelection.length; i++) {
				this.sbbhs.push(this.multipleSelection[i].sbbh)
			}
			this.littledialogForm.sbbhs = this.sbbhs
			plsh(this.littledialogForm).then((res) => {
				if (res.infoCode == 200) {
					this.$message({
						message: '提交成功',
						type: 'success'
					})
					this.getList()
					this.littleaddDialog = false
					this.rest()
				} else {
					this.$message({
						message: '提交失败',
						type: 'error'
					})
				}
			})
		},
		littleupdateSubmitSend() {
			this.$refs.littledialogForm.validate((valid) => {
				if (valid) {
					this.littlesubs()
				} else {
					this.$message.warning('请先填写必填项')
				}
			})
		},

		// 提交
		sendSubmit(sbbh) {
			detailsFn(sbbh).then((res) => {
				let form = {}
				form = res.data
				form.sfba = this.dialogForm.sfba
				editFn(form).then((response) => {
					this.getList()
				})
			})
		},
		// 取消返回
		littlecancel() {
			this.littleaddDialog = false
		},
		cancel() {
			this.addDialog = false
			this.$refs.dialogForm.resetFields()
		},
		/* 初始化表单*/
		rest() {
			this.dialogForm = {
				sbdwmc: '1'
			}
			if (this.$refs['dialogForm'] !== undefined) {
				this.$refs['dialogForm'].resetFields()
			}
		},
		littlerest() {
			this.littledialogForm = {
				sbdwmc: '1'
			}
			if (this.$refs['littledialogForm'] !== undefined) {
				this.$refs['littledialogForm'].resetFields()
			}
		},

		handleSizeChange(val) {
			this.pageForm.size = val
			this.getList()
		},
		handleCurrentChange(val) {
			this.pageForm.page = val
			this.getList()
		}
	}
}
</script>
<style>
.h3 {
	text-align: center;
	font-size: 1em;
	line-height: 2.5;
	color: #fff;
	background-color: #49a2fa;
	margin-bottom: 20px;
}
</style>
