<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">
        <slot v-if="showFilterContent" name="formSlot"></slot>
        <el-space>
          <el-popover
            v-if="$slots.formSlot && !showFilterContent"
            :visible="popoverVisible"
            ref="chartPopover"
            trigger="click"
            placement="left"
            width="300"
          >
            <template #default>
              <div class="filter-content">
                <slot name="formSlot" @click="popoverVisible = false"></slot>
                <div class="options">
                  <el-button @click="popoverVisible = false">关闭</el-button>
                </div>
              </div>
            </template>
            <template #reference>
              <el-icon
                v-if="$slots.formSlot"
                class="common-icon-style"
                @click="popoverVisible = true"
              >
                <Filter />
              </el-icon>
            </template>
          </el-popover>
          <el-icon class="common-icon-style" @click="fullEchart"><FullScreen /></el-icon>
          <!-- <el-icon class="common-icon-style" @click="refresh"><Refresh /></el-icon> -->
        </el-space>
      </div>
    </div>
    <div v-loading="loading" class="common-card-content">
      <el-empty v-if="nodata" class="chart-empty" description="暂无数据" />
      <commonChart
        v-else
        ref="commonChartRef"
        :charts-id="chartsId"
        :barType="barType"
      ></commonChart>
    </div>
  </div>
</template>

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

const chartPopover = ref();
const { popoverVisible } = useClickOutside(chartPopover);

withDefaults(
  defineProps<{
    title: string;
    barType: string;
    chartsId: string;
    isDropdown?: boolean;
    showFilterContent?: boolean; // 是否直接展示筛选条件
    loading?: boolean; // 加载状态
    nodata?: boolean; // 无数据状态
  }>(),
  {
    title: '',
    barType: 'pieChart',
    chartsId: '1',
    isDropdown: false,
    showFilterContent: false,
    loading: false,
    nodata: 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-color: var(--el-bg-color);
  .common-card-content {
    height: calc(100% - 56px);
    padding: 12px;
    padding-top: 0;
    .chart-empty {
      width: 100%;
      height: 100%;
      background-color: var(--el-bg-color);
    }
  }
  .card-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .common-title-style {
      font-size: 14px;
      font-weight: bold;
      color: var(--el-text-color-primary);
      white-space: nowrap;
    }
    .operation-container {
      display: flex;
      align-items: center;
      .common-icon-style {
        margin-left: 5px;
        font-size: 18px;
        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: 999;
  height: 100vh;
  width: 100vm;
}
.filter-content {
  .options {
    text-align: right;
  }
}
</style>
<style lang="scss">
.common-card-content {
  .el-empty__image {
    width: 30%;
    height: 100%;
  }
  .el-empty__description p {
    font-size: 12px;
  }
}
</style>
