<script lang="ts" setup>
import { ref, reactive, toRefs } from 'vue';
import { IconCaretDown } from '@computing/opendesign-icons';
const props = defineProps({
  label: {
    required: true,
    type: String,
    default: '',
  },
  tip: {
    required: true,
    type: String,
    default: '',
  },
  config: {
    required: true,
    type: Object,
    default: () => {
      return {};
    },
  },
  customId: {
    required: false,
    type: String,
    default: '',
  },
});
const { label, tip, config } = toRefs(props);

let isOpen = ref(false);
function open() {
  isOpen.value = !isOpen.value;
}
</script>

<template>
  <div :id="customId" class="header" @click="open">
    <span class="col-title">
      {{ label }}
      <span class="content">{{ tip }}</span>
    </span>

    <div class="btn">
      <span>已配置</span>
      <span class="configured">{{ config.configured }}</span>
      <span>项，共{{ config.total }}项</span>
      <el-icon class="caret" :size="16" :class="isOpen ? 'open' : 'close'">
        <IconCaretDown />
      </el-icon>
    </div>
  </div>
  <el-collapse-transition>
    <div v-show="isOpen">
      <slot></slot>
    </div>
  </el-collapse-transition>
</template>

<style lang="scss" scoped>
.header {
  height: 48px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  .close {
    transform: rotate(-90deg);
    transition: transform 0.2s linear;
  }
  .open {
    transition: transform 0.2s linear;
  }
  .col-title {
    color: var(--o-text-color-primary);
    font-weight: 600;
  }
  .content {
    color: var(--o-text-color-tertiary);
    margin-left: 16px;
  }
  .configured {
    font-size: 14px;
    color: #1cad70;
    margin: 0 2px;
  }
  .btn {
    display: flex;
    align-items: center;
    .caret{
      margin-left: 8px;
    }
  }
}
</style>
