<template>
  <div class="cus-content-card" :class="{'cus-content-card-full': full !== false}">
    <div class="ccc-top-slot" v-if="$slots.top">
      <slot name="top"/>
    </div>
    <div class="ccc-field-out" id="field-out" v-if="$slots.fieldOut">
      <div class="field-out-slot">
        <slot name="fieldOut"/>
      </div>
    </div>
    <div class="ccc-center-slot" v-if="$slots.center">
      <slot name="center"/>
    </div>

    <div class="ccc-content">
      <div class="buttons" v-if="$slots.buttons">
        <slot name="buttons"/>
      </div>
      <div class="table">
        <slot name="table"/>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
  import {
    defineComponent,
    computed,
    onMounted,
    ref,
    reactive,
    watch,
    getCurrentInstance,
    ComponentInternalInstance,
    toRefs
  } from 'vue'
  import {useStore} from 'vuex'
  import {useRouter} from 'vue-router'

  export default defineComponent({
    name: 'CusContentCard',
    components: {},
    props: {
      full: {
        default: false
      }
    },
    setup(props, { emit }) {
      const store = useStore();
      const router = useRouter();
      const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties
      const state = reactive({
      });
      return {
        ...toRefs(state),
      }
    },
  })
</script>

<style scoped lang="scss">
  .cus-content-card {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: #F5FBFF;
    box-sizing: border-box;
    .ccc-top-slot {
      margin-bottom: 10px;
      background-color: #FFFFFF;
    }
    .ccc-field-out {
      margin-bottom: 10px;
      background-color: #FFFFFF;
      height: auto;
      padding: 14px 24px 0 24px;
      .field-out-slot {
        flex: 1;
        :deep(.el-form-item) {
          margin-bottom: 12px;
        }
      }
    }
    .cc-center-slot {
      margin-bottom: 10px;
      background-color: #FFFFFF;
    }
    .ccc-content {
      background-color: #FFFFFF;
      flex: 1;
      z-index: 1;
      display: flex;
      flex-direction: column;
      padding: 12px 16px;
      overflow: hidden;
      .buttons {
        margin-bottom: 12px;
      }
      .table {
        flex: 1;
        z-index: 1;
        display: flex;
        overflow-y: auto;
      }
    }
    &.cus-content-card-full {
      overflow-y: auto;
      .ccc-content {
        overflow: unset;
      }
    }
  }
</style>
