<template>
  <div class="expend">
    <container class="border-bottom">
      <div class="wt flex flex_ac flex_sb" @click="slideDown(index+1)">
        <div class="flex_one">
          <slot name="expend-header"></slot>
        </div>
        <i class="arrow-right iconfont" :class="{rotate:activeId===index+1&&hasExpend}"></i>
      </div>
    </container>
    <div class="trans-detail border-bottom wt ntr expend-body" v-show="activeId===index+1&&hasExpend">
      <slot name="expend-body"></slot>
    </div>
  </div>
</template>
<script>
  import container from './container'
  export default {
    name: "expend",
    components:{
      container
    },
    props:['item','index'],
    data(){
      return{
        hasExpend:false,
        activeId:1,
      }
    },
    methods:{
      slideDown(index){
        if (this.last != index || !this.last){
          this.last = index
          this.hasExpend = false
        }
        this.activeId = index
        this.hasExpend = !this.hasExpend
      },
    }
  }
</script>
<style scoped>
  .rotate{
    margin-top: -.1rem;
    transform: rotate(90deg);
  }
  .arrow-right{
    transition: transform .1s;
  }
  .trans-detail{
    padding: .3rem;
    font-size: .24rem;
  }
  .expend-body{
    font-size: .26rem;
    color: #999;
  }
</style>
