<template>
  <div class="container" :class="[isFullScreen ? 'full-screen' : '']">
    <div class="card-title common-card-title">
      <span class="common-title-style">{{ title }}</span>
      <div class="operation-container">
        <el-space>
          <slot name="formSlot"></slot>
          <el-icon class="common-icon-style" @click="fullEchart" ><FullScreen /></el-icon>
          <!-- <fullscreen-exit-outlined v-else class="common-icon-style" @click="fullEchart" /> -->
          <el-icon class="common-icon-style" @click="refresh"><Refresh /></el-icon>
          <!-- <el-dropdown v-if="isDropdown" :hide-on-click="true" trigger="click" :popper-append-to-body="false">
            <more-outlined class="common-icon-style" />
            <template #dropdown>
              <el-dropdown-menu style="width: 250px">
                <el-dropdown-item v-for="(content, name) in $slots" :key="name">
                  <component :is="content" />
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown> -->
        </el-space>
      </div>
    </div>
    <div class="common-card-content">
      <commonChart ref="commonChartRef" :charts-id="chartsId" :barType="barType"></commonChart>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import commonChart from './taskChart.vue';

withDefaults(
  defineProps<{
    title: string;
    barType: string;
    chartsId: string;
    isDropdown?: boolean;
  }>(),
  {
    title: '',
    barType: 'pieChart',
    chartsId: '1',
    isDropdown: false,
  }
);
const emits = defineEmits([ 'refresh']);
const commonChartRef = ref();
const isFullScreen = ref(false);

const fullEchart = () => {
  isFullScreen.value = !isFullScreen.value;
};
const refresh = () => {
  emits('refresh');
};
defineExpose({
  commonChartRef,
});
</script>
<style scoped lang="scss">
.container {
  height: 100%;
  width: 100%;
  background: #fff;
  .common-card-content {
  height: calc(100% - 56px);
  padding: 12px;
  padding-top: 0;
}
  .card-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .common-title-style {
  font-size: 12px;
  font-weight: bold;
  color: var(--el-text-color-primary);
  white-space: nowrap;
}
.operation-container{
display: flex;
align-items: center;
.common-icon-style {
  cursor: pointer;
 color: var(--el-color-primary);

}
}
  }
  .common-card-title {
  padding:12px;
  height: 56px;
  display: flex;
  align-items: center;
}

}
.full-screen {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  height: 100vh;
  width: 100vm;
}
:deep(.el-form) {
  width: 100% !important;
  .el-form-item {
    margin-bottom: 0 !important;
  }
}
</style>
