<template>
  <div class="wrapper">
    <div class="container">
      <div class="top">
        <el-row>
          <el-col :span="7">
            <div class="topRight">
              <topNav></topNav>
              <div class="title_firmname">{{firmName}}</div>
              <!-- <el-divider direction="vertical"></el-divider>
              <img class="image_logo" src="../../assets/logo.png" alt="" /> -->
            </div>
          </el-col>
          <el-col :span="10">
            <div class="titleBox center_in">
              <span class="title" @click="goIndex">宝智达-燃气瓶追溯管理系统</span>
            </div>
          </el-col>
          <el-col :span="7">
            <div class="topLeft">
              <div class="card_time">
                <p class="time_title">{{ hourMinuteSecond }}</p>
              </div>
              <el-divider direction="vertical"></el-divider>
              <div class="userLogin">
                <UserInfo></UserInfo>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
      <div class="main">
        <router-view></router-view>
      </div>
      <div class="card_callingSystem" v-show="entranceRight" :class="entranceRight ? 'slide-left' : ''">
        <div class="center_in " :class="entranceRight ? 'shake-lr' : ''" id="card_system">
          <img class="calling_img" src="../../assets/image/incoming.png" alt="" />
        </div>
        <div class="card_ad_phone">
          <div class="ad_title">客户来电</div>
          <div class="phone_title">{{ phone }}</div>
        </div>
        <div class="bottom_btn_add">
          <div class="btn_add_card center_in" @click="addOrder">
            添加订单
          </div>
        </div>
      </div>
      <!-- <audio ref="alarmAudio" loop src="@/assets/entertained.mp3"></audio> -->
    </div>
  </div>

</template>

<script>
  import {
    mapState
  } from 'vuex'
  import comTags from './Tags.vue';
  import Bus from './bus.js';
  import UserInfo from './userInfo.vue'
  import topNav from './topNav.vue'
  export default {
    name: "Base",
    components: {
      comTags,
      UserInfo,
      topNav
    },
    data() {
      return {
        currentTime: null,
        collapse: false,
        tagComponent: [],
        timer: undefined,
        hourMinuteSecond: null,
        firmName: '',
        phone: '17673255548',
        entranceRight: false,
        errNumber: 0,
      }
    },
    watch: {
      companyName: {
        deep: true, // 立即触发监听函数
        immediate: true,
        handler(newVal) {
          if (newVal) {
            this.firmName = newVal
          }
        },
      }
    },
    computed: {
      companyName() {
        return this.$store.state.user.companyName;
      },
      ...mapState({
        // 动态公司
        mainMenu: state => state.user.companyName
      })
    },
    created() {
      this.$nextTick(() => {
        this.sse();
        let testDom = document.getElementById('card_system')
        testDom.addEventListener('animationend', function(event) {
          // 移除再添加动画样式  重新触发动画
          testDom.classList.remove('shake-lr')
          setTimeout(() => {
            testDom.classList.add('shake-lr')
          }, 1000)
        });
      })
      Bus.$on('collapse', isCollapse => {
        this.collapse = isCollapse;
      });
      // 只有在标签页列表里的页面才使用keep-alive，关闭标签之后就不保存到内存中了
      Bus.$on('tags', tagList => {
        for (let item of tagList) {
          item.name && this.tagComponent.push(item.name);
        }
      });
      this.timer = setInterval(() => {
        // this.currentTime = new Date().toLocaleString();
        this.hourMinuteSecond = this.formatTime(new Date(), 'hh:mm:ss')
        this.currentTime = this.formatTime(new Date(), 'yyyy-MM-dd')
      }, 1000);
    },
    methods: {
      goIndex() {
        this.$router.push('/home')
      },
      formatTime(str, format) {
        let time = new Date(str)
        let formatTime = {
          'y+': '0' + time.getFullYear(),
          'M+': '0' + (time.getMonth() + 1),
          'd+': '0' + time.getDate(),
          'h+': '0' + time.getHours(),
          'm+': '0' + time.getMinutes(),
          's+': '0' + time.getSeconds()
        }
        let result = format || 'yyyy-MM-dd hh:mm:ss'
        for (let i in formatTime) {
          let regexp = new RegExp('(' + i + ')', 'g')
          let replaceInfoObj = regexp.exec(result)
          if (replaceInfoObj) {
            let replaceInfoArr = Array.from(replaceInfoObj)
            result = result.replace(
              regexp,
              formatTime[i].substring(formatTime[i].length - replaceInfoArr[0].length),
              formatTime[i].length
            )
          }
        }
        return result
      },
      sse() {
        let that = this
        // 创建EventSource实例
        const eventSource = new EventSource('http://127.0.0.1:8990/ees');
        // 订阅事件
        eventSource.addEventListener('message', function(event) {
          // 处理收到的消息
          let arr = event.data

          function getContentBetween(source, start, end) {
            const pattern = new RegExp(start + '(.*?)' + end, 's');
            const match = source.match(pattern);
            return match ? match[1] : '';
          }

          // 示例使用
          const start = 'local=sip:';
          const end = '@';
          const content = getContentBetween(arr, start, end);
          if (content) {
            that.entranceRight = true
            // const audio = that.$refs.alarmAudio;
            // audio.play();
            // audio.addEventListener('ended', () => {
            //   audio.pause();
            //   audio.currentTime = 0;
            // });
          }
          that.phone = content
        });
        eventSource.addEventListener('error', function(event) {
          // 处理错误
          if (that.errNumber == 3) {
            console.error('SSE Error', event);
            eventSource.close()
          } else {
            that.errNumber++
          }
        });
      },
      // 添加订单
      addOrder() {
        let that = this
        that.$router.push({
          name: 'agentOrdering',
          query: {
            flag: true,
            phone: that.phone,
          }
        })
        that.entranceRight = false
      }
    },
    beforeDestroy() {
      if (this.timer) {
        clearInterval(this.timer);
      }
    }
  }
</script>

<style scoped lang="scss">
  * {
    margin: 0;
    padding: 0;
  }

  .wrapper {
    margin: 0 auto;
    width: 100%;
    height: 100vh;
    position: relative;
    overflow: hidden;
  }

  .card_callingSystem {
    z-index: 999;
    position: absolute;
    bottom: 20px;
    right: 20px;
    width: 250px;
    height: 180px;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 10px;
    padding: 10px;
    border: 2px solid rgba(255, 255, 255, 0.3);
  }

  .shake-lr {
    -webkit-animation: shake-lr 1s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
    animation: shake-lr 1s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
  }

  @-webkit-keyframes shake-lr {

    0%,
    100% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
      -webkit-transform-origin: 50% 50%;
      transform-origin: 50% 50%;
    }

    10% {
      -webkit-transform: rotate(8deg);
      transform: rotate(8deg);
    }

    20%,
    40%,
    60% {
      -webkit-transform: rotate(-10deg);
      transform: rotate(-10deg);
    }

    30%,
    50%,
    70% {
      -webkit-transform: rotate(10deg);
      transform: rotate(10deg);
    }

    80% {
      -webkit-transform: rotate(-8deg);
      transform: rotate(-8deg);
    }

    90% {
      -webkit-transform: rotate(8deg);
      transform: rotate(8deg);
    }
  }

  @keyframes shake-lr {

    0%,
    100% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
      -webkit-transform-origin: 50% 50%;
      transform-origin: 50% 50%;
    }

    10% {
      -webkit-transform: rotate(8deg);
      transform: rotate(8deg);
    }

    20%,
    40%,
    60% {
      -webkit-transform: rotate(-10deg);
      transform: rotate(-10deg);
    }

    30%,
    50%,
    70% {
      -webkit-transform: rotate(10deg);
      transform: rotate(10deg);
    }

    80% {
      -webkit-transform: rotate(-8deg);
      transform: rotate(-8deg);
    }

    90% {
      -webkit-transform: rotate(8deg);
      transform: rotate(8deg);
    }
  }

  .calling_img {
    width: 60px;
    height: 60px;
  }

  .card_ad_phone {
    margin-top: 10px;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
  }

  .ad_title {
    font-size: 20px;
    color: #fff;
    font-weight: bold;
  }

  .phone_title {
    color: #fff;
    font-size: 30px;
    font: 600 35px mFont;
  }

  .bottom_btn_add {
    display: flex;
    justify-content: center;
  }

  .btn_add_card {
    cursor: pointer;
    margin-top: 10px;
    color: #fff;
    width: 100px;
    height: 30px;
    font-size: 14px;
    border-radius: 40px;
    background-color: #67C23A;
  }

  .container {
    width: 100%;
    height: 100%;
  }

  .image_logo {
    width: 50px;
  }

  .top {
    color: #fff;
    width: 100%;
    height: 64px;
    background: url(../../assets/image/titleBg.png) no-repeat;
    background-size: 102% 136%;

    .topLeft {
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      height: 64px;

      .card_time {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding-left: 6px;
      }

      .time_title {
        width: 120px;
        font-size: 30px;
        font: 600 35px mFont;
      }

      .userLogin {
        padding-right: 26px;
      }
    }
  }

  .titleBox {
    height: 64px;
  }

  .topRight {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 64px;
  }

  .title_firmname {
    width: 170px;
    font-size: 16px;
    color: #fff;
    /* 超出隐藏 */
    overflow: hidden;
    /* 不换行 */
    white-space: nowrap;
    /* 使用省略号 */
    text-overflow: ellipsis;
  }

  ::v-deep .topRight .el-divider--vertical {
    height: 1.5rem;
  }

  ::v-deep .topLeft .el-divider--vertical {
    height: 1.5rem;
  }

  .title {
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    text-align: center;
    letter-spacing: 5px;
    font-size: 26px;
    font-weight: bold;
    font-family: "Hiragino Sans GB", Arial, sans-serif;
  }

  .main {
    padding: 0rem 1rem;
    width: calc(100% - 2rem);
    height: calc(93vh - 10px);
    overflow: auto;
    position: absolute;
    margin-top: 10px;
  }


  .slide-left {
    -webkit-animation: slide-left 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: slide-left 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  }

  @-webkit-keyframes slide-left {
    0% {
      -webkit-transform: translateX(0);
      transform: translateX(0);
    }

    100% {
      -webkit-transform: translateX(-20px);
      transform: translateX(-20px);
    }
  }

  @keyframes slide-left {
    0% {
      -webkit-transform: translateX(0);
      transform: translateX(0);
    }

    100% {
      -webkit-transform: translateX(-20px);
      transform: translateX(-20px);
    }
  }
</style>
