/**
* Description: 内容框框
*
* Created by longyihuang on 2019/10/24
* E-Mail: 475865662@qq.com
*/

<template>
  <div :style="containerStyle">
    <div :style="headerStyle">
      <div class="left">
        <slot name="left" v-if="$slots.left"></slot>
        <h4 v-else>{{ title }}</h4>
      </div>
      <div class="right">
        <slot name="right" v-if="$slots.right"></slot>
        <i
          v-else-if="collapse" @click="()=> open = !open"
          style="cursor: pointer"
          :class="['el-icon-arrow-down', open ? 'switch-arrow' : 'switch-arrow is-active']"></i>
      </div>
    </div>
    <transition name="content">
      <div :style="contentStyle" v-if="open">
        <slot name="content"></slot>
      </div>
    </transition>
  </div>
</template>

<script>
	export default {
		name: "ContentWrapper",
		props: {
			styleType: {
				type: String,
				default: 'border'
			},
			headerHeight: {
				type: [String, Number],
				default: 40
			},
			headerColor: {
				type: String,
				default: '#f0f0f0'
			},
			bodyColor: {
				type: String,
				default: '#FFFFFF'
			},
			collapse: {
				type: Boolean,
				default: false
			},
			title: {
				type: String,
				default: ''
			}
		},

		data() {
			return {
				open: true
			}
		},

		computed: {
			containerStyle() {
				let style = {
					display: 'flex',
					flexDirection: 'column',
				}
				if (this.styleType === 'border') {
					style.border = '1px solid rgba(0,0,0,0.35)'
					style.borderRadius = '4px'
					style.boxShadow = '0px 2px 6px rgba(0,0,0,0.15)'
				}

				return style
			},
			headerStyle() {
				let style = {
					height: this.headerHeight + 'px',
					display: 'flex',
					alignItems: 'center',
					justifyContent: 'space-between',
					padding: '0px 16px',
					background: this.headerColor
				}
				if (this.styleType === 'border') {
					style.borderRadius = '4px 4px 0px 0px',
						style.borderRadius = '4px',
						style.boxShadow = '0px 2px 6px rgba(0,0,0,0.15)'
				} else if (this.styleType === 'simple') {
					style.borderBottom = '1px solid rgba(0,0,0,0.06)'
				}
				return style
			},
			contentStyle() {
				let style = {
					padding: '16px 20px',
					background: this.bodyColor
				}
				if (this.styleType === 'border') {
					style.borderRadius = '0px 0px 4px 4px'
				}
				return style
			}
		}
	}
</script>

<style lang='scss' scoped>
  .switch-arrow {
    transition: transform .3s;
    font-weight: 300;
  }

  .is-active {
    transform: rotate(-90deg);
  }

  .content-enter-active {
    transition: max-height .3s linear;
  }

  .content-enter {
    max-height: 0px;
  }

  .content-enter-to {
    max-height: 100vh;
  }

  .content-leave-active {
    transition: max-height .3s linear;
  }

  .content-leave {
    max-height: 100vh;
  }

  .content-leave-to {
    max-height: 0px;
  }

</style>