<template>
  <div>
    <slot v-if ="value" name ="dialog"></slot>
    <transition name="sliderbar" mode="out-in" appear>
      <div class="info-card" v-if ="value">
        <div class="mt-tag">
          <div class="mt-tag-item" :class = "index === showItem ? 'active': ''" v-for = "(item, index) in list" :key = "index" @click = "showItem = index" v-show ="list.length > 1">
            {{item}}
          </div>
        </div>
        <el-card style="height:100%;position:relative; z-index:3;border-radius:0" body-style="overflow:scroll;position:absolute;top:50px;left:0;bottom:0;right:0;padding:30px">
          <div  class="of-h" slot= "header">
            <h2  class="title">{{list[showItem]}}</h2>
            <el-button type="text"  size ='large' icon="el-icon-circle-close" style ="line-height:0;font-size:20px" class="fl-r pd-0" @click ="$emit('input', false),$emit('close','')"></el-button>
          </div>
          <slot :name ="showItem"></slot>
        </el-card>
      </div>
    </transition>
  </div>
</template>
<script>
export default {
  props: {
    list: {
      type: Array
    },
    value: Boolean,
    close: {
      type: Function
    }
  },
  watch: {
    value (bool) {
      if (bool) {
        this.showItem = 0
      }
    }
  },
  data () {
    return {
      showItem: 0
    }
  }
}
</script>


<style lang="less" scoped>
.info-card {
  position: fixed;
  width: 550px;
  top: 60px;
  bottom: 0px;
  z-index: 6;
  right: 0px;
  box-sizing: border-box;
  background: rgba(0, 0, 0, 0.5);
  .title {
    line-height: 20px;
    font-size: 20px;
    font-weight: normal;
    color: #3094fa;
    border-left: 2px solid #3094fa;
    padding-left: 20px;
    float: left;
  }
}
.mt-tag {
  position: absolute;
  right: 0px;
  top: 30px;
  .mt-tag-item {
    &.active {
      background: #3094fa;
      color: #fff;
      padding-right: 20px;
    }
    transition: 0.2s all;
    float: right;
    color: #3094fa;
    border-left: 2px solid #3094fa;
    cursor: pointer;
    overflow: hidden;
    margin-bottom: 10px;
    padding: 5px 0px 5px 20px;
    border-radius: 5px 0 0 5px;
    width: 80 + 550px;
    background: #fff;
    box-shadow: 0px 3px 6px #cbcbcb;
  }
}
.sliderbar-enter-active,
.sliderbar-leave-active {
  transition: all 0.5s;
}
.sliderbar-enter, .sliderbar-leave-to /* .fade-leave-active in below version 2.1.8 */ {
  width: 0px;
  overflow: hidden;
  opacity: 0;
}
</style>
