<template>
	<div>
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item>杀虫灯</el-breadcrumb-item>
		</el-breadcrumb>
		<search-bar
			@fun="getDisplayType"
			@fun2="getIDName"
			@fun3="getIsOnline"
		></search-bar>
		<div v-loading='dataloading'>
			<template v-if="displayType == 1">
				<el-row :gutter="10">
					<el-col
						:xs="24"
						:sm="24"
						:md="12"
						:lg="8"
						:xl="6"
						v-for="item in equipList"
						:key="item.imei"
					>
						<el-card class="box-card">
							<span
								:class="['on-stauts', item.device_status == 1 ? 'on' : 'off']"
							></span>
							<img src="@/assets/images/cure/scd/scdIconOn.png" />
							<p class="equip">{{ item.device_id }}</p>
							<div class="item_info">
								<p>设备名称 : {{ item.device_name || '无' }}</p>
								<p>最新上报时间 : {{ item.status_time }}</p>
								<p>地址 : {{ item.address || '无' }}</p>
							</div>
							<div class="btns">
								<el-button
									size="mini"
									type="info"
									@click="equipStateSet(item.device_id,item.device_status)"
									>设备状态</el-button
								>
								<el-button
									size="mini"
									type="warning"
									@click="EquipControl(item.device_id)"
									>设备控制</el-button
								>
								<el-button
									size="mini"
									type="danger"
									@click="dataDetails(item.device_id,item.device_name,item.address)"
									>数据详情</el-button
								>
							</div>
						</el-card>
					</el-col>
				</el-row>
			</template>
			<template v-if="displayType == 2">
				<el-card class="box-card">
					<el-table :data="equipList" stripe style="width: 100%">
						<el-table-column prop="device_id" label="设备ID" width="180">
							<template slot-scope="scope">{{ scope.row.device_id }}</template>
						</el-table-column>
						<el-table-column prop="device_name" label="设备名称" width="180">
							<template slot-scope="scope">{{
								scope.row.device_name == '' ? '无' : scope.row.device_name
							}}</template>
						</el-table-column>
						<el-table-column prop="device_status" label="在线状态">
							<template slot-scope="scope">
								<p style="color: #17bb89" v-if="scope.row.device_status == 1">
									在线
								</p>
								<p style="color: #eb6765" v-if="scope.row.device_status == 0">
									离线
								</p>
							</template>
						</el-table-column>
						<el-table-column prop="address" label="地址">
							<template slot-scope="scope">{{ scope.row.address }}</template>
						</el-table-column>
						<el-table-column prop="status_time" label="最新上报时间">
							<template slot-scope="scope">{{ scope.row.status_time }}</template>
						</el-table-column>
						<el-table-column label="操作" width="400">
							<template slot-scope="scope">
								<el-button
									size="mini"
									type="info"
									@click="
										equipStateSet(scope.row.device_id,scope.row.device_status)
									"
									>设备状态</el-button
								>
								<el-button
									size="mini"
									type="warning"
									@click="EquipControl(scope.row.device_id)"
									>设备控制</el-button
								>
								<el-button
									size="mini"
									type="danger"
									@click="dataDetails(scope.row.device_id,scope.row.device_name,scope.row.address)"
									>数据详情</el-button
								>
							</template>
						</el-table-column>
					</el-table>
				</el-card>
			</template>
			<!-- 暂无数据 -->
			<div class="expertDiagnosis_referral_units_not" v-if="equipList.length<=0 && displayType==1">
				<img
					src="@/assets/images/zanwu.png"
					alt
					class="expertDiagnosis_referral_units_notImg"
				/>
			</div>
		</div>
		
		<el-pagination
			v-if="equipList.length>0"
			background
			layout="prev, pager, next"
			:total="totalNum"
			:current-page="queryInfo.page"
			@current-change="changePage"
		></el-pagination>
		<!-- SIM卡对话框 -->
		<el-dialog title="SIM卡" :visible.sync="simCodeVisible" width="30%">
			<div class="simCodeBox">
				<div>
					<span class="simCodeTitle">ICCID：</span>
					<div>{{ sim.iccid }}</div>
				</div>
				<div>
					<span class="simCodeTitle">状态：</span>
					<div>{{ sim.account_status | simStatus }}</div>
				</div>
				<div>
					<span class="simCodeTitle">套餐：</span>
					<div>
						<el-progress :show-text="false" :percentage="100"></el-progress>
					</div>
					<span>{{ sim.data_plan }}MB</span>
				</div>
				<div>
					<span class="simCodeTitle">已用流量：</span>
					<div>
						<template v-if="!isNaN(data_usage_Per)">
							<el-progress
								:show-text="false"
								:percentage="data_usage_Per"
							></el-progress>
						</template>
					</div>
					<span>{{ sim.data_usage }}MB</span>
				</div>
				<div>
					<span class="simCodeTitle">剩余流量：</span>
					<div>
						<template v-if="!isNaN(data_balance_per)">
							<el-progress
								:show-text="false"
								:percentage="data_balance_per"
							></el-progress>
						</template>
					</div>
					<span>{{ sim.data_balance }}MB</span>
				</div>
				<div>
					<span class="simCodeTitle">到期时间：</span>
					<div>{{ (sim.expiry_date * 1000) | formatTime }}</div>
				</div>
				<div class="operateBtn">
					<el-button size="mini" @click="simCodeVisible = false"
						>关闭</el-button
					>
				</div>
			</div>
		</el-dialog>
		<!-- 设备控制对话框 -->
		<el-dialog
			title="设备控制"
			:visible.sync="equipControlDialogVisible"
			@close="equipControlDialogClosed"
			width="35%"
		>
			<div class="handAddForm">
				<el-form
					ref="equipContrlRef"
					:model="equipContrlForm"
					label-position="right"
					label-width="120px"
				>
					<el-form-item label="设备开关：" prop="ds">
						<el-select v-model="equipContrlForm.ds" @change="equipSwitch">
							<el-option label="开机" :value="1"></el-option>
							<el-option label="关机" :value="0"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="定时模式：" prop="ts">
						<el-select v-model="equipContrlForm.ts" placeholder="定时模式">
							<el-option label="光控" :value="0"></el-option>
							<el-option label="时控" :value="1"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item
						v-if="equipContrlForm.ts == 1"
						label="开始结束时间："
						prop="st"
					>
						<el-row :gutter="10">
							<el-col :span="10">
								<el-time-select
									placeholder="起始时间"
									v-model="equipContrlForm.st"
									:picker-options="{
										start: '0:00',
										step: '1:00',
										end: '23:00'
									}"
								></el-time-select>
							</el-col>
							<el-col class="line" :span="2">-</el-col>
							<el-col :span="10">
								<el-time-select
									placeholder="结束时间"
									v-model="equipContrlForm.et"
									:picker-options="{
										start: '0:00',
										step: '1:00',
										end: '23:00',
										minTime: equipContrlForm.st
									}"
								></el-time-select>
							</el-col>
						</el-row>
					</el-form-item>
					<el-form-item
						v-if="equipContrlForm.ts != 1"
						label="定时时长："
						prop="tt"
					>
						<el-select v-model="equipContrlForm.tt" placeholder="定时时长">
							<el-option label="常亮" :value="0"></el-option>
							<el-option :label="1" :value="1"></el-option>
							<el-option :label="2" :value="2"></el-option>
							<el-option :label="3" :value="3"></el-option>
							<el-option :label="4" :value="4"></el-option>
							<el-option :label="5" :value="5"></el-option>
							<el-option :label="6" :value="6"></el-option>
							<el-option :label="7" :value="7"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="上传时间间隔：" prop="dattim">
						<div class="sliderParent">
							<div class="block">
								<el-slider
									:min='10'
									:step='10'
									:max='120'
									v-model="equipContrlForm.dattim"
									show-input
								></el-slider>
							</div>
						</div>
					</el-form-item>
					<!-- <el-form-item label="自清虫定时：" prop="clt">
						<div class="sliderParent">
							<div class="block">
								<el-slider
									:min="10"
									:max="120"
									v-model="equipContrlForm.clt"
									show-input
								></el-slider>
							</div>
						</div>
					</el-form-item> -->
					<el-form-item class="handAddFormBtn">
						<el-button type="primary" size="mini" @click="equipControlSubm"
							>确定</el-button
						>
						<el-button size="mini" @click="equipControlDialogVisible = false"
							>取消</el-button
						>
					</el-form-item>
				</el-form>
			</div>
		</el-dialog>
		<!-- 设备状态弹框 -->
		<el-dialog
			title="设备状态"
			:visible.sync="equipStateDialogVisible"
			width="35%"
		>
			<el-row :gutter="20">
				<el-col
					:xs="24"
					:sm="24"
					:md="12"
					:lg="8"
					:xl="6"
					v-for="(item, index) in equipStateList"
					:key="index"
				>
					<div class="real-time">
						<div class="left">
							<div class>
								<img
									:src="
										'/static/images/cure/scd/stateIcon/' + (index + 1) + '.png'
									"
								/>
							</div>
						</div>
						<div class="right">
							<p class="num">
								<strong>{{ item.val }}</strong>
							</p>
							<p class="unit">{{ item.title }}</p>
						</div>
					</div>
				</el-col>
			</el-row>
		</el-dialog>
		<!-- 管理员操作对话框 -->
		<el-dialog title="操作" :visible.sync="operarionDialogVisible" width="30%">
			<div class="adminOperate">
				<el-button type="primary" round @click="equipBtnControl('update')"
					>升 级</el-button
				>
			</div>
			<div class="adminOperate">
				<el-button type="primary" round @click="equipBtnControl('reboot')"
					>重 启</el-button
				>
			</div>
		</el-dialog>
	</div>
</template>
<script>
import SearchBar from '@/components/SearchBar'
export default {
	data() {
		return {
			dataloading:false,
			//图表和表格切换
			displayType: '1',
			//在线状态按钮切换
			equipStatus: '0',
			//设备列表
			equipList: [],
			equipStateList: [
				{
					title: '设备开关',
					val: ''
				},
				{
					title: '工作状态',
					val: ''
				},
				{
					title: '定时时长(h)',
					val: ''
				},
				{
					title: '清虫间隔(min)',
					val: ''
				},
				{
					title: '灯管状态',
					val: ''
				},
				{
					title: '在线状态',
					val: ''
				},
				{
					title: '雨控状态',
					val: ''
				}
			],
			//参数
			currImei: '',
			d_id: '',
			selectItem: '1', //1设备号，2用户名
			searchVal: '',
			// sim卡
			sim: {
				iccid: '',
				account_status: 0, //卡状态 0-7 未知 测试期 沉默期 使用中 停机 停机保号 预销号 销号
				data_plan: 0, //套餐大小
				data_usage: 0, //当月用量
				data_balance: 0, //剩余流量
				expiry_date: 0 //到期日期
			},
			equipContrlForm: {
				st: '',
				et: '',
				ds: '',
				ts: '',
				tt: '',
				dattim: 10,
			},
			//参数
			queryInfo: {
				page: 1,
				is_online: null,
				dver: '',
				f_id: '',
				ename: ''
			},
			totalNum: 0,
			//SIM卡对话框
			simCodeVisible: false,
			//设备控制对话框
			equipControlDialogVisible: false,
			//编辑阈值信息对话框
			equipStateDialogVisible: false,
			//管理员设置
			operarionDialogVisible: false
		}
	},
	mounted() {
		this.getEquipList()
	},
	computed: {
		userType: function () {
			//获取用户类型
			return window.sessionStorage.getItem('myuser_type')
		},
		data_usage_Per: function () {
			let aa = Number(this.sim.data_usage / this.sim.data_plan) * 100
			return aa
		},
		data_balance_per: function () {
			let aa = Number(this.sim.data_balance / this.sim.data_plan) * 100
			return aa
		}
	},
	methods: {
		getIsOnline(data) {
			this.queryInfo.is_online = data
			this.queryInfo.page = 1
			this.getEquipList()
		},
		getIDName(data) {
			this.queryInfo.f_id = data.f_id
			this.queryInfo.ename = data.ename
			this.queryInfo.page = 1
			this.getEquipList()
		},
		getDisplayType(data) {
			this.displayType = data
		},
		//获取设备列表
		getEquipList() {
			this.dataloading = true;
			this.$axios({
				method: 'POST',
				url: '/api/equipmanage_scd',
				data: this.qs.stringify({
					req: 'filter',
					is_online:this.queryInfo.is_online,
					ename: this.queryInfo.ename,
					page: this.queryInfo.page,
					f_id: this.queryInfo.f_id,
				})
			}).then((res) => {
				this.dataloading = false
				if(res.data.nums){
					var dat = res.data.dat;
					var arr = [];
					for(var i = 0;i<dat.length;i++){
						arr.push({
							address: dat[i].locat,
							device_id: dat[i].equip_id,
							device_name: dat[i].equip_name,
							device_status: parseInt(dat[i].is_online),
							status_time: dat[i].upl_time,
						})
						if(i == dat.length-1){
							console.log(arr)
							this.equipList = arr
							this.totalNum = res.data.nums
						}
					}
				}else{
					this.equipList = []
					this.totalNum = 0
				}	
			},error =>{
				this.dataloading = false
				this.$message.error('获取失败')
			})
		},
		simSet(d_id) {
			this.$axios({
				method: 'POST',
				url: '/api/api_gateway?method=forecast.send_control.device_sim',
				data: this.qs.stringify({
					d_id: d_id,
					type: 'sim'
				})
			}).then((res) => {
				if (res.data.message == '') {
					this.sim.iccid = res.data.data[0].iccid
					this.$axios({
						method: 'POST',
						url: '/api/api_gateway?method=forecast.send_control.sim_query',
						data: this.qs.stringify({
							iccid: this.sim.iccid
						})
					}).then((res) => {
						if (res.data.message == '') {
							let data = eval('(' + res.data.data.data + ')')
							let cardInfo = data.data
							this.sim = cardInfo
						}
						this.simCodeVisible = true
					})
				} else {
					this.$message.error(res.data.message)
				}
			})
		},
		equipOperation(d_id) {
			this.d_id = d_id
			this.operarionDialogVisible = true
		},
		//改变page
		changePage(val) {
			this.queryInfo.page = val
			this.getEquipList()
		},
		// 数据详情
		dataDetails(e_id,name,address) {
			this.currImei = e_id
			this.$router.push({path:`/index/scdDetail`,query:{id:e_id,name:name,address:address}})
		},
		//sim卡状态
		handleClick(tab, event) {
			console.log(tab, event)
		},
		// 设备状态弹框
		equipStateSet(id,status) {
			this.currImei = id
			this.$axios({
				method: 'POST',
				url: '/api/equipmanage_scd',
				data: this.qs.stringify({
					req: 'imei',
					id: id,
				})
			}).then((res) => {
				var scd_status = eval('('+res.data.scd_status+')');
				this.equipStateList[0].val = scd_status.ds == 0 ? '关机' : '开机';
				if(scd_status.ws == 0){
					this.equipStateList[1].val = '待机'
				}else if(scd_status.ws == 1){
					this.equipStateList[1].val = '工作'
				}else if(scd_status.ws == 2){
					this.equipStateList[1].val = '充电'
				}
				this.equipStateList[2].val = scd_status.tt == 0 ? '常亮' : scd_status.tt;
				this.equipStateList[3].val = scd_status.clt/60;
				this.equipStateList[4].val = scd_status.tbs == 0 ? '正常' : '保护'
				this.equipStateList[5].val = status == 0 ? '离线' : '在线'
				this.equipStateList[6].val = scd_status.rps == 0 ? '正常' : '保护'

				if (res.data.message == '') {
					let data = res.data.data.data[0].d_h_t
					this.equipStateList[5].val = device_status == 0 ? '离线' : '在线'
					for (let item in data) {
						if (item == 'ds') {
							this.equipStateList[0].val = data[item] == 0 ? '关机' : '开机'
						} else if (item == 'ws') {
							switch (data[item]) {
								case 0:
									this.equipStateList[1].val = '待机'
									break
								case 1:
									this.equipStateList[1].val = '工作'
									break
								case 2:
									this.equipStateList[1].val = '充电'
									break
							}
						} else if (item == 'tt') {
							this.equipStateList[2].val = data[item] == 0 ? '常亮' : data[item]
						} else if (item == 'clt') {
							this.equipStateList[3].val = data[item] / 60
						} else if (item == 'tbs') {
							this.equipStateList[4].val = data[item] == 0 ? '正常' : '保护'
						} else if (item == 'rps') {
							this.equipStateList[6].val = data[item] == 0 ? '正常' : '保护'
						}
					}
				}
			})
			this.equipStateDialogVisible = true
		},
		//设备控制
		EquipControl(id) {
			this.currImei = id
			this.$axios({
				method: 'POST',
				url: '/api/equipmanage_scd',
				data: this.qs.stringify({
					req: 'imei',
					id: id,
				})
			}).then((res) => {
				var scd_status = eval('('+res.data.scd_status+')');
				this.equipContrlForm = {
					dattim: scd_status.dattim,
					ds: scd_status.ds,
					et: scd_status.et,
					st: scd_status.st,
					ts: scd_status.tcs,
					tt: scd_status.tt,
				}
				this.equipControlDialogVisible = true
			})
		},
		equipControlSubm() {
			let obj = this.equipContrlForm
			obj.st = obj.st && obj.st.toString().slice(0, 2) != '0' ? obj.st.toString().slice(0, 2) : obj.st.toString().slice(1, 2)
			obj.et = obj.et && obj.et.toString().slice(0, 2) != '0' ? obj.et.toString().slice(0, 2) : obj.et.toString().slice(1, 2)
			this.$axios({
				method: 'POST',
				url: '/api/scd_mqtt',
				data: this.qs.stringify({
					sw: 'datt',
					topicid: JSON.stringify([this.currImei]),
					dattim: this.equipContrlForm.dattim
				})
			}).then((res) => {
				if (res.data != 0) {
					this.$message.error('设备控制修改失败')
				}
			})
			this.$axios({
				method: 'POST',
				url: '/api/scd_mqtt_all',
				data: this.qs.stringify({
					sw: 'timer',
					ts: this.equipContrlForm.ts,
					hours: this.equipContrlForm.tt,
					begin: this.equipContrlForm.st,
					end: this.equipContrlForm.et
				})
			}).then((res) => {
				if (res.data == 0) {
					this.$message.success('设备控制修改成功')
				} else {
					this.$message.error('设备控制修改失败')
				}
				this.equipControlDialogVisible = false
			})
		},
		//设备开关控制
		equipSwitch(){
			this.$axios({
				method: 'POST',
				url: '/api/scd_mqtt',
				data: this.qs.stringify({
					sw: 'timer',
					topicid: JSON.stringify([this.currImei]),
					ds: this.equipContrlForm.ds
				})
			}).then((res) => {
				if (res.data == 0) {
					this.$message.success('设备控制修改成功')
				} else {
					this.$message.error('设备控制修改失败')
				}
			})
		},
		equipControlDialogClosed() {
			this.$refs.equipContrlRef.resetFields()
			// console.log(this.equipContrlForm)
		},
		equipBtnControl(cmd) {
			this.$axios({
				method: 'POST',
				url:
					'/api/api_gateway?method=forecast.send_control.admin_device_control',
				data: this.qs.stringify({
					cmd,
					device_type_id: 2,
					d_id: this.d_id
				})
			}).then((res) => {
				if (res.data.message == '') {
					this.$message.success('指令下发成功!')
				}
			})
		}
	},
	filters: {
		simStatus(val) {
			switch (val) {
				case 0:
					return '未知'
				case 1:
					return '测试期'
				case 2:
					return '沉默期'
				case 3:
					return '使用中'
				case 4:
					return '停机'
				case 5:
					return '停机保号'
				case 6:
					return '预销号'
				case 7:
					return '销号'
			}
		}
	},
	components: {
		SearchBar
	}
}
</script>
<style lang="less" scoped>
.el-card {
	position: relative;
	text-align: center;
	color: #555;
	font-size: 13px;
	.superOperate {
		position: absolute;
		right: 10px;
		top: 10px;
		cursor: pointer;
		i {
			font-size: 18px;
			color: #35a478;
		}
	}
	.on-stauts {
		position: absolute;
		width: 10px;
		height: 10px;
		border-radius: 50%;
		left: 15px;
		top: 15px;
	}
	.on-stauts.on {
		background: linear-gradient(#3fd79a, #9add4f);
		box-shadow: 0 0 5px 3px rgba(106, 255, 44, 0.6);
	}
	.on-stauts.off {
		background: linear-gradient(#fe2b62, #f67c49);
		box-shadow: 0 0 5px 3px rgba(255, 44, 44, 0.6);
	}
	.item_info {
		font-size: 14px;
		line-height: 32px;
		color: #888;
	}
	.equip {
		font-weight: bolder;
		color: #333;
		font-size: 16px;
		line-height: 30px;
		margin-bottom: 10px;
	}
	.btns {
		display: flex;
		justify-content: space-between;
		flex-wrap: nowrap;
		padding-top: 10px;
	}
}
.simCodeBox {
	> div {
		line-height: 40px;
		display: flex;
		align-content: center;
		.simCodeTitle {
			width: 100px;
			text-align: right;
			font-size: 14px;
			color: #333;
		}
		> div {
			flex: 1;
			.el-progress {
				margin-top: 17px;
			}
		}
		span {
			width: 85px;
			font-size: 12px;
			padding-left: 3px;
			color: #909090;
		}
		.el-input {
			width: 60%;
		}
	}
	.operateBtn {
		display: block;
		text-align: right;
	}
}
.handAddForm {
	width: 85%;
	/deep/.el-form-item {
		margin-bottom: 8px;
	}
	.handAddFormBtn {
		text-align: right;
	}
}
.sliderParent {
	display: flex;
	.block {
		flex: 1;
		margin-right: 10px;
		/deep/.el-slider__runway,
		/deep/.el-slider__bar {
			height: 10px;
		}
	}
	> span {
		width: 40px;
	}
}
.adminOperate {
	text-align: center;
	margin-bottom: 10px;
}

.real-time {
	display: flex;
	justify-content: left;
	align-items: center;
	padding: 20px 0;
	.left {
		margin-right: 10px;
		.icon-box {
			border-radius: 50%;
			width: 46px;
			height: 46px;
			padding: 5px;
			box-sizing: border-box;
			margin-bottom: 3px;
			img {
				width: 100%;
				height: auto;
			}
		}
		.aisle {
			text-align: center;
			font-size: 14px;
			color: #666;
		}
	}
	.right {
		color: #333;
		.num {
			font-weight: 600;
			font-size: 20px;
			margin-bottom: 3px;
		}
		.unit {
			font-size: 14px;
			color: #666;
		}
	}
}
.checkData {
	text-align: right;
	font-size: 14px;
	span {
		cursor: pointer;
	}
}
.demo-dynamic .el-input {
	margin-right: 10px;
	width: 270px;
	vertical-align: top;
}
/deep/.el-date-editor--time-select{width:100%!important}
/deep/.line{text-align:center}
// 暂无数据
.expertDiagnosis_referral_units_not {
	width: 272px;
	margin: 0 auto;
}
</style>
