<template>
  <transition name="fade" mode="out-in" appear>
    <div class="pos-f 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">
          {{item}}
        </div>
      </div>
      <el-card style="height:100%;position:relative; z-index:3;border-radius:0" body-style="position:absolute;top:60px;left:0;right:0;bottom:0;overflow:scroll;">
          <div  class="of-h" slot= "header">
            <h2  class="title">{{list[showItem]}}</h2>
            <el-button type="text"  size ='large' icon="circle-close" style ="line-height:0" class="fl-r pd-0" @click ="$emit('input', false)"></el-button>
          </div>
        <div class="pd-10"></div>
        <slot :name ="showItem"></slot>
      </el-card>
    </div>
  </transition>
</template>
<script>
export default {
  props: {
    list: {
      type: Array
    },
    value: Boolean
  },
  watch: {
    value (bool) {
      if (bool) {
        this.showItem = 0
      }
    }
  },
  data () {
    return {
      showItem: 0
    }
  }
}
</script>


<style lang="less" scoped>
  .info-card {
    width: 500px;
    top:60px;
    bottom:0px;
    z-index:6;
    right: 0px;
    box-sizing: border-box;
    background:rgba(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:.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 + 500px;
      background: #fff;
      box-shadow: 0px 3px 6px #cbcbcb;
    }
  }
.fade-enter-active, .fade-leave-active {

  transition: all .5s
}
.fade-enter, .fade-leave-to /* .fade-leave-active in below version 2.1.8 */ {
  width:0px;
  overflow:hidden;
  opacity: 0
}
</style>
