<template>
  <div class="foldbox">
    <div
      class="header"
      @click="$emit('click')"
    >
      <div class="header-icon"><icon-font
        :name="titleIcon"
        size="11"
      /></div>
      <div class="header-title">{{ title }}</div>
      <div class="header-rotate">
        <i
          v-if="!isOpen"
          class="el-icon-arrow-right"
        />
        <i
          v-if="isOpen"
          class="el-icon-arrow-down"
        />
      </div>
    </div>
    <div
      class="content"
    />
    <slot :row="row" />
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: 'title',
    },
    titleIcon: {
      type: String,
      default: 'icon-research',
    },
    isOpen: {
      type: Boolean,
      default: false,
    },
    row: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
    };
  },
  watch: {
    row: {
      handler(nVal) {
        console.log('nValnVal---row11111122', nVal);
      },
      deep: true,
      immediate: true,

    },
  },
};
</script>

<style scoped lang="scss">
.foldbox {
  margin-bottom: 8px;
  width: 100%;
  padding: 12px;
  border-radius: 4px;
  background-color: var(--card-bg);
}
.header {
  display: flex;
  width: 100%;
  font-weight: 800;
  align-items: center;
  height: 24px;
  .header-icon {
    width: 20px;
    height: 20px;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.13);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .header-title {
    margin-left: 8px;
    font-size: 14px;
  }
  .header-rotate {
    margin-left: 14px;
  }
}
.content {
  margin-top: 10px;
  padding-top: 7px;
  width: 100%;
  border-top: 1px solid var(--card-border);
}
.fade-enter-active {
  transition: opacity 2s ease, height 2s ease;
}
.fade-leave-active {
  transition: opacity 0s, height 0s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>
