<template>
  <header @mousemove="mousefn" @mouseleave="outfn">
    <!-- -->
    <div class="left">甘肃省烟草专卖局 </div>
    <div class="middle">安全管理信息系统</div>
    <div class="all" v-if="show">
      <button :class="showbth ? 'all_but' : 'bth'" @click="closedFn">
        全部数据
      </button>
    </div>
    <div class="right">
      <img :src="getImgUrl('indexImages/biaoyu.png')" />
      <el-tooltip content="最大化" placement="bottom">
        <img @click="maxChangeFn" :src="getImgUrl('indexImages/max.png')" alt="最大化" style="margin-top: -5px;" />
      </el-tooltip>
    </div>
  </header>
</template>

<script setup>
import { getImgUrl } from "@/utils/tools.js"
import { ref } from "vue";
import { useStore } from "vuex";
import emitter from "@/utils/eventBus.js";
const maxChange = ref(true);
const showbth = ref(true);
const show = ref(false);
const store = useStore();
const emits = defineEmits("maxChange");

// 最大化
function maxChangeFn() {

  emits("maxChange", maxChange.value);
  maxChange.value = !maxChange.value;
  emitter.emit("headerShow", maxChange.value);
  store.commit("editBig", !maxChange.value);
  store.commit("app/editBig", !maxChange.value);
}
//全部数据
function closedFn() {
  showbth.value = !showbth.value;
}
//时间选择
const value1 = ref("2023-5-6");
//鼠标移入
function mousefn(e) {
  show.value = true;
}
//鼠标移出
function outfn(e) {
  show.value = false;
}
</script>

<style lang="scss" scoped>
header {
  display: flex;
  justify-content: space-between;
  height: 44px;
  opacity: 1.5;
  background: url("~@/assets/images/home2-title-bg.png") no-repeat;
  background-size: 100% 100%;
}

.left {
  font-size: 16px;
  line-height: 44px;
  padding-left: 124px;
  box-sizing: border-box;
}

.middle {
  line-height: 44px;
  font-size: 16px;
  padding-left: 80px;
  box-sizing: border-box;
}

.right {
  padding-top: 9px;
  padding-right: 115px;
  box-sizing: border-box;

  img {
    vertical-align: top;
    margin-right: 14px;
  }
}

// 全部
.all {
  position: absolute;
  left: 64%;
  top: 31px;
}

.all_but {
  background: rgb(5 76 63 / 20%);
  border: 1px solid #33a1ad;
  color: #fff;
}

.bth {
  background: rgba(0, 128, 0, 0.2);
  color: #fff;
  border: 1px solid rgb(32, 197, 76);
  box-shadow: 0px 0px 8px rgb(32, 197, 76);
}

//时间
.demo-date-picker {
  position: absolute;
  left: 62%;
  top: 24px;
  // background-color: none;
  // border-radius: none;
}

::v-deep .el-date-editor {
  --el-date-editor-width: 116px !important;
}

::v-deep .el-input--suffix .el-input__inner {
  padding-right: 0px !important;
}

::v-deep .el-input__inner {
  border: 1px solid #33a1ad !important;
  background: rgb(5 76 63 / 20%) !important;
}
</style>