<!--
 * @Company: 沈阳信诚科技
 * @Email: html_venustar@163.com
 * @Author: Liuqiming
 * @Description: 大屏标题
 * @LastEditors: Liuqiming
 * @LastEditTime: 2024-03-20 16:56:53
 * @Date: 2024-02-29 15:05:33
-->
<template>
  <div class="display-top-header">
    <div class="left-header" :style="{ width: `calc(100vw * ${(1920 - titleWidth) / 2} / 1920)` }">
      <screenfull class="screenfull"></screenfull>
      <span class="header-current" v-if="is_current">
        <svg-icon icon-class="display-clock" class="display-clock" />{{ nowTime }}
      </span>
    </div>
    <div class="center-header" :style="{ width: `calc(100vw * ${titleWidth} / 1920)` }">
      <svg-icon icon-class="display-logo" class="display-logo" /><span class="display-title">{{ title }}</span>
    </div>
    <div class="right-header" :style="{ width: `calc(100vw * ${(1920 - titleWidth) / 2} / 1920)` }">
      <div class="right-header-content" v-if="is_right">
        <div class="content content-left">
          <span class="content-text">{{rData.label1}}：<span>
            <el-tooltip effect="dark" :content="rData.value1" placement="top">
              {{rData.value1}}
            </el-tooltip>
          </span></span>
          <span class="content-icon"><svg-icon icon-class="display-r1" class="display-right" /></span>
        </div>
        <div class="content content-right">
          <span class="content-text">{{rData.label2}}：<span>
            <el-tooltip effect="dark" :content="rData.value2" placement="top">
              {{rData.value2}}
            </el-tooltip>
          </span></span>
          <span class="content-icon"><svg-icon icon-class="display-r2" class="display-right" /></span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { formatDate } from '@U/index.js'
import screenfull from '@C/Screenfull/index'
const props = defineProps({
  // 标题宽度
  titleWidth: {
    type: Number,
    default: 450
  },
  // 标题
  title: {
    type: String,
    default: '一重垂直铸机数字化平台'
  },
  is_current: {
    type:Boolean,
    default: false
  },
  is_right: {
    type:Boolean,
    default: false
  },
  rData: {
    type: Object,
    default: () => {
      return {
        label1:'班组',
        value1: '甲班组',
        label2:'班组长',
        value2: '张张张',
      }
    }
  }
});
const nowTime = ref(null)
const currentTime = () => {
  const getTimeStr = () => {
    var str = "星期" + "日一二三四五六".charAt(new Date().getDay());
    let current = `${formatDate(new Date()).split(' ')[1]} / ${formatDate(new Date()).split(' ')[0]} ${str}`
    nowTime.value = current
  }
  getTimeStr()
  setInterval(() => {
    getTimeStr()
  }, 1000)
}
nextTick(() => {
  currentTime()
})
</script>
<style lang="scss" scoped>
.screenfull{
  display: inline-block;
  margin: 0 w(14);
  font-size: w(14);
  line-height: h(50);
}
</style>
