<template>
  <div class="header">
    <div class="header-left">
      <img src="@map/assets/logo.png" class="logo" alt="" />
      <div class="header-name">
        <div class="title">
          遁地龙-管线设计
        </div>
        <div class="name">江苏力鼎环保装备有限公司 </div>
      </div>
      <div class="header-menu">
        <div class="menu-item " :class="{'active':activeMenu =='sj'}"  @click="changemenu('sj')">
          <img src="@map/assets/header/sj.png" alt="" class="iconimg" />
          <div>设计</div>
        </div>
        <div class="menu-item "  :class="{'active':activeMenu =='cad'}" @click="changemenu('cad')">
          <img src="@map/assets/header/cad.png" alt="" class="iconimg" />
          <div>CAD导图</div>
        </div>
        <!-- <div class="menu-item " :class="{'active':activeMenu =='sm'}" @click="changemenu('sm')">
          <img src="@map/assets/header/sm.png" alt="" class="iconimg" />
          <div>扫描成图</div>
        </div> -->
      </div>
    </div>

    <div class="header-right">
      {{ time }}
    </div>
  </div>
</template>

<script setup lang="ts">
import moment from "moment";
import useDistStore from "@map/store/modules/dist";
const dist = useDistStore()
const emit = defineEmits(['changeMenu'])
let time = ref("");
const activeMenu = ref('sj')
function changemenu(e){
  activeMenu.value = e
  emit('changeMenu',e)
}
moment.locale("zh-cn", {
  months:
    "一月-二月-三月-四月-五月-六月-七月-八月-九月-十月-十一月-十二月".split(
      "-"
    ),
  monthsShort: "1月-2月-3月-4月-5月-6月-7月-8月-9月-10月-11月-12月".split("-"),
  weekdays: "星期日-星期一-星期二-星期三-星期四-星期五-星期六".split("-"),
  weekdaysShort: "周日-周一-周二-周三-周四-周五-周六".split("-"),
  weekdaysMin: "日-一-二-三-四-五-六".split("-"),
});
setInterval(() => {
  time.value = moment().format("YYYY/MM/DD dddd  HH : mm : ss");
}, 1000);
</script>

<style scoped lang="scss">
@font-face {
  font-family: "fzzt";
  src: url("../assets/font/DIGITAL-Regular.ttf") format("truetype");
}
.header {
  height: 80px;
  display: flex;
  justify-content: space-between;
  color: #fff;
  padding: 0 10px;

  .header-left {
    display: flex;
    width:18%;
    .header-name {
      color: #2ccaff;
      line-height:30px;
      .title {
        margin-top: 16px;
        font-size: 24px;
        font-weight: bold;
      }
      .name {
        font-size: 14px;
        margin-left:1px
      }
    }
    .logo {
      width: 70px;
      height: 70px;
      vertical-align: middle;
      margin-top: 5px;

    }
    span {
      font-size: 24px;
      padding-left: 5px;
    }
    .header-menu {
      left: 18vw;
      position: fixed;
      display: flex;
      .active {
        background: rgba(25, 54, 87, 0.5);
      }
      .menu-item {
        margin-right: 20px;
        height: 60px;
        margin-top: 8px;
        width: 120px;
        text-align: center;
        padding-top: 5px;
        border-radius: 5px;
        line-height: 22px;
        cursor: pointer;
        color: #23d6f7;
        font-size: 14px;
        .iconimg {
          height: 30px;
        }
      }
    }
  }
  .header-right {
    display: flex;
    align-items: center;
    margin-right: 20px;
    color: #32c4ec;
    font-size: 22px;
    font-weight: bold;
    font-family: "fzzt";
  }
}
</style>
