<template>
    <div class="pd10">
        <el-form :inline="true" class="demo-form-inline">
            <div style="display: flex">
                <div style="display: flex; justify-content: space-between; flex-grow: 1">
                    <el-form-item>
                        <el-button type="primary" class="el-icon-plus" @click="add">新增</el-button>
                        <!-- <el-button type="primary" @click="info" icon="el-icon-search"
              >查询</el-button
            > -->
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" class="el-icon-download" @click="exportEvent">导出</el-button>
                    </el-form-item>
                </div>
            </div>
        </el-form>

        <vxe-table
            header-cell-class-name="table_header"
            :data="tableData"
            v-loading="loading"
            border
            stripe
            :row-config="{ isCurrent: true, isHover: true }"
            ref="management"
            size="mini"
            :height="vh + 'px'"
            style="width: 100%"
            highlight-current-row
        >
            <vxe-table-column align="center" field="name" title="等级">
                <template slot-scope="scope">
                    <span v-if="scope.row.name == '不重要'" style="color: green">不重要</span>
                    <span v-if="scope.row.name == '普通'" style="color: #0099ff">普通</span>
                    <span v-if="scope.row.name == '重要'" style="color: #cc9900">重要</span>
                    <span v-if="scope.row.name == '极重要'" style="color: red">极重要</span>
                </template>
            </vxe-table-column>
            <vxe-table-column align="center" field="integrityValue" title="数据完整性" sortable>
                <template slot-scope="scope">
                    <span
                        v-if="
                            scope.row.integrityValue > 0 &&
                            scope.row.integrityValue <= 60 &&
                            scope.row.integrityValue !== 3.14159
                        "
                        style="color: red"
                    >
                        {{ scope.row.integrityValue }}
                    </span>
                    <span
                        v-if="
                            scope.row.integrityValue > 60 &&
                            scope.row.integrityValue < 90 &&
                            scope.row.integrityValue !== 3.14159
                        "
                        style="color: #cc9900"
                    >
                        {{ scope.row.integrityValue }}
                    </span>
                    <span
                        v-if="scope.row.integrityValue >= 90 && scope.row.integrityValue !== 3.14159"
                        style="color: green"
                    >
                        {{ scope.row.integrityValue }}
                    </span>
                    <span v-if="scope.row.integrityValue == 3.14159">暂无数据</span>
                </template>
            </vxe-table-column>
            <vxe-table-column align="center" field="onlineValue" title="在线率" sortable>
                <template slot-scope="scope">
                    <span
                        v-if="
                            scope.row.onlineValue > 0 &&
                            scope.row.onlineValue <= 60 &&
                            scope.row.onlineValue !== 3.14159
                        "
                        style="color: red"
                    >
                        {{ scope.row.onlineValue }}
                    </span>
                    <span
                        v-if="
                            scope.row.onlineValue > 60 &&
                            scope.row.onlineValue < 90 &&
                            scope.row.onlineValue !== 3.14159
                        "
                        style="color: #cc9900"
                    >
                        {{ scope.row.onlineValue }}
                    </span>
                    <span v-if="scope.row.onlineValue >= 90 && scope.row.onlineValue !== 3.14159" style="color: green">
                        {{ scope.row.onlineValue }}
                    </span>
                    <span v-if="scope.row.onlineValue == 3.14159">暂无数据</span>
                </template>
            </vxe-table-column>
            <vxe-table-column
                align="center"
                field="offTimeValue"
                title="持续中断时长(s)"
                :show-overflow-tooltip="true"
                sortable
            ></vxe-table-column>
            <vxe-table-column
                align="center"
                field="warnValue"
                title="告警次数"
                :show-overflow-tooltip="true"
                sortable
            ></vxe-table-column>
            <vxe-table-column align="center" field="updateTime" title="更新日期" sortable>
                <template slot-scope="scope">
                    <span>{{ scope.row.updateTime.replace('T', ' ') }}</span>
                </template>
            </vxe-table-column>
            <vxe-table-column align="center" field="updateBy" title="更新用户"></vxe-table-column>
            <vxe-table-column align="center" title="操作" width="220">
                <template slot-scope="scope">
                    <el-button type="primary" class="el-icon-edit" size="mini" @click="editData(scope.row)">
                        修改
                    </el-button>
                    <el-button type="danger" class="el-icon-delete" size="mini" @click="deleteData(scope.row)">
                        删除
                    </el-button>
                    <!-- <el-button v-if="scope.row.state==1" disabled type="primary">已处理</el-button> -->
                </template>
            </vxe-table-column>
        </vxe-table>

        <!--编辑弹出框-->
        <el-dialog
            :close-on-click-modal="false"
            :title="title"
            :visible.sync="dialogVisible"
            width="30%"
            :before-close="handleClose"
        >
            <el-form ref="form" :model="formInline" :rules="rules" label-width="150px">
                <el-form-item label="终端等级:" prop="zddjid">
                    <el-select v-model="zddjid" :disabled="falg" style="width: 100%" placeholder="请选择终端等级">
                        <el-option
                            v-for="item in teriminaloption"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="数据完整性标准:" prop="integrityValue" class="top">
                    <el-input v-model="formInline.integrityValue" placeholder="请输入数据完整性标准"></el-input>
                </el-form-item>
                <el-form-item label="终端在线率标准:" prop="onlineValue" class="top">
                    <el-input v-model="formInline.onlineValue" placeholder="请输入终端在线率标准"></el-input>
                </el-form-item>
                <el-form-item label="持续中断时长:" prop="offTimeValue" class="top">
                    <el-input v-model="formInline.offTimeValue" placeholder="请输入持续中断时长"></el-input>
                </el-form-item>
                <el-form-item label="告警次数:" prop="warnValue" class="top">
                    <el-input v-model="formInline.warnValue" placeholder="请输入告警次数"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="handleClose">取 消</el-button>
                <el-button type="primary" @click="submitData">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import api from '@/api/device/alarm'
import { dicData } from '@/assets/commjs/dictypeData'
export default {
    name: 'alarmstrategy',
    data() {
        return {
            dialogVisible: false,
            falg: false,
            loading: true,
            vh: undefined,
            title: '',
            height: '',
            tableData: [],
            zddjid: '',
            //分页
            formInline: {
                integrityValue: null,
                onlineValue: null,
                offTimeValue: null,
                warnValue: null,
                pageNum: 1,
                pageSize: 20
            },
            teriminaloption: [],
            input: '',
            Finput: '',
            total: null,
            biaozhi: 'add',
            id: '',
            rules: {
                zddjid: [{ required: true, message: '终端等级不可为空', trigger: 'blur' }],
                integrityValue: [{ required: true, message: '数据完整性标准不可为空', trigger: 'blur' }],
                onlineValue: [{ required: true, message: '终端在线率标准不可为空', trigger: 'blur' }],
                offTimeValue: [{ required: true, message: '持续中断时长不可为空', trigger: 'blur' }],
                warnValue: [{ required: true, message: '告警次数不可为空', trigger: 'blur' }]
            }
        }
    },
    created() {
        this.getdicData()
        this.info()
    },
    mounted() {
        //this.info();
        this.setHeight()
        window.addEventListener('resize', this.setHeight)
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
            this.vh = window.sessionStorage.getItem('appheight') - 55
        },
        // 表单重置
        resetForm() {
            if (this.$refs['form']) {
                this.$refs['form'].resetFields()
            }
        },
        //获取字典表数据
        getdicData() {
            let code = 'Dev_Level'
            this.teriminaloption = dicData(code, [])
            this.zddjid = this.teriminaloption[0].id
        },
        //获取列表数据
        info() {
            this.loading = true
            api.getAlarmStrategyData().then(res => {
                if (res.code == 'A0000') {
                    this.Finput = this.input
                    this.tableData = res.data
                    this.total = 4
                    this.loading = false
                } else if ((res.data = null)) {
                    this.loading = false
                }
            })
        },
        //新增
        add() {
            this.formInline = {}
            this.biaozhi = 'add'
            this.falg = false
            this.dialogVisible = true
            this.title = '新增告警策略'
        },
        //编辑
        editData(row) {
            this.zddjid = row.id
            this.formInline.id = row.name
            this.formInline.integrityValue = row.integrityValue
            this.formInline.onlineValue = row.onlineValue
            this.formInline.offTimeValue = row.offTimeValue
            this.formInline.warnValue = row.warnValue
            this.falg = true
            this.title = '修改告警策略'
            this.biaozhi = 'edit'
            this.dialogVisible = true
        },
        //提交
        submitData() {
            if (this.biaozhi == 'add') {
                let data = {
                    id: this.zddjid,
                    integrityValue: Number(this.formInline.integrityValue),
                    onlineValue: Number(this.formInline.onlineValue),
                    offTimeValue: Number(this.formInline.offTimeValue),
                    warnValue: Number(this.formInline.warnValue)
                }
                api.addAlarmStrategyData(data).then(res => {
                    if (res.code == 'A0000') {
                        this.$message({
                            type: 'success',
                            message: '新增策略成功!'
                        })
                        this.dialogVisible = false
                        this.info()
                    }
                })
            } else if (this.biaozhi == 'edit') {
                let data = {
                    id: this.zddjid,
                    integrityValue: Number(this.formInline.integrityValue),
                    onlineValue: Number(this.formInline.onlineValue),
                    offTimeValue: Number(this.formInline.offTimeValue),
                    warnValue: Number(this.formInline.warnValue)
                }
                api.upAlarmStrategyData(data).then(res => {
                    if (res.code == 'A0000') {
                        this.$message({
                            type: 'success',
                            message: '修改策略成功!'
                        })
                        this.dialogVisible = false
                        this.info()
                    }
                })
            }
        },
        //删除
        deleteData(row) {
            let data = {
                id: row.id
            }
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    api.delAlarmStrategyData(data).then(res => {
                        if (res.code == 'A0000') {
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            })
                            this.info()
                        }
                    })
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    })
                })
        },
        //导出
        exportEvent() {
            this.$refs.management.exportData({
                filename: '告警策略管理', // 文件名字
                sheetName: '告警策略管理',
                type: 'xlsx', //导出文件类型 xlsx 和 csv
                useStyle: true,
                data: this.tableData, // 数据源 // 过滤那个字段导出 // columnFilterMethod: function(column, $columnIndex) { //   return !(column.$columnIndex === 0 ) //   // 0是复选框 不导出 // }
                columnFilterMethod: function (column, $columnIndex) {
                    return !(column.$columnIndex === 7)
                }
            })
        },
        handleClose() {
            this.dialogVisible = false
            this.resetForm()
        },
        //每页条数改变时触发 选择一页显示多少行
        handleSizeChange(val) {
            this.formInline.pageSize = val
            this.info()
        },
        //当前页改变时触发 跳转其他页
        handleCurrentChange(val) {
            this.formInline.pageNum = val
            this.info()
        }
    }
}
</script>
<style lang="less" scoped>
@import url('../../../styles/comStyle.less');
// ::v-deep .el-form-item--small .el-form-item__content,
// .el-form-item--small .el-form-item__label {
//   height: 32px;
// }
// ::v-deep .el-select {
//   width: 150px;
// }
</style>
