<template>
    <div id="yjgz">
        <div class="top-div">
            <el-input placeholder="请输入预警名称" v-model="input" clearable>
            </el-input>
            <el-date-picker class="sjxz" type="datetimerange" range-separator="至" start-placeholder="起始时间" end-placeholder="结束时间" value-format="yyyy-MM-dd HH:mm:ss" v-model="value">
            </el-date-picker>
            <div class="button-discuss" @click="handleCurrentChange_qw(1)">搜索</div>
            <div class="xjzt-div" @click="add_tk()">
                <i class="el-icon-document-add"></i>&nbsp;&nbsp;新建
            </div>
        </div>
        <div class="bottom-div">
            <div class="table-div">
                <el-table :data="tableData" height="100%" border style="width: 100%">
                    <el-table-column type="index" width="100" label="序号"></el-table-column>
                    <el-table-column prop="name" label="预警名称"> </el-table-column>
                    <el-table-column label="预警方式">
                        <template slot-scope="scope">{{ scope.row.way=='LED'?'跑马灯提醒':'页面右侧提醒' }}</template>
                    </el-table-column>
                    <el-table-column prop="keyword" label="关键字"> </el-table-column>
                    <el-table-column prop="begin_time" label="预警开始时间">
                        <template slot-scope="scope">{{ scope.row.begin_time==''||scope.row.begin_time==null?'永久':scope.row.begin_time }}</template>
                    </el-table-column>
                    <el-table-column prop="end_time" label="预警结束时间">
                        <template slot-scope="scope">{{ scope.row.end_time==''||scope.row.end_time==null?'永久':scope.row.end_time }}</template>
                    </el-table-column>
                    <el-table-column prop="source" label="媒体范围"> </el-table-column>
                    <!-- <el-table-column prop="create_name" label="创建人"> </el-table-column>
          <el-table-column prop="create_time" label="创建时间"> -->
                    <el-table-column label="状态">
                        <template slot-scope="scope">
                            <el-switch v-model="scope.row.state" active-color="#13ce66" inactive-color="#ff4949" active-value="1" inactive-value="0" active-text="启动" inactive-text="关闭" @change="change(scope)">
                            </el-switch>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="100" show-overflow-tooltip>
                        <template slot-scope="scope">
                            <i class="el-icon-edit" @click="handleEdit(scope.row)" title="编辑"></i>
                            &nbsp;
                            <i class="el-icon-delete" @click="handleDelete(scope.row)" title="删除"></i>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="page-div">
                <el-pagination class="myPagination" background layout="total, sizes, prev, pager, next, jumper" 
                :total="totals" :current-page="current_page_qw" @current-change="handleCurrentChange_qw"
                @size-change="handleSizeChange" :page-size="pageSize" 
                :page-sizes="[10, 20, 30, 40,50,60,70,80,90,100]">
                </el-pagination>
            </div>
        </div>
        <el-dialog title="新增预警" :visible.sync="centerDialogVisible_add" width="30%" center>
            <el-form ref="forms" :model="form_add" :rules="rules" label-width="80px" style="margin-bottom: 0px">
                <el-form-item label="预警名称" prop="name">
                    <el-input v-model.trim="form_add.name" placeholder="请输入预警名称"></el-input>
                </el-form-item>
                <el-form-item label="关键词" prop="keyword">
                    <el-input v-model.trim="form_add.keyword" placeholder="请输入关键词"></el-input>
                </el-form-item>
                <el-form-item label="预警方式" prop="way">
                    <el-select v-model="form_add.way" clearable placeholder="请选择">
                        <el-option v-for="item in options_yjfs" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="预警时间" prop="time">
                    <el-tooltip
                        class="item"
                        effect="light"
                        content="不选择时间，则为永久有效"
                        placement="right-start"
                        :value="is_true"
                    >
                        <el-date-picker class="public-range" type="datetimerange" range-separator="至" start-placeholder="起始时间" end-placeholder="结束时间" value-format="yyyy-MM-dd HH:mm:ss" v-model="form_add.time" align="right">
                        </el-date-picker>
                    </el-tooltip>
                </el-form-item>
                <el-form-item label="采集源" prop="source">
                    <el-select v-model="form_add.source" clearable multiple 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>
            <span slot="footer" class="dialog-footer">
                <el-button @click="centerDialogVisible_add = false">取 消</el-button>
                <el-button type="primary" @click="submit_add()">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog title="编辑预警" :visible.sync="centerDialogVisible_edit" width="30%" center>
            <el-form ref="form_bj" :model="form_edit" :rules="rules" label-width="80px" style="margin-bottom: 0px">
                <el-form-item label="预警名称" prop="name">
                    <el-input v-model.trim="form_edit.name" placeholder="请输入预警名称"></el-input>
                </el-form-item>
                <el-form-item label="关键词" prop="keyword">
                    <el-input v-model.trim="form_edit.keyword" placeholder="请输入关键词"></el-input>
                </el-form-item>
                <el-form-item label="预警方式" prop="way">
                    <el-select v-model="form_edit.way" clearable placeholder="请选择">
                        <el-option v-for="item in options_yjfs" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="预警时间" prop="time">
                    <el-tooltip
                        class="item"
                        effect="light"
                        content="不选择时间，则为永久有效"
                        placement="right-start"
                        :value="is_trues"
                    >
                        <el-date-picker class="public-range" type="datetimerange" range-separator="至" start-placeholder="起始时间" end-placeholder="结束时间" value-format="yyyy-MM-dd HH:mm:ss" v-model="form_edit.time" align="right">
                        </el-date-picker>
                    </el-tooltip>
                </el-form-item>
                <el-form-item label="采集源" prop="source">
                    <el-select v-model="form_edit.source" clearable multiple 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>
            <span slot="footer" class="dialog-footer">
                <el-button @click="centerDialogVisible_edit = false">取 消</el-button>
                <el-button type="primary" @click="submit_edit()">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import { post, delete_util, startLoading, endLoading } from "../../util/http_util";
export default {
    data() {
        return {
            centerDialogVisible_add: false,
            is_true: false,
            centerDialogVisible_edit: false,
            is_trues: false,
            value: "",
            input: "",
            tableData: [],
            options: [
                { value: 1, label: "新闻" },
                { value: 2, label: "Facebook" },
                { value: 3, label: "Twitter" },
                { value: 4, label: "智库" },
            ],
            options_yjfs:[
                // {value:'DESKTOP',label:'电脑桌面提醒'},
                {value:'RIGHT',label:'页面右侧提醒'},
                {value:'LED',label:'跑马灯提醒'},
            ],
            form_add: {
                name: "",
                keyword: "",
                way: "",
                time: "",
                source: [],
            },
            rules: {
                name: [
                    { required: true, message: '请输入预警名称', trigger: 'blur' },
                ],
                keyword: [
                    { required: true, message: '请输入关键词', trigger: 'blur' }
                ],
                way: [
                    { required: true, message: '请选择预警方式', trigger: 'change' }
                ],
                time: [
                    {  required: false, message: '请选择时间', trigger: 'change' }
                ],
                source: [
                    { type: 'array', required: true, message: '请至少选择一个采集源', trigger: 'change' }
                ],
            },
            form_edit: {
                name: "",
                keyword: "",
                way: "",
                time: "",
                source: [],
                state: '',
            },
            totals: 0,
            current_page_qw: 1,
            pageSize: 10,
            edit_id: '',
        };
    },
    methods: {
        //弹出框新增
        add_tk() {
            let _this = this;
            _this.form_add = {
                name: "",
                keyword: "",
                way: "",
                time: "",
                source: [],
            };
            _this.centerDialogVisible_add = true;
            setTimeout(function(){
                _this.$refs['forms'].resetFields();
                _this.is_true = true;
            },200)
        },
        //新增确定
        submit_add() {
            let _this = this;
            this.$refs['forms'].validate((valid) => {
                if (valid) {
                    let startTime = "";
                    let endTime = "";
                    if (_this.form_add.time != "" && _this.form_add.time != null) {
                        startTime = _this.form_add.time[0];
                        endTime = _this.form_add.time[1];
                    }
                    let paramDatas = {
                        begin_time: startTime == "" ? null : startTime,
                        end_time: endTime == "" ? null : endTime,
                        name: _this.form_add.name,
                        keyword: _this.form_add.keyword,
                        way: _this.form_add.way,
                        source: _this.form_add.source,
                        create_id: 56,
                        state: "1",
                    };
                    // this.$store.dispatch('setUserInfo', null);
                    startLoading();
                    post("api/rest/sentiment/addWarningRule", paramDatas)
                        .then((data) => {
                            this.$message({
                                type: "success",
                                message: "新增成功!",
                            });
                            _this.centerDialogVisible_add = false;
                            endLoading();
                            _this.handleCurrentChange_qw(1);
                        })
                        .catch((err) => {
                            endLoading();
                            this.$message.warning(err.message); 
                        });
                } else {
                    return false;
                }
            });
        },
        //修改确定
        submit_edit() {
            let _this = this;
            this.$refs['form_bj'].validate((valid) => {
                if (valid) {
                    let startTime = "";
                    let endTime = "";
                    if (_this.form_edit.time != "" && _this.form_edit.time != null) {
                        startTime = _this.form_edit.time[0];
                        endTime = _this.form_edit.time[1];
                    }
                    let paramDatas = {
                        begin_time: startTime == "" ? null : startTime,
                        end_time: endTime == "" ? null : endTime,
                        name: _this.form_edit.name,
                        keyword: _this.form_edit.keyword,
                        way: _this.form_edit.way,
                        source: _this.form_edit.source,
                        update_id: 56,
                        state: _this.form_edit.state,
                        id: this.edit_id,
                    };
                    // this.$store.dispatch('setUserInfo', null);
                    startLoading();
                    post("api/rest/sentiment/updateWarningRule", paramDatas)
                        .then((data) => {
                            this.$message({
                                type: "success",
                                message: "编辑成功!",
                            });
                            _this.centerDialogVisible_edit = false;
                            endLoading();
                            _this.handleCurrentChange_qw(1);
                        })
                        .catch((err) => {
                            endLoading();
                            this.$message.warning(err.message); 
                        });
                } else {
                    return false;
                }
            });
        },
        //修改弹出框
        handleEdit(item) {
            let _this = this;
            let arr = [];
            item.source1.forEach(item_source1 => {
                arr.push(item_source1.id);
            })
            _this.edit_id = item.id;
            _this.form_edit = {
                name: item.name,
                keyword: item.keyword,
                way: item.way,
                time: [item.begin_time == null ? '' : item.begin_time, item.end_time == null ? '' : item.end_time],
                source: arr,
                state: item.state,
            };
            _this.centerDialogVisible_edit = true;
            setTimeout(function(){
                _this.is_trues = true;
            },200)
        },
        //删除
        handleDelete(item) {
            let _this = this;
            this.$confirm(
                "此操作将永久删除该预案, 是否继续?",
                "提示",
                {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                }
            )
                .then(() => {
                    delete_util("api/rest/sentiment/deleteWarningRule/" + item.id).then(data => {
                        this.$message({
                            type: "success",
                            message: "删除成功",
                        });
                        this.handleCurrentChange_qw(1);
                    }).catch((err) => {
                        this.$message.warning(err.message); 
                    })
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消删除",
                    });
                });
        },
        //列表分页
        handleCurrentChange_qw(pageNum) {
            let _this = this;
            let startTime = "";
            let endTime = "";
            if (_this.value != ""&& _this.value!=null) {
                startTime = _this.value[0];
                endTime = _this.value[1];
            }
            let paramDatas = {
                beginTime: startTime == "" ? null : startTime,
                endTime: endTime == "" ? null : endTime,
                name: this.input,
                pageNum: pageNum,
                pageSize: this.pageSize,
            };
            startLoading();
            this.tableData = [];
            this.totals = 0;
            // this.current_page_qw = 1;
            post("api/rest/sentiment/queryWarningRule", paramDatas)
                .then((data) => {
                    if (data.list.length > 0) {
                        data.list.forEach((item) => {
                            let arr = "";
                            item.source.forEach(item_source => {
                                arr = arr + item_source.name + '、'
                            })
                            arr = arr.substring(0, arr.length - 1);
                            item.source1 = item.source;
                            item.source = arr;
                        });
                        this.tableData = data.list;

                        this.totals = data.totals;
                        this.current_page_qw = pageNum;

                    }
                    endLoading();
                })
                .catch((err) => {
                    endLoading();
                    this.$message.warning(err.message); 
                });
        },
        change(item) {
            let source = [];
            item.row.source1.forEach((item)=>{
                source.push(item.id);
            })
            let paramDatas = {
                begin_time: item.row.begin_time,
                end_time: item.row.end_time,
                name: item.row.name,
                keyword: item.row.keyword,
                way: item.row.way,
                source: source,
                update_id: 56,
                state: item.row.state,
                id: item.row.id,
            };
            // this.$store.dispatch('setUserInfo', null);
            startLoading();
            post("api/rest/sentiment/updateWarningRule", paramDatas)
                .then((data) => {
                    this.$message({
                        type: "success",
                        message: "状态修改成功!",
                    });
                    // _this.centerDialogVisible_edit = false;
                    endLoading();
                    // _this.handleCurrentChange_qw(1);
                })
                .catch((err) => {
                    endLoading();
                    this.$message.warning(err.message); 
                });
        },
        handleSizeChange(val) {
            this.pageSize = val;
            this.current_page_qw = 1;
            this.handleCurrentChange_qw(1);
        },
    },
    mounted() {
        this.handleCurrentChange_qw(1);
    },
    watch:{
        centerDialogVisible_add:function(val){
            if(!val)
            this.is_true = val;
        },
        centerDialogVisible_edit:function(val){
            if(!val)
            this.is_trues = val;
        }
    }
};
</script>
<style lang="scss">
#yjgz {
    width: calc(100% - 55px);
    height: calc(100% - 75px);
    margin: 20px;
    box-sizing: border-box;
    overflow: hidden;
    background-image: url('../../assets/img/xxxl/01.png');
    background-size: 100% 100%;
    .top-div {
        width: calc(100% - 40px);
        height: 80px;
        margin-left: 20px;
        margin-right: 20px;
        .el-select {
            float: left;
            margin-left: 20px;
            width: 180px !important;
            height: 100px;
            .el-input {
                width: unset !important;
            }
        }

        .el-input__inner {
            color: white !important;
            background: none !important;
            border: 1px solid #146a80 !important;
            box-shadow: 0 0 10px #1b6097;
        }
        .el-input {
            float: left;
            width: 225px;
            margin-left: 0px;
            margin-top: 30px;
            .el-input__inner {
                background: none;
                color: #ffff;
                border: 1px solid #146a80 !important;
                box-shadow: 0 0 10px #1b6097;
            }
        }
        .sjxz {
            width: 380px;
            margin-top: 30px;
            float: left;
            margin-left: 20px;
            .el-date-editor {
                background: none;
                span {
                    color: white;
                }
            }
            .el-range-input {
                color: white !important;
                background: #1d2d46 !important;
            }
            .el-range-separator {
                color: #ffffff !important;
            }
            .el-input__inner {
                border: 1px solid #146a80 !important;
            }
        }
        .button-discuss {
            margin-top: 35px;
            width: 100px;
            height: 30px;
            line-height: 30px;
            float: left;
      font-size: 14px;
            text-align: center;
            cursor: pointer;
            background-image: url(../../assets/img/yqjc/40.png);
            background-repeat: no-repeat;
            background-size: 100% 100%;
            margin-left: 20px;
        }
        .el-button--primary {
            margin-top: 30px;
            border: 1px solid #146a80 !important;
            background-color: #1d2d46;
            box-shadow: 0 0 10px #1b6097;
            margin-left: 20px;
        }
        .xjzt-div {
            margin-top: 35px;
            float: right;
            width: 100px;
            margin-right: 10px;
            height: 30px;
            line-height: 30px;
            background: none;
            font-size: 14px;
            text-align: center;
            color: #ffffffc7;
            cursor: pointer;
            background-image: url('../../assets/img/yqjc/40.png');
            background-size: 100% 100%;
        }
    }
    .bottom-div {
        width: calc(100% - 40px);
        height: calc(100% - 115px);
        box-shadow: 0 0 10px #1b6097;
        margin-left: 20px;
        margin-right: 20px;
        .table-div {
            width: 100%;
            height: calc(100% - 50px);
            margin-top: 20px;
            margin-left: 0px;
            .el-table tr {
                background-color: #1d2d46 !important;
                color: #ffffffc7;
            }
            .el-table td {
                border-bottom: 1px solid #127a89;
                border-right: unset;
            }
            .el-table--enable-row-hover .el-table__body tr:hover > td {
                background-color: #82848a78;
            }
            .el-table th {
                border: unset;
                background-color: #263b5d !important;
            }
            .el-table--fit {
                background: none !important;
                border: unset;
            }
            .el-icon-delete-solid {
                color: red;
                cursor: pointer;
                font-size: 18px;
            }
            .el-icon-edit {
                color: #1172d8;
                cursor: pointer;
                font-size: 20px;
            }
            .el-icon-delete {
                color: red;
                font-size: 20px;
                cursor: pointer;
            }
            .el-table--group::after,
            .el-table--border::after,
            .el-table::before {
                background-color: unset;
            }
        }
    }
    .el-dialog {
        width: 600px;
        background-color: #1d2d47;
        .el-dialog__title {
            color: #ffff;
        }
        .el-form-item__label {
            color: #ffff;
        }
        .el-input__inner {
            background: none;
            color: #ffff;
            border: 1px solid #146a80 !important;
            box-shadow: 0 0 10px #1b6097;
        }
        .el-textarea__inner {
            color: white !important;
            background: none !important;
            border: 1px solid #146a80 !important;
            box-shadow: 0 0 10px #1b6097;
        }
        .el-input__count {
            color: #229dbd;
            background: #1d2d4600;
        }
        .el-radio-group {
            margin-top: 12px;
        }
        .el-radio {
            color: #ffff;
        }
        .el-range-input {
            color: white !important;
            background: #1d2d46 !important;
        }
        .el-range-separator {
            color: #ffffff !important;
        }
        .el-select {
            width: 100%;
        }
        .el-input__inner{
            width: 100%;
        }
    }
    .tm_lb {
        width: calc(100% - 20px);
        height: calc(100% - 20px);
        margin: 10px;
        position: relative;
        .back-img {
            width: 40px;
            height: 40px;
            cursor: pointer;
            position: absolute;
            right: 40px;
        }
    }
}
</style>