<template>
  <header v-if="headerShow">
    <div class="left">
      <div class="logo flex just-center align-center">
        <img :src="getImgUrl('indexImages/yc_logo.png')" style="height: 44px;width: 369px;" />
      </div>
      <div class="center"></div>
    </div>
    <div class="txBox">
      <!-- 省公司展示 -->
      <div class="content" v-if="dept.orgLevel.substring(0, 1) == '1'">
        <div id="inner" class="innerActive">
          <span id="first" class="m-2 first"> {{ aqfz }}</span>
        </div>
      </div>
      <!-- 各市州展示 -->
      <div class="content1" v-else>
        <div id="line" class="innerActive" style="text-align: center;">
          <span id="two" class="m-2"> {{ sgsAqfz }}</span>
        </div>
        <div id="line" class="innerActive">
          <span id="two" class="m-2 two"> {{ aqfz }}</span>
        </div>
      </div>
      <div class="ztcoloe mr15">
        <!-- <span>主题颜色</span> 文字不需要了 -->
        <el-color-picker @change="setColor" v-model="BGcolor" size="small" show-alpha
          :predefine="predefineColors"></el-color-picker>
      </div>
      <div class="imgBox icon_title" style="width: 20px; height: 25px; margin-right: 10px" title="消息中心">
        <ChatDotRound @click="routerXx" style="width: 23px; height: 23px" />
      </div>
      <NavBar />
    </div>
  </header>
  <el-dialog v-model="dialogVisible" title="系统更新提示" width="50%" :close-on-click-modal="false"
    :close-on-press-escape="false" :show-close="false">
    <h2 style="text-align: center;">{{ xtFrom.sysVersion }}版本</h2>
    <div>
      <span style="font-size: 16px">新增功能：</span>
      <span v-html="xtFrom.addFunction"></span>
    </div>
    <div style="margin: 10px 0;">
      <span style="font-size: 16px">修复bug：</span>
      <span v-html="xtFrom.fixBug"></span>
      <!-- <p>{{ xtFrom.fixBug }}</p> -->
    </div>
    <div v-if="xtFrom.bz">
      <span style="font-size: 16px">备注：</span>{{ xtFrom.bz }}
    </div>
    <article class="writer">
      发布时间：<span>{{ xtFrom.publishTime }}</span>
    </article>

    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="savechange">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { getItem, setItem } from "@/utils/storage";
import NavBar from "./NavBar.vue";
import { useRouter } from "vue-router";
import emitter from "@/utils/eventBus.js";
import { onMounted, ref, watch } from "vue";
import { getApi, postApi } from "@/api/tobAcco_api.js";
import { getImgUrl } from "@/utils/tools.js"
const dept = getItem('deptId')
const emit = defineEmits(["foldShowFn"]);
const dialogVisible = ref(false);
const xtFrom = ref({})
const router = useRouter();
const aqfz = ref("");
const sgsAqfz = ref("");
const headerShow = ref(true);
const BGcolor = ref(getItem("ZtColor") ? getItem("ZtColor") : 'rgba(0, 116, 87, 1)');
// 初始化
onMounted(() => {
  getAqfz()
  emitter.on("headerShow", (res) => {
    headerShow.value = res;
  });
});
watch(
  () => headerShow.value,
  (newVal) => {
    headerShow.value = newVal;
  },
  { deep: true, immediate: true }
);
function routerXx() {
  router.push("/editPassword?type=info");
}
const predefineColors = ref([
  'rgba(0, 116, 87, 1)',
  '#0f8e87',
  '#ff4500',
  '#ff8c00',
  '#ffd700',
  '#90ee90',
  '#00ced1',
  '#1e90ff',
  '#c71585',
  'rgba(255, 69, 0, 0.68)',
  'rgb(255, 120, 0)',
  'hsv(51, 100, 98)',
  'hsva(120, 40, 94, 0.5)',
  'hsl(181, 100%, 37%)',
  'hsla(209, 100%, 56%, 0.73)',
  '#c7158577',
])

//主题颜色的设置
const setColor = () => {
  setItem("ZtColor", BGcolor.value);
  updateBgColor(BGcolor.value)
  //通知js修改根节点的样式对象的属性与属性值
  const html = document.documentElement;
  html.style.setProperty('--el-color-primary', BGcolor.value);
  html.style.setProperty('--el-button-bg-color', BGcolor.value);
  html.style.setProperty('--el-bg-color', BGcolor.value);
  const matchs = (BGcolor.value.substring(5, BGcolor.value.indexOf(')')).split(','));
  if (matchs) {
    const boderColor = `rgba(${matchs[0]}, ${matchs[1]}, ${matchs[2]}, ${0.75})`; // 更新第四个参数的值
    const tabbackgroundColor = `rgba(${matchs[0]}, ${matchs[1]}, ${matchs[2]}, ${0.2})`; // 更新第四个参数的值
    html.style.setProperty('--el-table-border-color', boderColor);
    html.style.setProperty('--el-border-color-lighter', boderColor);
    html.style.setProperty('--el-table-row-hover-bg-color', boderColor);
    html.style.setProperty('--el-table-cell-bmx-backgroundcolor', tabbackgroundColor);
  } else {
    return 1; // 如果匹配失败，返回默认值
  }
}
// 修改主题颜色
function updateBgColor(color) {
  getApi({ color }, '/mosty-base/userConfig/setColor')
}
// 查询安全方针
function getAqfz() {
  getApi({}, "/mosty-jcgl/safetyPolicy/selectPolicyByOrgCode").then((res) => {
    if (res) {
      aqfz.value = res.policy;
      // 查询省公司的安全方针
      if (dept.orgLevel.substring(0, 1) != '1') {
        getApi({}, "/mosty-jcgl/safetyPolicy/selectPolicyBySgs").then((resp) => {
          if (resp) {
            sgsAqfz.value = resp.policy
          }
        })
      }
    }
  })
  //查询系统更新
  getApi({}, '/mosty-base/sys-version-manage/getNewVersion').then(res => {
    if (res) {
      res.addFunction = res.addFunction.replace(/\n/g, '<br>');
      res.fixBug = res.fixBug.replace(/\n/g, '<br>');
      xtFrom.value = res
      dialogVisible.value = true
    }
  })
}
function savechange() {
  postApi({}, '/mosty-base/sys-version-manage/read').then(res => {
    dialogVisible.value = false
  })

}
</script>

<style lang="scss" scoped>
@import "@/assets/css/layout.scss";
@import "@/assets/css/largeScreen.scss";

.writer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.two {
  white-space: nowrap;
  overflow: hidden;
  box-sizing: border-box;
  /* 动画名称和持续时间 */
  animation: scroll 10s linear infinite;
}

/* 定义关键帧 */
@keyframes scroll {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-100%);
  }
}

.ztcoloe {
  >span {
    font-size: 20px;
    height: 50px;
    line-height: 50px;
    margin-right: 15px;
  }
}

.left {
  display: flex;
  align-items: center;

  .center {
    display: flex;
    width: 83%;
    justify-content: space-between;
    line-height: 1;
    margin-left: 20px;

    .menu_text {
      width: 130px;
      font-size: 20px;
      padding: 0 20px;
      height: 50px;
      line-height: 50px;
      box-sizing: border-box;
      margin: 0 10px;
    }
  }
}

.m-2 {
  font-size: 20px;
  margin-right: 20px;
}

.txBox {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-right: 20px;
}

.icon_title {
  margin: 0 5px;
  line-height: 20.38px;
}

.logo img {
  height: 30px;
}

.content {
  overflow: hidden;
  position: relative;
  width: 200px;
  height: 33px;
  white-space: nowrap;
  margin-right: 20px;
}

.content1 {
  overflow: hidden;
  position: relative;
  width: 230px;
  height: 66px;
  margin-right: 20px;
}

#inner {
  position: absolute;
}

#line {
  height: 29px;
}

.innerActive {
  #two {
    margin-right: 8px;
    display: inline-block;
    white-space: pre;
  }

  #first {
    margin-right: 8px;
    display: inline-block;
    white-space: pre;
  }
}
</style>
