<template>
  <div class="border mb-4">
    <div class="title mb-4 cursor-pointer" @click="handleClick">
      <a-divider type="vertical" class="line" solid />
      {{ title }}
    </div>
    <slot></slot>
  </div>
</template>
<script setup lang="ts">
  const props = defineProps({
    title: { type: String, default: '标题' },
    modelValue: {
      type: Boolean,
      default: true,
    },
  });
  const emit = defineEmits(['update:modelValue']);
  const handleClick = () => {
    emit('update:modelValue', !props.modelValue);
  };
</script>

<style lang="less">
  .border {
    border: 1px solid #e6e6e6;

    .title {
      background-color: #f2f2f2;
      height: 50px;
      line-height: 50px;
      font-size: 16px;

      .line {
        height: 50px;
        width: 5px;
        border-color: #88b9fa;
        background-color: #88b9fa;
        margin-left: 0px;
        margin-right: 20px;
      }
    }
    // 表格
    .ant-table-wrapper {
      margin-bottom: 16px;
    }
  }
</style>
