<template>
  <div>
    <div
      v-if="isRemindPopShow && popupList && popupList.length"
      class="global-tooltip"
      :style="popStyle"
    >
      <div class="global-tooltip_header">
        <span>
          <i class="el-icon-warning"></i>
          提示消息
        </span>
        <i
          v-if="styleContent.showClose"
          class="el-icon-close"
          @click="isRemindPopShow = false"
        ></i>
      </div>
      <ul>
        <li
          v-for="item in popupList"
          :key="item.id"
          :title="item.desc"
          @click="goToTargetPage(item)"
        >
          {{ item.desc }}
        </li>
      </ul>
    </div>
    <el-dialog
      ref="tipDialog"
      :title="tipTitle"
      :visible.sync="dialogTipVisible"
      :width="dialogWidth + 40 + 'px'"
      top="6vh"
      append-to-body
      :before-close="handleClose"
    >
      <div
        class="iframe-wrap"
        :style="{ height: dialogHeight + 'px' }"
        style="max-height: 74vh; overflow: auto"
      >
        <iframe
          style="width: 100%; height: 99%"
          frameborder="0"
          allowtransparency="0"
          :src="srcUrl"
        ></iframe>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { mapState } from 'vuex'
  import { getCurrentUserPopup, getSysProperties } from '@/api/portal.js'
  export default {
    data() {
      return {
        isRemindPopShow: false,
        styleContent: {
          duration: 4500,
          position: 'top-right',
          showClose: true,
        },
        popupList: [],
        dialogWidth: 1000,
        dialogHeight: 600,
        dialogTipVisible: false,
        tipTitle: '',
        srcUrl: '', // 跳转链接
        isShowTip: true,
        timer: null,
        baseUrl: '',
      }
    },
    computed: {
      popStyle() {
        // styleContent
        return {
          top: this.styleContent.position.includes('top') ? '20px' : '',
          left: this.styleContent.position.includes('left') ? '20px' : '',
          bottom: this.styleContent.position.includes('bottom') ? '20px' : '',
          right: this.styleContent.position.includes('right') ? '20px' : '',
        }
      },
    },
    created() {
      // if (!sessionStorage.hidePopup) {
      this.loadPopups()
      // }
    },
    beforeDestroy() {
      clearTimeout(this.timer)
    },
    methods: {
      loadPopups() {
        // this.$store.dispatch('popup/getCurrentUserPopup')
        getCurrentUserPopup().then((res) => {
          if (res.state && res.value) {
            this.isRemindPopShow = true
            this.popupList = res.value
            if (res.value.length && res.value[0].styleContent) {
              this.styleContent = JSON.parse(res.value[0].styleContent)
            }
            if (this.styleContent.duration > 0) {
              this.timer = setTimeout(() => {
                this.isRemindPopShow = false
              }, this.styleContent.duration * 1000)
            }
          }
        })
        getSysProperties('baseUrl').then((resp) => {
          this.baseUrl = resp
        })
      },
      // handleNotify(popup) {
      //   // 因为弹窗消息的div不在当前VueComponent下， 如果需要添加类或者修改样式，请在element-custom.scss中添加或者修改
      //   let param = {
      //     title: popup.subject,
      //     message: popup.desc,
      //     dangerouslyUseHTMLString: true,
      //     onClick: () => this.goToTargetPage(popup),
      //     customClass: 'notify-style',
      //   }
      //   if (popup.styleContent) {
      //     let styles = JSON.parse(popup.styleContent)
      //     for (let key in styles) {
      //       param[key] = styles[key]
      //     }
      //   }
      //   setTimeout(() => {
      //     this.$notify(param)
      //   })
      // },
      goToTargetPage(tipItem) {
        let token = this.$store.state.user.accessToken
        let url =
          tipItem.url.indexOf('?') > -1
            ? `${tipItem.url}&token=${token}`
            : `${tipItem.url}?token=${token}`
        let baseUrl = ''
        if (!url || !url.trim().startsWith('http')) {
          baseUrl = this.baseUrl
          if (!baseUrl) {
            baseUrl = window.context.front
          }
        }

        switch (tipItem.popupType) {
          case 'tab':
            this.routerChange(tipItem.url, `${baseUrl}${url}`)
            break
          case 'new':
            window.open(
              `${baseUrl}${url.trim().startsWith('http') ? tipItem.url : url}`,
              '_blank'
            )
            break
          case 'dialog':
            this.dialogWidth = tipItem.dialogWidth || 1000
            this.dialogHeight = tipItem.dialogHeight || 600
            this.tipTitle = tipItem.subject
            this.srcUrl = `${baseUrl}${
              url.trim().startsWith('http') ? tipItem.url : url
            }`
            this.dialogTipVisible = true
            // this.$refs.tipDialog.$el.firstChild.style.height =
            //   tipItem.dialogHeight + 'px'
            // window.open(url, "_blank", `toolbar=no, width=${tipItem.dialogWidth}, height=${tipItem.dialogHeight},top=140,left=200`);
            break
          default:
            break
        }
      },
      routerChange(url, fullPath) {
        if (url.trim().startsWith('http')) {
          window.location.href = url
        } else {
          this.$router.push({ path: url }).then((c) => {
            // 当本系统不存在该url时，则带上baseUrl进行跳转
            if (
              c &&
              c.message.startsWith(
                'Avoided redundant navigation to current location'
              )
            ) {
              window.location.href = fullPath
            }
          })
        }
        // let absUrl = url.startsWith('/') ? url.substr(1) : url
        // let alias = absUrl.split('/')[0]
        // for (let i = 0; i < this.menus.length; i++) {
        //   if (this.menus[i].alias === alias) {
        //     this.setCurrentMenu(this.menus[i].alias)
        //     this.$router.replace({ path: url })
        //     break
        //   }
        // }
      },
      // setCurrentMenu(alias) {
      //   sessionStorage.menu_alias = alias
      //   let that = this
      //   for (let i = 0; i < that.menus.length; i++) {
      //     if (that.menus[i].alias === alias) {
      //       this.$store.dispatch('menu/getCurrentMenu', {
      //         alias: that.menus[i].alias,
      //         name: that.menus[i].name,
      //       })
      //       break
      //     }
      //   }
      // },
      handleClose() {
        this.dialogTipVisible = false
      },
    },
    // watch: {
    //   popups(newValue, oldValue) {
    //     if (!sessionStorage.hidePopup) {
    //       newValue &&
    //         newValue.forEach((popup) => {
    //           this.handleNotify(popup)
    //         })
    //     }
    //     sessionStorage.setItem('hidePopup', true)
    //   },
    // },
  }
</script>

<style lang="scss" scoped>
  .global-tooltip {
    position: fixed;
    width: 330px;
    height: 216px;
    padding: 0 24px;
    right: 2px;
    bottom: 20px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
    z-index: 2000;
    .global-tooltip_header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 15px 0;
      > span {
        color: #222222;
        font-size: 16px;
        font-weight: bold;
      }
      > i {
        color: #666666;
        cursor: pointer;
      }
      .el-icon-warning {
        color: #0080fe;
        margin-right: 10px;
        font-size: 18px;
      }
    }
    > ul {
      height: 150px;
      overflow-y: auto;
      > li {
        color: #0080fe;
        background: rgba(0, 128, 254, 0.04);
        padding: 6px 10px;
        margin-bottom: 10px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        cursor: pointer;
      }
      > li:first-child {
        background: rgba(229, 85, 85, 0.04);
        color: #e55555;
      }
    }
  }
  ::v-deep .tip-dialog {
    // height: 90%;
    .iframe-wrap {
      height: 100%;
    }
    .el-dialog__header {
      padding: 3px 20px;
      .el-dialog__title {
        color: #000;
        font-size: 12px;
      }

      .el-dialog__headerbtn {
        top: 3px;
      }
    }
    .el-dialog__body {
      height: calc(100% - 40px);
      padding: 0 20px;
    }
  }
</style>