<template>
  <div class="qf-collapse-item">
    <!--点击的title部分-->
    <div
      class="qf-collapse-item-header"
      @click="handleHeaderClick"
      role="button"
      :id="`qf-collapse-head-${id}`"
    >
      <div class="title">{{title}}</div>
      <slot name="remark"></slot>
      <slot name="actions" class="actions"></slot>
      <i v-show="!isActive" class="iconfont icon-xiangyou qf-collapse-arrow"></i>
      <i v-show="isActive" class="iconfont icon-xiangxia qf-collapse-arrow"></i>
    </div>
    <!--展开的内容部分-->
    <transition :name="transitionName">
      <div
        class="qf-collapse-item-wrap child-view"
        v-show="isActive"
        :id="`qf-collapse-content-${id}`"
      >
        <div class="qf-collapse-item-content">
          <slot></slot>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
  import ObjectUtil from '../../util/object';

  export default {
    name: 'QfCollapseItem',
    componentName: 'QfCollapseItem',
    /**
     * 注入从父组件来的collapse
     */
    inject: ['collapse'],

    props: {
      title: String,
      name: [String, Number],
      default () {
        return this._uid;
      }
    },
    data () {
      return {
        transitionName: 'slide-left'
      };
    },
    computed: {
      /**
       * 是否展开item
       */
      isActive () {
        return this.collapse.activeNames.indexOf(this.name) > -1;
      },
      /**
       * 生成id
       * @returns {*}
       */
      id () {
        return ObjectUtil.uuid();
      }
    },
    methods: {
      handleHeaderClick () {
        this.$parent.handleItemClick(this);
      }
    }
  };
</script>
