<template>
  <div class="title-top-warp">
    <div
      :style="{
        'background-image': 'url(' + getAssetsFile('images/vsualized/home/titlebg.png') + ')',
        transform: pos == 'right' ? 'rotateY(180deg)' : '',
      }"
      class="title-top-bg"
    ></div>
    <span class="title-top-content" :style="{ 'text-align': pos }">{{ topTitle || '--' }}</span>
  </div>
</template>
<script setup>
import { isEmpty, getAssetsFile } from '@/utils';
import { ref, reactive, onMounted, watch } from 'vue';
import { useRouter } from 'vue-router';
import { useApp } from '@/hooks';

const router = useRouter();
const props = defineProps({
  title: {
    type: String,
    default: '统计分析',
  },
  postion: {
    type: String,
    default: 'left',
  },
});

let topTitle = ref('');
let pos = ref('');

watch(
  () => (props.title, props.postion),
  () => {
    topTitle.value = props.title;
    pos.value = props.postion;
  },
  {
    deep: true,
    immediate: true,
  }
);
</script>
<style lang="scss" scoped>
.title-top-warp {
  position: relative;
  height: 38px;
  width: 100%;
  .title-top-bg {
    width: 100%;
    height: 100%;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
  }
  .title-top-content {
    line-height: 38px;
    font-size: 14px;
    font-weight: bold;
    display: inline-block;
    transform: skewX(-13deg);
    background: linear-gradient(to bottom, '#ff7e5f', '#548fff');
    -webkit-background-clip: text;
    color: #fff;
    letter-spacing: 4px;
    text-shadow: -2px 0 0 1px #add8f1;
    width: 100%;
    padding: 0 36px;
    box-sizing: border-box;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
  }
}
</style>
