<template>
	<div class="app-container">
		<!--工具栏-->
		<div class="head-container">
			<!-- 搜索 -->
			<el-input v-model="query.value" clearable placeholder="输入设备ID号" style="width: 200px" class="filter-item" @keyup.enter.native="search" />
			<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="search">搜索</el-button>
			<!-- 新增 -->
			<div style="display: inline-block; margin: 0px 2px">
				<el-button v-permission="['ADMIN', 'SWARN_ALL', 'SWARN_CREATE']" class="filter-item" size="mini" type="primary" icon="el-icon-plus" @click="add">新增</el-button>
			</div>
			<div style="display: inline-block; margin: 0px 2px">
				<el-button v-permission="['ADMIN', 'SWARN_ALL', 'SWARN_CREATE']" class="filter-item" size="mini" type="primary" icon="el-icon-c-scale-to-original" @click="getXgkzqDia">控制记录</el-button>
			</div>

			<!-- <div style="display: inline-block; margin: 0px 2px">
				<el-button v-permission="['ADMIN', 'SWARN_ALL', 'SWARN_CREATE']" class="filter-item" size="mini" type="primary" icon="el-icon-plus" @click="addsfyt">新增</el-button>
			</div> -->
		</div>
		<!-- 历史 -->
		<his ref="mychild" />

		<!--表单组件-->
		<eForm ref="form" :is-add="isAdd" />
		<!--表格渲染-->
		<el-table :data="allData" size="small" style="width: 100%">
			<el-table-column prop="deviceid" label="设备" min-width="130px">
				<template slot-scope="scope">
					<div v-for="item in devices" :key="item.deviceid">
						<div v-if="scope.row.deviceid === item.deviceid">{{ item.name }}</div>
					</div>
				</template>
			</el-table-column>
			<el-table-column prop="item" label="检测项">
				<template slot-scope="scope">
					<div v-for="item in items" :key="item.code">
						<div v-if="scope.row.item === item.code">{{ item.subject }}</div>
					</div>
				</template>
			</el-table-column>
			<el-table-column prop="name" label="控制名称" />
			<el-table-column prop="msg" label="通知消息" />
			<el-table-column prop="warntype" label="控制类型">
				<template slot-scope="scope">
					<div v-for="item in dictMap.warntype" :key="item.id">
						<div v-if="scope.row.warntype === item.value">{{ item.label }}</div>
					</div>
				</template>
			</el-table-column>
			<!-- <el-table-column prop="state" label="开关状态">
        <template slot-scope="scope">
          <div v-for="item in dictMap.radiostatus" :key="item.id">
            <div v-if="scope.row.state === item.value">{{ item.label }}</div>
          </div>
        </template>
      </el-table-column>-->
			<el-table-column prop="min" label="控制值下限" />
			<el-table-column prop="max" label="控制值上限" />
			<el-table-column prop="enable" label="是否启用">
				<template slot-scope="scope">
					<div v-for="item in dictMap.isnot" :key="item.id">
						<!--<div v-if="scope.row.enable === item.value">{{ item.label }}</div>-->
						<el-tag v-if="scope.row.enable === item.value" :type="scope.row.enable === '0' ? 'warning' : 'success'">{{ item.label }}</el-tag>
					</div>
				</template>
			</el-table-column>
			<el-table-column prop="creationTime" label="创建时间">
				<template slot-scope="scope">
					<span>{{ parseTime(scope.row.creationTime) }}</span>
				</template>
			</el-table-column>
			<el-table-column prop="updateTime" label="更新时间">
				<template slot-scope="scope">
					<span>{{ parseTime(scope.row.updateTime) }}</span>
				</template>
			</el-table-column>
			<el-table-column v-if="checkPermission(['ADMIN', 'SWARN_ALL', 'SWARN_EDIT', 'SWARN_DELETE'])" label="操作" width="150px" align="center">
				<template slot-scope="scope">
					<el-button v-permission="['ADMIN', 'SWARN_ALL', 'SWARN_EDIT']" size="mini" type="primary" icon="el-icon-edit" @click="edit(scope.row)" />
					<el-popover v-permission="['ADMIN', 'SWARN_ALL', 'SWARN_DELETE']" :ref="scope.row.id" placement="top" width="180">
						<p>确定删除本条数据吗？</p>
						<div style="text-align: right; margin: 0">
							<el-button size="mini" type="text" @click="$refs[scope.row.id].doClose()">取消</el-button>
							<el-button :loading="delLoading" type="primary" size="mini" @click="subDelete(scope.row.id)">确定</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" :page-size="size" style="margin-top: 8px" layout="total, prev, pager, next, sizes" @size-change="sizeChange" @current-change="pageChange" />
		<!-- 新增dia -->
		<!-- <el-dialog :append-to-body="true" :close-on-click-modal="false" :visible.sync="addDia.dialog" :title="isAdd ? '新增' : '编辑'" width="550px">
			<el-form :model="addDia.form" :rules="rules" size="small" label-width="100px">
				<el-form-item label="设备" prop="'swww'">
					<el-select clearable placeholder="请选择设备" class="filter-item" style="width: 370px" @change="loaditem()">
						<el-option v-for="item in addDia.form" :key="item.deviceid" :label="item.name" :value="item.deviceid" />
					</el-select>
				</el-form-item>
			</el-form>
		</el-dialog> -->
	</div>
</template>

<script>
import checkPermission from '@/utils/permission'
import initData from '@/mixins/initData'
import { del } from '@/api/sWarn'
import { parseTime } from '@/utils/index'
import { queryAllByUseridNoPage } from '@/api/sDevice'
import initDict from '@/mixins/initDict'
import { selectAll } from '@/api/sItem'
import eForm from './ggfForm'
import { reqApi } from '@/api/sfyt.js'
import his from './his.vue'

export default {
	components: { eForm, his },
	mixins: [initData, initDict],
	data() {
		return {
			cur_page: 0,
			allData: [],
			addDia: {
				dialog: false,
				form: [{ deviceid: 1 }, { deviceid: 2 }],
			},
			delLoading: false,
			devices: '',
			items: '',
			queryTypeOptions: [{ key: 'deviceid', display_name: '设备ID' }],
			rules: {
				deviceid: [{ required: true, message: '请选择设备信息', trigger: 'blur' }],
				item: [{ required: true, message: '请选择检测项信息', trigger: 'blur' }],
				name: [{ required: true, message: '请输入报警名称', trigger: 'blur' }],
				msg: [{ required: true, message: '请输入报警消息', trigger: 'blur' }],
			},
			page: 1,
			size: 10,
			total: 0,
		}
	},
	filters: {
		item1(v) {
			if (v === 'TMP') {
				return '温度'
			} else if (v === 'HR') {
				return '湿度'
			} else if (v === 'PM25') {
				return 'pm2.5'
			} else if (v === 'PM10') {
				return 'pm10'
			} else if (v === 'O2') {
				return '氧气'
			} else {
				return ''
			}
		},
	},
	created() {
		this.$nextTick(() => {
			// this.init()
			this.getDictMap('isnot,radiostatus,warntype')
			this.loadAlleviceByUser()
			this.selectAllForm2()
			this.search()
		})
	},
	methods: {
		selectAllForm2() {
			selectAll().then(response => {
				console.log(response, 'response')
				this.items = response
			})
		},
		search() {
			if (this.query.value == undefined || this.query.value == '') {
				this.selectAllForm()
			} else {
				let param = {}
				param.deviceid = this.query.value
				param.page = this.page
				param.size = this.size
				reqApi.aiSearch(param).then(res => {
					console.log(res, 'Data')
					this.allData = res.Data
					this.total = res.total
				})
			}
		},
		ctrl() {
			let param = {}
			param.page = this.page
			param.size = this.size
			reqApi.aiopRecord(param).then(res => {
				console.log(res, 'aiopRecord')
			})
		},
		item1(v) {
			if (v.item === 'TMP') {
				return '温度'
			} else if (v.item === 'HR') {
				return '湿度'
			} else if (v.item === 'PM25') {
				return 'pm2.5'
			} else if (v.item === 'PM10') {
				return 'pm10'
			} else if (v.item === 'O2') {
				return '氧气'
			} else {
				return ''
			}
		},
		parseTime,
		checkPermission,
		// 新增水肥一体
		addsfyt() {
			this.addDia.dialog = true
		},
		beforeInit() {
			this.url = 'api/sWarnByUserid'
			const sort = 'id,desc'
			this.params = { page: this.page, size: this.size, sort: sort }
			const query = this.query
			const type = query.type
			const value = query.value
			if (type && value) {
				this.params[type] = value
			}
			this.params['warntype'] = '2'
			return true
		},
		selectAllForm() {
			let that = this
			let param = {}
			param.page = this.page
			param.size = this.size
			reqApi.aiShow(param).then(res => {
				that.allData = res.Data
				that.total = res.total
			})
		},
		loadAlleviceByUser() {
			queryAllByUseridNoPage().then(response => {
				this.devices = response
			})
		},
		subDelete(id) {
			this.delLoading = true
			let param = { id: id }

			reqApi.aiDel(param).then(res => {
				if (res.Code == 200) {
					this.delLoading = false
					this.$refs[id].doClose()
					this.selectAllForm()
					this.$notify({
						title: '删除成功',
						type: 'success',
						duration: 2500,
					})
				}
			})
			// 	.then(res => {
			// 		this.delLoading = false
			// 		this.$refs[id].doClose()
			// 		this.dleChangePage()
			// 		this.init()
			// 		this.$notify({
			// 			title: '删除成功',
			// 			type: 'success',
			// 			duration: 2500,
			// 		})
			// 	})
			// 	.catch(err => {
			// 		this.delLoading = false
			// 		this.$refs[id].doClose()
			// 		console.log(err.response.data.message)
			// 	})
		},
		add() {
			this.isAdd = true
			this.$refs.form.dialog = true
			this.$refs.form.warntype = '2'
		},
		edit(data) {
			this.isAdd = false
			const _this = this.$refs.form
			_this.form = {
				id: data.id,
				deviceid: '',
				// relayidmin: '',
				// relayidmax: '',
				rMin: data.rMin,
				rMax: data.rMax,
				item: data.item,
				warntype: data.warntype,
				state: data.state,
				min: data.min,
				max: data.max,
				name: data.name,
				msg: data.msg,
				enable: data.enable,
				deviceName: data.deviceName,
				deviceid: data.deviceid,
				upData: data.upData,
				lowData: data.lowData,
			}
			_this.dialog = true
			this.$refs.form.loadMinByWarnid()
			this.$refs.form.loadMaxByWarnid()
		},
		pageChange(e) {
			console.log(e)
			this.page = e
			this.search()
		},
		sizeChange(e) {
			this.page = 1
			this.size = e
			this.search()
		},
		//调用xgkzqDia方法
		getXgkzqDia() {
			this.$refs.mychild.parentHandleclick()
		},
	},
}
</script>

<style scoped>
</style>
