<template>
  <div class="event-item">
    <div class="event-item__left">
      <div class="event-type">
        类型
        <div class="event-type__content">
          <div
            v-for="item in eventTypeOptions"
            :key="item.value"
            @click="handleEventTypeChange(item.value)"
            :class="
              eventValue == item.value
                ? 'event-type__content__item active'
                : 'event-type__content__item'
            "
            >{{ item.label }}
          </div>
        </div>
      </div>
    </div>
    <n-divider vertical style="height: 500px" />
    <div class="event-item__right">
      <n-tabs
        v-model:value="movementTab"
        type="card"
        addable
        closable
        tab-style="min-width: 80px;"
        @close="handleClose"
        @add="handleAdd"
      >
        <n-tab-pane
          v-for="(panel, panelIndex) in eventData.movementList"
          :key="panel.movement"
          :name="'动作' + (Number(panelIndex) + 1) + '-' + getEventName(panel.movement)"
        >
          <div class="event-item__right__content">
            <div class="event-type">
              执行动作
              <div class="event-type__content">
                <div
                  v-for="item in movementTypeOptions"
                  :key="item.value"
                  @click="handleMovementTypeChange(item.value, panelIndex)"
                  :class="
                    panel.movement == item.value
                      ? 'event-type__content__item active'
                      : 'event-type__content__item'
                  "
                  >{{ item.label }}
                </div>
              </div>
            </div>
            <n-divider vertical style="height: 450px" />

            <div class="movement-type">
              <div class="movement-type__element" v-if="panel.movement != 'newaddress'">
                关联组件（可多选）
                <n-select
                  v-model:value="panel.elementId"
                  placeholder="请选择"
                  :options="elementSelectOptions"
                  multiple
                />
              </div>
              <div class="movement-type__element" v-if="panel.movement == 'map'">
                组件交互方法
                <n-select
                  v-model:value="panel.funName"
                  placeholder="请选择"
                  :options="funSelectOptions"
                />
              </div>
              <template v-if="panel.movement == 'newaddress'">
                <div class="movement-type__element">
                  跳转方式
                  <n-select
                    v-model:value="panel.skipType"
                    placeholder="请选择"
                    :options="skipTypeOptions"
                  />
                </div>
                <div class="movement-type__element">
                  是否在新页面打开
                  <n-switch v-model:value="panel.openNewPage" />
                </div>
                <!-- 外部链接 -->
                <div class="movement-type__element" v-if="panel.skipType == 'outLink'">
                  外部链接
                  <n-input v-model:value="panel.url" type="text" placeholder="请输入网址" />
                </div>
                <!-- 发布地址 -->
                <div class="movement-type__element" v-if="panel.skipType == 'publishLink'">
                  发布地址
                  <n-select
                    v-model:value="panel.url"
                    placeholder="请选择"
                    :options="publishOptions"
                  />
                </div>
                <!-- 路由 -->
                <div class="movement-type__element" v-if="panel.skipType == 'routeLink'">
                  路由地址
                  <n-select
                    v-model:value="panel.url"
                    placeholder="请选择"
                    :options="routeOptions"
                  />
                </div>
              </template>
            </div>
          </div>
        </n-tab-pane>
        <template #prefix> 动作 <n-icon :component="DesktopOutline" /></template>
      </n-tabs>
    </div>
  </div>
</template>
<script setup lang="ts">
  import { ref, defineEmits, onMounted } from 'vue';
  import { eventTypeOptions, movementTypeOptions } from '../../../../hooks/eventData.hook';
  import { goDialog } from '@/utils';
  import { DesktopOutline } from '@vicons/ionicons5';
  import { useTargetData } from '../../../../hooks/useTargetData.hook';
  import { getMenuList } from '@/api/sys/menu';
  import { previewPath } from '@/utils';
  import { projectListApi } from '@/api/path/project.api';
  import { funSelectOptions } from '@/hooks/ceshiFun.hook';

  const { chartEditStore } = useTargetData();
  const routeOptions = ref([]);
  const skipTypeOptions = ref([
    {
      label: '外部链接',
      value: 'outLink',
    },
    {
      label: '发布地址',
      value: 'publishLink',
    },
    {
      label: '路由',
      value: 'routeLink',
    },
  ]);
  const publishOptions = ref([]);
  const props = defineProps({
    eventData: {
      type: Object,
      default: () => ({
        type: 'click',
        movementList: [
          {
            movement: 'reveal',
            elementId: '',
          },
        ],
      }),
    },
  });
  const emits = defineEmits(['changeTab']);
  const eventValue = ref(props.eventData.type);
  const handleEventTypeChange = (value: string) => {
    eventValue.value = value;
    props.eventData.type = value;
    emits('changeTab', value);
  };
  const movementTab = ref();
  movementTab.value =
    '动作1-' +
    movementTypeOptions.find((item) => item.value === props.eventData.movementList[0].movement)
      ?.label;
  const handleAdd = () => {
    props.eventData.movementList.push({
      movement: 'reveal',
      elementId: '',
    });
  };
  const handleClose = (name: string) => {
    const index = name.match(/动作(\S*)-/)[1];
    if (props.eventData.movementList.length > 1) {
      goDialog({
        message: '是否删除此动作?',
        onPositiveCallback: () => {
          props.eventData.movementList.splice(index - 1, 1);
          if (index > 1) {
            const movement = props.eventData.movementList[index - 2].movement;
            movementTab.value = '动作' + (index - 1) + '-' + getEventName(movement);
          } else {
            const movement = props.eventData.movementList[0].movement;
            movementTab.value = '动作1' + '-' + getEventName(movement);
          }
        },
      });
    } else {
      window['$message'].error('至少保留一个动作');
    }
  };
  const handleMovementTypeChange = (value: string, index: number) => {
    props.eventData.movementList[index].movement = value;
    movementTab.value = '动作' + (index + 1) + '-' + getEventName(value);
  };
  const getEventName = (type: string) => {
    return movementTypeOptions.find((item) => item.value === type)?.label;
  };
  // 组件
  const elementSelectOptions = ref(
    chartEditStore.getComponentList.map((item) => {
      return {
        label: item.isGroup ? '分组-' + item.chartConfig.title : '组件-' + item.chartConfig.title,
        value: item.id,
      };
    }),
  );
  const treeIterator = (tree) => {
    tree.forEach((node) => {
      var obj = {};
      obj.label = node.item.name;
      obj.value = node.item.url;
      if (node.children.length > 0) {
        node.children && treeIterator(node.children);
      } else {
        routeOptions.value.push(obj);
      }
    });
  };
  // 获取路由列表
  const getRouteList = async () => {
    const data = await getMenuList();
    treeIterator(data);
    await data;
  };
  // 获取已发布页面列表
  const getPublishedPageList = async () => {
    const data = await projectListApi({
      state: 1,
      page: 1,
      limit: 1000,
    });
    publishOptions.value = data.items.map((item) => {
      return {
        label: item.projectName,
        value: previewPath(item.id),
      };
    });
  };
  onMounted(() => {
    routeOptions.value = [];
    getRouteList();
    getPublishedPageList();
  });
</script>
<style lang="scss" scoped>
  .event-item {
    display: flex;
    .event-item__left {
      width: 30%;
    }
    .event-item__right {
      width: 60%;
    }
  }
  .event-type {
    .event-type__content {
      // background-color: #f5f5f5;
      padding: 10px 20px;
      border-radius: 6px;
      .event-type__content__item {
        padding: 4px 10px;
        cursor: pointer;
        &.active {
          background: rgba(24, 160, 88, 0.1);
          color: #18a058;
          border-left: 2px solid #18a058;
        }
      }
    }
  }
  .event-item__right__content {
    display: flex;
    .event-type {
      width: 30%;
    }
    .movement-type {
      width: 60%;
    }
  }
  .movement-type__element {
    margin-top: 10px;
  }
</style>
