<template>
  <n-collapse-item title="组件交互事件配置" name="2">
    <template #header-extra>
      <n-button type="primary" tertiary size="small" @click.stop="addEvent">
        <template #icon>
          <n-icon>
            <pencil-icon />
          </n-icon>
        </template>
        编辑
      </n-button>
    </template>
    <!-- 无数据 -->
    <div v-if="interactConfigItem.length == 0" class="no-data go-flex-center">
      <img :src="noData" alt="暂无数据" />
      <n-text :depth="3">暂无内容</n-text>
    </div>

    <n-card class="n-card-shallow" size="small">
      <template v-for="(item, cardIndex) in interactConfigItem" :key="cardIndex">
        <n-divider style="margin: 10px 0" />
        <div class="go-flex-between">
          <n-tag :bordered="false" type="primary">
            {{ getEventName(item.type) }}
          </n-tag>
          <n-button type="tertiary" size="small" @click="showEvent(item, cardIndex)">
            显示
          </n-button>
        </div>
      </template>
    </n-card>
  </n-collapse-item>

  <!-- 弹窗 -->
  <n-modal class="go-chart-data-monaco-editor" v-model:show="showModal" :mask-closable="false">
    <n-card
      :bordered="false"
      role="dialog"
      size="small"
      aria-modal="true"
      style="width: 1200px; height: 700px"
    >
      <template #header>
        <n-space>
          <n-text>交互编辑器</n-text>
        </n-space>
      </template>
      <template #header-extra> </template>
      <n-layout has-sider sider-placement="right">
        <n-layout style="height: 580px; padding-right: 20px">
          <n-tabs
            v-model:value="eventTab"
            type="card"
            addable
            closable
            tab-style="min-width: 80px;"
            @close="handleClose"
            @add="handleAdd"
          >
            <n-tab-pane
              v-for="(panel, panelIndex) in interactConfigItem"
              :key="panel.type"
              :name="'交互' + (Number(panelIndex) + 1) + '-' + getEventName(panel.type)"
            >
              <EventItem :eventData="panel" @changeTab="changeTab" />
            </n-tab-pane>
            <template #prefix> 事件 <n-icon :component="HandLeftOutline" /></template>
          </n-tabs>
        </n-layout>
      </n-layout>
      <template #action>
        <n-space justify="space-between">
          <div class="go-flex-items-center">
            <n-tag :bordered="false" type="primary">
              <template #icon>
                <n-icon :component="DocumentTextIcon" />
              </template>
              说明
            </n-tag>
            <n-text class="go-ml-2" depth="2">请在预览页面查看结果</n-text>
          </div>
          <n-space>
            <n-button size="medium" @click="closeEvents">取消</n-button>
            <n-button size="medium" type="primary" @click="saveEvents">保存</n-button>
          </n-space>
        </n-space>
      </template>
    </n-card>
  </n-modal>
</template>

<script setup lang="ts">
  import { ref, watch } from 'vue';
  import { useTargetData } from '../../../hooks/useTargetData.hook';
  import { icon } from '@/plugins';
  import noData from '@/assets/images/canvas/noData.png';
  import { goDialog } from '@/utils';
  import { HandLeftOutline } from '@vicons/ionicons5';
  import { loadAsyncComponent } from '@/utils';
  import { eventTypeOptions } from '../../../hooks/eventData.hook';

  const EventItem = loadAsyncComponent(() => import('./components/EventItem.vue'));
  const { targetData, chartEditStore } = useTargetData();
  const { DocumentTextIcon, CloseIcon, PencilIcon } = icon.ionicons5;
  const interactConfigItem: any = ref([]);
  if (Object.keys(targetData.value.events.interactConfigEvents).length > 0) {
    interactConfigItem.value = targetData.value.events.interactConfigEvents;
  }
  const eventTab = ref();
  const getEventName = (type: string) => {
    return eventTypeOptions.find((item) => item.value === type)?.label;
  };
  // 修改交互类型时，同步tab值
  const changeTab = (type: string) => {
    const index = eventTab.value.match(/交互(\S*)-/)[1];
    eventTab.value =
      '交互' + index + '-' + eventTypeOptions.find((item) => item.value === type)?.label;
  };
  // 受控弹窗
  const showModal = ref(false);
  // 编辑动作
  const changIndex = ref();

  // 关闭事件
  const closeEvents = () => {
    if (Object.keys(targetData.value.events.interactConfigEvents).length <= 0) {
      interactConfigItem.value = [];
    }
    showModal.value = false;
  };

  // 新增编辑动作
  const saveEvents = () => {
    targetData.value.events.interactConfigEvents = interactConfigItem.value;
    closeEvents();
  };

  watch(
    () => targetData.value,
    (newData) => {
      if (newData) {
        if (Object.keys(targetData.value.events.interactConfigEvents).length > 0) {
          interactConfigItem.value = targetData.value.events.interactConfigEvents;
        } else {
          interactConfigItem.value = [];
        }
      }
    },
  );
  const addEvent = () => {
    showModal.value = true;
    if (interactConfigItem.value.length == 0) {
      interactConfigItem.value = [
        {
          type: 'click',
          movementList: [
            {
              movement: 'reveal',
              elementId: '',
            },
          ],
        },
      ];
    }
    changIndex.value = null;
    eventTab.value =
      '交互1-' +
      eventTypeOptions.find((item) => item.value === interactConfigItem.value[0].type)?.label;
  };
  const showEvent = (item: any, index: number) => {
    showModal.value = true;
    changIndex.value = index;
    eventTab.value = '交互' + (index + 1) + '-' + getEventName(item.type);
  };
  const handleAdd = () => {
    eventTab.value = '交互' + (interactConfigItem.value.length + 1) + '-' + getEventName('click');
    interactConfigItem.value.push({
      type: 'click',
      movementList: [
        {
          movement: 'reveal',
          elementId: '',
        },
      ],
    });
  };
  const handleClose = (name: string) => {
    const index = name.match(/交互(\S*)-/)[1];
    goDialog({
      message: '是否删除此交互?',
      onPositiveCallback: () => {
        eventTab.value =
          '交互' +
          (interactConfigItem.value.length - 1) +
          '-' +
          getEventName(interactConfigItem.value[interactConfigItem.value.length - 1].type);
        interactConfigItem.value.splice(index - 1, 1);
        console.log(eventTab.value);
      },
    });
  };
</script>

<style lang="scss" scoped>
  @import '../index.scss';
  .go-flex-between {
    display: flex;
    align-content: center;
    justify-content: space-between;
  }
</style>
