<template>
  <div class="root">
    <div class="button-group">
      <div class="button-item" @click="click(1)">
        <img class="button-img" src="../assets/images/analyzeRouter/button1.png" alt="">
        <span>矛盾纠纷预防化解态势分析</span>
        <Icon style="margin-left: auto;margin-right: 20px;" type="ios-arrow-forward" />
      </div>
      <div class="button-item" @click="click(2)">
        <img class="button-img" src="../assets/images/analyzeRouter/button2.png" alt="">
        <span>重点人群态势分析</span>
        <Icon style="margin-left: auto;margin-right: 20px;" type="ios-arrow-forward" />
      </div>
      <div class="button-item" @click="click(3)">
        <img class="button-img" src="../assets/images/analyzeRouter/button3.png" alt="">
        <span>命案态势分析</span>
        <Icon style="margin-left: auto;margin-right: 20px;" type="ios-arrow-forward" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'analyzeRouter',
  data () {
    return {
      domain: ''
    }
  },
  methods: {
    click (num) {
      // 创建token对象并加密
      console.log(this.$store.state.user, 'this.$store.state.user')
      const obj = {
        token: this.$store.state.user.token || ''
      }
      console.log(obj.token)
      const encryptedToken = window.btoa(encodeURIComponent(JSON.stringify(obj)))
      // 使用 randomParamName  key名伪装token  避免暴露token
      // 使用协议相对 URL（//）自动匹配当前页面的协议（http 或 https）
      if (num === 1) {
        console.log(this.domain, 'this.domain')
        window.open(`//${this.domain}/screen-md/#/?randomParamName=${encryptedToken}`, '_blank')
        // window.open(`http://jilinmdjf.lngov.top:8088/screen-md/#/?randomParamName=${encryptedToken}`, '_blank')
      }
      if (num === 2) {
        window.open(`//${this.domain}/screen-md/#/keyGroups?randomParamName=${encryptedToken}`, '_blank')
        // window.open(`http://jilinmdjf.lngov.top:8088/screen-md/#/keyGroups?randomParamName=${encryptedToken}`, '_blank')
      }
      if (num === 3) {
        window.open(`//${this.domain}/screen-md/#/homicideCase?randomParamName=${encryptedToken}`, '_blank')
        // window.open(`http://jilinmdjf.lngov.top:8088/screen-md/#/homicideCase?randomParamName=${encryptedToken}`, '_blank')
      }
    }
  },
  created () {
    this.domain = window.location.host
  },
  mounted () {

  }
}
</script>

<style lang="less" scoped>
.root {
  width: 100%;
  height: 100%;
  background-size: 100% 100%;
  background-position: center;
  position: relative;
  background-image: url("../assets/images/analyzeRouter/background.png");
  .button-group {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 10%;
    width: 30%;
    height: 30%;
    .button-item {
      width: 80%;
      height: 22%;
      background-color: #EDF6FF;
      border-radius: 12px;
      margin-bottom: 5%;
      display: flex;
      align-items: center;
      font-size: 1.2rem;
      color: #000;
      cursor: pointer;
      white-space: nowrap;
      .button-img {
        width: 10%;
        margin-right: 2%;
        margin-left: 4%;
        // border: 1px dashed #AFB0B2;
      }
      .button-text::after {
        content: ">";
        position: absolute;
        left: 70%;
        top: 70%;
        transform: translateY(-50%);
        font-size: 20px; /* 根据需要调整大小 */
        color: #000; /* 根据需要调整颜色 */
      }
    }
  }
}
</style>
