<template>
  <div class="myships-header">
    <div class="logo-box">
      <!--      <a class="lofo_a">-->
      <!--        <img src="../../../public/img/logo.svg" alt=""/>-->
      <!--        <img class="shipAgency" src="../../../public/img/shipAgency.png" alt=""/>-->
      <!--      </a>-->
      <span style="font-size: 20px;font-weight: bold;">海南零关税交通工具监管系统</span>
    </div>
    <div class="header-tool">
      <!--      <div class="lanuage-setting" v-if="funOpen.trans">-->
      <!--        <el-select v-model="languageValue" @change="changeLanguage">-->
      <!--          <el-option label="简体中文" value="Chinese"></el-option>-->
      <!--          <el-option label="English" value="English"></el-option>-->
      <!--        </el-select>-->
      <!--      </div>-->
      <div class="mssage" v-if="funOpen.message">
        <el-badge :value="messageData.length" class="item" :max="99">
          <el-button
            size="small"
            icon="el-icon-message-solid"
            @click="openMessage"
          ></el-button>
        </el-badge>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import {Component, Vue} from 'vue-property-decorator'
import {Language} from "@/module/menu";
import {header} from '@/util/fun-switch'
import DialogUtil from "@/util/new-dialog";
import MessageListTemp from "@/views/new-dialog/MessageListTemp.vue";
import {DialogType} from "@/util/temp-interface";
import HttpApi from "@/api";
import {getBeforeTime, getLongByTime, getNowTime} from '@/util/date';

const config = require('../../../public/config/sys-config.json')
@Component({})
export default class Header extends Vue {
  private languageValue = window.localStorage.getItem('language') === 'zh' ? 'Chinese' : 'English'
  private funOpen = header
  private messageData: any[] = []

  public mounted() {
    if (this.funOpen.message) {
      this.getShipDataMinute()
      setInterval(() => {
        this.getShipDataMinute()
      }, 1000 * 60 * 5)
    }
    this.$nextTick(() => {
      this.changeLanguage(config.defaultLanguage)
    })

    window.addEventListener('setItemEvent', (e: any) => {
      if (e.key === 'language') {
        this.languageValue = e.newValue === 'zh' ? 'Chinese' : 'English'
      }
    })
  }

  private changeLanguage(language: string) {
    if (language === 'English') {
      this.$i18n.locale = Language.en;
      window.localStorage.setItem('language', Language.en)
    } else if (language === 'Chinese') {
      this.$i18n.locale = Language.zh;
      window.localStorage.setItem('language', Language.zh)
    }
    this.$forceUpdate()
  }

  private openMessage() {
    DialogUtil.showDialog(MessageListTemp, DialogType.MESSAGE_LIST, {
      dialogData: {
        vueName: DialogType.MESSAGE_LIST
      },
      infoData: {
        message: this.messageData
      },
      show: true
    })
  }

  private getShipDataMinute() {
    const endTime = getLongByTime(getNowTime());
    const startTime = getLongByTime(getBeforeTime(getNowTime(), 1));
    HttpApi.getLastRemindInfo({startTime: startTime, endTime: endTime}).then((res: any) => {
      if (res.code === '0') {
        this.messageData = res.data.shipBased
      }
    })
  }

}
</script>

<style scoped lang="scss">
.myships-header {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;

  .logo-box {
    display: flex;
    align-items: center;
    font-size: 0.875rem;
    width: 50%;

    .lofo_a {
      text-decoration: none;
      display: flex;
      align-items: Center;

      img:first-child {
        height: 2.1875rem;
      }

      img:nth-child(2) {
        height: 2.2rem;
        margin-left: 1.25rem;
      }

    }
  }

  .header-tool {
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: right;

    .lanuage-setting {
      display: flex;
      align-items: center;

      ::v-deep .el-input__inner {
        border: none;
        text-align: right;
        width: 7.5rem;
      }

    }

    .mssage {
      width: 0.5625rem;
      height: 0.5625rem;
      display: flex;
      margin-right: 1.25rem;
      margin-left: 1.25rem;

      .el-badge {
        display: flex;
      }

      ::v-deep .el-button--small {
        padding: 0;
        font-size: 1rem;
        width: 1.5625rem;
        height: 1.5625rem;
        border-radius: 1.5625rem;
        border: 0;
        color: var(--aside-gbc);
        background-color: #e7eaf4;
      }

      ::v-deep .el-badge__content {
        background-color: #d61819;
        border: 0;
      }

    }
  }
}
</style>
