<template>
  <el-collapse v-model="activeNames" class="detail-collapse">
    <el-collapse-item name="1">
      <template slot="title">
        <div class="details-box">
          查看详情
          <i class="el-icon-d-arrow-right" />
        </div>
      </template>
      <slot />
    </el-collapse-item>
  </el-collapse>
</template>

<script>
export default {
  props: {
    isLaunch: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      activeNames: []
    }
  },
  watch: {
    isLaunch: {
      handler(val) {
        if (val) {
          this.activeNames = ['1']
        } else {
          this.activeNames = []
        }
      },
      immediate: true
    }
  }
}
</script>

<style lang="scss" scoped>
.details-box {
  text-align: center;
  margin-top: 20px;
  cursor: pointer;
  width: 100%;
  .el-icon-d-arrow-right {
    transform: rotate(90deg);
    color: #E9423A;
  }
}
</style>

<style lang="scss">
.detail-collapse {
  border: 0px;
  .el-collapse-item__header {
    border: 0px;
    background-color: #F5F6F6;
    padding-bottom: 20px;
  }
  .el-collapse-item__arrow {
    display: none;
  }
  .el-collapse-item__wrap {
    background-color: #fff;
    border: 0px;
  }
  .el-collapse-item__content {
    padding-bottom: 0px;
  }
}
</style>
