<template>
  <div
    style="
      display: flex;
      justify-content: space-between;
      align-items: center;
      box-sizing: border-box;
      border-bottom: 1px solid #eee;
    "
  >
    <div>
      <div class="myTitle" :style="isBorder ? {} : { border: 'unset' }">
        <img :src="sonSvg" alt="" class="icon" :style="iconStyle" v-if="showIcon && sonSvg" />
        <img
          src="@/assets/icons/bookmark-fill.svg"
          alt=""
          class="icon"
          :style="iconStyle"
          v-else-if="showIcon"
        />
        <span class="title">{{ title }}</span>
      </div>
    </div>
    <div style="padding-right: 20px">
      <slot name="right"></slot>
    </div>
  </div>
</template>

<script setup>
  import { ref, inject } from 'vue'
  const props = defineProps({
    title: {
      type: String,
      default: ''
    },
    isBorder: {
      type: Boolean,
      default: true
    },
    iconStyle: {
      type: Object,
      default: () => ({})
    },
    showIcon: {
      type: Boolean,
      default: () => true
    }
  })
  const sonSvg = ref(inject('svgData'))
  console.log(sonSvg, 'data')
</script>

<style lang="scss" scoped>
  .myTitle {
    width: 100%;
    height: 60px;
    display: flex;
    align-items: center;
    user-select: none;
    .icon {
      width: 20px;
      height: 20px;
      margin-left: 20px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .title {
      font-size: 16px;
      color: #233041;
      margin-left: 10px;
      font-family: 'SourceHanSansCN-Medium';
    }
  }
</style>
