<template>
  <cr-nav-bar
    class="nav-bar"
    :title="title"
    :left-arrow="false"
    left-text=""
    :fixed="false"
    :style="titleStyle"
  />
</template>
<script>
import { hexToRgb } from '@service/color.service';
import { mapGetters } from 'vuex';
export default {
  name: 'TitlePreview',
  computed: {
    ...mapGetters(['pageData', 'pageInfo']),
    title() {
      return this.pageInfo.pageName || '标题';
    },
    titleStyle() {
      const { titleBgColor } = this.pageData.props;
      return this.getTitleStyle(titleBgColor);
    }
  },
  methods: {
    getTitleStyle(bgcolor = "#fff") {
      if (!EASY_ENV_IS_BROWSER) return;
      const DARK_COLOR = "#000";
      const LIGHT_COLOR = "#fff";
      const isGradient = Array.isArray(bgcolor);
      let rgbColor = isGradient ? bgcolor[0] : bgcolor;
      if (rgbColor.toLocaleLowerCase().indexOf("rgb") === -1) rgbColor = hexToRgb(rgbColor);
      const isDarkContent = 0.213 * rgbColor[0] + 0.715 * rgbColor[1] + 0.072 * rgbColor[2] <= 255 / 2;
      const color = isDarkContent ? LIGHT_COLOR : DARK_COLOR;
      const background = isGradient ? `linear-gradient(90deg, ${bgcolor[0]}, ${bgcolor[1]})` : bgcolor; 
      return {
        color,
        background
      };
    }
  }
}
</script>
<style lang="less" scoped>
@deep: ~'>>>';
.nav-bar {
    @{deep} .cr-nav-bar {
    z-index: inherit !important;
    background-color: transparent;
    &__title {
      color: inherit;
      font-weight: bold;
    }
  }

}
</style>
