<template>
  <div class="ws-panel">
      <div class="ws-panel-header" :class="collapse && 'cursor'" @click="onHeaderClick">
          <div class="title">
            <div class="title-icon" :class="color"></div>
            <slot name="title">{{title}}</slot>
          </div>
          <div class="tools">
              <slot name="tools"></slot>
          </div>
          <div class="switch" v-if="collapse">
              <i class="el-icon-arrow-down" :class="isCollapsed && 'rotate'"></i>
          </div>
      </div>
      <el-collapse-transition>
        <div v-show="!isCollapsed" class="ws-panel-content">
            <slot></slot>
        </div>
      </el-collapse-transition>
  </div>
</template>

<script>
export default {
    name: 'WsPanel',
    data(){
        return {
            isCollapsed: false, // 是否已经折叠
        }
    },
    props: {
        collapse: { //是否支持折叠
            type: Boolean,
            default: true,
        },
        title: {
            type: String,
            default: undefined
        },
        color: {
            type: String,
            default: 'primary'
        }
    },
    methods: {
        onHeaderClick(){
            if(!this.collapse){
                return;
            }
            this.isCollapsed = !this.isCollapsed;
        }
    }
}
</script>

<style lang="scss" scoped>
@import "../../WsTheme/var.scss";

.ws-panel{
    & + &{
        margin-top: 2px;
    }
    .ws-panel-header{
        height: 40px;
        // border: 1px solid red;
        display: flex;
        align-items: center;
        padding-right: 10px;

        .title{
            color: $color-primary-shade;
            font-size: $font-size-medium;
            font-weight: bold;
            display: flex;
            align-items: center;
            flex: 1;

            .title-icon{
                width: 4px;
                height: $font-size-medium + 1px;
                margin-right: 10px;

                &.primary{
                    background: $color-primary;
                }
                &.success{
                    background: $color-success;
                }
                &.warning{
                    background: $color-warn;
                }
                &.danger{
                    background: $color-error;
                }
            }
        }
        .tools{
            color: $color-dark;
            font-size: $font-size-base;
        }
        .switch{
            .el-icon-arrow-down{
                font-size: 14px;
                margin-left: 8px;
                transform: rotate(0deg);
                transition: all 0.26s;

                &.rotate{
                    transform: rotate(-180deg);
                }
            }
        }
    }
    .ws-panel-content{
    }
}

.cursor{
    cursor: pointer;
}
</style>