<template>
    <div class="yingji_left">
        <div class="top">
            <div class="title">应急资源分类</div>

            <div class="page">
                <div v-for="(item, index) in arrList_type" :key="index" class="page_div animated">
                    <div class="page_div_2">
                        <span>{{item.text}}</span>
                        <span class="color" @click.stop="onClickItem(item)">
                            <img v-if="item.is" src="@/assets/images/yingji_eye.png" alt="">
                            <img v-if="!item.is" src="@/assets/images/yingji_eye_off.png" alt="">
                            {{item.count}}处</span>
                    </div>

                </div>

            </div>
        </div>

        <div class="bottom">
            <div class="title">预警信息</div>
            <div class="page">
                <div class="page_div" v-for="(item, index) in dataList" :key="index">
                    <!-- <span class="page_circle" :style="{backgroundImage: 'url(' + item.url +')'}">{{ index + 1 }}</span> -->
                    <div class="page_div_son" :style="{backgroundImage: 'url(' + item.url_1 +')'}">
                        <span class="text" :title="item.message">{{item.message}}</span>
                        <span class="time"> {{ item.warningTime.substr(0, 11) }}</span>
                    </div>
                </div>
            </div>

        </div>

        <div class="dialog" v-show="is_dialog">
            <img src="@/assets/images/error.png" class="error" @click="is_dialog = false">

            <div class="page">

                <div class="title">基础信息</div>

                <div v-if="leftGetData.text == '应急物资'">
                    <el-row class="page_text">
                        <el-col :span="8">储备站</el-col>
                        <el-col class="text_right" :span="16">{{leftGetData.affiliation}}</el-col>
                    </el-row>

                    <el-row class="page_text">
                        <el-col :span="8">仓库类型</el-col>
                        <el-col class="text_right" :span="16">{{leftGetData.stationType}}</el-col>
                    </el-row>

                    <el-row class="page_text">
                        <el-col :span="8">管理员</el-col>
                        <el-col class="text_right" :span="16">{{leftGetData.guard}}</el-col>
                    </el-row>

                    <el-row class="page_text">
                        <el-col :span="8">联系电话</el-col>
                        <el-col class="text_right" :span="16">{{leftGetData.tel}}</el-col>
                    </el-row>

                    <br>

                    <el-table :data="leftGetData.table" height="45vh" style="width: 100%">
                        <el-table-column prop="name" label="物资名称" align="center">
                        </el-table-column>
                        <el-table-column prop="sku" label="库存" align="center">
                        </el-table-column>
                    </el-table>

                </div>

                <div v-if="leftGetData.text == '应急救援队伍'">

                    <el-row class="page_text">
                        <el-col :span="8">救援类型</el-col>
                        <el-col class="text_right" :span="16">{{leftGetData.rescueType}}</el-col>
                    </el-row>

                    <el-row class="page_text">
                        <el-col :span="8">所属单位</el-col>
                        <el-col class="text_right" :span="16">{{leftGetData.affiliation}}</el-col>
                    </el-row>

                    <el-row class="page_text">
                        <el-col :span="8">队长</el-col>
                        <el-col class="text_right" :span="16">{{leftGetData.teamLeader}}</el-col>
                    </el-row>

                    <el-row class="page_text">
                        <el-col :span="8">人数</el-col>
                        <el-col class="text_right" :span="16">{{leftGetData.number}}</el-col>
                    </el-row>

                    <el-row class="page_text">
                        <el-col :span="8">联系电话</el-col>
                        <el-col class="text_right" :span="16">{{leftGetData.tel}}</el-col>
                    </el-row>

                    <el-row class="page_text">
                        <el-col :span="8">地址</el-col>
                        <el-col class="text_right" :span="16">{{leftGetData.address}}</el-col>
                    </el-row>
                </div>

                <div v-if="leftGetData.text == '应急车辆'">

                    <el-row class="page_text">
                        <el-col :span="8">车主</el-col>
                        <el-col class="text_right" :span="16">{{leftGetData.carOwner}}</el-col>
                    </el-row>

                    <el-row class="page_text">
                        <el-col :span="8">联系电话</el-col>
                        <el-col class="text_right" :span="16">{{leftGetData.tel}}</el-col>
                    </el-row>

                    <el-row class="page_text">
                        <el-col :span="8">载重量</el-col>
                        <el-col class="text_right" :span="16">{{leftGetData.load}}</el-col>
                    </el-row>

                    <el-row class="page_text">
                        <el-col :span="8">车型</el-col>
                        <el-col class="text_right" :span="16">{{leftGetData.model}}</el-col>
                    </el-row>

                    <el-row class="page_text">
                        <el-col :span="8">车牌号</el-col>
                        <el-col class="text_right" :span="16">{{leftGetData.number}}</el-col>
                    </el-row>
                </div>

                <div v-if="leftGetData.text == '应急专家'">

                    <el-row class="page_text">
                        <el-col :span="8">专家姓名</el-col>
                        <el-col class="text_right" :span="16">{{leftGetData.name}}</el-col>
                    </el-row>

                    <el-row class="page_text">
                        <el-col :span="8">专家类型</el-col>
                        <el-col class="text_right" :span="16">{{leftGetData.trade}}</el-col>
                    </el-row>

                    <el-row class="page_text">
                        <el-col :span="8">联系电话</el-col>
                        <el-col class="text_right" :span="16">{{leftGetData.tel}}</el-col>
                    </el-row>

                </div>

                <div v-if="leftGetData.text == '避难场所'">

                    <el-row class="page_text">
                        <el-col :span="8">场所名称</el-col>
                        <el-col class="text_right" :span="16">{{leftGetData.name}}</el-col>
                    </el-row>

                    <el-row class="page_text">
                        <el-col :span="8">场所类型</el-col>
                        <el-col class="text_right" :span="16">{{leftGetData.type}}</el-col>
                    </el-row>

                    <el-row class="page_text">
                        <el-col :span="8">联系电话</el-col>
                        <el-col class="text_right" :span="16">{{leftGetData.tel}}</el-col>
                    </el-row>

                    <el-row class="page_text">
                        <el-col :span="8">负责人</el-col>
                        <el-col class="text_right" :span="16">{{leftGetData.principal}}</el-col>
                    </el-row>

                    <el-row class="page_text">
                        <el-col :span="8">面积</el-col>
                        <el-col class="text_right" :span="16">{{leftGetData.area}}</el-col>
                    </el-row>

                    <el-row class="page_text">
                        <el-col :span="8">容纳人数</el-col>
                        <el-col class="text_right" :span="16">{{leftGetData.capacity}}</el-col>
                    </el-row>

                </div>

                <br>
            </div>
        </div>
    </div>
</template>

<script>

import { randNum } from '@/utils'
import { expert, rescueTeam, refuge, rescueCar, suppliesReserveStation, emergencyWarning, suppliesReserve } from '@/api'
import { createNamespacedHelpers } from 'vuex'

export default {
    data() {
        return {
            dataList: '',
            one: require('@/assets/images/yingji_1.png'),
            one_1: require('@/assets/images/yingji_1_1.png'),

            two: require('@/assets/images/yingji_2.png'),
            two_1: require('@/assets/images/yingji_2_2.png'),

            three: require('@/assets/images/yingji_3.png'),
            three_1: require('@/assets/images/yingji_3_3.png'),

            four: require('@/assets/images/yingji_4.png'),
            four_1: require('@/assets/images/yingji_4_4.png'),

            is_dialog: false,

            arrList_type: [],

            leftGetData: '',
        }
    },

    mounted() {

        this.$once('hook:beforeDestroy', () => {
            for (let i of this.arrList_type) {
                if (i.is == true) {
                    this.onClickItem(i)
                }
            }
        })

        this.init()

        this.emergencyWarning()
    },

    methods: {

        onClickItem(params) {
            const app = this.$store.state.appMap
            const position = params.position
            const url = params.url
            if (params.is) {
                for (let isII of params.arrObj) {
                    isII.obj.destroy()
                }

            } else {

                params.arrObj = []
                for (let item of position) {
                    const path = [item.jd, item.wd]

                    let geoPoint = app.create({
                        type: "GeoPoint",
                        coordinates: path,
                        userData: {
                            title: params.text,
                            tip: item.name || item.affiliation,
                            data: item
                        },
                        infoWindow: {
                            title: params.text,
                            displayMode: CMAP.DisplayMode.MouseEnter, //点击显示
                            type: CMAP.InfoWindowType.Standard, //标准indoWindow
                            style: CMAP.InfoWindowStyle.Default, //默认样式 黑色
                            pivot: [0.5, 1.3], //界面的轴心，以百分比表示界面轴心位置。[0,0] 代表界面左上；[1,1] 
                            fieldData: [
                                {
                                    field: "tip",
                                    alias: "站点名称"
                                }
                            ]
                        },
                        renderer: {
                            type: "image", // image代表创建图片类型的点
                            url, // 图片的url
                            size: 4 // 尺寸
                        }
                    })

                    params.arrObj.push({
                        obj: geoPoint
                    })

                    geoPoint.on("click", event => {
                        this.is_dialog = false
                        let ev = event.object.userData
                        this.leftGetData = ev.data
                        this.leftGetData.text = ev.title
                        if (ev.title == '应急物资') {
                            suppliesReserve({
                                pid: ev.data.id
                            }).then(res => {
                                this.leftGetData.table = res
                                this.is_dialog = true
                            })
                        }else {
                            this.is_dialog = true
                        }
                    });
                }

            }

            params.is = !params.is
        },

        init() {
            var suppliesReserveStations = {}
            var experts = {}
            var rescueTeams = {}
            var refuges = {}
            var rescueCars = {}

            suppliesReserveStation().then(res => {
                suppliesReserveStations = {
                    text: '应急物资',
                    url: "/image/wu_zi.png",
                    is: false,
                    count: res.length,
                    position: res,
                    arrObj: [],

                }
            })

            // 应急专家
            expert().then(res => {
                experts = {
                    text: '应急专家',
                    url: "/image/zhuan_jia.png",
                    is: false,
                    count: res.length,
                    position: res,
                    arrObj: [],
                }
            })

            // 应急队伍
            rescueTeam().then(res => {
                rescueTeams = {
                    text: '应急救援队伍',
                    url: "/image/dui_wu.png",
                    count: res.length,
                    is: false,
                    position: res,
                    arrObj: [],
                }
            })

            // 应急场所
            refuge().then(res => {
                refuges = {
                    text: '避难场所',
                    url: "/image/chang_suo.png",
                    is: false,
                    count: res.length,
                    position: res,
                    arrObj: [],
                }
            })

            // 应急车辆
            rescueCar().then(res => {
                rescueCars = {
                    text: '应急车辆',
                    url: "/image/che_liang.png",
                    is: false,
                    count: res.length,
                    position: res,
                    arrObj: [],
                }
            })

            setTimeout(() => {
                this.arrList_type = [
                    suppliesReserveStations,
                    experts,
                    rescueTeams,
                    refuges,
                    rescueCars
                ]
            }, 1000);

        },

        emergencyWarning() {
            emergencyWarning().then(res => {

                this.dataList = res.map(item => {

                    // 操作时间
                    let index1 = item.warningTime.indexOf("T")
                    let str1 = item.warningTime.substr(0, index1)
                    let str2 = " " + item.warningTime.slice(index1 + 1, -1)
                    item.warningTime = str1.concat(str2).substr(0, 16)

                    if (item.level == '一级预警') {
                        item.url = this.one,
                        item.url_1 = this.one_1
                    }

                    if (item.level == '二级预警') {
                        item.url = this.two,
                        item.url_1 = this.two_1
                    }

                    if (item.level == '三级预警') {
                        item.url = this.three,
                        item.url_1 = this.three_1
                    }

                    if (item.level == '四级预警') {
                        item.url = this.four,
                        item.url_1 = this.four_1
                    }

                    return item

                })
            })
        }
    }


}
</script>

<style lang="scss">
@import '@/assets/scss/var.scss';

.yingji_left {
    position: absolute;
    background: #040624;
    width: 18%;
    left: 0;
    top: 0;
    bottom: 10vh;
    z-index: 99;
    color: #7afffd;
    padding: 0 0.5vw;

    .title {
        height: 10%;
        display: flex;
        font-size: 2vh;
        align-items: center;
        margin-bottom: 3%;
    }

    .top {
        height: 45vh;

        .page {
            height: 85%;

            .page_div {
                display: inline-block;
                text-align: center;
                border-radius: 5px;
                overflow: hidden;
                width: 46%;
                margin: 0.5vh 2%;
                height: 18%;
                cursor: pointer;
                background-image: url('~@/assets/images/yingji.png');
                background-size: 100% 100%;

                .page_div_2 {
                    height: 100%;
                    width: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    flex-direction: column;
                }

                &:hover {
                    box-shadow: 2px 3px 3px 2px rgba(0, 0, 0, 0.1);
                    animation-name: pulse;
                }

                .color {
                    color: #efb311;
                    margin-top: 4%;
                    font-size: 2vh;
                }

                img {
                    width: 2vh;
                }
            }
        }
    }

    .bottom {
        height: 35vh;
        font-size: 1.5vh;
        .page {
            height: 89%;
            overflow-y: auto;
            @include scrollbar;
            color: #fff;

            .page_div {
                margin-bottom: 1.5vh;
                margin-right: 0.3vw;
                display: flex;
                align-items: center;
                cursor: pointer;
                .page_circle {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    width: 1.6vw;
                    height: 1.6vw;
                    border-radius: 50%;
                    background-size: 100% 100%;
                    margin-right: 0.5vw;
                }

                .page_div_son {
                    padding: 0.85vh 0.5vw;
                    flex: 1;
                    display: flex;
                    justify-content: space-between;
                    background-size: 100% 100%;

                    .text {
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        width: 11vw;
                    }
                }
            }
        }
    }

    .dialog {
        position: absolute;
        left: 100%;
        top: 0;
        padding: 2vw 1vw;
        width: 20vw;
        height: 70vh;
        background-image: url('~@/assets/images/kuang.png');
        background-size: 100% 100%;
        color: #fff;

        .page_text {
            line-height: 2.2;

            .text_right {
                text-align: right;
            }
        }

        .title {
            color: #07c1f7;
        }

        .error {
            position: absolute;
            width: 1vw;
            top: 1.4vw;
            right: 1.4vw;
            cursor: pointer;
        }
    }

    .el-table--scrollable-y,
    .el-table--scrollable-x,
    .el-table__body-wrapper {
        @include scrollbar;
    }

    .el-table {
        background: transparent;
    }

    .el-table th > .cell {
        background-color: transparent;
    }

    .el-table td,
    .el-table th,
    .el-table th,
    .el-table tr {
        background: transparent !important;
        color: #02d9fd;
        font-size: 0.7vw;
    }

    .el-table td {
        border: none !important;
        background: #003046 !important;
    }

    .el-table td,
    .el-table th.is-leaf {
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .el-table--border::after,
    .el-table--group::after,
    .el-table::before {
        background-color: transparent;
    }

    .el-table__body-wrapper {
        overflow-y: auto;
    }
}
</style>