<template>
    <div>
        <el-form :model="form" :inline="true" class="demo-form-inline">
            <el-form-item label="策略等级:">
                <el-select v-model="form.grade" placeholder="请选择策略等级">
                    <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="查询策略名称:">
                <el-input v-model="form.name" clearable placeholder="请选择查询策略名称"></el-input>
            </el-form-item>
            <!-- <el-form-item>
        <Timeinterval :interval="3" ref="interval"></Timeinterval>
      </el-form-item> -->

            <el-form-item>
                <el-button type="primary" size="small" icon="el-icon-search" @click="onSubmit">查询</el-button>
                <!-- <el-button type="primary" icon="el-icon-download">导出</el-button> -->
            </el-form-item>
        </el-form>
        <div>
            <el-button
                @click="
                    dialogVisible = true
                    title = `新增告警单`
                "
                type="primary"
                size="mini"
                icon="el-icon-plus"
            >
                新增
            </el-button>
        </div>
        <el-table
            stripe
            :data="tableList"
            header-cell-class-name="table_header"
            :height="vh"
            highlight-current-row
            style="width: 100%"
            class="mt10"
            border
            v-loading="loading"
            @selection-change="handleSelectionChange"
        >
            <!-- <el-table-column type="selection" width="55"></el-table-column> -->
            <template v-for="(item, index) in warningList">
                <el-table-column
                    :prop="item.prop"
                    :label="item.label"
                    align="center"
                    :min-width="item.width"
                    :key="index"
                    :formatter="formatter"
                ></el-table-column>
            </template>
            <!-- <el-table-column prop="address" label="流程状态" min-width="100px">
        <template slot-scope="scope">
          <span style="cursor: pointer" @click="flagLook = true">{{
            scope.row.address
          }}</span>
        </template>
      </el-table-column> -->
            <el-table-column label="状态" align="center" width="120">
                <template slot-scope="scope">
                    <el-switch
                        :width="60"
                        v-model.number="scope.row.state"
                        active-color="#13ce66"
                        inactive-color="#ff4949"
                        :active-value="1"
                        :inactive-value="2"
                        @change="stateChange($event, scope.row.id)"
                    ></el-switch>
                </template>
            </el-table-column>
            <el-table-column align="center" label="操作" width="320">
                <template slot-scope="scope">
                    <el-button size="mini" type="primary" icon="el-icon-sort" @click="clickBinding(scope.row.id)">
                        绑定
                    </el-button>
                    <el-button size="mini" type="primary" icon="el-icon-edit" @click="upform(scope.row)">
                        编辑
                    </el-button>
                    <el-button size="mini" type="primary" icon="el-icon-delete" @click="delStrategy(scope.row.id)">
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            background
            align="right"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="form.pageNum"
            :page-sizes="[20, 30, 40, 50, 100]"
            :page-size="form.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            class="mt10"
        ></el-pagination>
        <!-- 绑定 -->
        <binding v-if="binding" :id="id" @close="binding = false" />
        <!-- 新增 -->
        <el-dialog
            :close-on-click-modal="false"
            :title="title"
            :visible.sync="dialogVisible"
            width="400px"
            :before-close="handleClose"
        >
            <el-form :model="addform" :inline="true" label-width="100px" ref="addform" :rules="rules" class="forms">
                <el-form-item label="策略等级:">
                    <el-select v-model="addform.grade" placeholder="请选择策略等级">
                        <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="策略选择:">
                    <el-select v-model="addform.bigType" placeholder="请选择策略">
                        <el-option
                            v-for="item in options1"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        ></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="预警单名称:" prop="name">
                    <el-input v-model="addform.name" 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="addInfo">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import Timeinterval from '@/views/components/Timeinterval.vue'
import binding from './binding.vue'
import {
    getStrategyPage,
    insertStrategy,
    delStrategy,
    updateStrategyState,
    updateStrategy
} from '@/api/Processsupervision/tactics.js'

export default {
    components: { Timeinterval, binding },
    props: {
        typeKey: {
            type: [String, Number],
            default: 0
        }
    },
    data() {
        return {
            binding: false,
            flagLook: false,
            dialogVisible: false,
            loading: true,
            form: {
                name: '',
                grade: '',
                pageNum: 1,
                pageSize: 20,
                type: ''
            },
            rules: {
                name: [{ required: true, message: '请输入预警单名称', trigger: 'blur' }]
            },
            addform: {
                grade: 0,
                name: '',
                type: '',
                bigType: 0
            },
            title: '新增告警单',
            vh: null,
            id: '',
            total: 0,
            tableList: [],
            warningList: [
                { prop: 'name', label: '名称', width: 150 },
                { prop: 'grade', label: '等级', width: 100 },
                { prop: 'bigType', label: '策略选择', width: 100 },
                { prop: 'updateBy', label: '更新人员', width: 100 },
                { prop: 'updateTime', label: '更新时间', width: 150 }
            ],
            options1: [
                {
                    value: 0,
                    label: '通用策略'
                },
                {
                    value: 1,
                    label: '定值策略'
                }
            ],
            options: [
                {
                    value: 0,
                    label: '自动策略'
                },
                {
                    value: 1,
                    label: '手动策略'
                },
                {
                    value: 2,
                    label: '排除策略'
                }
            ],
            multipleSelection: []
        }
    },
    created() {
        // console.log(1233, this.typeKey);
    },
    mounted() {
        this.setHeight()
        window.addEventListener('resize', this.setHeight)
        this.form.type = this.typeKey
        this.addform.type = this.typeKey
        this.onSubmit()
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
            this.vh = window.sessionStorage.getItem('appheight') - 253 + 'px'
        },
        onSubmit() {
            this.loading = true
            getStrategyPage(this.form).then(res => {
                this.tableList = res.data.records
                this.total = res.data.total
            })
            this.loading = false
        },
        handleSelectionChange(val) {
            this.multipleSelection = val
        },
        handleNodeClick(data) {
            // this.id = data.id;
        },

        handleSizeChange(e) {
            this.form.pageSize = e
            this.onSubmit()
        },
        handleCurrentChange(e) {
            this.form.pageNum = e
            this.onSubmit()
        },
        // 添加
        addInfo() {
            this.$refs['addform'].validate(valid => {
                if (valid) {
                    if (this.title == '新增告警单') {
                        insertStrategy(this.addform).then(res => {
                            if (res.code == 'A0000') {
                                this.$message({
                                    message: '新增成功!',
                                    type: 'success'
                                })
                                this.handleClose()
                                this.onSubmit()
                            }
                        })
                    } else {
                        updateStrategy(this.addform).then(res => {
                            if (res.code == 'A0000') {
                                this.$message({
                                    message: '修改成功!',
                                    type: 'success'
                                })
                                this.handleClose()
                                this.onSubmit()
                            }
                        })
                    }
                }
            })
        },
        // 删除(id)
        delStrategy(id) {
            this.$confirm('确认是否删除?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                delStrategy({
                    ids: id
                }).then(res => {
                    if (res.code == 'A0000') {
                        this.$message({
                            message: '删除成功!',
                            type: 'success'
                        })

                        this.onSubmit()
                    }
                })
            })
        },
        // 关闭新增
        handleClose() {
            this.dialogVisible = false
            this.addform = {
                grade: 0,
                name: '',
                type: this.typeKey
            }
        },
        // 修改表格状态
        stateChange(e, id) {
            updateStrategyState({ id: id, state: e }).then(res => {
                if (res.code == 'A0000') {
                    this.$message({
                        message: '告警单修改状态,成功!',
                        type: 'success'
                    })
                }
                this.onSubmit()
            })
        },
        // 编辑
        upform(row) {
            this.title = '编辑告警单'
            this.addform = JSON.parse(JSON.stringify(row))
            this.dialogVisible = true
        },
        // 绑定
        clickBinding(id) {
            this.id = id
            this.binding = true
        },
        // 表格过滤
        formatter(row, column) {
            if (column.property == 'grade') {
                return row.grade == 0 ? '自动策略' : row.grade == 1 ? '手动策略' : row.grade == 2 ? '排除策略' : ''
            } else if (column.property == 'bigType') {
                return row.bigType == 0 ? '通用策略' : row.bigType == 1 ? '定值策略' : ''
            } else {
                return row[column.property]
            }
        }
    },

    computed: {},

    watch: {}
}
</script>
<style lang="less" scoped>
@import url('../../../../styles/comStyle.less');

::v-deep .el-switch__core::before {
    content: '关闭';
    position: absolute;
    top: 0;
    right: 8px;
    color: #fff;
}
.is-checked ::v-deep .el-switch__core::before {
    content: '启用';
    position: absolute;
    top: 0;
    left: 1px;
    color: #fff;
}
::v-deep .forms {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .el-form-item {
        display: flex;
        width: 100%;
        .el-form-item__content {
            flex: 1 !important;
            .el-select {
                width: 100%;
            }

            .el-date-editor {
                width: 100%;
            }
        }
    }
}
::v-deep .el-table .cell {
    text-align: center !important;
}
</style>
