<template>
  <view class="list-card-container" @click="handleClick" :class="containerStyle">
    <slot v-if="showChecked" name="checkbox">

    </slot>
    <view class="list-card">
      <view class="list-card-header">
        <slot name="title"></slot>
        <slot name="icon"></slot>
      </view>
      <view class="list-card-content">
        <slot></slot>
      </view>

    </view>
    <slot name="footer"></slot>
  </view>

</template>

<script>
export default {
  name: 'ListCard',
  props: {
    showChecked: {
      type: Boolean,
      default: false
    },
    containerStyle: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      checked: false
    }
  },

  methods: {
    handleClick() {
      this.$emit('click');
    }
  }
}
</script>

<style lang="scss" scoped>
.list-card-container {
  background: #FFFFFF;
  border-radius: 16rpx;
  box-shadow: 0 8rpx 20rpx 0 rgba(0, 0, 0, 0.08);
  border: 2rpx solid #F0F8FF;
  padding: 32rpx;
  margin-bottom: 32rpx;
  display: flex;
  align-items: flex-start;
  position: relative;



  .list-card {
    width: 100%;

    .list-card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 24rpx;

      .list-card-checkbox {
        margin-right: 16rpx;
      }
    }

    .list-card-content {
      // 默认内容样式
    }
  }
}
</style>