<template>
  <div
    class="sidebar"
    :style="{
      right: showSider ? `${-332 - offsetRight}px` : `${-30 - offsetRight}px`,
      height: `calc(100% + ${offSetHeight}px)`
    }"
  >
    <div
      :style="{
        width: showSider ? '300px' : '0'
      }"
      class="side-content-wrap"
    >
      <div class="side-content">
        <slot></slot>
      </div>
    </div>
    <div class="side-menu" @click="showSider = !showSider">
      <span v-if="!showSider" class="tag">&gt;&gt;</span>
      <span v-if="showSider" class="tag">&lt;&lt;</span>
      决策辅助
    </div>
  </div>
</template>

<script>
export default {
  name: 'my-modal-sidebar',
  props: {
    // 默认展开/收缩内容
    value: {
      type: Boolean,
      default: true,
      require: true
    },
    // 向右偏移量
    offsetRight: {
      type: Number,
      default: 0
    },
    // 高度补充
    offSetHeight: {
      type: Number,
      default: 0
    }
  },
  watch: {
    value: {
      handler (n) {
        this.showSider = n
      },
      immediate: true
    },
    showSider (n) {
      this.$emit('input', n)
    }
  },
  data () {
    return {
      showSider: true
    }
  }
}
</script>

<style lang="less" scoped>
.sidebar {
  transition: all linear 0.4s;
  position: absolute;
  top: 50%;
  right: -332px;
  transform: translateY(-50%);
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  overflow: auto;
  .side-content-wrap {
    width: 300px;
    height: 100%;
    overflow: auto;
    border-radius: 6px;
    transition: all linear 0.4s;
    background-color: #f2f2f2;
    border: 1px solid #5d6c7b;
    overflow-x: hidden;
    .side-content {
      width: 100%;
      min-width: 288px;
      overflow-x: hidden;
    }
  }
  .side-menu {
    position: relative;
    width: 30px;
    height: 100px;
    line-height: 30px;
    text-align: center;
    background-color: #f2f2f2;
    writing-mode: vertical-rl;
    border-radius: 0 10px 10px 0;
    cursor: pointer;
    .tag {
      display: block;
      width: 100%;
      text-align: center;
      position: absolute;
      top: 0;
      left: 0;
      writing-mode: horizontal-tb;
    }
  }
}
</style>
