<template>
  <div class="kole-chartpanel" :class="{ 'is-collapsed': isCollapsed }">
    <div class="kole-chartpanel-head">
      <span class="kole-chartpanel-title">{{ title }}</span>
      <div class="kole-chartpanel-tools">
        <button class="kole-chartpanel-tool" @click="$emit('refresh')">刷新</button>
        <button class="kole-chartpanel-tool" @click="$emit('export')">导出</button>
        <button v-if="collapsible" class="kole-chartpanel-tool kole-chartpanel-caret" @click="isCollapsed = !isCollapsed">▾</button>
      </div>
    </div>
    <div class="kole-chartpanel-body"><slot>图表区域</slot></div>
  </div>
</template>

<script>
export default {
  name: 'KoleChartPanel',
  props: {
    title: { type: String, default: '图表' },
    collapsible: { type: Boolean, default: true },
    collapsed: { type: Boolean, default: false }
  },
  data: function () { return { isCollapsed: this.collapsed }; }
};
</script>

<style src="./ChartPanel.css"></style>
