<!--
 * @Author: Devin
 * @Date: 2023-01-11 17:15:27
 * @LastEditors: Devin
 * @LastEditTime: 2023-02-22 14:50:55
 * @Description: 公共页头
-->
<template>
  <div class="common-panel-header">
    <div class="h-l">
      <!-- logo -->
      <img
        class="__header-info-logo"
        :style="headerInfo.style"
        :src="headerInfo?.logo || ''"
        alt=""
      />
      <!-- title -->
      <span class="__header-info-title">{{ headerInfo?.title }}</span>
    </div>
    <!-- menu -->
    <div v-if="headerInfo?.menus" class="h-m">
      <slot name="menu"></slot>
    </div>

    <div class="h-r">
      <!-- fnction icon -->
      <el-input
        v-if="showSearch"
        size="small"
        placeholder="请输入关键词搜索"
        class="__header-search"
      ></el-input>
      <span
        v-if="showMore"
        class="__header-text m-r-16"
        @click.stop="handelShowMore"
      >
        更多
      </span>

      <span
        v-if="showLang"
        class="__header-text m-r-16"
        @click.stop="changeLanguage"
      >
        简体中文
      </span>
      <span
        v-if="showSearch || showMore || showLang"
        class="__header-line m-r-16"
      ></span>
      <!-- 说明 -->
      <common-icon
        v-if="showInformation"
        class="m-r-16"
        name="common-gongnengshuoming"
      ></common-icon>
      <common-icon
        v-if="showMessage"
        class="m-r-16"
        name="common-liuyan"
        @click.stop="handelShowMessage"
      ></common-icon>
      <span
        v-if="showInformation || showMessage"
        class="__header-line m-r-16"
      ></span>
      <!-- user info -->
      <div class="__header-user-info">
        <el-avatar :size="24" :src="userInfo?.src"></el-avatar>
        <el-dropdown
          class="user-name"
          trigger="click"
          @visible-change="changeType"
          @command="handleCommand"
        >
          <h5 class="__header-user">
            <span class="__header-user-account">
              {{ userInfo?.userAccount }}
            </span>
            <common-icon
              v-if="isDropDown"
              name="common-shangjiantou"
            ></common-icon>
            <common-icon v-else name="common-xiajiantou"></common-icon>
          </h5>
          <template #dropdown>
            <el-dropdown-menu>
              <template v-for="(commond, index) in commonds" :key="index">
                <el-dropdown-item :command="commond['commond']">
                  {{ commond['label'] }}
                </el-dropdown-item>
              </template>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

defineProps({
  headerInfo: {
    type: Object,
    default: () => {}
  },
  userInfo: {
    type: Object,
    default: () => {}
  },
  commonds: {
    type: Array<any>,
    default: () => []
  },
  showMore: {
    type: Boolean,
    default: () => true
  },
  showLang: {
    type: Boolean,
    default: () => true
  },
  showInformation: {
    type: Boolean,
    default: () => true
  },
  showMessage: {
    type: Boolean,
    default: () => true
  },
  showSearch: {
    type: Boolean,
    default: () => true
  }
});

const isDropDown = ref<any>(true);
const emits = defineEmits([
  'handelCommond',
  'handelShowMessage',
  'handelShowMore'
]);

// 加载更多

// 国际化
function changeLanguage() {}

const handleCommand = (command: any) => {
  emits('handelCommond', command);
};

// 展示信息
const handelShowMessage = () => {
  emits('handelShowMessage');
};

// 显示更多
const handelShowMore = () => {
  emits('handelShowMore');
};
const changeType = (val: any) => {
  isDropDown.value = val;
};
</script>

<script lang="ts">
export default {
  name: 'CommonHeader'
};
</script>

<style scoped lang="scss">
.common-panel-header {
  width: 100%;
  height: 60px;
  background: #2a2b3c;
  display: flex;
  padding: 0 10px;
  box-sizing: border-box;
  justify-content: space-between;
  align-items: center;
  .h-l {
    min-width: 240px;
    color: #fff;
    display: flex;
    align-items: center;
    height: 100%;
    .__header-info-logo {
      max-height: 60px;
      width: auto;
      margin-right: 10px;
    }
    .__header-info-title {
      color: #fff;
      font-size: 16px;
      font-weight: 500;
    }
  }
  .h-m {
    flex: 1;
  }
  .h-r {
    display: flex;
    align-items: center;
    color: #fff;
    flex-shrink: 0;
    min-width: 300px;
    justify-content: flex-end;
    font-size: 12px;
    .__header-search {
      margin-right: 16px;
      background-color: #2d3e53;
      color: #fff;
    }
    :deep(.el-input) {
      --el-input-focus-border: transparent;
      --el-input-transparent-border: 0 0 0 0px;
      --el-input-border-color: transparent;
      --el-input-hover-border: 0px !important;
      --el-input-hover-border-color: transparent;
      --el-input-focus-border-color: transparent;
      --el-input-clear-hover-color: transparent;
      box-shadow: 0 0 0 0px !important;
      --el-input-border: 0px;

      background-color: #2d3e53;
      color: #fff;
    }
    :deep(.el-input__wrapper) {
      background-color: #2d3e53;
      color: #fff;
    }
    .__header-search {
      width: 120px;
    }
    .__header-text {
      color: #fff;
      cursor: pointer;
    }
    .__header-line {
      width: 1px;
      height: 12px;
      background-color: #b3bcc5;
    }
    .__header-user-info {
      display: flex;
      align-items: center;
      cursor: pointer;
      user-select: none;
      color: #fff;
      .__header-user {
        display: flex;
        align-items: center;
      }
      .__header-user-account {
        color: #fff;
        font-size: 14px;
        margin-left: 6px;
        line-height: 24px;
      }
    }
  }
}
</style>