<template>
  <div class="vee-object-wrapper">
    <div class="vee-object-header">
      <div class="vee-object-header-left">
        <span class="vee-object-title" v-show="showTitle">{{title}}</span>
        <vee-switch class="vee-object-switch" v-model="mEnable" active-text="启用" inactive-text="禁用" @change="handleChange"></vee-switch>
      </div>
      <div class="vee-object-header-right" @click="handleExpandBtnClick">
        <i class="vee-object-caret-btn" 
          :class="{'el-icon-caret-bottom': mExpand, 'el-icon-caret-right': !mExpand}"></i>
      </div>
    </div>
    <div class="vee-object-body" v-if="mExpand">
      <slot>
        <div class="vee-object-empty"><span>无</span></div>
      </slot>
      <div class="vee-object-mask" v-show="!mEnable"></div>
    </div>
  </div>
</template>
<script>
import VeeSwitch from './VeeSwitch'

export default {
  components: {
    VeeSwitch
  },
  props: {
    title: {
      type: String,
      default: '标题'
    },
    showTitle: {
      type: Boolean,
      default: true,
    },
    enable: {
      type: Boolean,
      default: true,
    },
    expand: {
      type: Boolean,
      default: true,
    }
  },
  data () {
    return {
    }
  },
  computed: {
    mEnable: {
      get () {
        return this.enable
      },
      set (val) {
        this.$emit('update:enable', val)
        this.$emit('enableChange', val)
      }
    },
    mExpand: {
      get () {
        return this.expand
      },
      set (val) {
        this.$emit('update:expand', val)
        this.$emit('expandChange', val)
      }
    }
  },
  methods: {
    handleExpandBtnClick () {
      this.mExpand = !this.mExpand
    },
    handleChange (val) {
      if (val) {
        this.$emit('update:expand', val)
        this.$emit('expandChange', val)
      }
    }
  }
}
</script>
<style lang="scss">
  .vee-object-wrapper {
    box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
  }
  .vee-object-header {
    box-sizing: border-box;
    padding: 5px 10px;
    border-bottom: 1px solid #EBEEF5;
    display: flex;
    align-items: center;
  }
  .vee-object-header-left {
    display: flex;
    align-items: center;
  }
  .vee-object-header-right {
    margin-left: 20px;
    flex: 1;
    text-align: right;
    cursor: pointer;
  }
  .vee-object-title {
    margin-right: 10px;
  }
  .vee-object-state-title {
    margin-right: 5px;
  }
  .vee-object-body {
    box-sizing: border-box;
    padding: 5px 10px;
    position: relative;
  }
  .vee-object-caret-btn {
    cursor: pointer;
    user-select: none;
    padding: 0 5px;
  }
  .vee-object-empty {
    text-align: center;
    color: rgba(0, 0, 0, 0.5);
  }
  .vee-object-mask {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: rgba(0, 0, 0, .2);
    z-index: 4;
  }
</style>
