<template>
    <div class="dashboard-container">
        <div class="head">
            <div>更多消息</div>
            <!-- <span @click="backLaster" style="color:#2866dd;cursor: pointer;">返回</span> -->
            <el-button
                style="color: #2766dd"
                type="text"
                icon="el-icon-arrow-left"
                @click="backLast"
                >返回</el-button
            >
        </div>
        <el-card class="dashboard-text">
            <el-row :gutter="24" style="display: flex">
                <el-col
                    style="
                        width: 220px;
                        padding-left: 2px;
                        padding-right: 10px;
                        line-height: 40px;
                        height: 40px;
                    "
                >
                    <el-radio-group @change="msgAlarmList" v-model="status">
                        <el-radio-button label="" class="sp-button-submit-bg"
                            >全部</el-radio-button
                        >
                        <el-radio-button label="2" class="sp-button-submit-bg"
                            >已读</el-radio-button
                        >
                        <el-radio-button label="1" class="sp-button-submit-bg"
                            >未读</el-radio-button
                        >
                    </el-radio-group>
                </el-col>

                <el-select
                    style="width: 220px; margin: 0 10px"
                    v-model="railwayCode"
                    placeholder="请选择线路"
                    clearable
                >
                    <el-option
                        v-for="(item, index) in routeList"
                        :key="index"
                        :label="item.railwayName"
                        :value="item.railwayCode"
                    />
                </el-select>

                <el-select
                    v-model="alarmType"
                    style="width: 220px; margin: 0 10px"
                    placeholder="请选择灾害类型"
                    clearable
                >
                    <el-option
                        v-for="(item, index) in damageList"
                        :key="index"
                        :label="item.dictLabel"
                        :value="item.dictValue"
                    />
                </el-select>
                <!-- <div>
          <div class="sp-button-submit" type="primary" @click="msgAlarmList">
            查询
          </div>
          <div class="sp-button-reset" @click="resetForm()">重置</div>
        </div> -->
                <div
                    v-if="searchShow == true"
                    style="display: flex; margin-top: 2px"
                >
                    <!-- <div class="search-btn"> -->
                    <div
                        class="sp-button-submit"
                        style="margin-left: 10px"
                        @click="msgAlarmList"
                    >
                        查询
                    </div>
                    <div
                        class="sp-button-reset"
                        style="margin-left: 10px"
                        @click="resetForm"
                    >
                        重置
                    </div>
                    <el-button
                        v-if="searchShow == false"
                        type="text"
                        style="color: #2766dd !important; margin-left: 10px"
                        icon="el-icon-arrow-up"
                        @click="searchShow = true"
                        >收起</el-button
                    >
                    <el-button
                        v-if="searchShow == true"
                        type="text"
                        style="color: #2766dd; margin-left: 10px"
                        icon="el-icon-arrow-down"
                        @click="searchShow = false"
                        >展开</el-button
                    >
                    <!-- </div> -->
                </div>
            </el-row>
            <el-row :gutter="24" style="display: flex">
                <div v-if="searchShow == false" :span="6">
                    <el-date-picker
                        style="width: 450px"
                        v-model="value1"
                        end-placeholder="结束日期"
                        range-separator="至"
                        start-placeholder="开始日期"
                        clearable
                        value-format="yyyy-MM-dd HH:mm:ss"
                        type="daterange"
                    />
                </div>
                <div
                    v-if="searchShow == false"
                    style="display: flex; width: 220px; margin: 0 10px"
                ></div>
                <div v-if="searchShow == false" style="margin-left: 20px">
                    <div class="search-btn">
                        <div class="sp-button-submit" @click="msgAlarmList">
                            查询
                        </div>
                        <div class="sp-button-reset" @click="resetForm">
                            重置
                        </div>
                        <el-button
                            v-if="searchShow == false"
                            type="text"
                            icon="el-icon-arrow-up"
                            style="color: #2766dd !important"
                            @click="searchShow = true"
                            >收起</el-button
                        >
                        <el-button
                            v-if="searchShow == true"
                            type="text"
                            icon="el-icon-arrow-down"
                            @click="searchShow = false"
                            >展开</el-button
                        >
                    </div>
                </div>
            </el-row>
            <!-- <el-row justify="end" type="flex" style="margin-top: 10px;margin-right: 5px;">
          <el-button type="primary" @click="msgAlarmList">查询</el-button>
          <el-button @click="resetForm()">重置</el-button>
        </el-row> -->
        </el-card>

        <el-card style="margin-top: 20px; line-height: 30px">
            <div
                class="sasd"
                v-if="tableData.length == 0"
                style="font-size: 14px; color: #606266; text-align: center"
            >
                暂无数据
            </div>
            <div
                style="
                    display: flex;
                    flex-wrap: wrap;
                    font-size: 14px;
                    overflow-y: auto;
                    background-color: #fff;
                    padding: 10px;
                    margin-top: 5px;
                    width: 100%;
                "
            >
                <div
                    v-for="item in tableData"
                    style="
                        padding-bottom: 8px;
                        margin-top: 5px;
                        border-bottom: 1px solid #d2d2d2;
                        width: 100%;
                    "
                >
                    <div style="display: flex; align-items: center">
                        <div
                            style="
                                flex-shrink: 0;
                                color: red;
                                margin-right: 5px;
                            "
                        >
                            【报警】
                        </div>
                        <div style="flex: 1; margin-right: 5px">
                            报警{{ item.railwayName }}线路
                        </div>
                    </div>
                    <div
                        style="
                            padding: 2px 10px;
                            background-color: #f2f2f2;
                            margin-top: 5px;
                            border-radius: 5px;
                            display: flex;
                        "
                    >
                        <div style="flex: 1; display: flex">
                            <div style="margin-right: 10px">
                                {{ item.releasedTime }}
                            </div>
                            <div style="margin-right: 10px">
                                {{ item.alarmType === 1 ? "泥石流" : "" }}
                            </div>
                            <div style="margin-right: 15px">
                                {{
                                    item.lineDir === 1
                                        ? "上行"
                                        : item.lineDir === 0
                                        ? "下行"
                                        : "-"
                                }}
                            </div>
                            <div style="margin-right: 15px">
                                里程位置{{ item.alarmMiles }}
                            </div>
                            <div style="margin-right: 15px">
                                里程范围 {{ item.beginMile }}-{{ item.endMile }}
                            </div>
                        </div>
                        <div
                            style="flex-shrink: 0; color: #666666"
                            @click="toDetails(item)"
                        >
                            详情查看
                        </div>
                    </div>
                </div>
            </div>
            <el-row justify="end" style="margin-top: 10px" type="flex">
                <el-pagination
                    :page-size="100"
                    :page-sizes="[10, 15, 20, 25]"
                    :total="total"
                    layout="total, sizes, prev, pager, next, jumper"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                />
            </el-row>
        </el-card>
    </div>
</template>
<script>
import { mapGetters } from "vuex";
import {
    baseRailwayManagement,
    dataType,
    msgAlarmList,
    readById,
    releaseAlarm,
    msgAlarmMessageMore,
    msgAlarmMessageMoreNum,
    msgAlarmWebAlarm,
} from "@/api/alarmList";
export default {
    name: "Cart",
    computed: {
        ...mapGetters(["name"]),
    },
    data() {
        return {
            searchShow: true,
            pageNum: 1,
            pageSize: 10,
            total: 0,
            value1: "",
            value: "",
            input: "",
            zhangtai: [
                {
                    value: 1,
                    label: "未读",
                },
                {
                    value: 2,
                    label: "已读",
                },
            ],
            tableData: [],
            routeList: [],
            lineType: [],
            damageList: [],
            mileageList: [],
            railwayCode: "",
            lineDir: "",
            alarmType: "",
            alarmMile: "",
            beginMile: "",
            endMile: "",
            beginAlarmTime: "",
            endAlarmTime: "",
            status: "1",
        };
    },
    created() {
        this.msgAlarmList();
        this.baseRailwayManagement();
        this.dataType("sys_line_dir");
        this.dataType("sys_alarm_type");
        this.dataType("sys_mileage");
    },
    methods: {
        backLast() {
            history.go(-1);
        },
        toDetails(info) {
            readById({
                pushId: info.pushId,
            }).then((res) => {
                if (res.code == "200") {
                    for (
                        var i = 0;
                        i < this.$store.state.app.warningSocket.list.length;
                        i++
                    ) {
                        if (
                            info.id ===
                            this.$store.state.app.warningSocket.list[i].id
                        ) {
                            this.$store.state.app.warningSocket.list.splice(
                                i,
                                1
                            );
                        }
                    }
                }
            });
            sessionStorage.row = JSON.stringify(info);
            this.$router.push({
                path: "/alarmDetail",
                query: { id: info.id, cameraCode: info.cameraCode || 200 },
            });
        },
        seeDetail(val, val1) {
            this.$router.push({
                path: "/alarmDetail",
                query: {
                    id: val,
                    cameraCode: val1,
                },
            });
        },
        resetForm() {
            this.railwayCode = "";
            this.lineDir = "";
            this.alarmType = "";
            this.alarmMile = "";
            this.beginMile = "";
            this.endMile = "";
            this.beginAlarmTime = "";
            this.endAlarmTime = "";
            this.status = "";
            this.value1 = "";

            this.msgAlarmList();
        },
        dataType(val) {
            dataType(val).then((res) => {
                if (val === "sys_line_dir") {
                    this.lineType = [];
                    this.lineType = res.data;
                    this.$set(this.lineType);
                } else if (val === "sys_alarm_type") {
                    this.damageList = [];
                    this.damageList = res.data;
                    this.$set(this.damageList);
                } else if (val === "sys_mileage") {
                    this.mileageList = [];
                    this.mileageList = res.data;
                    this.$set(this.mileageList);
                }
            });
        },
        baseRailwayManagement() {
            // msgAlarmMessageMoreNum().then((res) => {});

            baseRailwayManagement().then((res) => {
                this.routeList = [];
                this.routeList = res.data;
                this.$set(this.routeList);
            });
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.pageSize = val;
            this.msgAlarmList();
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.pageNum = val;
            this.msgAlarmList();
        },
        msgAlarmList() {
            console.log(this.value1);
            let beginAlarmTime;
            let endAlarmTime;
            if (this.value1) {
                beginAlarmTime = this.value1[0];
                endAlarmTime = this.value1[1];
            }
            msgAlarmMessageMore({
                pageNum: this.pageNum,
                pageSize: this.pageSize,
                alarmType: this.alarmType,
                railwayCode: this.railwayCode,
                beginMile: this.beginMile,
                endMile: this.endMile,
                lineDir: this.lineDir,
                status: this.status,
                alarmMile: this.alarmMile,
                beginAlarmTime: beginAlarmTime,
                endAlarmTime: endAlarmTime,
            }).then((res) => {
                console.log(res);
                this.tableData = [];
                this.tableData = res.data.records;
                this.$set(this.tableData);
                this.total = res.data.total;
            });
        },
    },
};
</script>

<style lang="scss" scoped>
.dashboard {
    &-container {
        margin: 30px;
    }

    &-text {
        font-size: 30px;
        line-height: 46px;
    }
}
.el-card.is-always-shadow,
.el-card.is-hover-shadow:focus {
    box-shadow: none;
}
.el-card {
    border: 1px solid#FFFF;
    background-color: #fff;
}
::v-deep.el-date-editor .el-range__icon {
    position: relative;
    top: 0;
}
::v-deep .el-radio-button__orig-radio:checked + .el-radio-button__inner {
    color: #fff;
    background-color: #2766dd;
    border-color: #2766dd;
    -webkit-box-shadow: -1px 0 0 0 #409eff;
    box-shadow: -1px 0 0 0 #2766dd;
}
.head {
    height: 50px;
    font-size: 12px;
    line-height: 50px;
    background: #dadfe8 !important;
    display: flex;
    justify-content: space-between;
    padding: 0 25px;
}
</style>
