<template>
  <div class="ant-card">
    <a-collapse v-model="activeKey" :class="$style.card" @change="changeCollapse">
      <a-collapse-panel key="1" :header="title">
        <slot slot="extra" name="extra" />
        <slot />
      </a-collapse-panel>
    </a-collapse>
  </div>
</template>

<script>
import components from './_import-components/sd-card-collapse-import'

export default {
  name: 'SdCardCollapse',
  components,
  model: {
    prop: 'expand',
    event: 'change',
  },
  props: {
    expand: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      activeKey: [],
    }
  },
  created() {
    if (this.expand) {
      this.activeKey = ['1']
    }
  },
  methods: {
    changeCollapse(key) {
      if (key.length === 1) {
        this.$emit('change', true)
      } else {
        this.$emit('change', false)
      }
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
.card {
  :global(> .ant-collapse-item > .ant-collapse-content > .ant-collapse-content-box) {
    padding: 0;
  }
}
</style>
