<script lang="ts" setup>
  import { useUpdateCenter } from '../../hook/useUpdateCenter';
  import { FrontDataSourceRecord } from '../../types/type';
  import { createVisualBoardContext } from '../../hook/useVisualBoardContext';
  import { DataComponentRecord } from '/@/api/dataBoard/model';
  import { computed } from 'vue';
  import { frontComponentMap } from '../help';
  import { FrontComponent } from '../../const/const';

  const props = defineProps<{
    record: DataComponentRecord;
    dataSource: FrontDataSourceRecord[];
  }>();

  const isMultipleDataSource = computed(() => {
    const { record } = props;
    const componentInfo = frontComponentMap.get(record.frontId as FrontComponent);
    return componentInfo?.isMultipleDataSource;
  });

  const { update, add, remove } = useUpdateCenter();

  createVisualBoardContext({ update, add, remove });

  defineExpose({ update });
</script>

<template>
  <section class="widget !dark:bg-dark-900">
    <slot name="header"></slot>

    <div class="widget-content">
      <template v-if="!isMultipleDataSource">
        <div
          v-for="item in props.dataSource"
          :key="item.id"
          :style="{ width: `${item.width || 100}%`, height: `${item.height || 100}%` }"
          class="widget-item"
        >
          <div class="widget-box">
            <div class="widget-controls-container">
              <slot
                name="controls"
                :record="item"
                :add="add"
                :remove="remove"
                :update="update"
              ></slot>
            </div>
          </div>
        </div>
      </template>
      <template v-if="isMultipleDataSource">
        <div :style="{ width: `${100}%`, height: `${100}%` }" class="widget-item">
          <div class="widget-box">
            <div class="widget-controls-container">
              <slot
                name="controls"
                :record="props.dataSource"
                :add="add"
                :remove="remove"
                :update="update"
              ></slot>
            </div>
          </div>
        </div>
      </template>
    </div>
    <slot name="footer"></slot>
  </section>
</template>

<style scoped>
  .widget {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    background-color: #fff;
    border-radius: 3px;
    box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.1);
  }

  .widget-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
  }

  .widget-box .widget-charts {
    display: flex;
  }

  .widget-item {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    justify-content: center;
    align-items: center;
  }

  .widget-box {
    position: relative;
    width: 100%;
    height: 100%;
  }

  .widget-controls-container {
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .widget-controls-container > div {
    width: 100%;
    height: 100%;
    background-color: red;
  }

  .widget-value {
    font-size: 14px;
    position: absolute;
    width: 100%;
    top: 0;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .widget-label {
    font-size: 14px;
    line-height: 1.2;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
  }
</style>