<template>
	<div class="app-container">
		<!-- 历史数据 -->
		<el-dialog :title="'控制记录'" :visible.sync="historyDia.show" append-to-body :close-on-click-modal="false">
			<el-table :data="historyDia.hisData" size="small" style="width: 100%; padding: 20px">
				<!--<el-table-column prop="deviceid" label="设备ID" min-width="130%"/>-->
				<el-table-column prop="fieldname" label="支路名称" />
				<el-table-column prop="changeValve" label="支路" />
				<el-table-column prop="createTime" label="操作时间" min-width="130%">
					<!-- <template slot-scope="scope">
						<span>{{ parseTime(scope.row.logtime) }}</span>
					</template> -->
				</el-table-column>
				<el-table-column prop="action" label="操作" />
				<el-table-column prop="actionMsg" label="信息" />
			</el-table>
			<!--分页组件-->
			<el-pagination :total="historyDia.total" :current-page="historyDia.page" style="margin-top: 8px" layout="total, prev, pager, next, sizes" @size-change="sizeChange" @current-change="pageChange" />
		</el-dialog>
		<!-- 编辑 -->
		<el-dialog append-to-body :close-on-click-modal="false" :visible.sync="editDialog.remoteCtrl" :title="'编辑'" class="dialogVideo2" width="40%">
			<el-form ref="form" size="small" label-width="100px">
				<el-form-item label="项目">
					<el-input v-model="editDialog.edit.changeHouse" />
				</el-form-item>
				<el-form-item label="名称(非必填)">
					<el-input v-model.trim="editDialog.edit.changeName" />
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="text" @click="editDialog.remoteCtrl = false">取消</el-button>
				<el-button type="primary" @click="update">确认</el-button>
			</div>
		</el-dialog>
		<!-- 远程控制 -->
		<el-dialog append-to-body :close-on-click-modal="false" :before-close="closeRemoteCtrlDialog" :visible.sync="ctrlDialog.remoteCtrl" :title="'远程控制'" class="dialogVideo2" width="60%">
			<div class="ctrl-list">
				<ul>
					<li v-for="(item, index) in ctrlDialog.ctrlList" :key="index">
						<label class="el-form-item-label">{{ item.changeValve }}</label>
						<el-switch v-model="item.ieRealtimeData" active-color="#13ce66" inactive-color="#DCDFE6" @change="changeStatus(item)" :disabled="switchDis" active-value="True" inactive-value="False"></el-switch>
					</li>
				</ul>
			</div>
		</el-dialog>

		<!-- 修改控制器名称 -->
		<xgkzqDia ref="mychild" :firData="firData" :valueseldata1="valueseldata1" />
		<!-- 修改控制器名称end -->
		<!--表单组件-->
		<!-- <logForm ref="logform" /> -->
		<!--工具栏-->
		<div class="head-container">
			<!-- 搜索 -->
			<!--<el-input v-model="query.value" clearable placeholder="输入搜索内容" style="width: 200px;" class="filter-item" @keyup.enter.native="toQuery"/>
      <el-select v-model="query.type" clearable placeholder="类型" class="filter-item" style="width: 130px">
        <el-option v-for="item in queryTypeOptions" :key="item.key" :label="item.display_name" :value="item.key"/>
      </el-select>
      <el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="toQuery">搜索</el-button>-->
			<!-- 新增 -->
			<div style="display: inline-block; margin: 0px 2px">
				<el-button class="filter-item" size="mini" type="primary" icon="el-icon-refresh" @click="refresh" :disabled="status">重置</el-button>

				<el-button class="filter-item" size="mini" type="primary" icon="el-icon-edit" @click="hisDia">修改控制器名称</el-button>
			</div>
		</div>

		<!--表格渲染-->
		<el-table :data="firData" size="small" style="width: 100%">
			<el-table-column prop="changeName" label="设备名称" min-width="130%" />
			<el-table-column prop="changeHouse" label="所属项目" />
			<el-table-column label="在线控制" width="150px" align="center">
				<template slot-scope="scope">
					<el-button size="mini" type="primary" icon="el-icon-s-operation" @click="showWay(scope.row)" />
				</template>
			</el-table-column>
			<el-table-column label="控制记录" width="150px" align="center">
				<template slot-scope="scope">
					<el-button size="mini" type="success" icon="el-icon-time" @click="historyData(scope.row)" />
				</template>
			</el-table-column>
			<el-table-column label="操作" width="150px" align="center">
				<template slot-scope="scope">
					<el-button size="mini" type="primary" icon="el-icon-edit" @click="edit(scope.row)" />
					<el-popover :ref="scope.row.fieldname" placement="top" width="180">
						<p>确定删除本条数据吗？</p>
						<div style="text-align: right; margin: 0">
							<el-button size="mini" type="text" @click="$refs[scope.row.fieldname].doClose()">取消</el-button>
							<el-button :loading="delLoading" type="primary" size="mini" @click="subDelete(scope.row.fieldname)">确定</el-button>
						</div>
						<el-button slot="reference" type="danger" icon="el-icon-delete" size="mini" />
					</el-popover>
				</template>
			</el-table-column>
		</el-table>
		<!--分页组件-->
		<!-- <el-pagination :total="total" :current-page="page + 1" style="margin-top: 8px" layout="total, prev, pager, next, sizes" @size-change="sizeChange" @current-change="pageChange" /> -->
	</div>
</template>
<script>
import { reqApi } from '@/api/sfyt.js'
import xgkzqDia from './xgkzqDia.vue'
// import logForm from './logform'
import { mapGetters } from 'vuex'
export default {
	name: 'sfyt',
	components: {
		xgkzqDia,
		// logForm,
	},
	data() {
		return {
			switchDis: false,
			status: false,
			valueseldata1: '',
			delLoading: false,
			editDialog: {
				waydialog: false,
				loading: true,
				videoShow: false,
				form: {
					value1: false,
				},
				edit: {},
				remoteCtrl: false,
				remoteCtrlLoading: false,
			},
			ctrlDialog: {
				waydialog: false,
				loading: true,
				videoShow: false,
				form: {
					value1: false,
				},
				ctrlList: [
					{ name: '植物工厂05区水阀23', flag: true },
					{ name: '植物工厂05区水阀232号', flag: false },
					{ name: '植物工厂05区水阀233号', flag: true },
					{ name: '植物工厂05区水阀234号', flag: true },
					{ name: '植物工厂05区水阀235号', flag: true },
				],
				remoteCtrl: false,
				remoteCtrlLoading: false,
			},
			historyDia: {
				show: false,
				hisData: [],
				page: 1,
				size: 10,
				total: 0,
				fieldname: '',
			},
			username: {},
			// xgkzqDia: false,
			delLoading: false,
			firData: [],

			loginRules: {
				LoginNO: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
				password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
			},
			updateRules: {
				name: [{ required: true, message: '不可为空', trigger: 'blur' }],
			},
		}
	},
	computed: {
		...mapGetters(['user']),
	},
	created() {
		this.testtest()
		console.log(this.user)
	},
	mounted() {
		this.getData()
	},
	methods: {
		//历史
		historyData(v) {
			console.log(v)
			this.historyDia.show = true
			this.historyDia.fieldname = v.fieldname
			let param = {}
			param.fieldname = this.historyDia.fieldname
			param.page = this.historyDia.page
			param.size = this.historyDia.size
			param.username = this.user.username

			reqApi
				.sfytHis(param)
				.then(res => {
					this.historyDia.hisData = res.Data
					this.historyDia.total = res.total
				})
				.catch(err => {
					console.log(err, 'err-------')
				})
		},
		historyData1() {
			let param = {}
			param.fieldname = this.historyDia.fieldname
			param.page = this.historyDia.page
			param.size = this.historyDia.size
			param.username = this.user.username

			reqApi
				.sfytHis(param)
				.then(res => {
					this.historyDia.hisData = res.Data
					this.historyDia.total = res.total
				})
				.catch(err => {
					console.log(err, 'err-------')
				})
		},

		wrongErr() {
			this.$notify.error({
				title: '请检查账号密码',
				message: '账号或密码输入有误',
			})
		},
		succErr() {
			this.$notify({
				title: '成功',
				message: '登录成功',
				type: 'success',
			})
		},
		// 编辑
		edit(data) {
			console.log(data, 'editdata')
			this.editDialog.remoteCtrl = true
			this.editDialog.edit = data
		},
		update() {
			let param = {}
			param.fieldname = this.editDialog.edit.fieldname
			param.changename = this.editDialog.edit.changeName
			param.changehouse = this.editDialog.edit.changeHouse
			param.username = this.user.username
			reqApi.sfytUpdate(param).then(res => {
				if (res.Code == '200') {
					this.$notify({
						title: '修改成功',
						type: 'success',
						duration: 2500,
					})
					this.getData()
					this.editDialog.remoteCtrl = false
				} else {
					this.$notify({
						title: '修改失败，不可为空',
						type: 'warning',
						duration: 2500,
					})
					this.getData()
				}
			})
		},
		//删除
		subDelete(v) {
			console.log(this.firData.length)
			reqApi.sfytDel({ fieldname: v, username: this.user.username }).then(res => {
				this.$notify({
					title: '删除成功',
					type: 'success',
					duration: 2500,
				})
				this.$refs[v].doClose()
				this.getData()
			})
		},
		//获取数据
		getData() {
			let param = {}
			param.username = this.user.username

			reqApi.sfytLogin(param).then(res => {
				if (res.Code == '200') {
					this.firData = res.Data
					let getname = res.Data
					this.valueseldata1 = getname[0].changeName
				} else {
				}
			})
		},
		//重置

		cz() {
			this.status = true
		},
		refresh() {
			let _this = this
			var timer = window.setInterval(this.cz(), 0)
			window.setTimeout(function () {
				_this.status = false
				window.clearInterval(timer)
			}, 10000)
			let param = {}
			// this.status = true

			param.username = this.user.username
			reqApi.sfytReset(param).then(res => {
				console.log(res)
				if (res.Code == '200') {
					this.$notify({
						title: res.Msg,
						type: 'success',
						duration: 2500,
					})
					this.getData()
				} else {
					this.$notify({
						title: res.Msg,
						type: 'warning',
						duration: 2500,
					})
					this.getData()
				}
			})
		},

		// 在线控制
		showWay(data) {
			let param = {}
			// param.iefield = item.changeField
			// param.iename = item.ieName
			param.changename = data.fieldname
			param.username = this.user.username
			reqApi.sfytDiv(param).then(res => {
				console.log(res.Data, '在线控制')
				this.ctrlDialog.ctrlList = res.Data
			})
			this.ctrlDialog.remoteCtrl = true
			// this.ctrlDialog.remoteCtrlLoading = true

			console.log(this.ctrlDialog.ctrlList, 'zaixian')
		},
		closeRemoteCtrlDialog() {
			this.ctrlDialog.remoteCtrl = false
			this.ctrlDialog.loading = false
			//this.videoCtn && (this.videoCtn.innerHTML = '');
		},
		changeStatus(item) {
			let that = this
			this.switchDis = true
			let param = {}
			param.uname = this.user.username
			param.flag = item.ieRealtimeData
			param.ieid = item.ieId
			reqApi.sfytOnline(param).then(res => {
				console.log(res, 'sfytOnline')
				if (res.Code == '200') {
					console.log(res)
					this.$notify({
						title: res.Msg,
						type: 'success',
						duration: 2500,
					})
					that.switchDis = false
					this.getData()
					this.editDialog.remoteCtrl = false
				} else {
					console.log(item, 'item')
					console.log(this.ctrlDialog)
					item.ieRealtimeData = !item.ieRealtimeData
					this.$notify({
						title: res.Msg,
						type: 'warning',
						duration: 2500,
					})
					that.switchDis = false
					this.getData()
				}
			})
		},

		//调用xgkzqDia方法
		hisDia() {
			this.$refs.mychild.parentHandleclick()
		},
		// getjilu() {
		// 	this.$refs.mychild.parentHandleclick()
		// },
		// showLog(data) {
		// 	this.$refs.logform.logdialog = true
		// 	console.log(data, 'showLog')
		// },
		pageChange(e) {
			console.log(e)
			this.historyDia.page = e
			this.historyData1()
		},
		sizeChange(e) {
			this.historyDia.page = 1
			this.historyDia.size = e
			this.historyData1()
		},
		testtest() {
			reqApi
				.testjk()
				.then(res => {
					console.log(res, 'testjk')
				})
				.catch(err => {
					console.log(err, 'err-------')
				})
		},
	},
}
</script>
<style scoped lang="scss">
.ctrl-list {
	overflow-y: auto;
	ul {
		font-size: 0;
	}
	li {
		font-size: 14px;
		display: inline-block;
		padding: 10px 0;
		margin-right: 40px;
		label {
			margin-right: 5px;
		}
	}
	.video {
		margin: 15px 0 5px;
	}
}

.dialogVideo {
	display: flex;
	align-items: center;
	justify-content: center;
	.el-dialog {
		margin: 0 !important;
	}
	.el-dialog__body {
		padding: 5px 20px;
	}

	.el-table {
		.el-input__inner {
			height: 25px;
			line-height: 25px;
		}

		.el-table--small td {
			padding: 5px 0;
		}
	}
}

.dialogVideo2 {
	.el-dialog__header {
		button {
			top: 8px;
			right: 8px;
		}
	}
	.el-dialog__body {
		padding-top: 0;
	}
	.in-box {
		border: 1px solid #aaa;
		position: relative;
		height: 60vh;
		.km-a {
			height: 100%;
			width: 100%;
		}
		iframe {
			height: 100%;
			width: 100%;
			border: 0;
		}
	}
}
</style>