<template>
  <div class="ps-collapse-item">
    <div class="ps-collapse-item--head" @click="operaItemisShow">
      <div class="ps-collapse-item--head-l">
        <slot name="title"></slot>
      </div>
      <div :class="['ps-collapse-item--head-r', collapseItemBody && 'active']">
        <slot name="function"></slot>
        <i class="el-icon-arrow-down"></i>
      </div>
    </div>
    <el-collapse-transition>
      <div class="ps-collapse-item--body" v-show="collapseItemBody">
        <slot></slot>
      </div>
    </el-collapse-transition>
  </div>
</template>

<script>
export default {
  name: "PsCollapseItem",
  props: {},
  data() {
    return {
      propId: "",
      childIndex: null,
      collapseItemBody: false,
    };
  },
  created() {},
  mounted() {    
    this.propId = this.$parent.propId || null; 
  },
  methods: {
    operaGetChildIndex(val){
      this.childIndex = val;
    },
    operaItemisShow() {
      this.collapseItemBody = !this.collapseItemBody;
    },
    operaSetChildF(){
      this.collapseItemBody = false;
    },
    operaSetChildT(){
      this.collapseItemBody = true;
    }
  },
};
</script>

<style>
</style>
