<template>
	<div>
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item>性诱测报</el-breadcrumb-item>
		</el-breadcrumb>
		<SearchBar @fun="getDisplayType" @fun2="getIDName" @fun3="getIsOnline">
			<template slot="search-box">
				<template v-if="role=='admin'">
					<el-select
						v-model="queryInfo.device_model"
						class="select01"
						clearable
						size="mini"
						placeholder="请选择设备型号"
						@change="deviceModel()"
					>
						<el-option label="全部" value></el-option>
						<el-option label="I型" value="1"></el-option>
						<el-option label="II型" value="2"></el-option>
					</el-select>
				</template>
			</template>
		</SearchBar>
		<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">
						<equip-item :is_online="item.device_status">
							<span
								slot="set"
								v-show="userType==1"
								class="superOperate el-icon-setting"
								@click="equipOperation(item.device_model,item.d_id)"
							></span>
							<span slot="title">性诱测报</span>
							<div slot="content" class="content">
								<p>
									<i class="iconfont icon-yonghu"></i>
									设备ID：{{item.device_id.slice(-8)}}
								</p>
								<p>
									<i class="iconfont icon-biaoqian"></i>
									设备编号：{{item.device_code || "无"}}
								</p>
								<p>
									<i class="iconfont icon-diannao"></i>在线状态：
									<span
										:class="{red:item.device_status==0,green:item.device_status==1}"
									>{{item.device_status==0?"离线":"在线"}}</span>
								</p>
								<p>
									<i class="iconfont icon-dizhi"></i>
									设备型号: {{item.device_model==1?'I'+'型':"II" +'型'}}
								</p>
								<p>
									<i class="iconfont icon-shijian"></i>
									最新上报时间 : {{item.status_time*1000 | formatTime}}
								</p>
								<p class="btns">
									<i class="iconfont icon-yemiancaozuo"></i>
									<template v-if="item.device_model==2">
										<el-button size="mini" type="info" @click="viewImage(item.device_id,item.d_id)">查看图片</el-button>
									</template>
									<el-button
										size="mini"
										type="warning"
										@click="EquipControl(item.device_model,item.d_id)"
									>设备控制</el-button>
									<el-button size="mini" type="success" @click="lookSIMCode(item.d_id)">SIM卡</el-button>
									<el-button size="mini" type="danger" @click="dataDetails(item.device_id,item.d_id,item.device_model)">数据详情</el-button>
								</p>
							</div>
						</equip-item>
					</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.slice(-8)}}</template>
					</el-table-column>
					<el-table-column prop="device_code" label="设备编号" width="180">
						<template slot-scope="scope">{{scope.row.device_code || "无"}}</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="xy_type" label="设备型号">
						<template slot-scope="scope">
							<p v-if="scope.row.xy_type==1">I型</p>
							<p v-if="scope.row.xy_type==2">II型</p>
						</template>
					</el-table-column>
					<el-table-column prop="status_time" label="最新上报时间">
						<template slot-scope="scope">{{scope.row.status_time | formatTime}}</template>
					</el-table-column>
					<el-table-column label="操作" width="400">
						<template slot-scope="scope">
							<el-button
								size="mini"
								type="info"
								@click="viewImage(scope.row.device_id,scope.row.d_id)"
							>查看图片</el-button>
							<el-button
								size="mini"
								type="warning"
								@click="EquipControl(scope.row.device_model,scope.row.d_id)"
							>设备控制</el-button>
							<el-button size="mini" type="success" @click="lookSIMCode(scope.row.d_id)">SIM卡</el-button>
							<el-button
								size="mini"
								type="danger"
								@click="dataDetails(scope.row.device_id,scope.row.d_id,scope.device_model)"
							>数据详情</el-button>
						</template>
					</el-table-column>
				</el-table>
			</el-card>
		</template>
		<el-pagination
			background
			:page-size="8"
			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}}</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>
		<!-- 设备控制对话框II型 -->
		<el-dialog
			title="设备控制"
			:visible.sync="equipControlDialogVisible2"
			@close="equipControlDialogClosed2"
			width="30%"
		>
			<div class="handAddForm">
				<el-form
					ref="equipContrlRef2"
					:model="equipContrlForm2"
					label-position="right"
					label-width="120px"
				>
					<el-form-item label="拍照时刻：" prop="pic_t">
						<el-time-select
							placeholder="起始时间"
							v-model="equipContrlForm2.pic_t"
							:picker-options="{
								start: '0:00',
								step: '1:00',
								end: '23:00',
							}"
						></el-time-select>
					</el-form-item>
					<el-form-item label="拍照间隔：" prop="pic_f">
						<el-select v-model="equipContrlForm2.pic_f" placeholder="请选择">
							<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="6" :value="6"></el-option>
							<el-option :label="8" :value="8"></el-option>
							<el-option :label="12" :value="12"></el-option>
							<el-option :label="24" :value="24"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="数据上传间隔：" prop="dat_t">
						<div class="sliderParent">
							<div class="block">
								<el-slider :min="10" :step="10" :max="120" v-model="equipContrlForm2.dat_t" show-input></el-slider>
							</div>
						</div>
					</el-form-item>
					<el-form-item label="卷粘虫板时间：" prop="turn_t">
						<div class="sliderParent">
							<div class="block">
								<el-slider :min="1" :max="23" v-model="equipContrlForm2.turn_t" show-input></el-slider>
							</div>
						</div>
					</el-form-item>
					<el-form-item class="handAddFormBtn">
						<el-button type="primary" size="mini" @click="equipControlSubm(equipContrlForm2)">确定</el-button>
						<el-button size="mini" @click="equipControlDialogVisible2 = false">取消</el-button>
					</el-form-item>
				</el-form>
			</div>
		</el-dialog>
		<!-- 设备控制对话框I型 -->
		<el-dialog
			title="设备控制"
			:visible.sync="equipControlDialogVisible1"
			@close="equipControlDialogClosed1"
			width="30%"
		>
			<div class="handAddForm">
				<el-form
					ref="equipContrlRef1"
					:model="equipContrlForm1"
					label-position="right"
					label-width="140px"
				>
					<el-form-item label="时控开关：" prop="st">
						<div class="timeSet">
							<el-time-select
								placeholder="起始时间"
								v-model="equipContrlForm1.st"
								:picker-options="{
								start: '0:00',
								step: '1:00',
								end: '23:00',
							}"
							></el-time-select>
							<span style="margin:0 10px">至</span>
							<el-time-select
								placeholder="结束时间"
								v-model="equipContrlForm1.et"
								:picker-options="{
								start: '0:00',
								step: '1:00',
								end: '23:00',
								minTime: equipContrlForm1.st
							}"
							></el-time-select>
						</div>
					</el-form-item>
					<el-form-item label="数据上传时间间隔：" prop="dat_f">
						<div class="sliderParent">
							<div class="block">
								<el-slider :min="1" :max="10" v-model="equipContrlForm1.dat_f" show-input></el-slider>
							</div>
						</div>
					</el-form-item>
					<el-form-item class="handAddFormBtn">
						<el-button type="primary" size="mini" @click="equipControlSubm(equipContrlForm1)">确定</el-button>
						<el-button size="mini" @click="equipControlDialogVisible1 = false">取消</el-button>
					</el-form-item>
				</el-form>
			</div>
		</el-dialog>
		<!-- 管理员操作对话框 I型-->
		<el-dialog title="操作" :visible.sync="operarionDialogVisible" width="25%">
			<el-button type="primary" @click="equipBtnControl('poweron')" size="mini">开启</el-button>
			<el-button type="primary" @click="equipBtnControl('poweroff')" size="mini">关闭</el-button>
			<el-button type="primary" @click="equipBtnControl('reboot')" size="mini">重启</el-button>
			<el-button type="primary" size="mini">清网</el-button>
			<el-button type="primary" @click="equipBtnControl('update')" size="mini">升级</el-button>
			<el-button type="primary" size="mini">查询服务器配置</el-button>
		</el-dialog>
		<!-- 管理员操作对话框 II型-->
		<el-dialog title="操作" :visible.sync="operarionDialogVisible2" width="25%">
			<el-button type="primary" @click="equipBtnControl('reboot')" size="mini">重启</el-button>
			<el-button type="primary" @click="equipBtnControl('update')" size="mini">升级</el-button>
			<el-button type="primary" @click="equipBtnControl('mqttconf')" size="mini">mqtt网络配置</el-button>
			<el-button type="primary" @click="equipBtnControl('takephoto')" size="mini">拍照</el-button>
			<el-button type="primary" @click="equipBtnControl('turn')" size="mini">卷黏虫带</el-button>
			<el-button type="primary" @click="equipBtnControl('repower')" size="mini">重新上电</el-button>
		</el-dialog>
	</div>
</template>
<script>
import SearchBar from '@/components/SearchBar'
import EquipItem from '@/components/EquipItem'
export default {
	data() {
		return {
			//图表和表格切换
			displayType: '1',
			//设备列表
			equipList: [],
			role: 'admin',
			currImei: '',
			d_id: '',
			itemId: '',
			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 //到期日期
			},

			//参数
			queryInfo: {
				page: 1,
				is_online: null,
				dver: '',
				f_id: '',
				ename: '',
				device_model: null
			},
			//设备控制I 型
			equipContrlForm1: {
				st: '', //时控开始时间
				et: '', //时控结束时间
				dat_f: null //数据上传时间间隔
			},
			//设备控制II 型
			equipContrlForm2: {
				pic_t: '', //定时拍照时刻
				pic_f: '', //定时拍照时间间隔
				dat_t: null, //数据上传时间间隔
				turn_t: null //定时转动沾虫板
			},
			totalNum: 0,
			//SIM卡对话框
			simCodeVisible: false,
			//设备控制对话框
			equipControlDialogVisible1: false,
			equipControlDialogVisible2: false,
			//管理员操作对话框
			operarionDialogVisible: false,
			operarionDialogVisible2: 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.$axios({
				method: 'post',
				url: '/api/api_gateway?method=forecast.worm_lamp.lamp_list',
				data: this.qs.stringify({
					device_type_id: 4,
					page_size: 8,
					device_id: this.queryInfo.f_id,
					device_name: this.queryInfo.ename,
					page: this.queryInfo.page,
					device_status: this.queryInfo.is_online,
					device_model: this.queryInfo.device_model
				})
			}).then((res) => {
				if (res.data.message == '') {
					this.equipList = res.data.data.data
					this.totalNum = res.data.data.counts
				}
			})
		},
		//改变page
		changePage(val) {
			this.queryInfo.page = val
			this.getEquipList()
		},
		// 数据详情
		dataDetails(e_id, d_id,device_model) {
			this.currImei = e_id
			this.$router.push({path:`/index/xycbDataDetail/${e_id}/${d_id}`,query:{device_model:device_model}})
		},
		//sim卡状态
		handleClick(tab, event) {
			console.log(tab, event)
		},
		// 查看图片
		viewImage(id, d_id) {
			this.currImei = id
			this.$router.push({ path: `/index/xycbDataPhotos/${id}`, query: {d_id:d_id} })
		},
		//设备控制操作
		EquipControl(model, d_id) {
			if (model == 1) {
				this.equipControlDialogVisible1 = true
			} else {
				this.equipControlDialogVisible2 = true
			}
			this.d_id = d_id
			this.$axios({
				method: 'POST',
				url:
					'/api/api_gateway?method=forecast.send_control.device_control_info',
				data: this.qs.stringify({ d_id, get_type: 1 })
			}).then((res) => {
				if (Object.keys(res.data.data).length > 0) {
					let data = res.data.data
					if (model == 1) {
						this.equipContrlForm1 = data
					} else {
						this.equipContrlForm2 = data
					}
				}
				this.equipControlDialogVisible = true
			})
		},
		equipControlSubm(form) {
			this.$axios({
				method: 'POST',
				url: '/api/api_gateway?method=forecast.send_control.device_control',
				data: this.qs.stringify({
					device_type_id: 4,
					d_id: this.d_id,
					config: JSON.stringify(form)
				})
			}).then((res) => {
				if (res.data.data) {
					this.$message.success('设备控制修改成功')
				} else {
					this.$message.error('设备控制修改失败')
				}
				this.equipControlDialogVisible1 = false
				this.equipControlDialogVisible2 = false
			})
		},
		//SIM
		lookSIMCode(d_id) {
			this.$axios({
				method: 'POST',
				url: '/api/api_gateway?method=forecast.send_control.device_sim',
				data: this.qs.stringify({
					d_id: d_id
				})
			}).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.card_list[0]
							this.sim = cardInfo
						}
						this.simCodeVisible = true
					})
				}
			})
		},
		//管理员操作
		equipOperation(model, d_id) {
			this.d_id = d_id
			if (model == 1) {
				this.operarionDialogVisible = true
			} else {
				this.operarionDialogVisible2 = true
			}
		},
		deviceModel() {
			this.getEquipList()
		},
		equipControlDialogClosed2() {
			this.$refs.equipContrlRef2.resetFields()
		},
		equipControlDialogClosed1() {
			this.$refs.equipContrlRef1.resetFields()
		},
		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: 4,
					d_id: this.d_id
				})
			}).then((res) => {
				if (res.data.message == '') {
					this.$message.success('指令下发成功!')
				}
			})
		}
	},
	components: {
		SearchBar,
		EquipItem
	},
	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 '销号'
			}
		}
	}
}
</script>
<style lang="less" scoped>
.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 {
	/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;
	}
}

.red {
	color: rgb(235, 103, 101);
}
.green {
	color: rgb(23, 187, 137);
}
.timeSet {
	display: flex;
}
</style>
