<template>
  <div class="navbar">
    <!--    <hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />-->
    <!--    <breadcrumb id="breadcrumb-container" class="breadcrumb-container" v-if="!topNav"/>-->
    <!--    <top-nav id="topmenu-container" class="topmenu-container" v-if="topNav"/>-->

    <div class="right-menu">
      <!--      <template v-if="device!=='mobile'">-->
      <!--        <search id="header-search" class="right-menu-item" />-->

      <!--        <el-tooltip content="源码地址" effect="dark" placement="bottom">-->
      <!--          <ruo-yi-git id="ruoyi-git" class="right-menu-item hover-effect" />-->
      <!--        </el-tooltip>-->

      <!--        <el-tooltip content="文档地址" effect="dark" placement="bottom">-->
      <!--          <ruo-yi-doc id="ruoyi-doc" class="right-menu-item hover-effect" />-->
      <!--        </el-tooltip>-->

      <!--        <screenfull id="screenfull" class="right-menu-item hover-effect" />-->

      <!--        <el-tooltip content="布局大小" effect="dark" placement="bottom">-->
      <!--          <size-select id="size-select" class="right-menu-item hover-effect" />-->
      <!--        </el-tooltip>-->

      <!--      </template>-->
      <div class="right-menu-item" style="margin-right: 0">
        <div class="board">
          <router-link target="_blank" to='/board/dashboard'><span class="el-icon-monitor"/></router-link>
        </div>
      </div>

      <div class="right-menu-item" style="margin-right: 0">
        <!--        <img src="../../assets/images/alert.png" style="width:25px; height:25px; margin-top: 15px;" @click=""/>-->
        <el-popover
          placement="left"
          width="400px"
          v-model="popVis"
          trigger="click">
          <Row style="min-width: 400px;max-width: 600px">
            <Col :span="12">
              <span class="MessageCenter">{{ $t('index.todoItems') }}</span>
            </Col>
            <Col @click="$tab.openPage($t('index.todo'), '/system/todo')" :span="12" style="text-align: right;cursor: pointer"><span class="MoreLink">{{ $t('index.more') }}</span></Col>
          </Row>

          <Row style="margin-top: 2%;min-width: 400px;max-width: 400px">
            <Col v-if="unReadItems.length>0"  v-for="item of unReadItems" :key="item.id" style="margin-top: 2%" >
              <Row>
                <Col class="noticeClass" :span="2">
                  <el-image :src="require('../../assets/images/index/提醒铃铛.png')"/>
                </Col>
                <Col :span="21" style="margin-left: 2.5%">
                   <Row>
                      <Col class="messageText" >
                        <span style="width: 100%;">
                          {{ `您有一条${item.auditFlowName}数据待审批` }}
                        </span>
                        <br/>
                        <span>
                          业务编号：
                          <el-link @click="todoPage({ auditFlow: item.auditFlow, businessNo: item.businessDesc })">{{ item.businessDesc }}</el-link>
                        </span>
                      </Col>
                     <Col style="margin-top: 1%">
                       <Col  style="font-weight: normal; color: rgba(74, 85, 103, 0.61); ">{{item.startTime}}</Col>
                     </Col>
                   </Row>

                </Col>
              </Row>
              <el-divider  class="noMarginDivider"/>
            </Col>

            <Col v-if="unReadItems.length===0" class="NoDataEmpty">
              <Row>
                <Col style="text-align: center">
                  <el-image :src="require('@/assets/images/index/NoUnReadMsg.svg')"/>
                </Col>
                <Col style="text-align: center">
                  <span class="noDataEmptyText">{{ $t('common.noDataEmptyText') }}</span>
                </Col>
              </Row>


            </Col>

          </Row>


          <el-badge :is-dot="total>0" class="notica" slot="reference" style="margin-top: 12px;">
            <img src="../../assets/images/notication.png" class="notica" style="cursor: pointer;;"/>
            <!-- <el-button  >
              <img src="../../assets/images/alert.png"  />
              <span v-show="this.total > 0" class="icon-car-count" >{{total>99?99:total}}</span>
            </el-button> -->
          </el-badge>
        </el-popover>
      </div>
      <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click" style="margin-right: 0px;">
        <div class="avatar-wrapper" style="margin-top: 12px;">
          <img v-if="$i18n.locale == 'chinese' || !$i18n.locale" src="../../assets/images/CN.svg" style="width: 25px">
          <img v-if="$i18n.locale == 'english'" src="../../assets/images/EN.svg" style="width: 25px">
          <img v-if="$i18n.locale == 'russia'" src="../../assets/images/RU.svg" style="width: 25px">
          <img v-if="$i18n.locale == 'spanish'" src="../../assets/images/ES.svg" style="width: 25px">
        </div>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item @click.native="changeLanguage('chinese')">
            <!--            <span>{{$t('system.chinese')}}</span>-->
            <span>中文</span>
          </el-dropdown-item>
          <el-dropdown-item @click.native="changeLanguage('english')">
            <!--            <span>{{$t('system.english')}}</span>-->
            <span>English</span>
          </el-dropdown-item>
          <el-dropdown-item @click.native="changeLanguage('russia')">
            <!--            <span>{{$t('system.russia')}}</span>-->
            <span>Русский язык</span>
          </el-dropdown-item>
          <el-dropdown-item @click.native="changeLanguage('spanish')">
            <!--            <span>{{$t('system.spanish')}}</span>-->
            <span>Español</span>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
        <div class="avatar-wrapper" style="justify-content: center;align-items: center;display: flex">
          <img :src="avatar" class="user-avatar">
          <span style="color: white;margin-left: 5px;font-size: 16px;">{{ $store.state.user.userInfo.nickName }}</span>
          <i class="el-icon-caret-bottom" style="color: white;top: unset;"/>
        </div>
        <el-dropdown-menu slot="dropdown">
          <router-link to="/user/profile">
            <el-dropdown-item>{{ $t('dropMenu.center') }}</el-dropdown-item>
          </router-link>
          <!-- <el-dropdown-item @click.native="setting = true">
            <span>{{ $t('dropMenu.layoutSetting') }}</span>
          </el-dropdown-item> -->
          <el-dropdown-item divided @click.native="logout">
            <span>{{ $t('dropMenu.logout') }}</span>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>

<script>
const labelSuffix = {
  chinese: '',
  english: 'US',
  russia: 'RU',
  spanish: 'ES',
}

import {mapGetters} from 'vuex'
import Breadcrumb from '@/components/Breadcrumb'
import TopNav from '@/components/TopNav'
import Hamburger from '@/components/Hamburger'
import Screenfull from '@/components/Screenfull'
import SizeSelect from '@/components/SizeSelect'
import Search from '@/components/HeaderSearch'
import RuoYiGit from '@/components/RuoYi/Git'
import RuoYiDoc from '@/components/RuoYi/Doc'
import Row from "../../components/CustomElement/layout/Row.vue";
import Col from "../../components/CustomElement/layout/Col.vue";
import {selectMessageForIndex} from "../../api/business/message/message";
import { getTodoList } from "@/api/audit/flow.js";
// import Badge from '@/components/Badge'

export default {
  components: {
    Col,
    Row,
    Breadcrumb,
    TopNav,
    Hamburger,
    Screenfull,
    SizeSelect,
    Search,
    RuoYiGit,
    RuoYiDoc,
  },
  computed: {
    ...mapGetters([
      'sidebar',
      'avatar',
      'device',
      'name'
    ]),
    setting: {
      get() {
        return this.$store.state.settings.showSettings
      },
      set(val) {
        this.$store.dispatch('settings/changeSetting', {
          key: 'showSettings',
          value: val
        })
      }
    },
    topNav: {
      get() {
        return this.$store.state.settings.topNav
      }
    }
  },
  data() {
    return {
      total: 0,
      resForm: [],
      personList: [],
      popVis: false,
      unReadItems: [],
    };
  },
  created() {
    this.listenRefreshListVuex()

    if (localStorage.hasOwnProperty("local")) {
      //console.log("重新赋值local："+localStorage.getItem("local"))
      const lan = localStorage.getItem("local")
      this.$i18n.locale = lan
      localStorage.setItem('labelSuffix', labelSuffix[lan])
    } else {
      localStorage.setItem("local", "chinese");
      localStorage.setItem('labelSuffix', labelSuffix['chinese'])
    }
  },
  mounted() {
    //下面两个监听，用于监听 store中 SSEMessage 消息体的变化，从而实现元素的重新渲染，主要复写第二个function (val, oldVal)
    this.$watch(
      function () {
        return this.$store.state.selections.SSEMessage.data
      },
      function (val, oldVal) {
        // console.log('val::::::', val)
        if (val && (val.msg||val.msgRU||val.msgUS||val.msgES)) {
          this.showNotify(val);
          this.total = val.msgTotal || 0;
          //@date 2024/4/26 9:02 @author jubs 😀 @description: 业务确认，有新消息时，不弹框
          // this.popVis = true
          this.queryMessage()
        }
      },
      {
        immediate: true,
        deep: true,
      }
    );
    this.$watch(
      function () {
        return this.$store.state.selections.SSEMessage
      },
      function (val, oldVal) {
        if (val) {
          this.total = isNaN(Number(val.totalQty)) ? 0 : Number(val.totalQty);
          console.log(this.total)

        }
      },
      {
        immediate: true,
        deep: true,
      }
    );
    this.queryMessage();
  },
  methods: {
    listenRefreshListVuex() {
      this.$store.subscribe((mutation) => {
        if (mutation.type === 'refreshMsg') {
          this.queryMessage().then(() => {
            this.total = this.unReadItems.length
          })
        }
      })
    },

    queryMessage() {
      return  getTodoList({ indexQuery: true }).then((res) => {
        if (res && res.rows) {
          this.unReadItems = res.rows;
        }
      })
    },
    toCenter(){
      this.$tab.openPage(this.$t('index.messageCenter'),'/system/messageCenter')
    },
    jump() {
      let query = {
        test: 's'
      };
      this.$router.push({path: "/system/notice", query: query});
    },
    showNotify(item) {
      // console.log('i18n:', this.$i18n)

      let msg;
      switch (this.$i18n.locale) {
        case 'chinese':
          msg = item.msg;
          break;
        case 'english':
          msg = item.msgUS;
          break;
        case 'russia':
          msg = item.msgRU;
          break;
        case 'spanish':
          msg = item.msgES;
          break;
      }

      this.$notify({
        title: this.getMessageTitle(item.type),
        message: msg,

        // position: 'bottom-right',
        duration: 10 * 1000,
        customClass:"customNotifyClass"
      });

      this.resForm = []
      this.resForm.push(item)

    },
    changeLanguage(val) {
      this.$i18n.locale = val
      localStorage.setItem("local", val);
      localStorage.setItem('labelSuffix', labelSuffix[val])
      //reload
      location.reload();
    },
    toggleSideBar() {
      this.$store.dispatch('app/toggleSideBar')
    },

    async logout() {
      this.$modal.confirm(this.$t('common.logoutConfirm')).then(() => {
        this.$store.dispatch('LogOut').then(() => {
          location.href = '/index';
        })
      }).catch(() => {
      });
    },

    // async logout() {
    //   this.$confirm('确定注销并退出系统吗？', '提示', {
    //     confirmButtonText: '确定',
    //     cancelButtonText: '取消',
    //     type: 'warning'
    //   }).then(() => {
    //     this.$store.dispatch('LogOut').then(() => {
    //       location.href = '/index';
    //     })
    //   }).catch(() => {
    //   });
    // }
  }
}
</script>

<style lang="scss" scoped>
.msg-box {
  display: grid;
  padding: 14px 26px 14px 13px;
  border-radius: 8px;
  box-sizing: border-box;
  border: 1px solid #ebeef5;
  background-color: #fff;
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
  margin-bottom: 10px;
}

.icon-car-count {
  width: 26px;
  text-align: center;
  line-height: 14px;
  display: inline-block;
  position: relative;
  right: 12px;
  top: -10px;
  background: #00c4ff;
  color: #fff;
  border-radius: 15px;
  padding: 6px;
  font-size: 16px;
  -webkit-transform: scale(0.7);
  transform: scale(0.7);
  font-family: Tahoma !important;
}

.navbar {
  height: 60px;
  //overflow: hidden;
  //position: relative;
  //background: #E70618;
  box-shadow: 0 1px 4px rgba(0, 21, 41, .08);
  white-space: nowrap;

  .hamburger-container {
    line-height: 46px;
    height: 100%;
    float: left;
    cursor: pointer;
    transition: background .3s;
    -webkit-tap-highlight-color: transparent;

    &:hover {
      background: rgba(0, 0, 0, .025)
    }
  }

  .breadcrumb-container {
    float: left;
  }

  .topmenu-container {
    position: absolute;
    left: 50px;
  }

  .errLog-container {
    display: inline-block;
    vertical-align: top;
  }

  .right-menu {
    //float: right;
    height: 100%;
    line-height: 50px;

    &:focus {
      outline: none;
    }

    .right-menu-item {
      display: inline-block;
      padding: 0 8px;
      height: 100%;
      font-size: 18px;
      color: #5a5e66;
      vertical-align: text-bottom;

      &.hover-effect {
        cursor: pointer;
        transition: background .3s;

        &:hover {
          background: rgba(0, 0, 0, .025)
        }
      }
    }
    .right-menu-item .board {
      height: 100%;
      font-size: 1.6rem;
      color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .avatar-container {
      margin-right: 40px;

      .avatar-wrapper {
        margin-top: 5px;
        position: relative;

        .user-avatar {
          cursor: pointer;
          width: 40px;
          height: 40px;
          border-radius: 50px;
        }

        .el-icon-caret-bottom {
          cursor: pointer;
          position: absolute;
          right: -20px;
          top: 25px;
          font-size: 12px;
        }
      }
    }
  }
}

.notica {
  width: 22px;
  // height: 32px;
}

.MessageCenter {
  width: 124px;
  height: 22px;
  overflow-wrap: break-word;
  color: rgba(0, 0, 0, 0.85);
  font-size: 16px;
  font-family: PingFangSC-Medium;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  line-height: 22px;
}

.MoreLink {
  width: 35px;
  height: 20px;
  overflow-wrap: break-word;
  color: rgba(12, 134, 247, 1);
  font-size: 14px;
  font-family: PingFangSC-Medium;
  font-weight: 500;
  text-align: right;
  white-space: nowrap;
  line-height: 20px;
  margin-top: 2px;
}

.noticeClass {
  background-color: rgba(255, 255, 255, 1);
  border-radius: 50%;
  height: 40px;
  border: 1px solid rgba(241, 245, 249, 1);
  width: 40px;
}

.messageText {
  height: 40%;
  overflow-wrap: break-word;
  color: rgba(74, 85, 103, 1);
  font-size: 11pt;
  font-weight: normal;
  text-align: left;
  // display: flex;
  flex-direction: row;
  align-items: center;
}

.noMarginDivider{
  margin: 3% 0 0 0 !important;
  background: #F2F5F9;
}
</style>
