<template>
  <el-card shadow="never" class="data-chart-card">
    <template slot="header" v-if="config._title || $scopedSlots.header">
      <div class="data-chart-card--header">
        <div class="title">
          <slot name="header" v-bind="config">{{ config._title }}</slot>
        </div>
        <div class="action">
          <!-- 内置操作 -->
          <pro-action icon="el-icon-search" type="text" :popover="true">
            <div slot="popover">
              <slot name="search" v-bind="config" />
            </div>
          </pro-action>
          
          <pro-action
            icon="el-icon-refresh"
            @handler="handleRefresh"
            type="text"
            helpText="刷新"
          />
          <pro-action
            icon="el-icon-download"
            @handler="handleDownload"
            type="text"
            helpText="导出"
          />
          <pro-action
            icon="el-icon-more"
            type="text"
            ui-type="dropdown"
            :split-button="false"
          >
            <i class="el-icon-more"></i>
            <template slot="subActions">
              <!--  扩展操作 -->
              <slot name="action" v-bind="config" />
            </template>
          </pro-action>
        </div>
      </div>
    </template>
    <!-- inline tooltip -->
    <div class="data-chart-card--tooltip-inline">
      <slot name="inlinetooltip" v-bind="config" />
    </div>
    <div class="data-chart-card--body" :style="chartStyle">
      <slot></slot>
    </div>
    <!-- 图标解释 -->
    <div class="data-chart-card--describe">
      <slot name="describe" v-bind="config" />
    </div>
  </el-card>
</template>

<script>
import ElCard from 'mars-pro/packages/card';
import ProAction from 'mars-pro/packages/pro-action';
export default {
  components:{
    ElCard,
    ProAction
    },
  inject:['jdatachart'],
  props: {
    config: {},
  },
  computed: {
    chartStyle() {
      return {
        height: `${this.config._height || 100}px`,
        display: "flex",
        "flex-direction": "row",
        "box-sizing": "border-box",
        "justify-content": "center"
      };
    },
  },
  methods:{
    handleRefresh(){
      this.jdatachart.$emit('refresh', this.config)
    },
    handleDownload(){
      this.jdatachart.$emit('download', this.config)
    }
  }
};
</script>