<template>
  <div
    :class="[isShow ? 'show' : '', positionClass]"
    class="el-notification notification-box"
    role="alert"
  >
    <div v-loading="isLoading" class="el-notification__group">
      <div class="el-notification__title">
        <div>您有{{ unReadNum }}条未读重要消息，请及时查看~</div>
      </div>
      <div class="el-notification__content">
        <!-- <p>您有{{ unReadNum }}条未读重要消息，请及时查看</p> -->
        <div class="messageTypeBox">
          <span
            v-for="item in messageList"
            :key="item.type"
            :class="+item.type === currentType ? 'active' : ''"
            class="messageTypeItems"
            @click="() => (currentType = +item.type)"
          >
            {{ item.text }}({{ item.total > 99 ? '99+' : item.total }})
          </span>
        </div>
        <div class="messageTypeList">
          <div
            v-for="item in getCurrentTypeItems(currentType)"
            :key="item.id"
            class="messageTypeItems"
          >
            <div class="title" @click="goDetail(item.id)">{{ item.title }}</div>
            <div class="content" @click="goDetail(item.id)">
              {{ getContent(item.content) }}
            </div>
            <span>{{ item.pushTime | moment('YYYY-MM-DD HH:mm') }}</span>
          </div>
        </div>
      </div>
      <div class="el-notification__footer">
        <el-button type="primary" @click="handleSee">查看更多消息</el-button>
        <el-button type="primary" @click="handleSeeLater"
          >稍后查看({{ countDown }}s)</el-button
        >
      </div>
      <audio ref="cityDispatchAudio" :src="cityDispatch" />
    </div>
  </div>
</template>

<script>
import {
  isShowMessageAlert,
  hideMessageAlert
} from '../../functions/messageAlertFn'
const messageTypeDic = [
  { text: '派单消息', value: 50 },
  { text: '产品消息', value: 40 },
  { text: '运营消息', value: 30 },
  { text: '安全消息', value: 20 },
  { text: '系统消息', value: 10 }
]
export default {
  name: 'MessageAlert',
  props: {
    onCheck: {
      type: Function,
      default: null
    },
    onCheckLater: {
      type: Function,
      default: null
    },
    httpMethods: {
      type: Function,
      default: null
    },
    downCount: {
      type: Number,
      default: 10
    },
    position: {
      // 'right' | 'rightTop' | 'rightBottom' | 'left' | 'leftTop' | 'leftBottom' | 'center',
      type: String,
      default: 'rightTop'
    },
    alertHide: {
      // 弹窗时立即关闭再次弹窗（false值表示在{downCount}秒后再执行关闭再次弹窗）
      type: Boolean,
      default: false
    },
    userInfo: {
      type: Object,
      default: () => {}
    },
    tenantId: {
      type: [String, Number],
      default: ''
    }
  },
  data() {
    return {
      isShow: false,
      visible: isShowMessageAlert(), // 用于控制组件是否
      countDown: this.downCount,
      unReadNum: 0,

      currentType: 40,
      messageList: [],
      maxLength: 5,
      isLoading: false,
      messageTypeDic,
      interval: null,
      cityDispatch:
        'data:audio/mp3;base64,//MkxAAHsAaVvgBGAChpFNdv+AA5lzSKFUxDpQf10+xTadf4xiNiHb2s96kCvzJK//MkxAQHQBJ5njCAADUACAhwoPVNWt1LLu2n1cNRqU9X/+ij/5sTbDtP4fxsu5LU//MkxAoGeD5QAU8YAMs78okoQDAgIEzguK/Xe9Cd51ShE4zaU16XEUN0DAaC6/fU//MkxBML8KKAAZtoAPuR80XDcIyHqXoIyn9JQ5+ou//Lp/8+IA27/9pS0HGeAXkC//MkxAYJUTa4AdMQANknSoyQa8YST7f+gjLcn////T6fDvnPuqfLheUckoPqxXwU//MkxAMHADrQAAQUBDwXAVpuqdX///lKwTB/+A4sLABQsfWQA5P1i0gMkrMqRYMv//MkxAoJwZLMAIhElQ4G5l8I1y//////5JZmF2Ru/1zsDKwPZjbltntaEcgAgAEk//MkxAYIUD8SWANMBtEMTt3eBYR+C7///8VQeFwmBR3QgVRFQGgBhKr6JKATc3PM//MkxAcIEHrIAJHESNQEp/+UIc///yIDeExRzDxNtAECIlIhioWqEjkEgAEk+VyC//MkxAkHQEcOWAvEJpT3z9RPuxE7//9GoH8j5PLOpe6R/SAMgQ51Pwn8/8////////MkxA8GoYLIAGiElP/zs/U7gm/Fcsf5ml1O+tQfCkzvRQf9B3/9T///6UX5xQlv//MkxBcHCT7gyGlEcqhsuDvJVfq4IZ18jAXE3q5o/yHbRkFtBAMPrAp7Yd//FR74//MkxB0G+JrYAFKETOACAHP8cmM3+wQiDDjgAIdpuwgUqhFAwg4lXf//8fXyoBYS//MkxCQH2K7YADmGTLeIAJHPJwS1MYEL/dSyMwCIhwUkS//////1quorBqXrxu5+//MkxCcHiJ7UADmMTJ2AsferlkOechTLYKiYyCBH///+x/+yiudBPxKVLOhRHMnY//MkxCsH4ILMAGsSSOBa2TgxdlyYTPZAKSLPAqZf4odMHK+P5BVOBJTHWXevjvKi//MkxC4GsIrIAGsMTNI1EI4YsQf//0f//XWqcBukQQ0MCAhx7rMhyiF1mSfZ+blb//MkxDYH2J7MymtOTAoC6CrKYqGHO/////1KpQaPMuD6ISKicixkNY3QUWdX8vCS//MkxDkI2Jq8AVAQABnYqzGpan+j+P6qA6HVjgLEDqs7CiyXPHMOf/6KTv3eD9WA//MkxDgNiRqsAZgoACg9RQRF6St//+//r9vnDhhFD548aafkBazmvS99U2ZGf9N7//MkxCQNila8AYU4AHeae9anIpuYqf6UQh/iYRxsCaq20UUW2WOCTGcrMUMv2/v///MkxBALiT7yW8IQAv2++X97vrMqzHDgghGYjoCDGzESHA4uv3F6kO/UlNUwDfqv//MkxAQIGAbRUABGAP//+rXMAwAT5DFybzB1Rhcls3sW4VPxcoFTITKK9rKWiDw7//MkxAYHuhrAAAAKmL6oszSVEzlpN/X9mWlzjLq6FMsh0HkHwYsSQASSQADCMIt5//MkxAoG+C8J/gCeAmODH////7mCLV0f/om1fREoKvWovgYQc43WrUIRvmI3//////MkxBEHOR7IAGiEcP9FnO5kON/O/+umKxcPh+iTAaympuUAcLW+cb/////VvqUC//MkxBcHsRLEymnEcOoK/yX+zKhN7smRgyYG/BPkRNiOyhEYQ3lX+v//t8oUzw1///MkxBsHoOqYAJlEcP//+VXagZKkxDkFSYHJbW/woDQaaaaURrWD/o6n93////+W//MkxB8HwG6MAC6QKMffux2JURtC0fgmm9mhdw+9szxEf7o//+RiC3aVo+cWCuEA//MkxCMHEOKoAHmEccjMs43EwhDRy6nn///9GIqaHFw+LAQ+cNr8cBUSegQAgAUN//MkxCkHwPLQAGnKcZ7Hoan///+yojudBgKbG+wILNJyCvUOAYm/gdDWETX9Kgr///MkxC0HmO7gADnEcP0XyQVDQwHTbGGxU9etPoRV/30yLlV1h4nnadtTNdQoyv/5//MkxDEHiFLcABJSJGeki08VU8FXHRK6ypWQOubqAyS4RY4to5////p/6aGfqe55//MkxDUHkFK4AU8QAOeyM44av5AxqM5IdKue7///kCrHXy3/+er/yZQRgwPK/PMb//MkxDkNWlaoAYs4AP/////9FOYYKFOc+cwhkCYwABNxIaoEDgoAgWKj2Q4gNMqh//MkxCYOIhLIAcEoAeER9iuj2t0f9OWp1diIwg4hHYoa8//kT/l/15cyFot69ToE//MkxBALYVLMyAhMlEwtjllBUzrX5z1MxyyJuU2lqDwlZ3Hf/eReDSjxOk/uh4F///MkxAUIIO7MyghEcGFnoLdg+1uRty5k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AuTCxzsISVU0wmN9Bvaobg3Ff//6FQ+d//MkxEAHgIagANJESMJ4xLSJmQLgRYS7+IzBVFKKhDRThj4aA//P/8A/pNzKQalH//MkxEUH0IKQANvESCq30KXfX/5//v/erkIRXz5MlKyUv1/66nACnPkCFEMof8Np//MkxEgGKEKYwMvGJ5DFauwCzlX1f//C/l//8vv+3y2+ObQOMhv2299/b35l78/f//MkxFIMUd6plEhEmf2WzG8F4/ilxgHpRxG1Gg9BZBzhpRjhBlVrnuI5S7T+P3z///MkxEMOCiKgABBMmP//3/378n7VJ0kiRFQzwUZiyDxbbE99////75sms59O/nd7//MkxC0N6h6wyAhMmZxWWnh+Pj26yK4y8f+wIoBhdShe///7OltlV0cUa/W6K9U+//MkxBgIybrIqDAElLT/6FCDvbSBbxQOVf8GECljUQ4jYoItjDP+qf/////M8zRT//MkxBcLGTa8AHiOcMwqI4OB2ODQoLhkKGevbQLAmn423Ur/wg/nU2IpI2ePEf////MkxA0JsUbMAHhKcP////St1sZB6BgkLghB8WZhYqpP+1RQBN+i/zAA8++ikPIb//MkxAkH2TLYAFiEcIv////////YipBlOREHOaBoVX/+p7k1eHWFaPjfIhEzv/////MkxAwGqDbcqANSBJRYKAwBgoaCwVcOer/8cviESW5UT//////+qJps1EojKHFn//MkxBQIMULgADiEcLw4XWOOf/rP1O7AiH75r//Ix1ZxeIhhaNIrKID5BdiIHDtl//MkxBYJsU7oAAgKlfbLbu3Wt/79ELL/5khk+45C//Bq5w50KQl0RCjI8UCY8YIr//MkxBIHAU7wAAAElK/WytQCYueaner//+7ejlRwYoVO1Tu5coeSE5lDgyd6eugp//MkxBkG0T7sAAAEcO1aav//9EZlY0KZTFlRzA2EIWMJCsWEIUc4/1P15/DYVf5M//MkxCAHWT7gAAAEcQCRF1Mk+//////+nq76kZaIWYpVKJazl99m/+Wous+bwhoI//MkxCUHATrYAFhEcWDbt/3/9///I1SCCBAYDZkDkADXoLaV/xl+JMtQMyncc4FD//MkxCwH4RrQAHiEcNGVP/+v29PReYGR0DARxmUKL5GV71choBqWF3RUGkTZQzyy//MkxC8HsP7QAHnEcUYJbrNCkM61nZ2RurWCnauyoylMq3mf/J9Fa2cQrUnuLka4//MkxDMHIEagAU8AAM8uhg2EgLHmcaiuXEJ+nuBIFIP37/xormGGf/5cgD4e/5NM//MkxDkOAV6QAZhQAEq0tzPGUpLLNSjaTlErEB0gQiTheii95bKfnAd30pkYuUw5//MkxCQOSXrIAckYACynbNP9/fz6avGQOw0CKid8ytD7dKr/hvKSmYAaEyKLhX9J//MkxA0JMXrcAADGlP/1O1JELTLL98v+ZRSMuymuLGdCfv10qvkdpnmSiAm41MtG//MkxAsHCILgAAAGSCm2FSbyK+dyTaygeQxK/vmk1fhwQjyEWn6bv9c4IDIbBtxl//MkxBEHgGrcABCMKA1t9QhSJgZE7AJ6rZT4AKtqPiU+5rnkUuuKw83EKBGoZ+wY//MkxBYHkG7oAAnSKBBo8+7atbFa1fhPbPCMbPUHBArO5NEFRAe2P/2IFISMDK6m//MkxBoHaF7kAFHMKKjb0UrpmYSz6yBDZ1xOEpHdX//qJKFgrNKFgVWWPQaPIv3i//MkxB8HMErYAGrOJPCFxOu8ZgqR/I57XVbD1JuBj//b+dg0+etYvDsABXYAf8Df//MkxCUHeGqwAMPGKCGQgs+OIW82kTQLOAS2f/8KjDxyR9L38FJEkrGnypBcv/cU//MkxCoHOEKuWUkAAIYO7HhdBmK3vuKRFioRf+5IaIwmf/iWFOSFicf//49J0EP+//MkxDANwWKoAY9QAF5QcN//IBbqxikA4MNSlMKCOpRw0AN/9lCTPqLfqI+IMPBw//MkxBwHYJbYAckQAHlK+MQgbnBE/YDHway3ip8O3g/mENqGP1O/2ZPR+OAV9R6N//MkxCEGuN7gAFKEcKkhjt0w6m/k74iKN1FPhN+gSJ4l/+h+c3/6NCr48Dt/Ect2//MkxCkISP7kADtKcAhGfEQg3QBhT1BMsHpUE6gZfDj//hV0kn/6avwEP4pCRuoS//MkxCoIUKLgADnKTJfmsR9CQjwwH6mboGFE6Bj+z/7G4j//6/mAHDD+Ay3hRCd8//MkxCsIAO7YADnEcCTeoi3jRT4SP4S06u3/WdyN9SINOH0TY5EoAUcyYrC0e/OM//MkxC4G6L7EADqKTPq3qyusrIL1BLBVPLdaCIUDD5YcsZWK1LixXeFGdSREdWog//MkxDUHMMqgAIqEcHVLZHhr6wGQHFAADSYxDQwA1iMFJUvLb/355oiW7//yaf////MkxDsHgF6EAEZEKK0NKWjD7YbAAORQUbrilnb9BFB9NXZ6vf//t0oHwRJSEThM//MkxEAHcD58XhvMBAbQczO+i3bSR0e32bG7G2a/9v//9FMMEpTgAUgiQuOSltb0//MkxEUGqCKqXgBMAjfd1XdHf/T//9V/pUCFA+BE2AQYJnmpvWerL27qvu/Fezv///MkxE0HODJAAGMeAP3/6QrwDkKT1iwkEBOeOrOqDqj3U/6w1t/6n/3/xb+W65UA//MkxFMGMBZQ9EmGAIBgVBwHGB0SRoUEDQHHi7EjBYVZ9YqLKkxBTUUzLjk5LjWq//MkxF0GgB5IMmCCAKqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqq//MkxGYHgCY0qmGEAKqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqq//MkxGsGSDV1YEmGBKqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqq//MkxHQAAANIAAAAAKqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqq//MkxJcAAANIAAAAAKqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqq//MkxLoAAANIAAAAAKqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqq',
      hasIntercity: false,
      dispatchAccounts: false
    }
  },
  computed: {
    positionClass() {
      if (typeof this.position !== 'string') return ''
      const position = this.position.toLocaleUpperCase()

      const isTop = position.indexOf('TOP') > -1
      const isBottom = position.indexOf('BOTTOM') > -1

      if (position.indexOf('RIGHT') > -1) {
        return `right ${(isTop && 'top') || (isBottom && 'bottom') || ''}`
      } else if (position.indexOf('LEFT') > -1) {
        return `left ${(isTop && 'top') || (isBottom && 'bottom') || ''}`
      } else if (position.indexOf('CENTER') > -1) {
        return 'center'
      } else {
        return 'right top'
      }
    },
    getDispatchMessage() {
      let res = false
      const { hasIntercity, dispatchAccounts } = this
      res = hasIntercity && dispatchAccounts
      return res
    }
  },
  watch: {
    visible(val) {
      if (val) {
        this._getUnreadMsg()
        this._getMsgList()
      }
    },
    getDispatchMessage: {
      immediate: true,
      handler(val) {
        if (val) {
          this._getDispathMsg()
        }
      }
    },
    userInfo: {
      immediate: true,
      handler({ userAccount }) {
        if (userAccount) {
          this._getDispatchAccounts()
        }
      }
    }
  },
  mounted() {
    if (this.visible) {
      // 传值过来的属性 表示是否可以展示
      this._getUnreadMsg()
      this._getMsgList()
    }
    this._getIntercityConfig()
  },
  beforeDestroy() {
    clearInterval(this.interval)
  },
  methods: {
    onClose() {
      this.isShow = false
      this.visible = false
      clearInterval(this.interval)
      // 执行关闭后 将弹窗状态设置为隐藏不再弹窗
      hideMessageAlert()
    },
    handleSee() {
      this.onCheck
        ? this.onCheck(() => {
            this.onClose()
          })
        : this.toMcPath()
    },
    toMcPath() {
      // 去查看按钮 跳转至未读信息页
      const { protocol, host } = window.location
      window.location.href = `${protocol}//${host}/mc/message-center/unread`
      this.onClose()
    },
    goDetail(id) {
      if (!id) return
      const { protocol, host } = window.location
      window.location.href = `${protocol}//${host}/mc/message-center/msg-details?parentRouteName=unread&id=${id}&type=${this.currentType}`
      this.onClose()
    },
    handleSeeLater() {
      this.onCheckLater
        ? this.onCheckLater(() => {
            this.onClose()
          })
        : this.onClose()
    },
    getContent(content) {
      return `${content || ''}`.replace(/<[^>]*>|/g, '').slice(0, 50)
    },
    getCurrentTypeItems(type) {
      const typeItem = (this.messageList || []).find(ele => ele.type === type)
      return (typeItem && typeItem.items) || []
    },
    _getUnreadMsg() {
      const tmpParams = {
        url: '/admin/v1/operation/message/findUnreadPopCount',
        method: 'post',
        data: {
          pushChannel: '20' // 查询弹窗-右上角数据
        }
      }
      this.isLoading = true
      this.httpMethods(tmpParams)
        .then(res => {
          // 如果接口返回的未读重要消息>0时 展示弹窗
          if (res && res.code === 1 && res.data > 0) {
            this.isShow = true
            this.unReadNum = res.data
            if (this.alertHide) hideMessageAlert()

            this.interval = setInterval(() => {
              // 倒计时关闭弹窗
              this.countDown--
              if (this.countDown < 0) {
                this.onClose()
              }
            }, 1000)
          }
        })
        .finally(() => {
          this.isLoading = false
        })
    },
    _getMsgList() {
      // 获取重要消息列表 并且根据消息类型进行列表分类
      const requestArr = this.messageTypeDic.map(ele =>
        this.httpMethods({
          url: '/admin/v1/operation/message/list',
          method: 'post',
          data: {
            pageNum: 1,
            pageSize: this.maxLength,
            state: 0,
            type: ele.value,
            pushChannel: '20' // 查询弹窗-右上角数据
          }
        })
      )
      const result = []
      this.isLoading = true
      Promise.all(requestArr)
        .then(response => {
          if (
            !Array.isArray(response) ||
            response.length !== messageTypeDic.length
          ) {
            return
          }

          response.map((res, index) => {
            const { items, totalNum } = (res && res.data) || {}
            if (totalNum <= 0) return
            result.push({
              text: this.messageTypeDic[index].text,
              type: this.messageTypeDic[index].value,
              items,
              total: totalNum
            })
          })

          this.messageList = result.sort((a, b) => {
            const { total: aTotal } = a || {}
            const { total: bTotal } = b || {}
            return aTotal - bTotal
          })
          this.currentType = result[0] && result[0].type
        })
        .finally(() => {
          this.isLoading = false
        })
    },
    // 获取城际业务云控配置
    _getIntercityConfig() {
      this.httpMethods({
        url: '/admin/v1/config/getOnly',
        method: 'post',
        data: {
          configName: 'IntercityGlobalCfg',
          group: 'default',
          module: 'fe-web'
        }
      }).then(res => {
        let value = (res.data || {}).value || {}
        let hasIntercity
        try {
          value = JSON.parse(value)
        } catch (_) {
          value = {}
        }
        hasIntercity = value.openAll
        if (!hasIntercity) {
          const { tenantId } = this
          const tenantIds = Array.isArray(value.tenantIds)
            ? value.tenantIds
            : []
          hasIntercity =
            tenantIds.includes(tenantId) || tenantIds.includes(+tenantId)
        }
        this.hasIntercity = hasIntercity
      })
    },
    // 校验当前用户是否城际调度人员
    _getDispatchAccounts() {
      const {
        userInfo: { userAccount }
      } = this
      this.httpMethods({
        url:
          '/admin/v1/order/config/interCityDispatchNoticeConfig/queryUserAccountHasOrNot',
        method: 'post',
        data: { userAccount }
      }).then(({ data }) => {
        this.dispatchAccounts = !!data
      })
    },
    // 每10秒获取一次是否有派单消息
    _getDispathMsg() {
      this.httpMethods({
        url: '/admin/v1/operation/message/getSpeech',
        method: 'post',
        data: {}
      })
        .then(async res => {
          if (res.data) {
            try {
              await this.$refs['cityDispatchAudio'].play()
            } catch (e) {
              this.$message.error('语音播报失败，请开启浏览器声音权限。')
            }
            clearInterval(this.interval)
            this.countDown = 10
            if (this.visible) {
              this._getUnreadMsg()
              this._getMsgList()
            } else {
              this.visible = true
            }
          }
        })
        .finally(() => {
          setTimeout(() => {
            this._getDispathMsg()
          }, 10000)
        })
    }
  }
}
</script>

<style scoped lang="scss">
$border_color: #dbdcde;

.notification-box {
  z-index: 9999;
  transition: all 0.3s;
  padding: 0;

  &.right {
    transform: translateX(120%);
  }
  &.left {
    transform: translateX(-120%);
  }
  &.top {
    top: 16px;
  }
  &.bottom {
    bottom: 16px;
  }
  &.show {
    transform: translateX(0);
  }
  &.center {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: none;
    &.show {
      display: flex;
    }
  }

  .el-notification__group {
    width: 100%;
    margin: 0;

    .el-notification__title {
      font-weight: 700;
      line-height: 1.15;
      border-bottom: solid 1px $border_color;
      padding: 16px 20px;
    }

    .el-notification__content {
      margin: 0;
      padding: 8px 20px 12px;
      .messageTypeBox {
        zoom: 1;
        overflow: hidden;
        margin-bottom: 12px;

        .messageTypeItems {
          margin: 5px;
          float: left;
          line-height: 1;
          white-space: nowrap;
          cursor: pointer;
          background: #fff;
          border: 1px solid #dcdfe6;
          border-color: #dcdfe6;
          color: #606266;
          -webkit-appearance: none;
          text-align: center;
          box-sizing: border-box;
          outline: none;
          transition: 0.1s;
          -moz-user-select: none;
          -webkit-user-select: none;
          -ms-user-select: none;
          padding: 12px 20px;
          font-size: 14px;
          border-radius: 4px;
          &.active {
            border-color: #409eff;
            color: #409eff;
          }
        }
      }

      .messageTypeList {
        max-height: 250px;
        overflow: auto;

        .messageTypeItems {
          padding: 0 0 0 12px;
          margin-bottom: 8px;
          // 某些页面h3样式污染
          .title {
            font-weight: 700;
            margin: 0 0 5px;
            position: relative;
            font-size: 14px;
            cursor: pointer;
            &::before {
              position: absolute;
              content: '';
              width: 8px;
              height: 8px;
              border-radius: 100%;
              background: #cc0000;
              left: -12px;
              top: 50%;
              margin-top: -4px;
            }
          }
          .content {
            margin-bottom: 5px;
            white-space: nowrap;
            text-overflow: ellipsis;
            width: 100%;
            overflow: hidden;
            cursor: pointer;
          }
        }

        .moreBox {
          text-align: center;
        }
      }
    }

    .el-notification__footer {
      text-align: center;
      padding: 8px 0;
      border-top: solid 1px $border_color;

      /deep/ .el-button {
        width: 100px;
      }
    }
  }
}
</style>
