<script lang="ts" setup>
  import { Button, PageHeader, Empty, Spin, Tooltip } from 'ant-design-vue';
  import { LineChartOutlined } from '@ant-design/icons-vue';
  import { GridItem, GridLayout } from 'vue3-grid-layout';
  import { nextTick, onMounted, ref } from 'vue';
  import WidgetWrapper from '../components/WidgetWrapper/WidgetWrapper.vue';
  import BaseWidgetHeader from '../components/WidgetHeader/BaseWidgetHeader.vue';
  import { DropMenu } from '/@/components/Dropdown';
  import DataBindModal from './components/DataBindModal.vue';
  import { useModal } from '/@/components/Modal';
  import { DEFAULT_WIDGET_HEIGHT, DEFAULT_WIDGET_WIDTH, MoreActionEvent } from '../config/config';
  import {
    addDataComponent,
    deleteDataComponent,
    getDataComponent,
    updateDataBoardLayout,
  } from '/@/api/dataBoard';
  import { useRoute, useRouter } from 'vue-router';
  import { computed, unref } from '@vue/reactivity';
  import { DataComponentRecord, DataSource, Layout } from '/@/api/dataBoard/model';
  import { frontComponentMap } from './config/help';
  import { calcScale } from './config/util';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { DataBoardLayoutInfo } from '../types/type';
  import { WidgetComponentType } from './config/visualOptions';
  import Authority from '/@/components/Authority/src/Authority.vue';
  import { useSocketConnect } from '../hook/useSocketConnect';
  import { buildUUID } from '/@/utils/uuid';
  import HistoryTrendModal from './components/HistoryTrendModal.vue';

  const ROUTE = useRoute();

  const ROUTER = useRouter();

  const { createMessage, createConfirm } = useMessage();
  const getBoardId = computed(() => {
    return (ROUTE.params as { id: string }).id;
  });

  const widgetEl = new Map<string, Fn>();

  const dataBoardList = ref<DataBoardLayoutInfo[]>([]);

  const draggable = ref(true);
  const resizable = ref(true);

  const GirdLayoutColNum = 24;
  const GridLayoutMargin = 10;

  const handleBack = () => {
    ROUTER.go(-1);
  };

  function updateSize(i: string, _newH: number, _newW: number, newHPx: number, newWPx: number) {
    newWPx = Number(newWPx);
    newHPx = Number(newHPx);

    const data = dataBoardList.value.find((item) => item.i === i)!;
    const length = data.record.dataSource.length || 0;

    const row = Math.floor(Math.pow(length, 0.5));
    const col = Math.floor(length / row);
    let width = Math.floor(100 / col);
    let height = Math.floor(100 / row);

    const WHRatio = newWPx / newHPx;
    const HWRatio = newHPx / newWPx;

    if (WHRatio > 1.6) {
      width = Math.floor(100 / length);
      height = 100;
    }

    if (HWRatio > 1.6) {
      height = Math.floor(100 / length);
      width = 100;
    }

    data.record.dataSource = data?.record.dataSource.map((item) => {
      if (!item.uuid) item.uuid = buildUUID();
      return {
        ...item,
        width,
        height,
        radio: calcScale(newWPx, newHPx, width, height),
      };
    });

    nextTick(() => {
      const updateFn = widgetEl.get(i);
      if (updateFn) updateFn();
    });
  }

  const itemResize = (i: string, newH: number, newW: number, newHPx: number, newWPx: number) => {
    updateSize(i, newH, newW, newHPx, newWPx);
  };

  const itemResized = (i: string, newH: number, newW: number, newHPx: number, newWPx: number) => {
    handleSaveLayoutInfo();
    updateSize(i, newH, newW, newHPx, newWPx);
  };

  const itemContainerResized = (
    i: string,
    newH: number,
    newW: number,
    newHPx: number,
    newWPx: number
  ) => {
    updateSize(i, newH, newW, newHPx, newWPx);
  };

  const itemMoved = (i: string) => {
    handleSaveLayoutInfo();
    updateCharts(i);
  };

  const updateCharts = (i: string) => {
    nextTick(() => {
      const updateFn = widgetEl.get(i);
      if (updateFn) updateFn();
    });
  };

  const setComponentRef = (el: Element, record: DataBoardLayoutInfo) => {
    if (widgetEl.has(record.i)) widgetEl.delete(record.i);
    if (el && (el as unknown as { update: Fn }).update)
      widgetEl.set(record.i, (el as unknown as { update: Fn }).update);
  };

  const [register, { openModal }] = useModal();

  const handleMoreAction = (event: DropMenu, id: string) => {
    if (event.event === MoreActionEvent.DELETE) {
      createConfirm({
        iconType: 'warning',
        content: '是否确认删除?',
        onOk: () => handleDelete(id),
      });
    }
    if (event.event === MoreActionEvent.EDIT) handleUpdate(id);
    if (event.event === MoreActionEvent.COPY) handleCopy(id);
  };

  const handleOpenCreatePanel = () => {
    openModal(true, { isEdit: false });
  };

  const handleSaveLayoutInfo = async () => {
    try {
      const layoutInfo = unref(dataBoardList).map((item) => {
        return {
          id: item.i,
          h: item.h,
          w: item.w,
          x: item.x,
          y: item.y,
        } as Layout;
      });

      await updateDataBoardLayout({
        boardId: unref(getBoardId),
        layout: layoutInfo,
      });
    } catch (error) {}
  };

  const { beginSendMessage } = useSocketConnect(dataBoardList);

  const loading = ref(false);
  const getDataBoardComponent = async () => {
    try {
      // dataBoardList.value = [];
      loading.value = true;
      const data = await getDataComponent(unref(getBoardId));
      dataBoardList.value = data.data.componentData.map((item) => {
        const index = data.data.componentLayout.findIndex((each) => item.id === each.id);
        let layout;
        if (!~index) {
          layout = {};
        } else {
          layout = data.data.componentLayout[index];
        }
        return {
          i: item.id,
          w: layout.w || DEFAULT_WIDGET_WIDTH,
          h: layout.h || DEFAULT_WIDGET_HEIGHT,
          x: layout.x || 0,
          y: layout.y || 0,
          record: item,
        };
      });

      beginSendMessage();
    } catch (error) {
    } finally {
      loading.value = false;
    }
  };

  const getComponent = (record: DataComponentRecord) => {
    const frontComponent = record.frontId;
    const component = frontComponentMap.get(frontComponent as WidgetComponentType);
    return component?.Component;
  };

  const getComponentConfig = (
    record: DataBoardLayoutInfo['record'],
    dataSourceRecord: DataSource
  ) => {
    const frontComponent = record.frontId;
    const component = frontComponentMap.get(frontComponent as WidgetComponentType);
    return component?.transformConfig(component.ComponentConfig, record, dataSourceRecord);
  };

  const handleUpdate = async (id: string) => {
    const record = unref(dataBoardList).find((item) => item.i === id);
    openModal(true, { isEdit: true, record });
  };

  const handleCopy = async (id: string) => {
    const record = unref(dataBoardList).find((item) => item.i === id);
    try {
      await addDataComponent({
        boardId: unref(getBoardId),
        record: {
          dataBoardId: unref(getBoardId),
          frontId: record?.record.frontId,
          dataSource: record?.record.dataSource,
        },
      });
      createMessage.success('复制成功');
      getDataBoardComponent();
    } catch (error) {}
  };

  const handleDelete = async (id: string) => {
    try {
      await deleteDataComponent([id]);
      createMessage.success('删除成功');
      await getDataBoardComponent();
    } catch (error) {
      // createMessage.error('删除失败');
    }
  };

  const [registerHistoryDataModal, historyDataModalMethod] = useModal();

  const handleOpenHistroyDataModal = (record: DataSource[]) => {
    historyDataModalMethod.openModal(true, record);
  };

  onMounted(() => {
    getDataBoardComponent();
  });
</script>

<template>
  <section class="bg-light-50 flex flex-col overflow-hidden h-full w-full">
    <PageHeader title="水电表看板" @back="handleBack">
      <template #extra>
        <Authority value="api:yt:dataBoardDetail:post">
          <Button type="primary" @click="handleOpenCreatePanel">创建组件</Button>
        </Authority>
      </template>
      <div>
        <span class="mr-3 text-gray-400">已创建组件:</span>
        <span style="color: #409eff"> {{ dataBoardList.length }}个</span>
      </div>
    </PageHeader>
    <section class="flex-1">
      <Spin :spinning="loading">
        <GridLayout
          v-model:layout="dataBoardList"
          :col-num="GirdLayoutColNum"
          :row-height="30"
          :margin="[GridLayoutMargin, GridLayoutMargin]"
          :is-draggable="draggable"
          :is-resizable="resizable"
          :vertical-compact="true"
          :use-css-transforms="true"
          style="width: 100%"
        >
          <GridItem
            v-for="item in dataBoardList"
            :key="item.i"
            :static="item.static"
            :x="item.x"
            :y="item.y"
            :w="item.w"
            :h="item.h"
            :i="item.i"
            :style="{ display: 'flex', flexWrap: 'wrap' }"
            class="grid-item-layout"
            @resized="itemResized"
            @resize="itemResize"
            @moved="itemMoved"
            @container-resized="itemContainerResized"
          >
            <WidgetWrapper
              :key="item.i"
              :ref="(el: Element) => setComponentRef(el, item)"
              :data-source="item.record.dataSource"
            >
              <template #header>
                <!-- <div>header</div> -->
                <BaseWidgetHeader
                  :record="item.record.dataSource"
                  :id="item.record.id"
                  @action="handleMoreAction"
                >
                  <template #moreAction>
                    <Tooltip title="趋势">
                      <LineChartOutlined
                        class="cursor-pointer mx-1"
                        @click="handleOpenHistroyDataModal(item.record.dataSource)"
                      />
                    </Tooltip>
                  </template>
                </BaseWidgetHeader>
              </template>
              <template #controls="{ record, add, remove, update }">
                <component
                  :is="getComponent(item.record)"
                  :add="add"
                  :remove="remove"
                  :update="update"
                  :radio="record.radio || {}"
                  v-bind="getComponentConfig(item.record, record)"
                />
              </template>
            </WidgetWrapper>
          </GridItem>
        </GridLayout>
        <Empty v-if="!dataBoardList.length" />
      </Spin>
    </section>
    <DataBindModal @register="register" @submit="getDataBoardComponent" />
    <HistoryTrendModal @register="registerHistoryDataModal" />
  </section>
</template>

<style>
  .vue-grid-item:not(.vue-grid-placeholder) {
    background: #fcfcfc;
    border: 1px solid black;
  }
  .vue-grid-item .resizing {
    opacity: 0.9;
  }
  .vue-grid-item .static {
    background: #cce;
  }
  .vue-grid-item .text {
    font-size: 24px;
    text-align: center;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    height: 100%;
    width: 100%;
  }
  .vue-grid-item .no-drag {
    height: 100%;
    width: 100%;
  }
  .vue-grid-item .minMax {
    font-size: 12px;
  }
  .vue-grid-item .add {
    cursor: pointer;
  }
  .vue-draggable-handle {
    position: absolute;
    width: 20px;
    height: 20px;
    top: 0;
    left: 0;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><circle cx='5' cy='5' r='5' fill='#999999'/></svg>")
      no-repeat;
    background-position: bottom right;
    padding: 0 8px 8px 0;
    background-repeat: no-repeat;
    background-origin: content-box;
    box-sizing: border-box;
    cursor: pointer;
  }

  .container {
    display: grid;
    grid-template-columns: 3;
    grid-row: 3;
  }

  .grid-item-layout {
    overflow: hidden;
    border: 1px solid #eee !important;
    background-color: #fcfcfc !important;
  }
</style>