<template>
  <div class="logo">
    <img src="@/assets/logo.png" alt="logo" />
    <span v-if="show" class="logo-title">{{ title }}</span>
    <!-- 搜索 -->
    <el-button
      v-bind="getbindVaule"
      @click="hanleOpenModal"
    />
  </div>
</template>
<script setup lang="ts">
import { ref, watch,computed } from "vue";
import { Search } from '@element-plus/icons-vue'
import { useOpenShowSearch } from '@/hooks/useOpenShowSearch';

const { hanleOpenModal } = useOpenShowSearch()
const getbindVaule = computed(() => ({ class: "ml-4",icon: Search,size: "small",circle: true }))
//接收父组件的值
const props = defineProps({
  collapsed: {
    type: Boolean,
    required: true,
  },
});
//控制文字的显示和影藏
const show = ref(true);
const logo = ref(
  "https://wpimg.wallstcn.com/69a1c46c-eb1c-4b46-8bd4-e9e686ef5251.png"
);
const title = ref("财务管理");
watch(
  () => props.collapsed,
  (collapsed: boolean) => {
    if (!collapsed) {
      setTimeout(() => {
        show.value = !collapsed;
      }, 300);
    } else {
      show.value = !collapsed;
    }
  }
);
</script>
<style lang="scss" scoped>
.logo {
    display: flex;
    width: 100%;
    height: 50px;
    line-height: 50px;
    background: #2b2f3a;
    text-align: center;
    cursor: pointer;
    align-items: center;
    img {
        width: 32px;
        height: 32px;
        margin-right: 12px;
        margin-left: 20px;
    }
    .logo-title {
        display: inline-block;
        margin: 0;
        color: #fff;
        font-weight: 600;
        line-height: 50px;
        font-size: 15px;
        font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
        vertical-align: middle;
        transition: 0.5s;
    }
}
</style>
