<!--
 * @Author: 李佐宁
 * @Description: 
 * @Date: 2022-07-29 14:33:54
 * @LastEditTime: 2023-08-25 15:11:53
 * @LastEditors: 李佐宁
-->
<template>
  <div class="yaScreen">
    <!-- <iframe src="/#/data-screen/safe-composite-situation" frameborder="0"></iframe> -->
    <div>
      <img @click="handleRouter" :src="screenBgUrl" alt="" />
      <div class="ya-title ya-primary-text">网络安全态势</div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import { useRouter } from "vue-router";
import { mapState } from "pinia";
import { mapMapping } from "../../assets/map/provinceData";
import shandong from '../../assets/image/safescreen.png'
import hubei from '../../assets/image/hubei.png'

export default defineComponent({
  setup() {
    const mapData = mapMapping();
    const screenBgUrl = ref()
    switch (mapData?.en) {
      case 'hubei':
        screenBgUrl.value = hubei
        break;
      default:
        screenBgUrl.value = shandong
        break;
    }
    const router = useRouter();
    console.log(mapState, "mapState");
    const handleRouter = () => {
      const pageUrl = router.resolve({
        path: "/data-screen/attack-situation",
      });
      window.open(pageUrl.href, "_blank");
    };
    return {
      screenBgUrl,
      handleRouter,
    };
  },
});
</script>

<style lang="scss" scoped>
.yaScreen {
  padding: 16px;
  display: flex;

  img {
    width: 260px;
    height: 146px;
    margin-right: 20px;
    cursor: pointer;
  }

  .ya-title {
    font-size: 14px;
    font-weight: bold;
  }
}
</style>
