<!--
 * @FilePath: \wwwd:\code\screenFront\src\components\headerBox\header1.vue
 * @Author: 王路平
 * @文件版本: V1.0.0
 * @Date: 2023-02-12 09:50:35
 * @Description: 
 * 
 * 版权信息         : 2023 by ${再登软件}, All Rights Reserved.
-->
<template>
  <div class="header1">
    <el-row>
      <el-col :span="10">
        <dv-decoration-8
          :reverse="true"
          :style="{ width: props.width, height: props.height }"
        />
        <div v-show="typeObj.comback" class="comeBack" @click="comeBackFun">
          <i class="iconfont icon-back"></i>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="header1-title">
          <h1>{{ props.title }}</h1>
        </div>
        <div class="slot">
          <div class="tip" style="display: flex">
            <span class="tipspan" v-for="item in props.titleTip">
              <div
                class="colortip"
                :style="{ backgroundColor: item.color }"
              ></div>
              <span class="tipstring">{{ item.name }}</span></span
            >
            <slot></slot>
          </div>
        </div>
      </el-col>
      <el-col :span="10">
        <dv-decoration-8
          :style="{ width: props.width, height: props.height }"
        />
      </el-col>
    </el-row>
    <p>{{ timeHtml }}</p>
  </div>
</template>

<script setup lang="ts">
import useNowTime from "@/hook/nowTime";
import { useRoute,useRouter } from "vue-router";
import { onMounted, ref } from "vue";

let { timeHtml } = useNowTime();
const router=useRouter()

let props = defineProps<{
  width: String;
  height: String;
  title: String;
  titleTip: any;
  typeFun:any[]
}>();
let comeBackFun=()=>{
  router.go(-1)
}
const typeObj={
  comback:false,
}
function typeStatus(){
  if(props.typeFun.length==0){
    return
  }
  props.typeFun.forEach(res=>{
    for(let key in typeObj){
      if(res==key){
        typeObj[key]=true
      }
    }
  })
}
onMounted(() => {
  //判断需要显示出来的数据
  typeStatus()
})
</script>

<style scoped>
.header1 {
  width: 100%;
}
.header1-title {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  height: 20%;
  width: 100%;
}
.header1-title > h1 {
  font-size: 30px;
  position: absolute;
  top: 10px;
}
.header1 p {
  position: absolute;
  right: 50px;
  bottom: 20px;
  font-size: 20px;
}
.slot {
  height: 50%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 30px 10px 10px 10px;
}
.colortip {
  width: 16px;
  height: 16px;
  border-radius: 8px;
}
.tipstring {
  font-size: 20px;
  color: #fff;
}
.tipspan {
  display: flex;
  margin-left: 10px;
  align-items: center;
}
.comeBack{
  position: absolute;
  bottom: 5%;
  left: 3rem;
  font-size: 2rem;
  color: #fff;
}
.comeBack>i{
  font-size: 3rem;
}
</style>
