<template>
	<div class="app-container">
		<search-bar
			:formConfigs="formConfig"
			ref="searchBarForm"
			@headBtnClick="buttonClick" />
		<base-table
			v-loading="dataListLoading"
			:table-props="tableProps"
			:page="listQuery.pageNo"
			:limit="listQuery.pageSize"
			:table-data="tableData"
			:max-height="tableH">
			<method-btn
				v-if="tableBtn.length"
				slot="handleBtn"
				:width="120"
				label="操作"
				:method-list="tableBtn"
				@clickBtn="handleClick" />
		</base-table>
		<pagination
			:limit.sync="listQuery.pageSize"
			:page.sync="listQuery.pageNo"
			:total="listQuery.total"
			@pagination="getDataList" />
	</div>
</template>

<script>
import basicPage from '../../core/mixins/basic-page';
import { parseTime } from '../../core/mixins/code-filter';
import {
	getcoreAlarmLogPage
} from '@/api/base/coreAlarmLog';
import {DICT_TYPE, getDictDatas, publicFormatter } from "@/utils/dict";
import tableHeightMixin from '@/mixins/lb/tableHeightMixin';

const tableProps = [
	{
		prop: 'alarmTime',
		label: '报警时间',
		filter: parseTime,
		width: 150,
		showOverflowtooltip: true
	},
	{
		prop: 'alarmSource',
		label: '报警来源',
		width: 200,
		showOverflowtooltip: true
	},
	{
		prop: 'alarmType',
		label: '报警类型',
		width: 180,
		showOverflowtooltip: true
	},
	{
		prop: 'alarmGrade',
		label: '报警级别',
		filter: publicFormatter(DICT_TYPE.EQU_ALARM_LEVEL),
		width: 120,
		showOverflowtooltip: true
	},
	{
		prop: 'alarmReason',
		label: '报警原因',
		showOverflowtooltip: true
	},
	{
		prop: 'alarmContent',
		label: '报警详细',
		showOverflowtooltip: true
	}
];

export default {
	mixins: [basicPage, tableHeightMixin],
	data() {
		return {
			urlOptions: {
				getDataListURL: getcoreAlarmLogPage
			},
			tableProps,
			tableBtn: [].filter((v)=>v),
			tableData: [],
			listQuery: {
        pageSize: 20,
        pageNo: 1,
        total: 0,
				alarmSource: undefined,
				alarmGrade: undefined,
				alarmTime: []
      },
			formConfig: [
				{
					type: 'input',
					label: '报警来源',
					placeholder: '报警来源',
					param: 'name',
				},
				{
          type: 'datePicker',
          label: '时间段',
          dateType: 'daterange',
          format: 'yyyy-MM-dd',
          valueFormat: 'yyyy-MM-dd HH:mm:ss',
          rangeSeparator: '-',
          startPlaceholder: '开始时间',
          endPlaceholder: '结束时间',
          width: 350,
          param: 'time'
        },
				{
					type: 'select',
					label: '报警级别',
					placeholder: '请选择报警级别',
					param: 'alarmGrade',
					selectOptions: [],
					filterable: true,
				},
				{
					type: 'button',
					btnName: '查询',
					name: 'search',
					color: 'primary',
				}
				// {
				// 	type: 'separate',
				// },
				// {
				// 	type: this.$auth.hasPermi('base:core-alarm-log:create') ? 'button' : '',
				// 	btnName: '新增',
				// 	name: 'add',
				// 	color: 'success',
				// 	plain: true
				// },
			],
		};
	},
	created() {
		this.getDict()
	},
	methods: {
		// 获取下拉框
    async getDict() {
			const res = await getDictDatas(this.DICT_TYPE.EQU_ALARM_LEVEL)
			console.log('111', res)
			this.formConfig[2].selectOptions = res.map(item => {
				return {
					id: item.value,
					name: item.label
				}
			})
		},
		buttonClick(val) {
			switch (val.btnName) {
				case 'search':
					this.listQuery.pageNo = 1;
					this.listQuery.pageSize = 10;
					this.listQuery.alarmSource = val.name ? val.name : undefined;
					this.listQuery.alarmGrade = val.alarmGrade ? val.alarmGrade : undefined;
					if (val.time) {
						this.listQuery.alarmTime[0] = val.time[0]
						this.listQuery.alarmTime[1] = val.time[1]
					} else {
						this.listQuery.alarmTime = []
					}
					this.getDataList();
					break;
				case 'reset':
					this.$refs.searchBarForm.resetForm();
					this.listQuery = {
						pageSize: 10,
						pageNo: 1,
						total: 1,
					};
					this.getDataList();
					break;
				case 'add':
					this.addOrEditTitle = '新增';
					this.addOrUpdateVisible = true;
					this.addOrUpdateHandle();
					break;
				case 'export':
					this.handleExport();
					break;
				default:
					console.log(val);
			}
		},
	},
};
</script>
