<template>
  <div class="ai-detail">
    <div class="ai-detail__title">
      <slot name="title"></slot>
    </div>
    <div class="ai-detail__step" v-if="isHasStepSlot">
      <slot name="step"></slot>
    </div>
    <div class="ai-detail__content" :class="className">
      <div class="ai-detail__content--wrapper" :class="{'ai-detail__content--side':isHasSidebar,list}">
        <slot name="content"></slot>
      </div>
    </div>
    <div class="ai-detail__footer" v-if="isHasFooterSlot">
      <slot name="footer"></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'AiDetail',

  props: {
    isHasSidebar: {
      type: Boolean,
      default: false
    },
    list: Boolean
  },

  computed: {
    isHasFooterSlot() {
      return this.$slots.footer
    },

    isHasStepSlot() {
      return this.$slots.step
    },

    className() {
      if (this.isHasFooterSlot) {
        if (this.isHasStepSlot) {
          return 'ai-detail__content--active-step'
        }

        return 'ai-detail__content--active'
      } else {
        if (this.isHasStepSlot) {
          return 'ai-detail__content--step'
        }
      }

      return ''
    }
  }
}
</script>

<style lang="scss" scoped>
.ai-detail {
  height: 100%;
  background: #F5F6F9;
  overflow: hidden!important;

  .ai-detail__title {
    margin: 0 20px;
  }

  .ai-detail__step {
    height: 72px;
  }

  .ai-detail__content {
    height: calc(100% - 48px);
    padding: 0 0 20px 0;
    overflow-x: hidden;
    overflow-y: overlay;
  }

  @media screen and (max-width: 1740px) {
    .ai-detail__content {
      padding: 0 20px 20px;
    }
  }

  .ai-detail__content--wrapper {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    padding-top: 20px;

    &.list {
      max-width: unset;
      margin: 0 20px;
    }
  }

  @media screen and (max-width: 1740px) {
    .ai-detail__content--side {
      margin-left: 128px;
    }
  }

  .ai-detail__content--active {
    height: calc(100% - 48px - 64px);
  }

  .ai-detail__content--active-step {
    height: calc(100% - 48px - 64px - 72px);
  }

  .ai-detail__content--step {
    height: calc(100% - 48px - 72px);
  }

  .ai-detail__footer {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 64px;
    background: #F5F5F5;
    box-shadow: 0px 1px 0px 0px #E5E5E5;

    .el-button {
      width: 92px;
    }
  }
}
</style>
