<template>
  <div :class="itemClasses">
    <div :class="headerClasses" @click="toggle">
      <i class="icon coicon co-fr" :class="{'coicon-unfold': !isActive, 'coicon-packup': isActive}"></i>
      <slot></slot>
    </div>
    <div :class="contentClasses" v-show="isActive">
      <slot name="content"></slot>
    </div>
  </div>
</template>
<script>
  const prefixCls = 'co-collapse-item';

  export default {
    name: 'co-panel',
    props: {
      name: {
        type: String
      }
    },
    data() {
      return {
        index: 0, // use index for default when name is null
        isActive: false
      };
    },
    computed: {
      itemClasses() {
        return [
          `${prefixCls}`,
          {
            [`${prefixCls}--active`]: this.isActive
          }
        ];
      },
      headerClasses() {
        return `${prefixCls}-header`;
      },
      contentClasses() {
        return `${prefixCls}-content`;
      }
    },
    methods: {
      toggle() {
        this.$parent.toggle({
          name: this.name || this.index,
          isActive: this.isActive
        });
      }
    }
  };
</script>
<style>
  @import "../../../src/style/var-ios9.css";
  @component-namespace co {
    @component collapse-item {
      border-top: 0.05rem solid #eaeaea;
      &:first-child {
        border-top-width: 0;
      }
      &:last-child {
        .co-collapse-item-content {
          -webkit-border-radius: 0 0 0.15rem 0.15rem;
          border-radius: 0 0 0.15rem 0.15rem;
        }
      }

      @descendent header {
        height: 2.2rem;
        line-height: 2.2rem;
        padding-left: 0.6rem;
        color: #333;
        cursor: pointer;
        position: relative;
        background: #fff;

        > .coicon-packup, > .coicon-unfold{
          width: 2.2rem;
          text-align: center;
          font-size: 22px;
          color: $color-blue;
        }
        /* &::before {
          position: absolute;
          left: 0.8rem;
          top: 0;
          bottom: 0;
          margin: auto;
          content: '';
          display: block;
          width: 0.4rem;
          height: 0.4rem;
          background: linear-gradient(45deg, transparent 50%, #777 0);
          -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
          -webkit-transition: transform .2s ease-in-out;
          transition: transform .2s ease-in-out;
        } */
      }
      @modifier active {
        .co-collapse-item-header::before {
          -webkit-transform: rotate(135deg);
          transform: rotate(135deg);
        }
      }

      @descendent content {
        overflow: hidden;
        color: #666;
        padding: 0.7rem 0.8rem;
        /* background-color: #fff; */
        background-color: #F8F8F8;

      }
    }
  }
</style>
