<template>
  <a-layout-header :class="$style.header">
    <span v-show="showtitle">
      <div :class="$style.titlepoint"></div>
      <span :class="['toptitle', $style.toptitle]"></span>
    </span>
    <div :class="$style.left">
      <!--
          @slot 左侧区域
        -->
      <slot name="left"><div :class="$style.title" /></slot>
    </div>
    <div :class="$style.right">
      <!--
          @slot 右侧区域
        -->
      <slot></slot>
    </div>
  </a-layout-header>
</template>

<script>
import components from './_import-components/sd-header-import'
/**
 * 框架通用header,默认带渐变色和logo
 * @displayName SdHeader 框架通用header
 * @since 8.0.12
 */
export default {
  name: 'SdHeader',
  components,
  data() {
    return {
      showtitle: false,
    }
  },
  mounted() {
    let nums = 0
    const setTitle = setInterval(() => {
      nums++
      if (document.querySelector('.sd-page-title') && nums < 1000) {
        document.querySelector('.toptitle').innerHTML =
          document.querySelector('.sd-page-title').innerHTML
        this.showtitle = true
        clearInterval(setTitle)
      } else if (
        document.querySelector('.panel_sd-webform-panel_webform') &&
        document.title &&
        document.title.indexOf('|') > -1 &&
        nums < 1000
      ) {
        // 无流程 add by zhangtt 20230410
        const title = document.title.split('|')[0]
        if (title) {
          document.querySelector('.toptitle').innerHTML = title
          this.showtitle = true
        }
        clearInterval(setTitle)
      }
    }, 10)
  },
  methods: {},
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
.toptitle {
  color: #404040;
  font-weight: bold;
  font-size: 22px;
  margin-left: 40px;
}
.title {
  position: relative;
  left: -20px;
  display: inline-block;
  width: 200px;
  height: 100%;
  background: url('~@custom/images/logo.png') no-repeat center;
}
.right {
  float: right;
  height: 100%;
}
.left {
  float: left;
  height: 100%;
}
.header {
  z-index: 1;
  &:global(.ant-layout-header) {
    padding: 0 20px 0 20px;
    color: $text-color-inverse;
    background-image: linear-gradient(90deg, $primary-color 0%, $primary-7 100%);
    // height: 48px;
    // line-height: 48px;
  }
  :global(.ant-btn-link) {
    color: $white;
    &:hover {
      color: $primary-2;
    }
    // add by zzb 修改按钮样式
    // color: #3b3b3b;
    &:active {
      background-color: $disabled-color-dark;
    }
  }
  .titlepoint {
    background: #1890ff;
    height: 27px;
    width: 8px;
    position: fixed;
    top: 12px;
    left: 20px;
    border-radius: 8px;
  }
}
</style>

<docs>

```vue
<sd-header ><sd-header-user-action /><a-button type="link">通用</a-button></sd-header>
```
</docs>
