<template>
  <div
      style="
      height: 30px;
      line-height:30px;
      box-sizing:border-box;
      padding-left:5px;
      border-radius:2px;
      background-color: #f0f8fe;
      margin-bottom: 5px;
      font-size: 16px;
      border: 1px solid #d1dbe5;
      font-weight: bold;
      width: 100%;
"
  >
    {{ props.title }}
    <MenuFoldOutlined
        v-if="props.ifShowCollapse"
        style="float: right;margin-top: 5px;padding-right: 3px"
        @click="handleCollapse"
    />
  </div>
</template>

<script setup lang="ts">
import {ref, reactive, computed, onBeforeMount, nextTick, watch} from "vue";

const emits = defineEmits(['collapseForm'])
const props = defineProps({
  title: {
    type: String,
    default: ''
  },
  ifShowCollapse:{
    type:Boolean,
    default:false
  }
})
const handleCollapse=()=>{
  emits('collapseForm')
}
</script>

<style scoped>

</style>