<template>
  <div v-show="visible">
    <div class="infoWindowBox">
        <div class="topNav">
            <div class="title">最新预警消息</div>
            <div class="record">
              <img src="../../../../static/images/disasterWarn/enterIcon.png" alt="">
            </div>
        </div>
        <div class="msgInfo">
          <div class="msgItem" v-for="(item,index) in msgList" :key="index">
            <div class="warnVal">
              <div>
                <img src="../../../../static/images/disasterWarn/upPopIconicon.png" alt="">
              </div>
              <div class="val">{{item.warning_info}}</div>
              <div class="time">
                {{item.warning_time*1000 | formatTime}}
                <img @click="amplificationA(item)" src="../../../../static/images/disasterWarn/photoIcon.png" alt="">
              </div>
            </div>
            <div class="meddle">
              <span>操作：</span>{{item.action}}
            </div>
          </div>
            
        </div>
    </div>
    <div class="amap-info-sharp">
    </div>
    <!-- 查看大图 -->
      <viewer
        v-show="false"
        :images="recognitionImage"
        ref="viewer"
        @inited="inited"
        :index="3"
      >
        <img v-for="(src, index) in recognitionImage" :src="src" :key="index" />
      </viewer>
      <!-- 查看大图 -->
  </div>
</template>
<script>
import Vue from "vue";
import Viewer from "v-viewer";
import "viewerjs/dist/viewer.css";
Vue.use(Viewer);
export default {
  data() {
    return {
      infoWindow: null,
      visible:false,
      msgList:[],
      currEquip: {
        device_type_id:null,
        device_id:null,
        device_name:null,
        city:null,
        addtime:0,
      },
      recognitionImage:['http://182.92.193.64:8003/Basics/cbd/867435052201324/2021/3/11/20210311161847620251.jpg'],
    };
  },
  methods: {
    initialize(e) {
      this.visible = e.visible;
      this.currEquip = e.currEquip;
      this.infoWindow = e.infoWindow;
      this.$axios({
        method: "post",
        url: "/api/api_gateway?method=weather.weather.warning_info", //forecast.forecast_system.equip_photo
        data: this.qs.stringify({
          device_id: this.$store.state.qxz_wran_id,
          page_size: 3,
        }),
      })
      .then((res) => {
        if(res.data.message == ""){
          this.msgList = res.data.data.data
        }
      })
      .catch((err) => {
        console.log(err);
      });
    },
    //关闭
    close() {
      this.infoWindow.close();
    },
    // 配置查看大图插件
    inited(viewer) {
      this.$viewer = viewer;
    },
    amplificationA(item) {
      this.recognitionImage = [item.warning_pic]
      this.$viewer.view();
    },
  },
  mounted(){
  }
};
</script>
 
<style  scoped lang="less">
.infoWindowBox{
    box-shadow: 0px 0px 4px 0px #0161ff;
    background: rgba(12,20,44,.80);
    color: #fff;
    padding: 20px;
    border-radius: 3px;
    width: 320px;
    .topNav{
        display: flex;
        justify-content: space-between;
        padding-bottom: 10px;
        border-bottom: 1px solid #0b9ac5a6;
        align-items: center;
        .title{
            font-size: 14px;
            color: #04d5e8;
            span{
                color: #fbc900;
            }
        }
        .record{
            color: #01d5ed;
            cursor: pointer;
            &:hover{
                text-decoration-line: underline;
            }
        }
    }
    .msgInfo{
        .msgItem{
            margin-top: 10px;
            .warnVal{
              display: flex;
              justify-content: space-between;
              line-height: 33px;
              img{
                vertical-align: text-bottom;
              }
              .val{
                width: 168px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                font-size: 14px;
              }
              .time{
                img{
                  vertical-align: revert;
                  cursor: pointer;
                }
              }
            }
            .meddle{
              text-indent: 23px;
              color:#04d5e8;
              span{
                color:#fff;
              }
            }
        }

    }
}
.amap-info-sharp{
    bottom: 0;
    left: 50%;
    margin-left: -18px;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid rgba(12, 20, 44, 0.8);
}
</style>
